.h1{
font-family: GTEestiPro, Arial, sans-serif;
-webkit-box-orient: vertical;
    color: rgb(93, 93, 100);
    display: -webkit-box;
    overflow: hidden;
    transition-property: max-height;
    will-change: max-height;
    word-break: break-word;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 30px;

}

#search_list{ display: none }


.ramka{
    border: 1px solid lightgray;
    border-radius: 11px;
    width: 100%;
    min-height: 360px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 40px 270px 50px;
    cursor: pointer;
}


.ramka2{
    border: 1px solid lightgray;
    border-radius: 11px;
    width: 100%;
    min-height: 360px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 40px 70px 100px 50px 50px;
    padding: 15px 20px 20px 20px;
    background: rgb(255,253,253);
    background: linear-gradient(to bottom right, rgba(255,253,253,1) 0%, rgba(218, 216, 216, 0.723) 50%, rgb(236, 235, 235) 100%);
}

.inp_t{
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgb(0, 0, 0);
    background: none;

}


/* SIBLING FADE: fade out siblings around a hovered item */

#app_all { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

#app_all > #band { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

#app_all> #band { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

#app_all:hover > #band { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

#app_all > #band:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */




.head_app{
    margin-top:auto; 
    margin-bottom:auto; 
    width:200px; 
    margin-left:2%;
    color:white;
    font-size:22px ;
    font-family: Montserrat,sans-serif;
}


#body_app{
background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image: -moz-linear-gradient(top, #fff, #ddd);
    background-image: -ms-linear-gradient(top, #fff, #ddd);
    background-image: -o-linear-gradient(top, #fff, #ddd);
    background-image: linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
   
}

#body_app p{

    font-family: "Montserat", sans-serif;
    font-size: 18px;
    color: #667585;

}


#body_app h1{

    font-family: "Montserat", sans-serif;
    font-size: 24px;
    color: #000000;
    font:bold;
}

.dark_app{
 
    font-family: "Montserat", sans-serif;
    font-size: 18px;
    color: rgb(90, 90, 143);
    
    
}


.form_radio_group {
	display: inline-block;
	overflow: hidden;
}
.form_radio_group-item {
	display: inline-block;
	float: left;    
}
.form_radio_group input[type=radio] {
	display: none;
}
.form_radio_group label {
	display: inline-block;
	cursor: pointer;
	padding: 0px 15px;
	line-height: 34px;
	border: 1px solid #999;
	border-right: none;
	user-select: none;
}
 
.form_radio_group .form_radio_group-item:first-child label {
	border-radius: 6px 0 0 6px;
}
.form_radio_group .form_radio_group-item:last-child label {
	border-radius: 0 6px 6px 0;
	border-right: 1px solid #999;
}
 
/* Checked */
.form_radio_group input[type=radio]:checked + label {
	background: #b8b7b6;
}
 
/* Hover */
.form_radio_group label:hover {
	color: #666;
}
 
/* Disabled */
.form_radio_group input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}


/* From Uiverse.io by zanina-yassine */ 
.master-container {
  display: grid;
  grid-template-columns: auto;
  gap: 5px;
}

.card {
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
    
}

.title {
  width: 100%;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #e6e6e9;
  font-weight: bold;
  font-size: 20px;
  color: #020202;
}

/* cart */
.cart {
  border-radius: 22px 22px 7px 7px;
}

.cart .products {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.cart .products .product {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr;
  gap: 10px;
}

.cart .products .product span {
  font-size: 16px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.cart .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.cart .quantity {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

.cart .quantity label {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #47484b;
}

.cart .quantity button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: transparent;
  padding-bottom: 2px;
}

.card .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card .small sup {
  font-size: px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

 .details {
  display: grid;
  grid-template-columns: 2fr 3fr;
  padding: 10px;
  gap: 5px;
}

 .details span {
  font-size: 16px;
  font-weight: 600;
}

 .details span:nth-child(odd) {
  font-size: 18px;
  font-weight: 500;
  color: #474747;
  margin: auto auto auto 0;
 
}

 .details span:nth-child(even) {
     text-align: right;
  font-size: 20px;
  font-weight: 400;
  color: #8c8c8d;
  margin: auto 0 auto auto;
  
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #efeff3;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5F5D6B;
  bottom: 5px;
  display: inline-block;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 45px;
  background: linear-gradient(180deg, rgb(255, 68, 68) 0%, rgb(252, 17, 17) 50%, rgb(237, 5, 5) 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 9px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.rasm{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #ffa929;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.rasm_rab{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #a4af07;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.rasm_do{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #ddd125;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.rasm_sogl{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #6258f5;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.rasm_add{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #58ca4d;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.rasm_otkl{
    width: 150px;
    padding: 15px 10px 15px 10px;
    border-radius: 40px;
    background-color: #ee4545;
    color:white;
    font-size:14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.small_clear{
    color:red; 
    cursor:pointer;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
 
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.tab{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tab > input[type="radio"] {
  display: none;
}

.tab-content {
  display: none;
  width: 100%;
  margin-top: 7px;
}

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
  display: block;
}

.tab > label {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition: color .15s ease-in-out, border-color .15s ease-in-out;
  color: #040b16;
  background: 0 0;
  border-bottom: 0.125rem solid transparent;
  font-size: 18px;
}

.tab > label:hover {
  border-bottom-color: #030e1d;
}

.tab > input[type="radio"]:checked + label {
  cursor: default;
  font-weight: bold;
  color: #f33434;
  border-bottom-color: #f14b4b;
}


 .details2 {

  padding-left:20px; 
  padding-right:20px; 
  
}

.add {
    color: blue;
    cursor: pointer;
}
.delete {
    color: red;
    cursor: pointer;
    margin-left: 4%;
}

.inp{
    display: block;
    
    border: none;
    border-bottom: 1px solid rgb(0, 0, 0);
    background: none;
    width: 60%;
}

.application_check {
    transform: scale(1.8);
    opacity: 0.9;
    cursor: pointer;
    accent-color: #FF0000;
    color: white;
}

.check_label {
    font-size: 20px;
    font-family: "Montserat", sans-serif;
    color: black;
    margin-left: 12px;
    cursor: pointer;
}

.app_info {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-family: "Montserat", sans-serif;
    color: #667585;
    margin-left: 23px;
}


.text-field__label {
      display: block;
      margin-bottom: 0.25rem;
    }

    .text-field__input {
      display: block;
      width: 95%;
      height: calc(2.25rem + 2px);
      padding: 0.375rem 0.75rem;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #bdbdbd;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .text-field__input[type="search"]::-webkit-search-decoration,
    .text-field__input[type="search"]::-webkit-search-cancel-button,
    .text-field__input[type="search"]::-webkit-search-results-button,
    .text-field__input[type="search"]::-webkit-search-results-decoration {
      -webkit-appearance: none;
    }

    .text-field__input::placeholder {
      color: #212529;
      opacity: 0.4;
    }

    .text-field__input:focus {
      color: #212529;
      background-color: #fff;
      border-color: #bdbdbd;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
    }

    .text-field__input:disabled,
    .text-field__input[readonly] {
      background-color: #f5f5f5;
      opacity: 1;
    }

    /* with floating label */
    .text-field_floating {
      position: relative;
    }

    .text-field_floating .text-field__input {
      height: calc(3.5rem + 2px);
      line-height: 1.25;
      padding: 1rem 0.75rem;
    }

    .text-field_floating .text-field__label {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      padding: 1rem .75rem;
      pointer-events: none;
      border: 1px solid transparent;
      transform-origin: 0 0;
      transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    }

    .text-field_floating .text-field__input::-moz-placeholder {
      color: transparent;
    }

    .text-field_floating .text-field__input::placeholder {
      color: transparent;
    }

    .text-field_floating .text-field__input:focus,
    .text-field_floating .text-field__input:not(:placeholder-shown) {
      padding-top: 1.625rem;
      padding-bottom: .625rem;
    }

    .text-field_floating .text-field__input:focus~.text-field__label,
    .text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label {
      opacity: .65;
      transform: scale(.85) translateY(-.75rem) translateX(.15rem);
    }