body { 
    margin: 0; 
	font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
} 

/*div { 	overflow:hidden; } */

[class*="col-"] {     /*  *-содержит   ^ -начинается   */
	display: inline-block;  width: 100%;
	vertical-align: middle;
} 
.col-0 {width: unset; }
.scol-1 {width: 8.33%;} .scol-2 {width: 16.66%;} .scol-3 {width: 25%;} .scol-4 {width: 33.333%;} .scol-5 {width: 41.666%;} .scol-6 {width: 50%;}
.scol-7 {width: 58.33%;} .scol-8 {width: 66.66%;} .scol-9 {width: 75%;} .scol-10 {width: 83.33%;} .scol-11 {width: 91.66%;} .scol-12 {width: 100%;}


.table { display: table;}
.table .tr {display: table-row;}
.table .th {display: table-cell;}


.px50 {  width: 50px; display: inline-block; vertical-align: middle;}
.px100 {  width: 100px; display: inline-block; vertical-align: middle;}

.-px {  width: calc(100% - var(--item-width)); display: inline-block; vertical-align: middle;}
.-px100 {  width: calc(100% - 100px); display: inline-block; vertical-align: middle;}






/*        =============LIST===========         .br { float: left; } */

/* .list {
	padding: 8px 16px;
}
.list .page {
	border-top:  3px solid #3c8dbc;
	background-color:white;
} */

.dropdown {
	display: inline-block;
	overflow: visible;
  }
.dropdown .dan {
	background-color: #f9f9f9;
	padding: 5px 5px;
	border: 2px solid rgb(33, 22, 128);
	border-radius: 5px;
	overflow:hidden;
}
.dropdown .menu {
	animation: slide-down .5s ease 1;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 5px;
    z-index: 100;
	display: none;
  }
  .dropdown .menu a {
	padding: 5px 2px;
	display: block;
  }

  .dropdown .menu .badge {
	padding: 5px 5px;
	position: absolute;
	right: 0;
  }
  .dropdown .menu a:hover {
	background-color: #689cb4;
  }
.dropdown:focus .menu{
  display: block;
}
.dropdown .dan:focus ~ .menu{
	display: block;
}

.btn {
	display: block;
	padding: 5px 5px;
	border: 2px solid rgb(33, 22, 128);
	border-radius: 5px;
	height: 18px;
}
.input-group {
	display: -ms-flexbox;
	display: flex;
}
.input-group.r {
	flex-direction:row-reverse;
} 
.left{ text-align: left; }
.right{ text-align: right; }
.center{ text-align: center; }

.hide {display:none;}

.v-ok {	
	border: 2px solid rgb(22, 187, 22);
	border-radius: 5px;}
.v-no {
	border: 2px solid rgb(240, 52, 52);
	border-radius: 5px;}

.bg-ser{ background-color: #222d32;}
.bg-blue{  background-color: #3c8dbc; color: white;}
.bg-wblue{  background-color: #ecf0f5; }
    

/* .modal-container {
	border-radius: .1rem;
	box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	max-height: 75vh;
	max-width: 640px;
	padding: 0 .8rem;
	width: 100%;
  }
  .modal-container.sm { max-width: 320px; padding: 0 .4rem; }
  .modal-container.lg { max-width: 960px;} */

.modal{
	align-items: center; justify-content: center;
	-ms-flex-align: center; -ms-flex-pack: center;
	display:none;
	top:0px; left:0px; width:100%; height:100%;
	position:fixed; z-index:25;
	background: rgba(50, 50, 50, 0.5);
	
}

  
/* ============================= Инпут ================================= */

.input-data {
    height: 40px;
    background: #fff;
    position: relative;
    margin: 5px 0px;
}

.input-data input {
    height: 100%;
    width: 100%;
    border: none;
    font-size: 18px;
}

.input-data input:focus ~ label,                          
.input-data input:valid ~ label {
    transform: translateY(-20px);
    font-size: 14px;
    color: rgb(92, 88, 114);
}

.input-data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: gray;
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-data .underline {
    position: absolute;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background-color: rgb(39, 132, 155);
}

.input-data .underline::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: rgb(92, 88, 114);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.info {
    visibility: hidden;
    position: absolute;
    color: rgb(240, 153, 153);
    right: 0;
    margin-top: -37px;
}

.input-data input:focus ~ .underline::before,
.input-data input:valid ~ .underline::before {
    transform: scaleX(1);
}

.input-data  input.err:focus ~ .underline::before {
    background: rgb(240, 153, 153);;
}

.input-data input.err ~ .info {
    visibility: visible;
}

p.info:hover > .tooltip  {
    visibility: visible;
}


  /* =================================== тултип ================================ */

.tooltip {
  visibility: hidden;
  display: inline-block;
  background-color: rgba(12, 12, 12, 0.7);
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
  height: min-content;
  bottom: 40px;
  position: absolute;
  z-index: 100;
  font-size: 12px;
  margin-left: -176px;
  width: 167px;
}

.tooltip p {
  margin-bottom: 6px;
}

.tooltip::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 92%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(12, 12, 12, 0.7) transparent transparent transparent;
}

  /* ================================== Кнопка ================================ */

a.button {
  background: #298cad;
  color: #ffffff;
  font-size: 18px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-bottom: 4px solid #36d2ff;
}

a.button:hover {
  color: #ffffff;
}

a.button-disabled {
  background: #717274;
  pointer-events: none; 
  cursor: default;
}


.button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #27bfdc;
  position: absolute;
  top: 0;
  left: -100%;
  transition: .3s;
  transition-delay: .2s;
  z-index: -1;
}

.button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #36d2ff;
  top: 100%;
  left: 0;
  transition: .3s;
  z-index: -1;
}

.button:hover::before {
  left: 0;
}

.button:hover::after {
  top: 0;
}

.button-container {
  display: flex;
  justify-content: space-between;
}


/* =================================================================================================================================== */
 /* =================================================================================================================================== */






	
@media only screen and (min-width: 768px) {
    /* !!!!!!!!!!!!!!!!!!!!!! ============  [For desktop:] ==========  !!!!!!!!!!!!!*/
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}



}