@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body{margin: 0; padding: 0; font-family: "Raleway", sans-serif;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal; background-color: #f2f2f2;
  /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh; */
}
.button, .manage-index .button, .manage-button{background-color: #73bdc4; color: #fff; border-radius: 6px; padding: 8px 16px; border: unset; font-size: 18px; transition: 0.5s; cursor: pointer;}
.button:hover, .manage-index .button:hover, .manage-button:hover{background-color: #4a8489; color: #fff; border: unset;}
.button.white-bg{background-color: white; color: #000;}

.manage-index{border-color: #e4e4e4;}
.manage-table th, .manage-table td{width: 120px; padding: 2px 5px; border-bottom: none; font-size: 16px; font-weight: normal;}
.form-select-results{width: 300px; border: unset;}
.search-icon{width: 24px; height: 24px;}
input[type="text"], input[type="password"] { outline: none; padding: 8px 4px;}
#search-form{border: 1px solid #b8b8b8; border-radius: 10px; overflow: hidden; padding: 3px 5px;}
#search-form input[type="text"]{border: none; background-color: transparent;}
#search-form button{background-color: transparent; border: unset;  border-left: 1px solid #b8b8b8; cursor: pointer; transition: 0.5s;}
#search-form button:hover{color: #73bdc4;}
#site-logo{background-color: #fff; padding: 10px; border-radius: 20px;}
/* #logo-image{border-right: 1px solid #73bdc4;} */
#logo-text{font-size: 48px; color: #000; text-wrap: nowrap;}
.logger a{padding: 0 4px; transition: 0.5s;}
.logger a:last-child{ border-left: 1px solid #b8b8b8;}
.logger a:hover{color: #73bdc4;}
.menu-bar{border-radius: 20px; margin-top: 3px; border-bottom: 1px solid #e4e4e4; background-color: #fff; padding: 0 20px;}
#menu-header-wrapper a{font-size: 22px;}

.manage-index{border: unset}
/* SCHEDULE */
.schedule-item{padding: 5px 3px 0; border-radius: 5px; margin-bottom: 5px; position: relative; width: 90%; border: 1px solid #cacaca; font-size: 14px;}
.schedule-item .nzok{position: absolute; width: 20px; height: 20px; top: 3px; right: 3px;}
.manage-form-control.multiple{display: flex; justify-content: space-between;}
.legend-item{width: 25px; height: 25px; border-radius: 3px;}
.phone-code input{width: 50px;}
.phone-code .button{display: none;}
.manage-table.vertical > tbody > tr > td, .manage-table.vertical > tbody > tr > th{padding: 6px; border-bottom: 1px solid #999;}
.admin input, .manage-index textarea, .admin select { border-radius: 10px; border: 1px solid #e0e0e0; }
.manage-table .schedule-days{width: 14vw;}
.schedule-days .button{font-size: 14px;}
.calendar-day{vertical-align: top;}

/* PATIENT */
.patient-free{background-color: #bde87c;}
.patient-booked{background-color: rgb(167, 167, 167);}
#patient-note{width: 350px; height: 150px;}
.patient-blocked{text-decoration: line-through; color: red;}

/* DOCTOR */
.doctor-info{background-color: #fff; padding: 30px; border-radius: 20px; max-width: 1080px; margin: 20px auto;}
.schedule-appointment{display: block; margin: 5px 0; border-radius: 10px; padding: 5px; position: relative; font-size: 12px;}
.appointment-doctor{background-color: #c6de7e;}
.appointment-patient{background-color: #f4c8cb;}
.appointment-non-schedule{background-color: #b0e9ff;}
.appointment-reason{font-size: 11px; margin-top: 2px;}
.add-doctor-appointment{position: absolute; right: 5px; top: 7px;}
.doctor-photo .image{border-radius: 10px; overflow: hidden;}
.deleted-hour td{background-color: #b8b8b8;}
.manage-table td:first-child{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.manage-table td:last-child{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.schedule-item .status{position: absolute; width: 20px; height: 20px; top: 3px; left: 3px; }
.schedule-item .status.missed{width: 100%; height: 100%; opacity: 0.5;}
.schedule-item .status.missed svg{width: 100%; height: 100%;}
.appointment-review{width: 600px;}
#header.sticky{top: -100px; transition: 0.2s; z-index: 3;}
#header.active{top: 0px;}

.color-yes{color: green;}
.color-yes-bg, .manage-index .color-yes-bg{background-color: green; color: #fff;}
.color-no{color: red;}
.color-no-bg, .manage-index .color-no-bg{background-color: red; color: #fff;}
.color-1{color: #73bdc4; fill: #73bdc4;}
#header a, #footer a{color: #4a8489}
.color-1-bg{background-color: #73bdc4;}

@media screen and (max-width: 1200px) {
  .manage-table .schedule-days{width: 19.5vw;}
  #menu-header-wrapper a{font-size: 18px;}
}

@media screen and (max-width: 1080px) {
  #logo-text{font-size: 32px;}
  .mobile-menu-open li{list-style-type: none; width: 45px; height: 2px; background-color: #000; margin: 10px 0; transition: 0.5s;}
  .mobile{display: block;}
  #mobile-bar{z-index: 4;}
  #mobile-menu{height: 100%; width: 100%; top: -100%; left: 0; position: fixed; z-index: 3;  padding-top: 100px; transition: 0.5s; overflow: auto;}
  .top-menu{margin: 0;}
  .mobile-menu-active{overflow: hidden;}
  .mobile-menu-active #mobile-menu{top: 0; background-color: #fff;}
  .mobile-menu-active .mobile-menu-open li:nth-child(2){width: 0;}
  .mobile-menu-active .mobile-menu-open li:nth-child(1){transform: rotate(45deg) translate(11px, 12px);}
  .mobile-menu-active .mobile-menu-open li:nth-child(3){transform: rotate(-45deg) translate(6px, -6px);}
  #mobile-menu-items{font-size: 25px; margin: 5px 0;}
}

@media screen and (max-width: 900px) {
    .schedule-item{padding: 15px 5px;}
    .manage-index, .manage-form{padding: 10px;}
    .manage-table th, .manage-table td{padding: 2px;}
    #patient-note{width: 200px;}
  .appointment-review{width: auto; max-width: 100%;}
  .manage-table .schedule-days{width: 32vw;}
}