@media screen and (min-width: 1024px) {


  .mobile {
    display: none;
  }
  .add-btn.desktop{
    display: flex;
  }
  header .back-btn{
    display: none !important;
  }
  header .to-site-btn {
    display: flex !important;
  }
  .desktop {
    display: block;
  }
.map-side  .clinic-result-item .mobile-data{
  display: flex;
  margin-top: 1rem;

}

  .map-side  .clinic-result-item *{
    font-family: "Ping Hebrew" !important;
    font-size: 1.6rem !important;
  }
  .gm-style .gm-style-iw-c{
    border-radius: 7rem 7rem 7rem 0;
    padding: 3rem 4rem !important;
    border: 6px solid #0c83c9;
   width:35rem !important;
  transform: translate3d(-3rem,-100%,0) !important;



  }
  .map-side  .clinic-result-item{
    border-bottom: none;
  }
  .map-side  .clinic-result-item  h3{
    margin-bottom: 0;
  }
  .map-side  .clinic-result-item .phone-s a{
    background-size: 1.8rem;
    padding-right: 2rem;
  }

  .map-side  .clinic-result-item .cad{
    background-size: 1.8rem;
    background: url(../img/bw_marker.svg) no-repeat right center;
    padding-right: 2rem;
  }
  .gm-style .gm-style-iw-t{
    bottom: 0 !important;
  }
  .map-side  .clinic-result-item .inner-item{
    display: block;
  }
  .gm-style .gm-style-iw-tc::after{
    display: none;
  }
  .gm-style-iw-t button{
top:2rem !important;
    left: 2rem !important;
    width:2rem;
    height: 2rem;
  }

  .gm-style-iw-t button span{
    width: 2rem  !important;
    height: 2rem  !important;
    background-size: contain;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1600px){
  html{
    font-size: 9px;
  }

}
@media screen and (min-width: 1024px) and (max-width: 1400px){
  html{
    font-size: 8px;
  }

}
@media screen and (min-width: 1024px) and (max-width: 1300px){
  html{
    font-size: 6px;
  }

}

@media screen and (max-width: 1023px) {

  :root {
    --vh: 100vh;
    --full-height: calc(var(--vh, 1vh) * 100);

  }
  .gm-style .gm-style-iw-t{
   display: none !important;
  }
  .mobile {
    display: block;
  }

  #clinic-search {

    padding: 0;
    box-sizing: border-box;
    margin-top: 4rem;

  }

  .clinic-autocolplete {
    width: 100%;
    padding-left: 1rem;
  }

  .clinic-autocolplete {

    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .focused .form-label {
    transform: translateY(-1.5rem);
    font-size: .75em !important;

  }

  .custom-checkbox {
    flex: 0 0 2.3rem;
  }

  .input-component label {
    font-size: 1.8rem;
  }

  input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type='date'] {
    border-bottom: 1px solid black;
    line-height: 2.6rem;
  }

  .different-addresses-label-text {
    font-size: 1.6rem;
  }

  input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type='date'] {
    font-size: 1.8rem;
  }

  .delete-btn {
    height: 2.5rem;
  }

  .error-text {
    top: 31px;
  }

  .loader-animation {
    width: 16rem;
  }

  .clinics-results-area {

    display: block;
  }

  .list-scroller {
    padding-left: 0;
  }

  .clinic-result-item {
    padding: 1rem 0;
  }

  .clinics p {
    font-size: 1.6rem;
    text-align: center;
    padding: 0 3rem;
    box-sizing: border-box;
    padding: 0 !important;
    text-align: right !important;
  }

  .phone-s a {
    font-size: 1.6rem !important;
    padding-right: 2.5rem;
    background-size: 2.3rem;
  }

  header {
    height: 6.7rem;
  }

  .marpet-logo {
    width: 5.8rem;
    height: 4.4rem;
    background: url(../img/logo.svg);
    background-size: contain;
  }

  .arrow-home {
    height: 100%;
    position: absolute;
    right: 2rem;
    top: 0;
    background: url(../img/back_to_site.svg) no-repeat center right;
    background-size: 2.4rem;
    padding-right: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: transparent;

  }


  .wrapper {
    display: block;
    width: 100vw;
    overflow: hidden;
  }


  .pa-content-view {
    width: 100vw;
    z-index: 99999;
    position: fixed;
    background: white;
    padding: 0 2.5rem;
    box-sizing: border-box;
    left: -100vw;
    top: 0 !important;
    padding-top: 8rem;
    z-index: 99999;
    overflow: auto;
    height: var(--full-height);
    transition: .3s all ease-in-out;

  }

  .content-view .pa-content-view {
    left: 0;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999999;
    background: white;
  }
.customers-name .mobile{
  display: inline;
}
  .users-pets-list > li {
    padding: 1rem 1rem 4rem;
  }
  .pa-sidebar-bg{
    margin-top: 5rem;
  }
  .pa-sidebar {
    position: fixed;
    top: 6.7rem;

    right: 0;
    padding: 0 3rem 3rem;

    box-sizing: border-box;
    width: 100vw;
    height: calc(var(--full-height) - 6.7rem);
    overflow: auto;
  }

  .last-visits-list p {
    display: block;
    font-size: 1.6rem;
  }

  .pa-sidebar h2 {
    font-size: 2.5rem;
    font-weight: 900;
  }
  .pet-list-item-left-head h3{
    margin-bottom: 0;
  }
  .pa-sidebar-bg {
    height: auto;
    background-color: rgba(224, 246, 243, 1);

  }

  .pa-sidebar:before {
    background-color: rgba(224, 246, 243, 1);
    top: 2.3rem;
    left: 16rem;
  }

  .sidebar-links .current-menu-item a {
    font-weight: 400;
  }

  .pa-sidebar:after {
    background-color: rgba(224, 246, 243, 1);
    top: 2.3rem;

    left: 9rem;
  }

  .sidebar-links {
    padding-top: 0;
  }

  .side-bar-top {
    padding-bottom: 2rem;
    border-bottom: 1px solid #BADFC8;
  }

  .pa-sidebar li {
    margin: 0;
  }

  .pa-sidebar a {
    line-height: 6.8rem;
    font-size: 1.8rem;
    border-bottom: 1px solid #BADFC8;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .pa-sidebar a:after {
    content: '>';
    color: #a1d1ab;
  }

  .users-pets-list .dog,
  .users-pets-list .cat {
    display: block;
  }

  .pet-list-item-left {
    padding-right: 2.6rem;
  }

  .pet-list-item-left-head h3 {
    font-weight: 900;
    margin: 2.6rem 0 0 0;
  }

  .last-visits-list {
    padding-top: 0;
  }

  .pet-list-item-left .link {
    font-weight: 900;
    font-size: 1.6rem;
  }

  .desktop {
    display: none;
  }

  .pet-icon {
    flex: 0 0 4.9rem;
    height: 4.9rem;
    background-size: 4.9rem;
  }

  .pet-card .pet-main h2 {
    font-size: 2.2rem;
  }

  .pet-card .pet-breed {
    font-size: 1.8rem;
    font-weight: 700;
  }

  .package {
    margin: 3rem 0;
    font-size: 1.8rem;
  }

  .pet-card-bottom {
    padding-top: 0;
  }

  .pet-card {
    padding: 2.5rem;
    height: auto;
  }

  .pet-age .label,
  .pet-age .value {
    font-size: 1.4rem;
  }

  .pet-chip .label,
  .pet-chip .value {
    font-size: 1.4rem;
  }

  .pet-age {
    padding-left: 2rem;
  }

  .pet-chip {
    padding-right: 2rem;
  }

  .pa-content-view-head h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;

  }

  .pa-content-view {
    top: 6.9rem;
    padding-bottom: 5rem;
  }

  .pa-content-view-head {
    justify-content: center;
    margin-top: 2rem;
  }

  .add-btn.mobile {
    width: 100%;
    display: flex !important;
    border-radius: 10px;

  }

  .watch-non-active {
    display: block;
    text-align: center;
    margin-top: 2rem;
  }

  .to-site-btn, .back-btn {
    width: 5rem;
    border: none;
  }

  .back-btn {
    display: none;
  }

  .content-view .back-btn {
    display: block;
  }

  .content-view .to-site-btn {
    display: none;
  }

  .card-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cc-number {
    background: url(../img/icon_cc.svg) center top no-repeat;
    background-size: 5.5rem;
    line-height: 4rem;
    padding-right: 0;
    padding-top: 4rem;
  }

  .cc-green-box .cc-slide {
    padding: 2rem;
  }

  .cc-btns-flex {
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

  }

  .cc-btns-splide {
    width: 100% !important;
  }

  .change-card-box, .mbb {
    display: block !important;
  }

  .cc-green-box .cc-slide.change-card-box {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .change-card-box .input-component {
    margin: 0 0 7rem 0;
  }

  .cc-btns-flex {

    justify-content: space-between;
  }
  .cc-sl-2-btns{
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .cc-sl-2-btns button {
    padding-left: 4rem;
    padding-right: 4rem;
    height: 4rem !important;
    font-size: 1.8rem;
  }

  .cc-sl-2-btns button#save-payment {
    margin: 0;
  }

  .cc-btns-flex-gh {
    justify-content: center;
  }

  .list-side {
    padding-left: 0;
  }

  .clinics-results-area h2 {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
  }

  .list-scroller {
    margin-top: 0;
  }

  .clinic-btn {
    padding-right: 0;
    padding-left: 0;
  }

  .clinics {

  }

  .clinics-pa-content-view {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
  }

  .clinics-rsults-accrd, .area-con, .clinics .basic-width, .clinics {
    height: 100% !important;
  }

  .list-side {

    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .list-scroller {
    margin-top: 0;
    flex-grow: 1;
    overflow: auto;
  }

  .clinics-results-area {

    display: block;
    height: 100%;
  }

  #clinic-search {
    margin-top: 2rem;
  }

  .area-con-h, .clinics-list {
    padding-right: 3rem;
    padding-left: 3rem;
    box-sizing: border-box;
  }

  .clinics-list {
    padding-bottom: 6rem;
  }

  .area-con-h {
    height: 13.5rem;
  }

  .clinics-pa-content-view:after {
    position: absolute;
    content: '';
    display: block;

    bottom: 0;
    left: 0;
    width: 100%;
    height: 13.5rem;
    background-image: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);

  }
#show-inactive{
  display: flex !important;
}
  .cc-green-box .cc-slide.is-active.extndd{
    height: 44rem;
  }
  .map-side {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: calc(100% - 13.5rem);
    background-color: white;
    bottom: 0;
    left: -100vw;
    padding: 0 2rem;
    border-radius: 0;

    transition: .3s all ease-in-out;

  }
.otp-step-1 .fields-con .input-component {
margin-top: 3rem !important;
}
  .list-scroller {
    margin-top: 2rem;
  }

  .clinic-btn {
    padding-top: 0;
  }

  .map-side.in-viewport {
    left: 0;
  }

  .pac-container {
    z-index: 99999999999;
  }

  #map {
    border-radius: 2rem 2rem 0 0;
  }

  .current_clinic .inner-item {
    display: block;
  }

  .current_clinic {
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 10px 0 #000000;
    position: relative;
    flex: 0;
    height: 0;
    background-color: white;
    transition: .3s all ease-in-out;
    z-index: 99999999;


  }

  .current_clinic .clinic-result-item {
    padding: 3rem 3rem 2rem 3rem;
    box-sizing: border-box;
  }

  #map {
    width: calc(100% - 3.6rem);
    right: 1.8rem;
  }

  .current_clinic.show {
    flex: 0 0 21rem;
    height: 21rem;
  }
.clinics-list .clinic-btn{
  pointer-events: none !important;
}
  /*.current_clinic:before {*/
  /*  position: absolute;*/
  /*  left: 0;*/
  /*  right: 0;*/
  /*  margin: auto;*/
  /*  height: 4px;*/
  /*  background-color: #ccc;*/
  /*  border-right: 2px;*/
  /*  top: 1.5rem;*/
  /*  content: '';*/
  /*  width: 7rem;*/

  /*}*/

  .clinics-list li.active .clinic-btn {
    background: none !important;
  }

  .current_clinic .phone-s {
    text-align: right;
  }

  .current_clinic .phone-s a {
    background-size: 2rem;
  }

  .current_clinic .cad {
    padding-right: 2.5rem !important;
    background: url(../img/bw_marker.svg) no-repeat right center;
    margin-bottom: .5rem;
    background-size: 2rem;
  }

  .current_clinic .clinic-result-item {
    border-bottom: none !important;
  }

  .map-side {
    padding: 0;
  }

  .mobile-data {
    display: flex !important;
    margin-top: 2rem;
  }

  .sp, .herot {
    flex: 0 0 49%;
  }

  .sp {
    padding-left: 2rem;
    box-sizing: border-box;
  }

  .herot {
    border-right: 1px solid #79ca9f;
    padding-right: 2rem;
    box-sizing: border-box;
  }

  .cl-ui-btn {
    width: 6.8rem;
    height: 6.8rem;
    background-size: 6.8rem;
    position: absolute;
    left: 2rem;

    z-index: 999999;
    transition: .3s all;
    bottom: -6.8rem;
  }

  .clinics-pa-content-view {
    padding-bottom: 0;
  }

  .list-side {
    padding-bottom: 4rem;
  }

  .cl-ui-btn.active {
    bottom: 2rem;
  }

  #goto-list {
    background-image: url("../img/go-to-list.svg");

  }

  #goto-map {
    background-image: url("../img/go-to-map.svg");
  }

  #goto-list.far-in {
    bottom: 24rem;
  }

  .green-box.oh {
    padding: 3rem 2.5rem;
  }

  .green-box .details .u {
    padding: 0;
    font-size: 1.8rem;
    border: none !important;
  }

  .u .label {
    margin-bottom: 5px;
  }

  .u-name, .u-lname {
    flex: 0 0 50%;
  }

  .u-phone, .u-mail {
    flex: 0 0 100%;
    margin-top: 2.5rem;
  }

  .details {
    flex-wrap: wrap;
  }

  .oh p,.oh p a {
    font-size: 1.6rem;
  }

  .f-1, .f-2 {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .tcity, .tstreet {
    flex: 0 0 100% !important;
    margin-bottom: 4rem;
  }

  .tt {
    flex: 0 0 32%;
    margin-left: 0 !important;
    margin-bottom: 2.5rem;
  }
  .visits-history-table tr:first-child{
    border-top: 1px solid #a1d1ab;
    margin-top: 3.4rem;


  }
  .pawn, .pawn2, .pawn3 {
    width: 24rem;
  }

  .fields-con {
    display: block;
  }

  .switched-mobile {
    text-align: center;
    font-size: 1.4rem;
    margin: 2rem 0;
  }

  .switched-mobile .link {
    font-size: 1.4rem;
  }

  .pawn-container {
    height: 10rem;
  }

  .fields-con .input-component {
    width: 20rem;
    margin: 2rem auto !important;
  }

  #send-code-login {
    height: 5rem;
    font-size: 1.8rem;
    display: block;
    flex: 0 0 5rem;
    margin-top: 3rem;
  }

  .login-frame {
    width: 80vw;
    background-color: white;

    border-radius: 0 182px 182px 182px;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    border-radius: 0 6rem 6rem 6rem;
    min-height: unset;
  }

  .otp-step-2 h2 {
    font-size: 4rem;
  }
  .otp-step-2 h2{
    margin-top: 4rem;
  }
  .login-wrapper {
    width: 100%;
    margin: 0;
    height: var(--full-height);
    padding-top: 0;
    background-color: #d5efee;
    border-radius: 0;
    min-height: unset;
  }
  .otp-step-2 .input-component{
    width: 20rem;
  }
  .not-found-popup .popup-frame {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
  }

  .not-found-image {
    width: 20.7rem;
    height: 12.9rem;


  }

  .not-found-popup .popup-frame h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-top: 2rem;
  }

  .not-found-popup {
    padding: 2rem;
    box-sizing: border-box;
    z-index: 99999999;
  }

  .not-found-popup .popup-frame .lo-m {
    text-align: center;
    margin: 1.5rem 0;
    font-size: 1.8rem;
  }

  .error-text {
    margin-top: 0;
  }

  .not-found-popup .popup-frame p, .not-found-popup .popup-frame a {
    text-align: center;
    font-size: 1.8rem;
  }

  .sb-scroller {
    overflow: auto;
  }

  .pa-sidebar-bg {
    display: flex;
    flex-direction: column;
  }
.
  .pa-sidebar .log-out {
    margin-top: 5rem;
  }
  .pa-sidebar-bg {
    padding: 4rem 6rem 3rem 6rem;
  }
  .visits-history-table td{
    display: block;
  }
  .visits-history-table tr{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: 3rem 0;
  }
  .visits-history-table tr td:nth-child(1),
  .visits-history-table tr td:nth-child(2),
  .visits-history-table tr td:nth-child(3)
  {
    flex: 0 0 100%;
    padding-right: 0;
  }
  .visits-history-table tr td:nth-child(2){
    margin: .5rem 0;
  }
  .visits-history-table tr td:nth-child(4){
    padding-right: 0;
  }
  .all-visits-page h1{
    font-size: 2.5rem;
    text-align: center;

    box-sizing: border-box;
    margin: 5rem 0 0 0;
  }
  .all-visits-page .wrapper{

    padding: 0 5rem;
    padding: 0 4rem;
    box-sizing: border-box;
  }
  .all-visits-page table{
    width: 100%;
    display: block;
  }
  .all-visits-page thead{
    display: none;
  }

  .all-visits-page  .hr{
    font-size: 1.4rem;
    text-align: right;
font-weight: 400;
    margin-bottom: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .visits-history-table tr td:nth-child(4),
  .visits-history-table tr td:nth-child(5){
    padding-right: 0;
    flex: 0 0 50%;
    margin-top: 2rem;

  }

  .visits-history-table tr td:nth-child(1),
  .visits-history-table tr td:nth-child(3){
    font-size: 1.6rem;
    font-weight: 400;
  }
  .visits-history-table tr td:nth-child(2){
    font-size: 1.8rem;
    font-weight: 700;
  }

  .visits-history-table tr td:nth-child(4){
    border-left: 1px solid #DFDFDF;
    padding-left: 3rem;
    box-sizing: border-box;
  }
  .visits-history-table tr td:nth-child(5){
    padding-right: 3rem;
  }
  .input-component[data-name="house-number"], .input-component[data-name="flat-number"], .input-component[data-name="entrance"],.input-component[data-name="house-number2"], .input-component[data-name="flat-number2"], .input-component[data-name="entrance2"] {
    flex: 0 0 31.5%;
    margin-left: 0;
  }
  .ad-for-fl{
    justify-content: space-between;
  }
}