/*
этот файл сделан Виталием. Все css по вебформе находятся только здесь

первые 3 - обнуление старых стилей, т.к. мешали верстке

*/
section {
  margin-left: 10px;
}
#content {
  margin-right: 0;
  background: #f4f4f4;
}
body #extra {
  float: none;
  width: 0;
  background-image: none;
  margin-bottom: 0;
}
body {
  background-color: #f4f4f4;
}
/* верхняя часть вебформы, где дата пикер, вып список и радио кнопки
margin-left: = основной отступ слева

*/
.incative
{
	border-color: #ccc !important;
}

.tableHead {
  margin-left: 60px;
  min-width: 1000px;
}
#content .tableHead p.button {
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-indent: 0px;
  position: relative;
  left: -53px;
}
#content .tableHead .inputDate .button {
  left: 20px;
      margin: 5px 0 0 0;
}
.tableHead .button span {
  background: #fff;
  width: 20px;
  display: inline-block;
  height: 12px;
  border: 1px solid rgb(178,68,21);
  border-radius: 5px;
  position: relative;

  cursor: pointer;
}
.tableHead .inputWorker .button {
  top: -5px;
}
.tableHead .iconButtonR i {
  background: url(img/chosen-sprite.png) -2px -15px no-repeat;
  background-size: 35px auto;
  width: 8px;
  height: 8px;
  display: inline-block;
  position: relative;
      top: -3px;
  left: 7px;
  pointer-events: none;
}
.tableHead .iconButtonL i {
  background: url(img/chosen-sprite.png) -11px -15px no-repeat;
  background-size: 35px auto;
  width: 8px;
  height: 8px;
  display: inline-block;
  position: relative;
     top: -3px;
  left: 6px;
  pointer-events: none;
}
.worker .note, .clinick .note {
	margin:10px;
}
.tableHead .clinick span.note,
.tableHead .datePick span.note,

.tableHead .worker span.note {
 font-size: 12px;
    vertical-align: top;
    position: relative;
    top: 4px;
    width: 80px;
    display: inline-block;
    text-align: right;
    margin-right: 5px;
}
/*кнопки, кот открывают датапикер и вып список*/
.tableHead .arrow {
  background: url(img/chosen-sprite.png) 0px -4px no-repeat;
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  pointer-events: none;
}
.datePick, .clinick , .worker {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  width:290px;
  height:55px;
}
.worker {
  width: 290px;
  
}
.datePick .inputDate {
  display: inline-block;
  position:relative;
      margin-top: 1px;
}
.datePick .inputDate input {
  font-size: 10px;
  border: 1px solid rgb(178,68,21);
  border-radius: 6px;
  margin-left: 5px;
  padding: 3px 0px 3px 10px;
  height: 12px;
  width: 80px;
}
.worker .inputWorker {
  display: inline-block;
  margin-top: 2px;
  position: relative;
}
.clinick .inputClinic {
  display: inline-block;
  margin-top: 3px;
  position: relative;
}
#clinik_id {
	font-size: 10px;
    border: 1px solid rgb(178,68,21);
    border-radius: 6px;
    margin-left: 5px;
    padding: 3px 0px 3px 10px;
    height: 20px;
    width: 120px;
    line-height: 10px;
}
.radioButtons {
  display: inline-block;
  margin-bottom: 10px;
}
#content .radioButtons p {
  font-size: 9px;
  padding: 0px;
  text-indent: 0px;
  margin: 0px;
}
.radioButtons label {
  font-size: 9px;
  display: block;
}
.radioButtons input {
  display: none;
}
.radioButtons .customRadio {
/* точки нет */
  width: 10px;
  height: 10px;
  background: url(js/radio.png) 0px -14px no-repeat;
  background-size: 110%;
  position: relative;
}
.radioButtons .customRadio,
.radioButtons .label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.radioButtons input:checked + .customRadio {
/* точка есть. отличается тем что другой рисунок */
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(js/radio.png) 0px -1px no-repeat;
  background-size: 110%;
}

/* отсюда идет сама табличка */

#content .tableBody {
  margin-right: 30px;
}
#content .tableBody table {
  border-collapse: collapse;
}
/* мин и макс ширина колонок, кроме кол. время */
.tableBody td {
  vertical-align: top;
  /* max-width: 300px;
  min-width: 100px; */
}
/* мин и макс ширина колонки время */
.tableBody table tr:first-child td {
  /* min-width: 20px;
  max-width: 50px; */
}
.tableBody td:nth-child(2) div {
  margin-left: 1px
}
#content .tableBody td:nth-child(2) div:nth-child(1) {
  margin-left: 0px;
}
#content .tableBody p {
  font-size: 8px;
  line-height: 14px;
  padding: 0px;
  text-align: justify;
  text-indent: 0px;
  margin: 0;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

/* ^^ click_on = true (определение хувера) */
#content .tableBody .hoverBlock:hover {
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #93c3ae;
  box-shadow: 0 0 3px 1px #b6dcc8;
}
/* redHead = относится к заголовку таблицы */

#content .tableBody .redHead {
  background: #ff8833;
	background: -moz-linear-gradient(top, #ff8833 0%, #ff6e2f 100%);
	background: -webkit-linear-gradient(top, #ff8833 0%,#ff6e2f 100%);
	background: linear-gradient(to bottom, #ff8833 0%,#ff6e2f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8833', endColorstr='#ff6e2f',GradientType=0 );
	
  color: #fff;
  border-top: 1px solid  rgb(178,68,21);
  overflow: hidden;
  border-bottom: 1px solid  rgb(178,68,21);
}
#content .tableBody .redHead p{
  text-align: center;
  padding: 15px;
  font-size: 13px;
}
/* redHeadO = заголовок с закруглением */
#content .tableBody .redHeadO {
  border-top: 1px solid rgb(178,68,21);
  border-bottom: 1px solid  rgb(178,68,21);
  border-left: 1px solid  rgb(178,68,21);
  border-top-left-radius: 50px;
	background: #ff8833;
	background: -moz-linear-gradient(top, #ff8833 0%, #ff6e2f 100%);
	background: -webkit-linear-gradient(top, #ff8833 0%,#ff6e2f 100%);
	background: linear-gradient(to bottom, #ff8833 0%,#ff6e2f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8833', endColorstr='#ff6e2f',GradientType=0 );
	
  color: #fff;
  overflow: hidden;
}
#content .tableBody .redHeadO p{
  text-align: center;
  font-size: 13px;
  padding: 15px;
}
/* ^^ Кастомные стили для датапикера */
#ui-datepicker-div.ui-widget {
  font-size: 0.7em;
  margin-top: 4px;
}
#ui-datepicker-div .ui-state-highlight,
#ui-datepicker-div .ui-widget-content .ui-state-highlight,
#ui-datepicker-div .ui-widget-header .ui-state-highlight {
background: #b61815;
color: white;
border: 1px solid #970f10;
}
#ui-datepicker-div .ui-state-hover,
#ui-datepicker-div .ui-widget-content .ui-state-hover,
#ui-datepicker-div .ui-widget-header .ui-state-hover,
#ui-datepicker-div .ui-state-focus,
#ui-datepicker-div .ui-widget-content .ui-state-focus,
#ui-datepicker-div .ui-widget-header .ui-state-focus,
#ui-datepicker-div .ui-button:hover,
#ui-datepicker-div .ui-button:focus {
  border: 1px solid #a8a3c2;
}

/*=================== ^^ Всплывающее окно ====================*/

#windowPopUp .firstForm, #windowPopUp .secondForm, #windowPopUp .thirdForm{
	background: #fff;
	width: 310px;
	border: 1px solid rgb(178,68,21);
	border-radius: 15px;
	display:none;
	font-family:Arial;
	    position: relative;
}
.firstForm h3, .secondForm h3 , .thirdForm h3 {
	text-align:center;
	font-size:22px;
}
.firstForm .selectForm, .secondForm .versions , .thirdForm .docs {
	padding: 10px;
}
.firstForm .selectForm li:hover, .secondForm .versions li:hover, .thirdForm .docs li.active {
	background:rgb(178,68,21);
	box-shadow:0 1px 0px #ff8833;
}
.firstForm .selectForm li, .secondForm .versions li, .thirdForm .docs li {
	background: #ff8833;
	background: -moz-linear-gradient(top, #ff8833 0%, #ff6e2f 100%);
	background: -webkit-linear-gradient(top, #ff8833 0%,#ff6e2f 100%);
	background: linear-gradient(to bottom, #ff8833 0%,#ff6e2f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8833', endColorstr='#ff6e2f',GradientType=0 );
	border-radius:5px;
	box-shadow:0 1px 0px rgb(178,68,21);
	list-style:none;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	cursor:pointer;
	padding: 10px;
    text-align: center;
    margin-bottom: 10px;

}
.thirdForm .docs li {
	width: 253px;
}
.tabhead .note {
	height:50px;
	padding: 5px;
}
.closeIcon:hover {
	COLOR: red;
}
.closeIcon {
	position: absolute;
    top: -10px;
    right: -10px;
    COLOR: #000;
    display: block;
    cursor: pointer;
}
.thirdForm button, .worker button, .clinick button {
	background: #ff8833;
	background: -moz-linear-gradient(top, #ff8833 0%, #ff6e2f 100%);
	background: -webkit-linear-gradient(top, #ff8833 0%,#ff6e2f 100%);
	background: linear-gradient(to bottom, #ff8833 0%,#ff6e2f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8833', endColorstr='#ff6e2f',GradientType=0 );
	border-radius:5px;
	box-shadow:0 1px 0px rgb(178,68,21);
	border:0;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	cursor:pointer;
	    padding: 10px;
    margin: 10px;
    width: 280px;
}
.thirdForm span {
	font-size: 12px;
    text-align: center;
    display: block;
}
.thirdForm ul {
	height: 200px;
    overflow-y: scroll;
}
#search
{
	border:1px solid rgb(178,68,21);
	border-radius:5px;
	width: 257px;
    margin: 10px;
    padding: 5px 10px;
}
/* здесь начинается модалка */

#windowPopUp .backgroundPopUp {
  /*подложка */
  position: fixed;
  background-color: hsla(0, 0%, 0%, 0.5);
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#windowPopUp .backgroundPopUp .formPopUp {
  /* сама форма */
  background: #fff;
  width: 300px;
  border: 1px solid rgb(178,68,21);
  border-radius: 15px;
  display:none;
      position: relative;
	  font-family:Arial;
}
#windowPopUp .formPopUp .headPopUp p {
  /* заголовок - текст */
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 0;
  font-size: 19px;
  color: #fff;
  text-align: center;
  padding: 7px;
}
#windowPopUp .formPopUp .headPopUp {
  /* заголовок */
  background: #ff8833;
  height: 40px;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  border-bottom: 1px solid #ff8833;
}
#windowPopUp .formPopUp .bodyPopUp {
  /* тело формы */
  padding: 0px 20px;
}
#windowPopUp .formPopUp .bodyPopUp p{
  /* тело формы текст наверху */
  text-align: right;
  font-size: 9px;
  font-weight: bold;
  color: #3d3f5f;
}
#windowPopUp .formPopUp .bodyPopUp .button{
  height: 30px;
}
#windowPopUp .formPopUp .bodyPopUp label {
  /* обертка вокруг подписи и элемента */
  display: block;
  position: relative;
  color: #3d3f5f;
  height: 15px;
  padding: 5px 0px;
}
#windowPopUp .formPopUp .bodyPopUp select {
	width: 185px;
    float: right;
    border-radius: 5px;
    border: 1px solid rgb(178,68,21);
    line-height: 15px;
}
#windowPopUp .formPopUp .bodyPopUp input {
  width: 173px;
  float: right;
  border: 1px solid rgb(178,68,21);
  border-radius: 5px;
  line-height: 15px;
  padding-left: 10px;
  /* outline:none; */
}
#windowPopUp .formPopUp .bodyPopUp textarea {
  width: 171px;
  float: right;
  border: 1px solid rgb(178,68,21);
  border-radius: 5px;
  padding-left: 10px;
  resize: none;
  /* outline:none; */
  font-size: 9px;
  font-family:Arial;
}
/*#windowPopUp .formPopUp .bodyPopUp label:last-child input {
  height: 75px;
}*/
#windowPopUp .formPopUp .bodyPopUp span {
  /* подписи к элементу */
  font-size: 9px;
  line-height: 18px;
  float: right;
  margin-right: 5px;
}
#windowPopUp .formPopUp .button span.sending {
  /* заявка отправляется, повторные клики не принимаются */
  opacity: 0.5;
  cursor: default;
}
#windowPopUp .formPopUp .button span{
  /* button = название стиля, высота кнопок */
  background: #ff8833;
  display: inline-block;
  border: 1px solid rgb(178,68,21);
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  line-height: 25px;
  padding: 0px 9px;
  margin: 5px 0px 5px 25px;
  cursor: pointer;
}

.errInfo
{
	color: red !important;
	display:none;
}

/***** NEW STYLE FOR CALENDARTABLE ***/

.specline {
	    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}
.specline:after
{
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.cl{ clear:both; height:0px; line-height:0px;}
.left-col{
	width: 35%;
	overflow:hidden;
	float: left;
}
.right-col{
	width: 65%;
	float: left;
	overflow:hidden;
	position: relative;
}
.redHead {
    background-color: #b61815;
    color: #fff;
    border-top: 1px solid white;
    overflow: hidden;
	padding: 12px; text-align: center; font-family: Arial; font-size: 15px;
    border-bottom: 1px solid white;
}
.redHeadO {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-top-left-radius: 50px;
    background-color: #b61815;
    color: #fff;
    overflow: hidden;
	margin-right: 2px;
	margin-bottom: 0px;
	padding: 12px; text-align: center; font-family: Arial; font-size: 15px;
}
.spec {
	color: #4A4A4A;
    overflow: hidden;
	border: 1px #FCD8AD solid;
	padding:5px 1px 5px 8px;
	margin: 0px 2px 0px 1px;
	border-radius: 9px;
	font-size: 12px;
	font-family: Arial;
}
.kard{background:url(img/kard.png) no-repeat right}
.ped{background:url(img/ped.png) no-repeat right}
.travm{background:url(img/travm.png) no-repeat right}
.hir{background:url(img/hir.png) no-repeat right}

.spec-vid{
	margin-top: 10px; font-style: italic; color: #898989;
}
.time{
	color: #4A4A4A;
  overflow: hidden;
	float: left;
	border: 1px #AFDEAF solid;
	padding:5px 8px 5px 8px;
	margin: 2px;
	border-radius: 6px;
	font-size: 10px;
	font-family: Arial;
	background-color: #F8FAE4;
	text-decoration: none;
}
.time:hover{ 
	box-shadow:0 0 2px #96A84D;
	cursor:pointer;
}
.time-gr{
	background-color: #96A84D; color: #FFFFFF;
	
}
.time-white{
	background-color: #fff;
}
/* Пациент только что записался на этот слот */
.time-blue{
	color: #4A4A4A;
  overflow: hidden;
	float: left;
	border: 1px #00A0E3 solid;
	padding:5px 8px 5px 8px;
	margin: 2px;
	border-radius: 6px;
	font-size: 10px;
	font-family: Arial;
	text-decoration: none;
	background-color: #B3DCEE; 
}
.tiket-line{
	
	border-bottom:1px solid #FCD8AD;
}
.day {
    clear: both;
}
/**** END ***/