/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

hr {
	color: #9a9a9a;
	background: #9a9a9a;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
	width:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-transform:uppercase;
    /*color: #c3c3c3;*/
}

.main {
    position:fixed;
    width:100%;
    height:82% !important;
    min-height: 82% !important;
    top:18% !important;
    /*background: url(./../img/background.png) no-repeat;
    background-position: center;
    background-size: contain;*/
}

/*.button-block {
    position: fixed;
    top: 0;
    left: 0;
    z-index:999;
    width: 100%;
    height:100%;
    background: #ffffff;
}*/

@font-face {
    font-family: "Kurale";
    src: url("kurale.ttf");   /* Give relative path to your css file. */
}

@font-face {
    font-family: "Lumious Marker";
    src: url("lumios-marker.otf");
}

@font-face {
    font-family: "LJK Cinzel";
    src: url("ljk_cinzel-regular9.ttf");
}

#logo {
    height: 75%;
    width: 95%;
    margin: 2% auto 0 auto;
}

#logo table {
    margin-left: auto;
    margin-right: auto;
}

#logo img.logoImage {
  width: 100%;
  height: auto;
}

#logo tr:nth-child(1) {
  display: flex;
  align-items: center;
}

#logo td {
  flex: 1 1 auto;
}

#logoPoint {
    color: #f9be9e;
    font-size: 9.1vh;
    padding-top: 0.6vh;
    padding-left: 3%;
    font-family: kurale;
    font-weight: bold;
}

#back {
    z-index: 998;
    position: fixed;
    background: #fdbb8f;
    width: 100%;
    height: 82%;
    top: 18%;
}

#top {
    height: 18%;
    width: 100%;
    font-size: 15px;
    background: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #000000;
    z-index: 997;
	border-bottom: 1px solid #9a9a9a;
}

#top p#username {
	text-align: right;
    padding: 0;
    margin: 0;
    color: #9b9b9b;
    font-size: 18px;
    margin-right: 5%;
}

#indicatorTable {
    padding: 0;
    position: absolute;
    	right: 5px;
    margin: 0;
    margin-right: 0px;
    margin-left: auto;
    color: #9b9b9b;
    font-size: 12px;
}

.led-red {
    width: 8px;
    height: 8px;
    background-color: #dc143c;
    border-radius: 50%;
}

.led-green {
    width: 8px;
    height: 8px;
    background-color: #b9d30e;
    border-radius: 50%;
}

#top p#version {
    position: absolute;
	right: 5px;
    padding: 0;
    margin: 0;
    color: #9b9b9b;
    font-size: 12px;
}

.header {
    font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid #9a9a9a;
	padding: 1% 0;
}

.app {
	margin:0 0 0 0;            /* position in the center of the screen */
    width:100%;
	height:100%;
    /*text-align: center;*/
}

.list-block {
	
}

.list-block > div,
.list-block > c-router-link {
    width: 100%;
    border-bottom: 1px solid #9a9a9a;
}

.list-block > div > div,
.list-block > c-router-link > div {
	font-size: 16px;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

.list-block > div > div:nth-child(1),
.list-block > c-router-link > div:nth-child(1) {
	width: 90px;
  height: 60px;
}

.user-info {
    border: 1px solid #c2d521;
    display: table;
    width: 90%;
    margin: 10px auto;
}

.user-info > div {
    display: table-row;
    width: 100%;
    padding: 15px 0px;
    font-size: 16px;
}

.user-info > div > div {
    display: table-cell;
    padding: 5px 15px;
    border: 1px solid #c2d521;
	color: #000000;
	width: 50%;
	height: 50px;
	vertical-align: middle;
}

/*.user-info > div > div:nth-child(1) {
    width: 70%;
    text-align: left;
}*/

.sales-block {
	width: 100%;
	height: 83%;
	overflow-y: auto;
	overflow-x: hidden;
}

.sales-block > div {
    width: 100%;
	border-bottom: 1px solid #9a9a9a;
}

.sales-block > div > * {
  display: block;
	padding: 5px 15px;
	color: #818181;
	font-size: 15px;
}

.sales-block > div > span { 
	text-align: left;
}

.sales-block > div h3 {
    margin: 5px 0px;
}

.sales-block > div > p { 
	text-align: right;
}

.button-block {
	display: table;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}

.button-block > div {
    display: table-row;
    width: 100%;
}

.button-block > div > div, [type="button"] {
	display: table-cell;
    padding: 5px 15px;
    border: 1px solid #ffffff;
	vertical-align: middle;
	height: 40px;
	background: #bad600;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

.button-block > div > div:nth-child(odd) {
	width: 50%;
}

.button {
    display: table-cell;
    padding: 5px 15px;
    border: 1px solid #ffffff;
    vertical-align: middle;
    height: 40px;
    background: #bad600;
    color: #ffffff;
    font-weight: bold;
}
.popup {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

.popup .popup-text {
    padding: 20px 1%;
    font-size: 16px;
    height: 50%;
    overflow-y: auto;
    margin: auto;
}

.popup .popup-text * {
    max-width: 100%;
}

.popup .button-block > div > div {
    text-align: center;
}

.simple-table {
	width: 100%;
}

.simple-table-container {
    overflow-y: auto;
    margin: 0;

}

.simple-table {
	width: 100%;
}

.simple-table tbody {

}

.simple-table th, .simple-table td {
	padding: 0.5vw;
	border: 1px solid #6b6b6b;
	text-align: center;
}

.simple-table th {
	color: #e79e87;	
} 

.simple-table td {
	color: #3b3b3b;
  position: relative;
}

.simple-table tr.qNRead td {
    font-weight: bold;
    background: #FFFACD;
    height: 38px;
}

.simple-table tr.tNExec td {
    font-weight: bold;
    background: #FFFACD;
}

.simple-table tr.qRead td {
    height: 38px;
}

.simple-table tr.sectionsNotReading td {
    font-weight: bold;
    font-size: 16px;
    background: #FFFACD;
}

.simple-table tr.sections td {
    font-size: 16px;
}

.simple-table input {
    border:none;
    background: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

#qAnswers tr td {
    padding: 2vw 1vw;
    font-size: 25px;
    word-break: break-word;
    text-align: center;
}
.list-block-2 > div,
.list-block-2 > c-router-link,
.list-block-2 > c-blogger-link-button {
    box-sizing: content-box;
    font-size: 16px;
    padding: 10px;
    border: 2px solid #c2d521;
    width: 90% !important;
    margin: 10px auto;
    text-align: center !important;
}
.list-block-2 > .list-block-warning {
    border-color: #f00;
}
#item .simple-table td, #item .simple-table input {
    font-size: 16px;
}
.unread-item, .unread-local-item {
    border: 2px solid #f00!important;
}
#messages .simple-table td, #messages .simple-table input {
    font-size: 16px;
}

#item .simple-table #item-name {
    font-size: 18px;
    font-weight: bold;
    color: #c2d521;
}

#messages-table-block {
    padding-bottom: 100px;
}
/* Фильтр уведомлений --> */
#messages-filter-block {
    padding: 4%;
}

#messages-filter-input {
    padding: 4px;
    width: 100%;
    height: 40px;
    border: 1px solid #c2d521;
    box-sizing: border-box;
    font-size: 18px;
}
/* <-- Фильтр уведомлений */

/* Выделить цветом статусы апелляций --> */
.background-pink, .appeal-rejected {
  background-color: lightpink;  
}
.background-yellow, .appeal-expect {
  background-color: lightyellow;  
}
.background-green, .appeal-confirmed {
  background-color: lightgreen;  
}
/* <-- Выделить цветом статусы апелляций */

#cBodyTasks .simple-table th {
    font-size: 13px;
    color: #000000;
}
#cBodyTasks .simple-table td {
    min-width: 28px;
    font-size: 12px;
}

.CheckboxBlock {
    height: 40px;
    margin-top: 20px;
}
.psCheckBox {
    transform:scale(1.3);
    opacity:0.9;
    cursor:pointer;
    margin: 0 3% 6% 3%;
}
.usualCheckBox {
    transform:scale(1.1);
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
[type="checkbox"]:not(.psCheckBox):not(.usualCheckBox) {
	margin: 2vw;
	height: 2vw;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
[type="checkbox"]:not(.psCheckBox):not(.usualCheckBox) + label {
	cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
[type="checkbox"]:not(checked):not(.psCheckBox):not(.usualCheckBox) {
	position: absolute;
	/*opacity: 0;*/
	display: none;
}
[type="checkbox"]:checked:not(.psCheckBox):not(.usualCheckBox) {
	/*opacity: 0;*/
	display: none;
}

[type="checkbox"]:not(checked):not(.psCheckBox):not(.usualCheckBox) + label {
	position: relative; /* будем позиционировать псевдочекбокс относительно label */
	padding: 0px; /* оставляем слева от label место под псевдочекбокс */
	font-size: 18px;
	float: left;
	width: 75vw;
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
[type="checkbox"]:not(checked):not(.psCheckBox):not(.usualCheckBox) + label:before {
	content: '';
	position: absolute;
	top: -0.1vw;
	left: 75.5vw;
	width: 16vw;
	height: 8vw;
	border-radius: 15.8vw;
	background: #c3c3c3;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
[type="checkbox"]:not(checked):not(.psCheckBox):not(.usualCheckBox) + label:after {
	content: '';
	position: absolute;
	top: 0px;
	left: 75.6vw;
	width: 7.9vw;
	height: 7.9vw;
	border-radius: 15.8vw;
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}

[type="checkbox"]:checked:not(.psCheckBox):not(.usualCheckBox) + label {

}

/* Меняем фон чекбокса, когда он включен. */
[type="checkbox"]:checked:not(.psCheckBox):not(.usualCheckBox) + label:before {
    background: #20B2AA;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
[type="checkbox"]:checked:not(.psCheckBox):not(.usualCheckBox) + label:after {
	left: 84vw;
}

@media screen and (max-height: 500px) {
     #top {
        display: none !important;
     }

     .main {
         height:100% !important;
         top:0 !important;
     }

     #alertwindow, .popupwindow {
        top:0 !important;
     }

     /*#a-titlealert {
        display: none;
     }*/
}

#message {
    position: fixed;
    z-index: 999;
    top:0;
    left:0;
    width: 98%;
    padding: 15px 1%;
    background: #fdbb8f;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#qContent, #qAnswers, #qMatContent, .popup * {
    text-transform: none !important;
    text-align: auto !important;
}

#qContent *, #qAnswers *, #qMatContent * {
    max-width: 100% !important;
}

#qContent table *, #qAnswers table *, #qMatContent table * {
    font-size: 3vw !important;
}

.header, h1, h2, h3, h4 {
    text-align: center;
}



/*===Лайки, дизлайки*/
[id='toggle-like'],
[id='toggle-dislike'] {
  position: absolute;
  left: -100vw;
}
[id='toggle-like']:checked + label,
[id='toggle-dislike']:checked + label {
  color: #e2264d;
  -webkit-filter: none;
          filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id='toggle-like']:checked + label:before, [id='toggle-like']:checked + label:after,
[id='toggle-dislike']:checked + label:before, [id='toggle-dislike']:checked + label:after {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
[id='toggle-like']:checked + label:before,
[id='toggle-dislike']:checked + label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
          animation-name: bubble;
}
[id='toggle-like']:checked + label:after,
[id='toggle-dislike']:checked + label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
          animation-name: sparkles;
}
[id='toggle-like']:focus + label,
[id='toggle-dislike']:focus + label {
  text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;
}

[for='toggle-like'],
[for='toggle-dislike'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
[for='toggle-like']:before, [for='toggle-like']:after,
[for='toggle-dislike']:before, [for='toggle-dislike']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}
[for='toggle-like']:before,
[for='toggle-dislike']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  -webkit-transform: scale(0);
          transform: scale(0);
}
[for='toggle-like']:after,
[for='toggle-dislike']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

@-webkit-keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}

@keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}
@-webkit-keyframes bubble {
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@keyframes bubble {
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@-webkit-keyframes sparkles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}
@keyframes sparkles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}

/*hr с текстом*/
.line {
    font-weight: bold;
    text-align: center;
    position: relative;
}
.line span {
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    padding: 0px 6px;
}
.line:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #9a9a9a;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    z-index: 0;
}

.divButton
{
  padding:5px 15px !important;
  border:1px solid #ffffff !important;
  height: 48px !important;
  width:100%;
  font-size:12px !important;
}

.divInput
{
  border: 1px solid #c2d521;
  width: 95%;
  margin: 0 2% 2% 2%;
  height: 28px;
  font-size: 17px;
  text-align:center;
}

/*Синдерелла*/
#cinderellaTask img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

#forceMajor select {
border: 1px solid #c2d521;
padding: 0px;
background: 5px;
text-align: center;
}

#cinderellaTask button, #cAssessment button, #psList button, #newAskQuestion button, #slImages button {
  background-color: #fdbb8f;
  color: white;
  border: none;
  text-align: center;
  font-weight: bold;
}

/*Верификация пароля*/
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

/*Загрузка изображений*/
.image-area {
  position: relative;
  width: 15%;
  background: #333;
  margin: auto;
}
.image-area img{
  width: 100%;
  height: auto;
}
.remove-image {
display: none;
position: absolute;
top: -10px;
right: -10px;
border-radius: 10em;
padding: 2px 4px 2px;
text-decoration: none;
font: 700 13px/12px sans-serif;
background: #555;
border: 3px solid #fff;
color: #FFF;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.remove-image:hover {
 background: #E54E4E;
  padding: 3px 7px 5px;
  top: -11px;
right: -11px;
}
.remove-image:active {
 background: #E54E4E;
  top: -10px;
right: -11px;
}

/*Спиннер (между долгозагружающимися страницами)*/
.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #f9be9e;
  border-bottom: 8px solid #f9be9e;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*Селектбоксы в заданиях*/
#cinderellaTask select, #cAssessment select {
border: 1px solid #c2d521;
font-size: 17px;
width: 98%;
padding: 3px;
background: 2px;
text-align: center;
}
/*Селектбоксы и инпуты в заданиях*/
#oneCheck input, #oneCheck select, #confirmPhone input, #confirmPhone button, #replaceShelfBarcode input, #replaceShelfBarcode button, #barcodestemp input, #barcodestemp button, #new-user input, #new-user select, #codeEntry input, #writeOffAddScreen select, #writeOffAddScreen input, #writeOffScreen select, #writeOffScreen input, #cAssessmentBodyAfterTable input, #cBodyTasksAssessment input  {
border: 1px solid #c2d521;
font-size: 16px;
width: 90%;
padding: 6px;
background: 3px;
text-align: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
text-align-last:center;
}
.checkBody, .phoneBody {
font-size: 16px;
text-align: center;
}
.checkBody p, .phoneBody p {
margin-top: 8px; /* Отступ сверху */
margin-bottom: 0px; /* Отступ снизу */
}

/*Сроки годности*/
.shelfLifeBody {
font-size: 13px;
text-align: center;
}
.shelfLifeBody p{
margin-top: 8px;
margin-bottom: 0px;
}

.shelfLifeBody input:not(.usualCheckBox), .shelfLifeBody select, .shelfLifeBody button{
margin-bottom: 8px !important;
width: 90% !important;
background: 3px !important;
height: 28px !important;
text-align: center !important;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
text-align-last:center !important;
}

.shelfLifeBody input, .shelfLifeBody select
{
  border: 1px solid #c2d521 !important;
  padding: 5px !important;
}
.shelfLifeBody button
{
  padding: 6px !important;
  background-color:#808080 !important;
}

.inventMark {
font-size: 13px;
text-align: center;
}
.inventMark p{
margin-top: 8px;
margin-bottom: 0px;
}

.inventMark input, .inventMark select, .inventMark button{
margin-bottom: 8px !important;
width: 90% !important;
background: 3px !important;
height: 28px !important;
text-align: center !important;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
text-align-last:center !important;
}

.inventMark input, .inventMark select
{
  border: 1px solid #c2d521 !important;
  padding: 5px !important;
}
.inventMark button
{
  padding: 6px !important;
  background-color:#808080 !important;
}

#oneCheck button, #confirmPhone button, #replaceShelfBarcode button, #barcodestemp button, #writeOffScreen button, #woInsertLine, #woCloseTask{
  background-color: #fdbb8f;
  color: white;
  border: none;
  text-align: center;
  font-weight: bold;
  padding:5px 15px;
  border:1px solid #ffffff;
  height: 48px;
  width:100%;
  font-size:12px;
}



#onYourNumberSendCode
{
  font-weight: bold;
}

/*Рейтинг статей*/
.rating-area {
	overflow: hidden;
	width: 210px;
	margin: 0 auto;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	cursor: pointer;
	font-size: 50px;
	line-height: 50px;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}

/*Всплывающие подсказки*/
.btn {
  padding: 20px 50px;
  display: inline-block;
  background: #EF233C;
  color: white;
  text-decoration: none;
  transition: 0.35s ease-in-out;
  font-weight: 700;
}
.btn:hover {
  background: #dc1029;
}

.overlay {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
  font-size: 13px;
  z-index: 1008;
}
.overlay.open {
  opacity: 1;
  pointer-events: inherit;
}
.overlay .modal {
  background: white;
  text-align: center;
  padding: 18px;
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
  width: 80%;
}
.overlay .modal img {
  max-width: 75%;
}
.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
}
.overlay .modal.open .content {
  transform: translate(0, 0px);
  opacity: 1;
}
.overlay .modal .content {
  transform: translate(0, -10px);
  opacity: 0;
  transition: 0.35s ease-in-out;
}
.overlay .modal .title {
  margin-top: 0;
}

/*База знаний*/
.ui-btn-left, .ui-btn-right {
    background: #fac09d !important;
    color: #000000 !important;
    width: 35% !important;
}

a {
    background: #fac09d !important;
}

#pdc-cont p {
    text-align: justify;
    word-wrap: break-word;
}

#pdc-cont img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

#pdc-cont table tr td {
    padding: 7px;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

.fade-in {
  animation: open 0.3s ease; 
}

/*Табы в описании товара*/
details {
  position: relative;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: "";
  position: absolute;
  left: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=")
    no-repeat 50% 50% / 1em 1em;
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.1s linear;
  background-position:initial;
}

details p {
  padding-left: 10px;
  padding-right: 10px;
}

summary {
  padding: 10px;
  padding-left: 25px;
  border-bottom: 1px solid #ccc;
  font-weight: bold
}

summary:hover {
  color: #007bff;
}

summary:focus {
  outline: none;
}

details[open] > summary:before {
  transform: rotate(90deg);
}

details[open] > summary {
  color: #007bff;
}

details[open] > summary ~ * {
  animation: open 1s ease;
}

@keyframes open {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*Range при оценке товара*/

 @font-face {
   font-family: "Dosis";
   src: url("dosis.ttf"); 
 }


 .value, .valueAsk {
   padding-top: 20px;
   font-family: "Dosis", Helvetica, Arial, sans-serif;
   color: #c2d521;
   text-shadow: white 1px 1px 1px;
   border-bottom: 4px dashed #bdc3c7;
   text-align: center;
   font-weight: bold;
   font-size: 8em;
   width: 300px;
   height: 100px;
   line-height: 60px;
   margin: 0px auto;
   letter-spacing: -.07em;
   text-shadow: white 2px 2px 2px;
 }
 input[type="range"] {
   display: block;
   -webkit-appearance: none;
   background-color: #bdc3c7;
   width: 300px;
   height: 5px;
   border-radius: 5px;
   margin: 0 auto;
   outline: 0;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: #fdbb8f;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid white;
   cursor: pointer;
   transition: .3s ease-in-out;
 }​
input[type="range"]::-webkit-slider-thumb:hover {
   background-color: white;
   border: 2px solid #fdbb8f;
}
input[type="range"]::-webkit-slider-thumb:active {
   transform: scale(1.6);
}
/*Анкетирование товаров*/
#ask-content
{
    align-items: center;
    text-align: center;
    display: block;
    margin: 0 8px;
}
#ask-content textarea
{
    width: 100%;
    box-sizing: border-box;
}

#ask-content input[type="text"]
{
    width: 100%;
    box-sizing: border-box;
}

#ask-content fieldset {
  margin: 8px;
  width:auto;
}


.inputGroup {
  clear: both;
}
.inputGroup label {
	width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

/* hide input */
.inputGroup input[type="radio"]:empty {
	margin-left: -9999px;
}
/* style label */
.inputGroup input[type="radio"]:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  text-align:left;
}

.inputGroup input[type="radio"]:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

/* toggle hover
.inputGroup input[type="radio"]:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #ffffff;
}

.inputGroup input[type="radio"]:hover:not(:checked) ~ label {
	color: #000000;
  font-weight: bold;
}
*/
/* toggle on */
.inputGroup input[type="radio"]:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #ffffff;
	background-color: #bad600;
}

.inputGroup input[type="radio"]:checked ~ label {
	color: #000000;
  font-weight: bold;
}

/* radio focus */
.inputGroup input[type="radio"]:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}

/*Рейтинг*/
.ratings {
    position: relative;
    display: inline-block;
    color: #b1b1b1;
    overflow: hidden;
    text-align:center;
}
.full-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #fde16d;
}
.empty-stars:before, .full-stars:before {
    content:"\2605\2605\2605\2605\2605";
    font-size: 29px;
}
.empty-stars:before {
    -webkit-text-stroke: 1px #848484;
}
.full-stars:before {
    -webkit-text-stroke: 1px orange;
}


/*Актуальность*/
#progress {
 margin: 10px;
 width: 160px;
 position: relative;
 background-color: #c9c9c9;
 text-align: initial;
}

#percent {
 position: absolute;
 text-align: center;
 top: 3.5px;
 width: inherit;
}

#bar {
 height: 20px;
 background-color: #bad600;
}


/*Лайки-дизлайки товаров*/

[id='good-like'],
[id='good-dislike'] {
  position: absolute;
  left: -100vw;
}
[id='good-like']:checked + label,
[id='good-dislike']:checked + label {
  color: #e2264d;
  -webkit-filter: none;
          filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id='good-like']:checked + label:before, [id='good-like']:checked + label:after,
[id='good-dislike']:checked + label:before, [id='good-dislike']:checked + label:after {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
[id='good-like']:checked + label:before,
[id='good-dislike']:checked + label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
          animation-name: bubble;
}
[id='good-like']:checked + label:after,
[id='good-dislike']:checked + label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
          animation-name: sparkles;
}
[id='good-like']:focus + label,
[id='good-dislike']:focus + label {
  text-shadow: 0 0 3px white,  0 1px 1px white, 0 -1px 1px white,  1px 0 1px white, -1px 0 1px white;
}

[for='good-like'],
[for='good-dislike'] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
[for='good-like']:before, [for='good-like']:after,
[for='good-dislike']:before, [for='good-dislike']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}
[for='good-like']:before,
[for='good-dislike']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  -webkit-transform: scale(0);
          transform: scale(0);
}
[for='good-like']:after,
[for='good-dislike']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}
/*Новинка*/
.novelty
{
	text-align:center;
	background-color:#bad600;
	padding:3.5px;
	font-size:13px;
	color:white;
	margin-top:2.8px;
}
/*NestedSet (Left, Right) категории*/
.categoryLeftRight, .categoryRecId
{
  background:#bad600;
  color:#ffffff !important;
  font-weight:bold;
  min-width:50px
}

details summary::-webkit-details-marker {
  display:none;
}
details > summary {
  list-style: none;
}

.mestype-item {
    margin: 10px;
    font-size: 20px;
}

#askQuestionHistoryBody {
    margin: 3% 3% 60px 3%;
    font-size: 16px;
}

#askQuestionHistoryBody p{
    margin: 0;
    margin-top: 10px;
    padding: 0;
    font-weight: bold;
}

#askQuestionHistoryBody .question-body {
    display: none;
}

#askQuestionHistoryBody .question-body.question-body-current {
    display: block;
}

#askQuestionHistoryBody .question-body img {
    width: 100%;
}

.askQuestionAnswer
{
    max-height:60px;
    overflow:hidden;
}

.askQuestionAnswer p
{
    margin: 0;
    padding: 0;
}

.askQuestionInstruction {
    margin: 3% 3% 0 3%;
    font-size: 15px;
    text-align: center;
}

.askQuestionInstruction p{
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.cAdditionalAssessment, .cAdditionalAssessmentsActions{
	margin-top: 10px;
}

.cAdditionalAssessmentsActions{
    margin-bottom: 10px;
}

.v-split__item {
  margin: 10px 4px;
}



/* KDA bootstrap classes */
.font-weight-bold {
  font-weight: 700 !important;  
}
.text-center {
  text-align: center !important;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/*Таблица для ЗП, должна отличаться от всех фирменных стилей приложения*/
@font-face {
    font-family: "Montserrat";
    src: url("montserrat.ttf");
}
.salaryTable {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse;
}
.salaryTable th {
	font-weight: bold;
	padding: 5px;
	background: #efefef;
	border: 1px solid #dddddd;
}
.salaryTable td {
	border: 1px solid #dddddd;
	padding: 5px;
}

.salaryPopup {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

.salaryPopup .salaryPopupText {
    font-size: 16px;
    font-family: "Montserrat";
    text-transform: none;
    height: 50%;
    overflow-y: auto;
    margin: auto;
}

.salaryPopup .salaryPopupText * {
    max-width: 100%;
}

.button-block-salary {
	display: table;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}

.button-block-salary > div {
    display: table-row;
    width: 100%;
}

.button-block-salary > div > div, [type="button"] {
	display: table-cell;
    padding: 5px 15px;
    border: 1px solid #ffffff;
	vertical-align: middle;
	height: 40px;
	background: #00d65f;
	color: #ffffff;
	text-transform: none;
	font-size: 16px;
    font-family: "Montserrat";
	text-align: center;
}

.button-block-salary > div > div:nth-child(odd) {
	width: 50%;
}

.salaryPopup .button-block-salary > div > div {
    text-align: center;
}
/*Таблица для ЗП, должна отличаться от всех фирменных стилей приложения*/

#cBodyTasks c-photos {
  margin-bottom: 16px;
}