.m-content {
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.m-content h2 {
  font-size: 2.2rem;
  line-height: 1.3em;
  margin: 1em 0 0.2em;
}

.m-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  color: #000000;
}
.m-timeline li {
  position: relative;
  padding: 7px 0 24px 38px;
  transition: all 100ms;
  min-height: 44px;
}
.m-timeline li::before, .m-timeline li::after {
  transition: all 100ms;
}
.m-timeline li.active::before {
  display: block;
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  z-index: 2;
  background: url(../images/ic_task_completed.png) no-repeat;
  background-size: cover;      
  width: 30px;
  height: 30px;
  border-radius: 50%;
}


.m-timeline li::before {
  display: block;
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  z-index: 2;
  background: url(../images/ic_task_pending.png) no-repeat;
  background-size: cover;      
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.m-timeline li::after {
  content: "";
  display: block;
  width: 1px;
  background-color: #C0C0C0;
  position: absolute;
  top: 0;
  left: 15px;
  height: 100%;
  z-index: 1;
}
.m-timeline li:first-child::after {
  top: 10px;
}
.m-timeline li:last-child::after {
  height: 10px;
}
.m-timeline__date {
  font-size: 1.0em;
    font-weight: 400;
    margin: 0 0 0.3em;
    color: #000000;
    font-family: system-ui;
}
.m-timeline p {
  margin: 0 0 0.5em;
  font-size: 1.0em;
}


.m-timeline_first_dose { padding-bottom: 100px !important; }
.m-timeline_second_dose { padding-bottom: 100px !important; }
.m-timeline_third_dose { padding-bottom: 100px !important; }
.m-timeline_fourth_dose { padding-bottom: 100px !important; }

.m-timeline_first_dose p[name=astrazeneca] { margin-right: 34px; float: right; text-align: left; }
.m-timeline_first_dose p[name=pfizer] { margin-right: 22px; float: right; text-align: left; }
.m-timeline_first_dose p[name=sinovac] { margin-right: 32px; float: right; text-align: left; }
.m-timeline_first_dose p[name=nil] { margin-right: 32px; float: right; text-align: left; }

.m-timeline_second_dose { padding-bottom: 140px; }
.m-timeline_second_dose p[name=astrazeneca] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_second_dose p[name=pfizer] { margin-right: 27px; float: right; text-align: left; }
.m-timeline_second_dose p[name=sinovac] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_second_dose p[name=nil] { margin-right: 40px; float: right; text-align: left; }

.m-timeline_third_dose { padding-bottom: 140px; }
.m-timeline_third_dose p[name=astrazeneca] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_third_dose p[name=pfizer] { margin-right: 27px; float: right; text-align: left; }
.m-timeline_third_dose p[name=sinovac] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_third_dose p[name=nil] { margin-right: 36px; float: right; text-align: left; }

.m-timeline_fourth_dose { padding-bottom: 140px; }
.m-timeline_fourth_dose p[name=astrazeneca] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_fourth_dose p[name=pfizer] { margin-right: 27px; float: right; text-align: left; }
.m-timeline_fourth_dose p[name=sinovac] { margin-right: 40px; float: right; text-align: left; }
.m-timeline_fourth_dose p[name=nil] { margin-right: 36px; float: right; text-align: left; }

.cancel-vaccine { color: #1a0dab; cursor: pointer; text-decoration: underline; }

@media (min-width: 800px) {
  .m-timeline li:nth-child(odd) {
    text-align: right;
    padding-left: 0;
    padding-right: calc(50% + 22px);
  }
  .m-timeline li:nth-child(even) {
    padding-left: calc(50% + 20px);
  }
  .m-timeline li::before, .m-timeline li.active::before {
    left: calc(50% - 10px);
  }
  .m-timeline li::after {
    left: 50.5%;
  }


  
}

.employee-no-vaccine { margin-top: 50px; margin-left: 20px; }
.employee-name-vaccine { margin-top: -20px; margin-left: 20px; }




@media (min-width: 320px) and (max-width: 568px) and (orientation: portrait) {
    /*.m-timeline li { padding: 7px 0 24px 32px; }*/
    .container { padding-left: 40px !important; }
    .sign-in .header-room img.avatar { width: 200px !important; }
    .m-timeline_first_dose p[name=sinovac] { margin-right: 160px !important; }
    .m-timeline_first_dose p[name=astrazeneca] { margin-right: 160px !important; }
    .m-timeline_first_dose p[name=pfizer] { margin-right: 121px !important; width: 120px; }
    .m-timeline_second_dose p[name=sinovac] { margin-right: 160px !important; }
    .m-timeline_second_dose p[name=astrazeneca] { margin-right: 160px !important; }
    .m-timeline_second_dose p[name=pfizer] { margin-right: 121px !important; width: 120px; }
    .m-timeline_third_dose p[name=pfizer] { margin-right: 121px !important; width: 120px; }
    .m-timeline_third_dose p[name=nil] { margin-right: 170px !important; }
    .footer { width: auto !important; }
}

@media (min-width: 375px) and (max-width: 667px) and (orientation: portrait) {
    .sign-in .header-room img.avatar { width: 270px !important; }
    .form-login { padding-left: 15% !important; }
    .container { padding-left: 60px !important;  padding-right: 0px !important; }

    #iframe_vaccination .navbar .navbar-inner .title { left: -30px !important; }
    .m-timeline_first_dose, .m-timeline_second_dose, .m-timeline_third_dose { padding-bottom: 20px !important;}
    .m-timeline_first_dose p,  .m-timeline_second_dose p, .m-timeline_third_dose p { float: none !important; }
}























/* ========== GENERAL ========== */

/* general */
body { font-family: 'Roboto', sans-serif; color: #666; font-size: 13px; font-weight: 400; background: #fff; line-height: 22px; }
.iframe { display: none; }
.iframe.active { display: block; }
h1,
h2,
h3,
h4,
h5,
h6 { line-height: 110%; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 500; color: #333; }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { margin: 0; }
ul { padding: 0; margin: 0; }
ul li { list-style-type: none; }
img { display: block; }
.container { padding-left: 80px; padding-right: 20px !important; }
.row { margin-bottom: 15px; }
.row:last-child { margin-bottom: 0; }
.page-content { padding-top: 0 !important; }



@-moz-document url-prefix() {
    .page-content {
        padding-bottom: 0 !important;
    }

    .page.page-home {
        padding-bottom: 44px !important;
    }

}

.fab {
    position: relative;
}

.ios a {
    color: #333;
}

.ios .toolbar { background: #fff; height: 48px; border-top-style: solid; border-top-color: #D3D3D3; border-top-width: .05em; }

.ios .toolbar-category {
    background: #fff;
}


.page.smart-select-page {
    padding: 12px 0;
}

.page.smart-select-page .list li .item-radio .icon-radio::after {
    color: #fc4721;
}

.segments {
    padding: 30px 0;
}

.segments-page {
    padding: 25px 0;
}

.separator {
    height: 0;
}

@media screen and (min--moz-device-pixel-ratio:0) {
    .separator {
        height: 0;
    }
}


/* date */
.date {
    font-size: 11px;
    color: #999;
}

/* ========== END GENERAL ========== */

/* ========== COMPONENT ========== */

/* searchbar */
.ios .searchbar .searchbar-input-wrap input {
    font-size: 13px;
    background: #fff;
    color: #333;
    border-radius: 20px;
    padding-left: 40px;
}

.ios .searchbar .searchbar-input-wrap .searchbar-icon {
    left: 16px;
}

.ios .searchbar .searchbar-input-wrap .searchbar-icon::after {
    color: #acacbc;
}

.ios .searchbar .searchbar-disable-button {
    font-size: 14px;
    color: #fc4721;
}

/* list */
.list { margin: 0; }
.list ul::before { display: none; }
.list ul::after { display: none; }
.list ul li a { padding: 0; height: 34px; font-size: 14px; font-weight: 500; }
.list ul li a.active-state { background: transparent; }
.list ul li a::before { color: #888; right: 0; font-size: 14px; }
.list ul li a::after { display: none; }
.list ul li a.item-content { padding: 0; }
.list .item-content { min-height: 34px; }
.list .item-content .item-inner { min-height: 34px; padding: 0; padding-right: 16px; }
.list .item-content .item-inner .item-title { height: 34px; line-height: 34px; font-size: 14px; font-weight: 500; }
.list .item-content .item-inner .item-after { color: #888; }
.list .item-content .item-inner .item-after .toggle { height: 22px; width: 42px; }
.list .item-content .item-inner .item-after .toggle .toggle-icon { height: 20px; width: 39px; background: #6c6c84; }
.list .item-content .item-inner .item-after .toggle .toggle-icon::before { height: 16px; width: 35px; background: #6c6c84; }
.list .item-content .item-inner .item-after .toggle .toggle-icon::after { height: 16px; width: 16px; }
.list .item-content .item-inner .item-after .toggle input[type="checkbox"]:checked + .toggle-icon { background: #1948ff; }
.list .item-content .item-inner .item-after .toggle input[type="checkbox"]:checked + .toggle-icon::after { transform: translateX(calc(50px - 31px)); }
.list .item-link.item-content { min-height: 44px; }
.list .item-link.active-state { background: transparent; }

.list .item-link .item-inner::before { color: #888; font-size: 14px; right: 0; }
.list .item-link .item-inner .item-title { font-size: 14px; font-weight: 500; }
.list .item-link .item-inner::after { display: none; }
.list .item-inner::after { display: none; }

/* ios */
.ios .toolbar.toolbar-bottom::before {
    display: none;
}

.ios .toolbar.tabbar-labels a.tab-link { padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; }


div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
}

.caption-active { display: block; font-size: 11px; color: #3B9FE5; }

.caption { display: block; font-size: 11px; color: #666666; }



.ios .toolbar.tabbar-labels a.tab-link.tab-link-active {
    color: #0e0e4c;
}

.ios .toolbar.tabbar-labels a.tab-link .tabbar-label {
    font-size: 10px;
}

/* navbar */
.navbar {
    background: #fff;
}

.navbar.navbar-home {
    background: #fff;
}

.navbar.navbar-home .navbar-inner {
    padding-top: 10px;
}

.navbar.navbar-home .right a {
    display: flex;
}

.navbar.navbar-home .right a h4 {
    margin-top: 5px;
    margin-right: 10px;
    font-size: 15px;
}

.navbar.navbar-home .right a img {
    width: 28px;
    height: 100%;
    border-radius: 50%;
}

.navbar.navbar-home .subnavbar {
    background: #fff;
}

.navbar.navbar-home .subnavbar .subnavbar-inner .toolbar {
    background: #fff;
    box-shadow: none;
}






.navbar-bg {
    background: #fff;
}

.navbar-bg::after {
    display: none;
}

/* news content */
.news-content {
    margin-bottom: 10px;
}

.news-content:last-child {
    margin-bottom: 0;
}

/* subnavbar */
.subnavbar {
    background: #fff;
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.1);
}

.subnavbar .subnavbar-inner {
    padding: 0;
}

.subnavbar .subnavbar-inner .tab-link {
    font-size: 13px;
    font-weight: 500;
}

.subnavbar .subnavbar-inner .tab-link.tab-link-active {
    color: #fc4721;
}

.subnavbar::after {
    display: none;
}

/*swiper pagination*/
.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    transition: .3s ease-in-out;
    opacity: 1;
    background: #f6c086;
}

.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: transparent;
    vertical-align: middle;
    border: 2px solid #f6c086;
}

/* social media color */
.bg-facebook {
    background: #3b5999 !important;
}

.bg-twitter {
    background: #55acee !important;
}

.bg-google {
    background: #dd4b39 !important;
}

.ti-facebook {
    color: #3b5999 !important;
}

.ti-google {
    color: #dd4b39 !important;
}

.bg-instagram {
    background: #e4405f !important;
}

.ti-twitter {
    background: #55acee !important;
    color: #fff;
}

.ti-instagram {
    background: #e4405f !important;
    color: #fff;
}

.ti-linkedin-in {
    background: #0077B5 !important;
    color: #fff;
}

.ti-whatsapp {
    background: #25D366 !important;
    color: #fff;
}

.ti-youtube {
    background: #cd201f !important;
    color: #fff;
}

/* category tag */
.category-tag {
    color: #fc4721;
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.category-tag i {
    margin: 0 6px;
    color: #777;
    font-size: 5px;
    vertical-align: middle;
}

#tab-home .page-content {
    padding-top: 64px;
    padding-bottom: 0;
}

.page-content a.nav-back {
    position: fixed;
    top: 20px;
    left: 16px;
    z-index: 99;
}

.page-content a.nav-back i {
    color: #2c374c;
    background: #f6c086;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
}

/* ========== END COMPONENT ========== */

/* ========== PAGE CONTENT CUSTOM ========== */

/* tab home */

.tab-discover {
    will-change: scroll-position;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
    overflow-x: hidden;
}



.tab-pages {
    will-change: scroll-position;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
    overflow-x: hidden;
}

.tab-pages .searchbar-backdrop {
    position: fixed;
}

/* ========== END PAGE CONTENT CUSTOM ========== */

/* ========== FORM ========== */

/* form */
form.list input { font-size: 15px !important; color: #333 !important; height: 32px !important; }

form.answer-list input { color: #333 !important; height: 25px !important; margin-right: 10px; }

form.list textarea {
    font-size: 13px !important;
    background: #f5f5fb !important;
    border-radius: 18px !important;
    padding: 10px !important;
    color: #333 !important;
}

form.list ul::before {
    display: none;
}

form.list ul::after {
    display: none;
}

form.list ul .item-content {
    padding-left: 0;
}

form.list ul .item-content .item-inner {
    padding: 0;
}

form.list ul .item-content .item-inner::before {
    display: none;
}

form.list ul .item-content .item-inner .item-input-wrap { margin-top: 0; margin-bottom: 20px; border: none; border-bottom: 0.05rem solid #9fa6ad; }
.text-employee { background-image: url(../images/ic_login_user.png) !important; padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.text-password { background-image: url(../images/ic_login_password_key.png) !important; padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }

form.list ul .item-content .item-inner .item-input-wrap textarea {
    font-size: 13px;
    border: 1px solid #f5f5fb;
    background: transparent;
    border-radius: 18px;
    padding: 10px;
    color: #fff;
}

form.list ul .item-content .item-inner .item-input-wrap select {
    font-size: 13px;
    background: #f5f5fb;
    color: #333;
    height: 32px;
    border-radius: 20px;
    padding: 0 16px;
}

form.list ul .item-content .item-inner .item-input-wrap.input-dropdown-wrap::before {
    border-top-color: #888;
    right: 16px;
}

.ios .item-input-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

/* placeholder */
::-webkit-input-placeholder {
    color: #acacbc !important;
    opacity: 1;
}

::-moz-placeholder {
    color: #acacbc !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #acacbc !important;
    opacity: 1;
}

:-moz-placeholder {
    color: #acacbc !important;
    opacity: 1;
}

/* ========== END FORM ========== */

/* ========== TITLE ========== */

/* section title */
.section-title {
    margin-top: 30px;
    margin-bottom: 16px;
}

.section-title h3 {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 17px;
}

.section-title h3 .see-all-link {
    float: right;
    color: #fc4721;
    font-size: 12px;
    font-weight: 500;
}

.section-title.section-title-large h3 {
    font-size: 22px;
}

/* title for form */
.title-form {
    margin-bottom: 16px;
}

.title-form h3 {
    font-size: 24px;
    font-weight: 700;
}

/* wrap title */
.wrap-title {
    margin-bottom: 10px;
}

.wrap-title h3 {
    font-size: 16px;
}

.wrap-title h3 i {
    margin-right: 8px;
    color: #fe301b;
}

.wrap-title h3 a {
    float: right;
    color: #fc4721;
    font-size: 13px;
    font-weight: 500;
}

/* title post */
.title-post {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
}

/* ========== END TITLE ========== */

/* ========== DIVIDER ========== */

/*divider line*/
.divider-line {
    background: #e3e3e9;
    width: 100%;
    height: 1px;
    margin: 15px 0;
    display: flex;
}

/*divider space*/
.divider-space-text {
    margin: 8px 0;
    display: flex;
}

.divider-space-content {
    margin: 15px 0;
    display: flex;
}

/* ========== END DIVIDER ========== */

/* ========== BUTTON DEFAULT ========== */

/* button default */
.button {
    background: #f6c086;
    border-radius: 20px;
    padding: 0 20px;
    height: 30px;
    line-height: 29px;
    font-size: 13px;
    font-weight: 500;
    color: #2c374c;
    text-transform: none;
    margin-top: 16px;
}


.button:focus {
    background: #f6c086;
    color: #2c374c;
    outline: 0;
}

.wrap-button .button {
    width: auto;
    margin: 0 auto;
    margin-top: 16px;
    color: #2c374c;
}

/* ========== END BUTTON DEFAULT ========== */

/* ========== TAB HOME ========== */

/* home header */
.home-header {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url(../images/header-home.jpg);
    background-size: cover;
    width: 100%;
    height: 370px;
    background-position: center center;
}

.home-header .searchbar {
    padding-top: 30px;
    background: transparent;
}

.home-header .searchbar::after {
    display: none;
}

.form-box.quick-reservation-home {
    position: relative;
    top: -210px;
    margin-bottom: -210px;
}

.form-box.quick-reservation-home .header-caption {
    margin-bottom: 30px;
}

.form-box.quick-reservation-home .header-caption .header-title {
    width: 50%;
}

.form-box.quick-reservation-home .header-caption .header-title h2 {
    color: #fff;
    font-weight: 700;
    line-height: 40px;
    font-size: 32px;
    text-shadow: 0 5px 16px black;
}

.form-box .form-content { padding: 16px; border-radius: 18px; width: 80%; }
.form-questionaire-box .form-questionaire { background: #F8F8FF; padding: 12px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.form-questionaire-box .form-empty-questionaire { background-color: transparent; padding: 20px; }
.form-answer-box .form-answer { background: #fff; padding: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } 
.question-container { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 10px; }

.prior-question-content { font-size: 14px; font-weight: bold; }
.prior-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.appointment-date, .completion-date { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; background: url(../images/ic_calendar_view.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }


.form-vaccination-box .form-empty-vaccination { background-color: transparent; padding: 20px; }
.form-vaccination-box .form-vaccination { background: #F8F8FF; padding: 12px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.vaccine-container { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 10px; }
/*.form-vaccination-box:first-child { display: block; }
.form-vaccination-box:nth-child(3) { display: block !important; }
.form-answer-box:nth-child(4) { display: block !important; }*/

.first-question-content, .vfirst-question-content { font-size: 14px; font-weight: bold; }
.first-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.first-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.first-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }


.vaccine-astrazeneca { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vaccine-cansino { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vaccine-janssen { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vaccine-pfizer { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vaccine-sinopharm { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vaccine-sinovac { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }


.second-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.second-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.second-question-content, .vsecond-question-content { font-size: 14px; font-weight: bold; }
.second-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.third-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.third-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.third-question-content, .vthird-question-content { font-size: 14px; font-weight: bold; }
.third-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.fourth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.fourth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.fourth-question-content, .vfourth-question-content { font-size: 14px; font-weight: bold; }
.fourth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.fifth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.fifth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.fifth-question-content, .vfifth-question-content { font-size: 14px; font-weight: bold; }
.fifth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.sixth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.sixth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.sixth-question-content, .vsixth-question-content { font-size: 14px; font-weight: bold; }
.sixth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.seventh-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.seventh-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.seventh-question-content, .vseventh-question-content { font-size: 14px; font-weight: bold; }
.seventh-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.eighth-question-content, .veighth-question-content { font-size: 14px; font-weight: bold; }
.eight-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.eight-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.eight-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }





.nineth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.nineth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vnineth-question-content { font-size: 14px; font-weight: bold; }
.nineth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.tenth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.tenth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vtenth-question-content { font-size: 14px; font-weight: bold; }
.tenth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.eleventh-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.eleventh-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.veleventh-question-content { font-size: 14px; font-weight: bold; }
.eleventh-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.twelveth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.twelveth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vtwelveth-question-content { font-size: 14px; font-weight: bold; }
.twelveth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.thirteenth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.thirteenth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vthirteenth-question-content { font-size: 14px; font-weight: bold; }
.thirteenth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }

.fourteenth-answer-no { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.fourteenth-answer-yes { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.vfourteenth-question-content { font-size: 14px; font-weight: bold; }
.fourteenth-other-answer { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; margin-top: 5px !important; font-family: system-ui !important; }





.remember-me { position: relative; display: inline-block; margin-bottom: 5px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.footerWrap { width: 100%; position: fixed; bottom: 0px; }
.footer { width: 400px; margin: auto; }
.footerContent { float: left; width: 100%; color: #000000; padding: 20px 0; }
.footer p { float: left; width: 100%; text-align: center; font-size: 14px; font-family: system-ui; }

.form-box .form-content.reservation-form .list ul {
    background: #fff;
}

.form-box .form-content.reservation-form .list ul .row {
    margin-bottom: 0;
}

.form-box .form-content.reservation-form .list ul .row .item-input-wrap {
    margin-bottom: 10px !important;
}

.form-box .form-content.reservation-form .list ul li:last-child .item-input-wrap {
    margin-bottom: 0;
}

/* calendar on home and room details */
.calendar .toolbar-top .toolbar-inner .link {
    color: #000;
    font-weight: bold;
}

.calendar .toolbar-top::after {
    display: none;
}

.calendar .calendar-footer .calendar-close {
    color: #f6c086;
}

.calendar .calendar-footer::before {
    display: none;
}

.calendar-row::before {
    display: none;
}

.calendar-row .calendar-day.calendar-day-today .calendar-day-number {
    background-color: #1a73e8;
}

.calendar-row .calendar-day.calendar-day-selected .calendar-day-number {
    background: #aecbfa;
}

/* room category */
.room-category.segments {
    padding-bottom: 0;
}

.room-category .swiper-wrapper .swiper-slide {
    width: 120px;
    border-radius: 18px;
    background: #f5f5fb;
}

.room-category .swiper-wrapper .swiper-slide .image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.room-category .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    border-radius: 18px;
}

.room-category .swiper-wrapper .swiper-slide .image .symbol-info {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #f6c086;
    text-align: center;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    padding-left: 0px;
}

.room-category .swiper-wrapper .swiper-slide .image .symbol-info span {
    color: #0e0e4c;
    margin-left: 6px;
    margin-top: 3px;
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
}

.room-category .swiper-wrapper .swiper-slide .image-caption {
    padding: 12px;
}

.room-category .swiper-wrapper .swiper-slide .image-caption h6 {
    font-size: 13px;
}

/* favorite rooms */
.favorite-rooms .swiper-slide {
    position: relative;
}

.favorite-rooms .swiper-slide .mask {
    background: linear-gradient(rgba(0, 0, 0, 0), black);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
}

.favorite-rooms .swiper-slide img {
    width: 100%;
    border-radius: 18px;
}

.favorite-rooms .swiper-slide .image-caption {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
}

.favorite-rooms .swiper-slide .image-caption h4 {
    margin-bottom: 6px;
    color: #fff;
}

.favorite-rooms .swiper-slide .image-caption .rate-product li {
    display: inline-block;
}

.favorite-rooms .swiper-slide .image-caption .rate-product li i {
    color: #f6a086;
    font-size: 12px;
}

.favorite-rooms .swiper-slide .image-caption .price-room {
    text-align: right;
    position: relative;
    top: 3px;
}

.favorite-rooms .swiper-slide .image-caption .price-room h5 {
    margin-bottom: 3px;
    color: #f6a086;
}

.favorite-rooms .swiper-slide .image-caption .price-room p {
    font-size: 11px;
    color: #888;
}

/* services */
.services .swiper-wrapper .swiper-slide {
    width: 120px;
    border-radius: 18px;
    background: #f5f5fb;
}

.services .swiper-wrapper .swiper-slide .image {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

.services .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    border-radius: 18px;
}

.services .swiper-wrapper .swiper-slide .image .symbol-info {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #f6c086;
    text-align: center;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    padding-left: 0px;
}

.services .swiper-wrapper .swiper-slide .image .symbol-info span {
    color: #0e0e4c;
    margin-left: 6px;
    margin-top: 3px;
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
}

.services .swiper-wrapper .swiper-slide .image-caption {
    padding: 12px;
    text-align: center;
}

.services .swiper-wrapper .swiper-slide .image-caption h6 {
    font-size: 13px;
}

/* room promo */
.room-promo .content img {
    width: 100%;
    border-radius: 18px;
}

/* newsletter */
.newsletter {
    text-align: center;
    padding: 16px;
    background: #d0d7f2;
    border-radius: 18px;
}

.newsletter .list .item-content {
    padding-left: 0;
}

.newsletter .list .item-content .item-inner {
    padding-right: 0;
}

.newsletter .list .item-content .item-inner .item-input-wrap input {
    background: #fff !important;
}

/* ========== END TAB HOME ========== */

/* ========== TAB PROFILE ========== */

/* header profile */
.header-profile {
    padding: 30px 0;
}

.header-profile .header-content {
    display: flex;
}

.header-profile .header-content img {
    float: left;
    width: 50px;
    height: 100%;
    border-radius: 50%;
    margin-right: 10px;
}

.header-profile .header-content .title-name {
    overflow: hidden;
}

.header-profile .header-content .title-name h5 {
    font-weight: 700;
    margin-bottom: 5px;
}

.header-profile .header-content .title-name p {
    color: #888;
}

.header-profile .header-content .title-name p i {
    margin-right: 10px;
}

/* profile statistics */
.profile-statistics.segments {
    padding-bottom: 0;
}

.profile-statistics .content {
    text-align: center;
}

.profile-statistics .content h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.profile-statistics .content p {
    color: #b4b4b4;
}

/* rooms on profile */
.rooms.just-seen-room {
    background: #fff;
    box-shadow: 0 -8px 16px -5px rgba(0, 0, 0, 0.09);
    border-radius: 30px 30px 0 0;
    padding-top: 30px;
}

.rooms.just-seen-room .section-title {
    margin-top: 0;
}

.rooms.just-seen-room .content {
    background: #f5f5fb;
    border-radius: 18px;
}

.rooms.just-seen-room .content img {
    width: 100%;
    border-radius: 18px;
}

.rooms.just-seen-room .content .image-text {
    padding: 16px;
}

.rooms.just-seen-room .content .image-text h4 {
    margin-bottom: 6px;
    font-size: 16px;
}

.rooms.just-seen-room .content .image-text .rate-product li {
    display: inline-block;
}

.rooms.just-seen-room .content .image-text .rate-product li i {
    color: #f6a086;
    font-size: 12px;
}

.rooms.just-seen-room .content .image-text .price-room {
    text-align: right;
}

.rooms.just-seen-room .content .image-text .price-room h5 {
    margin-bottom: 3px;
}

.rooms.just-seen-room .content .image-text .price-room p {
    font-size: 11px;
    color: #888;
}

/* ========== END TAB PROFILE ========== */

/* ========== TAB ROOMS ========== */

/* room on tab rooms */
.rooms .content {
    background: #f5f5fb;
    border-radius: 18px;
}

.rooms .content img {
    width: 100%;
    border-radius: 18px;
}

.rooms .content .image-text {
    padding: 16px;
}

.rooms .content .image-text h4 {
    margin-bottom: 6px;
    font-size: 16px;
}

.rooms .content .image-text .rate-product li {
    display: inline-block;
}

.rooms .content .image-text .rate-product li i {
    color: #f6a086;
    font-size: 12px;
}

.rooms .content .image-text .price-room {
    text-align: right;
}

.rooms .content .image-text .price-room h5 {
    margin-bottom: 3px;
    color: #2c374c;
}

.rooms .content .image-text .price-room p {
    font-size: 11px;
    color: #888;
}

/* ========== END TAB ROOMS ========== */

/* ========== TAB DISCOVER ========== */

/* discover */
.discover .discover-slide .swiper-wrapper .swiper-slide {
    width: 240px;
    height: 100%;
    position: relative;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .mask {
    background: linear-gradient(rgba(0, 0, 0, 0), black);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide img {
    width: 100%;
    border-radius: 18px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .availability-info {
    position: absolute;
    top: 16px;
    right: 16px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .availability-info i {
    color: #fff;
    font-size: 14px;
    margin-right: 3px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .availability-info span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption h4 {
    margin-bottom: 6px;
    color: #fff;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption .rate-product li {
    display: inline-block;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption .rate-product li i {
    color: #f6a086;
    font-size: 12px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption .price-room {
    text-align: right;
    position: relative;
    top: 3px;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption .price-room h5 {
    margin-bottom: 3px;
    color: #f6a086;
}

.discover .discover-slide .swiper-wrapper .swiper-slide .image-caption .price-room p {
    font-size: 11px;
    color: #888;
}

.discover .popular-room .swiper-wrapper .swiper-slide {
    width: 130px;
    border-radius: 18px;
    background: #f5f5fb;
}

.discover .popular-room .swiper-wrapper .swiper-slide img {
    width: 100%;
    border-radius: 18px;
}

.discover .popular-room .swiper-wrapper .swiper-slide .image-caption {
    padding: 12px;
}

.discover .popular-room .swiper-wrapper .swiper-slide .image-caption h4 {
    font-size: 13px;
    margin-bottom: 3px;
}

.discover .popular-room .swiper-wrapper .swiper-slide .image-caption .rate-product li {
    display: inline-block;
}

.discover .popular-room .swiper-wrapper .swiper-slide .image-caption .rate-product li i {
    color: #f6a086;
    font-size: 10px;
}

.discover .category-room .swiper-wrapper .swiper-slide {
    width: 130px;
    border-radius: 18px;
    background: #f5f5fb;
}

.discover .category-room .swiper-wrapper .swiper-slide .image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image img {
    width: 100%;
    border-radius: 18px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image .symbol-info.info-disc {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #f6c086;
    text-align: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding-left: 0px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image .symbol-info.info-disc ul {
    color: #0e0e4c;
    margin-left: 6px;
    margin-top: 18px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image .symbol-info.info-disc ul li {
    font-weight: 500;
    font-size: 12px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image .symbol-info.info-disc ul li:last-child {
    font-size: 10px;
    color: #fff;
    top: -8px;
    position: relative;
}

.discover .category-room .swiper-wrapper .swiper-slide .image-caption {
    padding: 12px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image-caption h4 {
    font-size: 13px;
    margin-bottom: 3px;
}

.discover .category-room .swiper-wrapper .swiper-slide .image-caption .rate-product li {
    display: inline-block;
}

.discover .category-room .swiper-wrapper .swiper-slide .image-caption .rate-product li i {
    color: #f6a086;
    font-size: 10px;
}

/* ========== END TAB DISCOVER ========== */

/* ========== PAGES ========== */

/* room single */
.room-single .header-room {
    width: 100%;
    height: 350px;
}

.room-single .header-room img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 6px 35px -10px rgba(0, 0, 0, 0.28);
}

.room-single .room-title h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

.room-single .room-title .rate-product li {
    display: inline-block;
}

.room-single .room-title .rate-product li i {
    color: #f6a086;
    font-size: 12px;
}

.room-single .room-title .rate-product li:last-child {
    margin-left: 10px;
    color: #888;
}

.room-single .room-title .price-room {
    text-align: right;
}

.room-single .room-title .price-room h5 {
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: 700;
}

.room-single .room-title .price-room p {
    font-size: 11px;
    color: #888;
}

.room-single .room-facilities .swiper-slide {
    width: 50px;
}

.room-single .room-facilities .swiper-slide .content {
    text-align: center;
}

.room-single .room-facilities .swiper-slide .content i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background: #f2f2f2;
    color: #f6a086;
    display: block;
    border-radius: 18px;
    margin-bottom: 6px;
}

.room-single .room-facilities .swiper-slide .content p {
    font-weight: 500;
    color: #888;
}

.room-single .room-gallery .swiper-slide {
    width: 140px;
}

.room-single .room-gallery .swiper-slide img {
    width: 100%;
    border-radius: 18px;
}

/* form box on room details */
.form-login { position: absolute; top: 50px; padding-left: 20%; padding-right: 20%; width: 50%; text-align: center; }
.form-box { position: relative; top: -100px; margin-bottom: -100px; }
.form-questionaire-box, .form-vaccination-box { position: relative; top: 60px; }
.form-answer-box { position: relative; top: 50px; }
.form-content { padding: 16px; border-radius: 18px; }

.form-content.reservation-form .list ul {
    background: #fff;
}

.form-content.reservation-form .list ul .row {
    margin-bottom: 0;
}

.form-content.reservation-form .list ul .row .item-input-wrap {
    margin-bottom: 10px !important;
}

.form-content.reservation-form .list ul li:last-child .item-input-wrap {
    margin-bottom: 0;
}

/* blog */
.blog {
    margin-top: 25px;
}

.blog .content {
    margin-bottom: 25px;
}

.blog .content img {
    width: 100%;
    border-radius: 25px;
    margin-bottom: 15px;
}

.blog .content h5 {
    margin-bottom: 5px;
}

.blog .content span {
    margin-bottom: 7px;
    display: block;
}

.blog .content span i {
    margin-right: 10px;
}

.blog .button {
    margin-bottom: 25px;
}

.blog p {
    margin-bottom: 8px;
}

.share-media li {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
}

.share-media li a i {
    color: #333;
    background: #fff !important;
    margin-right: 5px;

}

.share-media li a i.ti-facebook {
    color: #333 !important;
}

.post-comments h5  {
    margin-bottom: 16px;
}

.post-comments input, .post-comments textarea {
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 8px 20px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.post-comments textarea {
    color: #999;
}

/* about us */
.about-us .header-about {
    width: 100%;
    height: 350px;
}

.about-us .header-about img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 6px 35px -10px rgba(0, 0, 0, 0.28);
}

.about-us .section-title h4 {
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    color: #666;
}

.about-us .section-title h3 {
    font-size: 23px;
    color: #0e0e4c;
}

.about-us .about-statistics .content {
    text-align: center;
}

.about-us .about-statistics .content h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.about-us .about-statistics .content p {
    color: #b4b4b4;
}

/* contact us */
.page-content.contact-no-pd {
    padding-top: 0;
}

.contact-us {
    position: relative;
}

.contact-us.segments {
    padding-top: 16px;
}

.contact-us a.nav-back {
    position: absolute;
    top: 32px;
    right: 16px;
    left: auto;
}

.contact-us a.nav-back i {
    color: #2c374c;
    background: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.9);
}

.contact-us .content-map .map {
    width: 100%;
    height: 410px;
    border: 0;
    border-radius: 18px;
}

/* contact form on contact us page */
.contact-form {
    width: calc(100% - 15px * 2);
    height: auto;
    border-radius: 18px;
    margin: 16px;
    text-align: center;
    top: auto;
    bottom: 0;
    padding: 16px;
}

.contact-form .list .item-content:last-child .item-input-wrap {
    margin-bottom: 0;
}

/* sign in */
.sign-in .header-room {
    width: 100%;
    height: 300px;
}

.sign-in .header-room img.login-bg { width: 100%; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 35px -10px; max-height: calc(100vh - 0.01rem); }
.sign-in .header-room img.avatar { width: 270px; }

.sign-in .link-to p {
    color: #888;
}

.sign-in .link-to p a {
    font-weight: 500;
    margin-left: 10px;
    color: #2c374c;
}

.sign-in .sign-with ul li {
    display: inline-block;
    margin-right: 10px;
}

.sign-in .sign-with ul li:first-child {
    margin-right: 16px;
    color: #888;
}

.sign-in .sign-with ul li:last-child {
    margin-right: 0;
}

.sign-in .sign-with ul li a i {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    border-radius: 16px;
    font-size: 14px;
}

/* sign up */
.sign-up .header-room {
    width: 100%;
    height: 300px;
}

.sign-up .header-room img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 6px 35px -10px rgba(0, 0, 0, 0.28);
}

.sign-up .link-to p {
    color: #888;
}

.sign-up .link-to p a {
    font-weight: 500;
    margin-left: 10px;
    color: #2c374c;
}

.sign-up .sign-with ul li {
    display: inline-block;
    margin-right: 10px;
}

.sign-up .sign-with ul li:first-child {
    margin-right: 16px;
    color: #888;
}

.sign-up .sign-with ul li:last-child {
    margin-right: 0;
}

.sign-up .sign-with ul li a i {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    border-radius: 16px;
    font-size: 14px;
}

/* page not found */
.page-not-found .header-room {
    width: 100%;
    height: 300px;
}

.page-not-found .header-room img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 6px 35px -10px rgba(0, 0, 0, 0.28);
}

.page-not-found .content {
    text-align: center;
    background: #f6c086;
    border-radius: 18px;
    position: relative;
    top: -100px;
    margin-bottom: -100px;
    height: 310px;
}

.page-not-found .content .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

.page-not-found .content .title h1 {
    color: #2c374c;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-not-found .content .title h1:last-child {
    margin-bottom: 0;
}

.page-not-found .content a.nav-back {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
}

.page-not-found .content a.nav-back i {
    color: #2c374c;
    background: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
}

/* ========== END PAGES ========== */
.link, .tab-link { display: inline-flex; align-items: center; align-content: center; justify-content: center; position: relative; box-sizing: border-box; z-index: 1; }
.tabbar .link, .tabbar .tab-link, .tabbar-labels .link, .tabbar-labels .tab-link { height: 100%; width: 100%; box-sizing: border-box; display: initial; justify-content: center; align-items: center; flex-direction: column; text-transform: var(--f7-tabbar-link-text-transform); font-weight: var(--f7-tabbar-link-font-weight); letter-spacing: var(--f7-tabbar-link-letter-spacing); overflow: hidden; }
.navbar.navbar-page { height: 45px; box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.06); background-image: url('../images/ic_actionbar_bg.png') !important; background-repeat: no-repeat !important; background-size: cover !important; }
.navbar .title { position: relative; white-space: nowrap; flex-shrink: 10; font-weight: var(--f7-navbar-title-font-weight); display: inline-block; line-height: var(--f7-navbar-title-line-height); text-align: var(--f7-navbar-title-text-align); font-size: var(--f7-navbar-title-font-size); margin-left: var(--f7-navbar-title-margin-left); margin-right: var(--f7-navbar-title-margin-left); }

.toolbar-bottom { bottom: 0; background: #fff; height: 45px; border-top-style: solid; border-top-color: #D3D3D3; border-top-width: .05em; }
.toolbar-inner { margin: .5rem; position: relative; float: right; left: 0; top: 0; height: 100%; display: flex; justify-content: space-between; box-sizing: border-box; align-items: center; align-content: center; overflow: hidden; padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left)); }

.button-login { outline: none; background: linear-gradient(#6d8b93, #6d8b93, #31535c); border: none; border-radius: 5px; padding: 0 20px; height: 40px; line-height: 29px; font-size: 13px; color: #FFFFFF; margin-top: 16px; }
.button-submission { margin-right: 1rem; background-color: #4169E1; border: none; border-radius: 5px; height: 30px; color: #FFFFFF; font-family: system-ui; width: 70px; outline: none; cursor: pointer; }
.button-cancel { margin-right: 1rem; background-color: transparent; border: none; border-radius: 5px; font-weight: bold; font-family: system-ui; color: #000000; width: 80px; outline: none; cursor: pointer; }
.button-add { z-index: 999999; border-radius: 50%; background-position: 9px !important; background-size: 30px 30px !important; background-image: url(../images/ic_add_new.png) !important; background-repeat: no-repeat !important; background-color: #4169E1; border: none; display: flex; font-family: system-ui; justify-content: center; cursor: pointer; width: 50px; height: 50px; font-weight: bold; font-size: 22px; color: #fff; position: absolute; transform: translate(2px, -60%); bottom: 2rem; right: 1rem; outline: none; }

.ios .toolbar.tabbar-labels a.tab-link.places-visited { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_places_visited.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.news { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_news.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.notifications { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_notification.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.health { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_prehealth.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.profile { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_user_profile.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }

.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.places-visited { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_selected_places_visited.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.news { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_selected_news.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.notifications { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_notification.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.health { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_prehealth.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.profile { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_user_profile.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }

.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.places-visited > span { color: #3B9FE5 !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.news > span { color: #3B9FE5 !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.notifications > span { color: #3B9FE5 !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.health > span { color: #3B9FE5 !important; }
.ios .toolbar.tabbar-labels a.tab-link.tab-link-active.profile > span { color: #3B9FE5 !important; }

.toolbar.tabbar-labels a.tab-link.places-visited { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_places_visited.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.news { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_news.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.notifications { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_notification.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.health { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_prehealth.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.profile { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_unselected_user_profile.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }

.toolbar.tabbar-labels a.tab-link.tab-link-active.places-visited { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_selected_places_visited.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.news { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url('../images/ic_selected_news.png'); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.notifications { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_notification.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.notifications { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_prehealth.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.profile { height: 50px; padding-top: 7px; padding-bottom: 7px; color: #aaa; justify-content: center; background-image: url(../images/ic_selected_user_profile.png); padding-left: 40px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 23px 23px !important; }

.toolbar.tabbar-labels a.tab-link.tab-link-active.places-visited > span { color: #3B9FE5 !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.news > span { color: #3B9FE5 !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.notifications > span { color: #3B9FE5 !important; }
.toolbar.tabbar-labels a.tab-link.tab-link-active.profile > span { color: #3B9FE5 !important; }

.navbar a.link { background-image: url(../images/ic_arrow_back.png); padding-left: 35px !important; background-repeat: no-repeat !important; background-position: 0px 10px !important; background-size: 23px 23px !important; height: var(--f7-navbar-link-height,var(--f7-navbar-height)); margin-left: 10px; }
.navbar .navbar-inner { padding-left: 12px; padding-right: 12px; position: absolute; }
.navbar-inner { left: 35%; bottom: 0; margin: 0 auto; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left)); transform: translate3d(0,0,0); }
.navbar .navbar-inner .title { font-size: 15px; color: #ffffff; font-weight: 500; font-family: system-ui; }

.tab-news { will-change: scroll-position; overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100%; position: relative; z-index: 1; padding-bottom: 50px; overflow-x: hidden; }
.tab-profile { will-change: scroll-position; overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100%; position: relative; z-index: 1; padding-bottom: 50px; overflow-x: hidden; }
.tab-notifications { will-change: scroll-position; overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100%; position: relative; z-index: 1; padding-bottom: 50px; overflow-x: hidden; }
.tab-health { will-change: scroll-position; overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; height: 100%; position: relative; z-index: 1; padding-bottom: 50px; overflow-x: hidden; }


.header-places-visited-name { color: #000000; font-weight: bold; font-family: system-ui; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 250px; }
.detail-places-visited-date-out { font-size: 13px; font-family: system-ui; margin-bottom: -4px; margin-top: 5px; }
.detail-places-visited-purpose-visit { font-size: 13px; font-family: system-ui; margin-bottom: 10px; }

.header-test-kit-name { color: #000000; font-weight: bold; font-family: system-ui; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 250px; }
.detail-test-date { font-size: 13px; font-family: system-ui; margin-bottom: -4px; margin-top: 5px; }
.detail-test-purpose { font-size: 13px; font-family: system-ui; margin-bottom: 10px; }

.header-crossborder-staff { color: #000000; font-weight: bold; font-family: system-ui; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-left: 10px; }
.header-crossborder-date { float: right; font-size: 11px; font-family: system-ui; color: #708090; font-weight: 400; }
.detail-crossborder-message { font-size: 13px; font-family: system-ui; line-height: 1.2rem; padding-top: 10px; padding-left: 10px; }

.item-self-test-positive { background-image: url(../images/ic_covid_positive.jpg); padding-left: 70px !important; padding-right: 20px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 70px 70px !important; height: 75px; margin-bottom: 10px; }
.item-self-test-negative { background-image: url(../images/ic_covid_negative.jpg); padding-left: 70px !important; padding-right: 20px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 70px 70px !important; height: 75px; margin-bottom: 10px; }





.item-places-visited { background-image: url(../images/ic_places_visited_default.png); padding-left: 70px !important; background-repeat: no-repeat !important; background-position: 10px !important; background-size: 60px 60px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="JHR"] { background-image: url(../images/ic_states_johor.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="KDH"] { background-image: url(../images/ic_states_kedah.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="KTN"] { background-image: url(../images/ic_states_kelantan.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="MLK"] { background-image: url(../images/ic_states_melaka.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="NSN"] { background-image: url(../images/ic_states_negeri_sembilan.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="PHG"] { background-image: url(../images/ic_states_pahang.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="PRK"] { background-image: url(../images/ic_states_perak.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="PLS"] { background-image: url(../images/ic_states_perlis.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="PNG"] { background-image: url(../images/ic_states_pulau_pinang.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="SBH"] { background-image: url(../images/ic_states_sabah.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="SWK"] { background-image: url(../images/ic_states_sarawak.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="SLG"] { background-image: url(../images/ic_states_selangor.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="TRG"] { background-image: url(../images/ic_states_terengganu.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="KUL"] { background-image: url(../images/ic_states_kuala_lumpur.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="LBN"] { background-image: url(../images/ic_states_labuan.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }
.item-states[data-state="PJY"] { background-image: url(../images/ic_states_putrajaya.png); padding-left: 150px  !important; background-repeat: no-repeat !important; background-position: 20px !important; background-size: 50px 35px !important; height: 75px; margin-bottom: 10px; }

.item-districts { padding-left: 50px  !important;  }
.item-cities { padding-left: 50px  !important;  }
.item-reasons { padding-left: 50px  !important;  }


.item-notification {
    background-image: url(../images/ic_notification_default.png);
    padding-left: 70px !important;
    background-repeat: no-repeat !important;
    background-position: 10px !important;
    background-size: 60px 60px !important;
    height: 75px;
    margin-bottom: 10px;
}

.header-state-name { color: #000000; font-family: system-ui; font-size: 20px; width: 250px; margin-bottom: 10px; }
.header-district-name { color: #000000; font-family: system-ui; font-size: 20px; width: 250px; margin-bottom: 10px; }
.header-city-name { color: #000000; font-family: system-ui; font-size: 20px; width: 250px; margin-bottom: 10px; }
.header-reason-name { color: #000000; font-family: system-ui; font-size: 20px; width: 250px; margin-bottom: 10px; }


.page-login { background: url(../images/ic_main_login_bg.png) no-repeat center center fixed !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover !important; }
.page-places-visited { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }
.page-states { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }

.page-self-test { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }




.actionbar-back { background: url(../images/ic_arrow_back.png) left !important; background-repeat: no-repeat !important; background-position: 2% !important; background-size: 23px 23px !important; }


.empty-places-visited { display: flex; justify-content: center; align-items: center; position: relative; top: 48%; }
.empty-self-test { display: flex; justify-content: center; align-items: center; position: relative; top: 48%; }
.empty-text { font-family: system-ui; font-size: 15px; font-weight: 500; color: #000000; }



.page-close-contact { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }
.page-profile { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }
.page-questionaires { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: #F0F0FF; }
.page-vaccinations { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: #F0F0FF; }
.page-places-visited-detail { box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: transparent; }

.profile-container { }
.profile-account-section { margin-top: 40px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.profile-account-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #4169E1; }

.profile-settings-section { padding-top: 16px; padding-bottom: 28px; background-color: #F4F4F4; height: 10px; padding-left: 14px; margin-bottom: 40px; }
.profile-settings-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #4169E1; }


.profile-self-test-section { padding-top: 16px; padding-bottom: 28px; background-color: #F4F4F4; height: 10px; padding-left: 14px; margin-bottom: 40px; }
.profile-self-test-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #4169E1; }


.app-version-section { padding-top: 16px; padding-bottom: 28px; background-color: #F4F4F4; height: 10px; padding-left: 14px; margin-bottom: 20px; text-align: center; }
.app-version-section label { font-size: 18px; font-family: system-ui; font-weight: 500; color: #A9A9A9; }


/* Personal Infromation */
.pv-employee-section { margin-top: 40px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.pv-employee-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }
.phd-employee-section { margin-top: 40px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.phd-employee-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }
.cst-employee-section { margin-top: 40px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.cst-employee-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }

/* Badge No. */
.pv-badge-no-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-badge-no-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-badge-no-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-badge-no-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-badge-no-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-badge-no-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.cst-badge-no-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-badge-no-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-badge-no-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

/* Employee Name */
.pv-employee-name-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-employee-name-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-employee-name-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-employee-name-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-employee-name-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-employee-name-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.cst-employee-name-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-employee-name-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-employee-name-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

/* Department */
.cst-department-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-department-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-department-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }




/* Location / Office */
.pv-location-office-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-location-office-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-location-office-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-location-office-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-location-office-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-location-office-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.cst-location-office-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-location-office-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-location-office-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }




/* Visiting Section */
.pv-visiting-section { margin-top: 10px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.pv-visiting-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }

/* Visiting Date */
.pv-date-out-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-date-out-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-date-out-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.pv-date-out { background: url(../images/ic_calendar_view.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

/* Country */
.pv-country-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-country-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-country-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

/* States */
.pv-states-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-states-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-states-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.pv-states { background: url(../images/ic_dropdown_arrow_down.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

/* District */
.pv-district-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-district-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-district-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.pv-district { background: url(../images/ic_dropdown_arrow_down.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

/* City */
.pv-city-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-city-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-city-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.pv-city { background: url(../images/ic_dropdown_arrow_down.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

/* Place(s) Visited */
.pv-places-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-places-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-places-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.first-place-visited { margin-bottom: 10px !important; }
.second-place-visited { margin-bottom: 10px !important; }
.third-place-visited { }

/* Purpose */
.pv-purpose-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-purpose-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-purpose-title > label { font-family: system-ui !important; color: #000000; }
.pv-purpose-business { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.pv-purpose-personal { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

/* Reason */
.pv-reason-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.pv-reason-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.pv-reason-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-bottom: 10px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.pv-reason { background: url(../images/ic_dropdown_arrow_down.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

/* Cross Border Visit Submission */
.pv-submit-container { margin-left: 16px; margin-right: 16px; margin-bottom: 5px; }
.button-submit { outline: none; background: #6AB7FF; border: none; border-radius: 5px; cursor: pointer; height: 45px; font-size: 15px; font-weight: 600; color: #FFFFFF; }

/* Test Section */
.phd-labtest-section { margin-top: 10px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.phd-labtest-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }

.cst-selftest-section { margin-top: 10px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.cst-selftest-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }

/* Close Contacted */
.phd-contacted-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-contacted-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-contacted-title > label { font-family: system-ui !important; color: #000000; }
.phd-contacted-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-contacted-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

/* Test Method */
.phd-test-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-test-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-test-title > label { font-family: system-ui !important; color: #000000; }
.phd-test-pcr { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-test-rtk { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

/* Confirmation Date */
.phd-date-confirmed-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-date-confirmed-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-date-confirmed-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-date-confirmed { background: url(../images/ic_calendar_view.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }
.cst-date-confirmed-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-date-confirmed-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-date-confirmed-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.cst-date-confirmed { background: url(../images/ic_calendar_view.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

.cst-result-photo-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-result-photo-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-result-photo-title > input { padding-top: 5px !important; padding-bottom: 20px !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

.cst-preview-photo-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-preview-photo-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-preview-photo-title > input { padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }




.phd-covid-members-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-covid-members-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-covid-members-title > label { font-family: system-ui !important; color: #000000; }
.phd-covid-myself { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-covid-family { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-test-reason-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-test-reason-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-test-reason-title > label { font-family: system-ui !important; color: #000000; }
.phd-close-contact { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.cst-test-purpose-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-test-purpose-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-test-purpose-title > label { font-family: system-ui !important; color: #000000; }


.cst-test-kit-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-test-kit-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-test-kit-title > label { font-family: system-ui !important; color: #000000; }


/* Relationship */
.phd-relationship-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-relationship-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-relationship-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.first-family { margin-bottom: 10px !important; }
.second-friend-colleague { margin-bottom: 10px !important; }
.third-others { }

/* Test Result */
.phd-result-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-result-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-result-title > label { font-family: system-ui !important; color: #000000; }
.phd-result-negative { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-result-positive { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.cst-result-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-result-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-result-title > label { font-family: system-ui !important; color: #000000; }
.cst-result-negative { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-result-positive { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

/* Background */
.phd-background-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-background-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-background-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-bottom: 10px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

.cst-remarks-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.cst-remarks-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.cst-remarks-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-bottom: 10px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }






/* Health Section */
.phd-health-section { margin-top: 10px; padding: 20px; padding-left: 15px; background-color: #F4F4F4; height: 20px; }
.phd-health-section label { font-size: 20px; font-family: system-ui; font-weight: 500; color: #62625A; }

.phd-body-temperature-content { margin-top: -20px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-body-temperature-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-body-temperature-title > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

.phd-fever-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-fever-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-fever-title > label { font-family: system-ui !important; color: #000000; }
.phd-fever-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-fever-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-cough-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-cough-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-cough-title > label { font-family: system-ui !important; color: #000000; }
.phd-cough-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-cough-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-sore-throat-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-sore-throat-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-sore-throat-title > label { font-family: system-ui !important; color: #000000; }
.phd-sore-throat-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-sore-throat-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-breath-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-breath-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-breath-title > label { font-family: system-ui !important; color: #000000; }
.phd-breath-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-breath-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-nasal-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-nasal-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-nasal-title > label { font-family: system-ui !important; color: #000000; }
.phd-nasal-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-nasal-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-sense-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-sense-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-sense-title > label { font-family: system-ui !important; color: #000000; }
.phd-sense-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-sense-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-clinic-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-clinic-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-clinic-title > label { font-family: system-ui !important; color: #000000; }
.phd-clinic-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-clinic-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-mc-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-mc-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-mc-title > label { font-family: system-ui !important; color: #000000; }
.phd-mc-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-mc-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-mc-reason-content { margin-top: -30px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; }
.phd-mc-reason-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-mc-reason-title > label { font-family: system-ui !important; color: #000000; }
.phd-mc-reason-yes { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-mc-reason-no { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-date-medical-cert-panel > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-date-medical-cert { background: url(../images/ic_calendar_view.png) right !important; background-repeat: no-repeat !important; background-position: 98% !important; background-size: 23px 23px !important; }

.phd-reason-choice-content { margin-top: -20px; padding-right: 16px; padding-bottom: 10px; }
.phd-reason-choice-header { margin-top: 15px; color: #000000; font-family: system-ui; padding-top: 15px; font-weight: 700; }
.phd-reason-covid-title > label { font-family: system-ui !important; color: #000000; }
.phd-reason-covid { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-reason-others-title > label { font-family: system-ui !important; color: #000000; }
.phd-reason-others { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-mc-reason-panel > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }

.phd-test-close-contact { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-test-work-arrangement { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.phd-test-others{ position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.phd-test-close-contact-panel > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-test-others-panel > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }
.phd-test-close-contact-title > label { font-family: system-ui !important; color: #000000; }
.phd-test-work-arrange-title > label { font-family: system-ui !important; color: #000000; }
.phd-test-others-title > label { font-family: system-ui !important; color: #000000; }


.cst-other-test-kit-panel > input { border-radius: 5px !important; border: 1px solid #D3D3D3 !important; padding-left: 8px !important; padding-top: 5px !important; padding-bottom: 8px !important; width: 100% !important; margin-top: 5px !important; margin-right: 16px; font-family: system-ui !important; color: #000000; }




.cst-test-back-mc { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-category-c { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-kkm { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-management { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.cst-test-back-mc-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-category-c-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-kkm-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-management-title > label { font-family: system-ui !important; color: #000000; }


.cst-test-kit-alltest { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-kit-newgene { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-kit-gmate { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-kit-beright { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }
.cst-test-kit-other { position: relative; display: inline-block; margin-bottom: 5px; margin-right: 8px; font-weight: 400; vertical-align: middle; cursor: pointer; }

.cst-test-kit-alltest-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-kit-newgene-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-kit-gmate-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-kit-beright-title > label { font-family: system-ui !important; color: #000000; }
.cst-test-kit-other-title > label { font-family: system-ui !important; color: #000000; }


[type="checkbox"]:not(:checked) + label::before,
[type="checkbox"]:checked + label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4em;
	height: 1.4em;
	border: 1px solid #aaa;
	background: #FFF;
	border-radius: .2em;
	box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
	transition: all .275s;
}

/* Pre-Health Declaration Submission */
.phd-submit-container { margin-left: 16px; margin-right: 16px; margin-bottom: 5px; }




.error-mandatory { border: 1px solid red !important;}


.employee-no-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-no-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-no-title { color: #000000; font-family: system-ui; }

.employee-email-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-email-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-email-title { color: #000000; font-family: system-ui; }

.employee-name-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-name-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-name-title { color: #000000; font-family: system-ui; }

.employee-position-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-position-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-position-title { color: #000000; font-family: system-ui; }

.employee-dept-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-dept-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-dept-title { color: #000000; font-family: system-ui; }

.employee-loc-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-loc-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-loc-title { color: #000000; font-family: system-ui; }

.employee-pass-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-pass-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-pass-title { color: #000000; font-family: system-ui; }

.employee-superior-content { margin-top: -20px; padding-left: 25px; padding-bottom: 10px; border-bottom: 1px solid #CDCDCD; }
.employee-superior-header { margin-top: 15px; color: #A9A9A9; font-family: system-ui; padding-top: 15px; }
.employee-superior-title { color: #000000; font-family: system-ui; }

.set-language-content { margin-top: -25px; padding-left: 25px; padding-bottom: 18px; border-bottom: 1px solid #CDCDCD; }
.set-language-title { color: #000000; font-family: system-ui; font-size: 17px; }

.self-test-content { margin-top: -25px; padding-left: 25px; padding-bottom: 18px; border-bottom: 1px solid #CDCDCD; }
.self-test-title { color: #000000; font-family: system-ui; font-size: 17px; }

.profile-logout-container { margin-left: 16px; margin-right: 16px; margin-bottom: 5px; }
.button-logout { outline: none; background: #32CD32; border: none; border-radius: 5px; cursor: pointer; height: 50px; font-size: 14px; font-weight: 600; color: #FFFFFF; }

.loaders { top: 0; left: 0; position: fixed; opacity: 0.8; z-index: 10000000; background: Black; height: 100%; width: 100%; margin: auto; }
.cube-folding { width: 50px; height: 50px; display: inline-block; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 0; }
.cube-folding span { position: relative; width: 25px; height: 25px; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); display: inline-block; }
.cube-folding span::before { content: ''; background-color: white; position: absolute; left: 0; top: 0; display: block; width: 25px; height: 25px; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-animation: folding 2.5s infinite linear both; -webkit-animation: folding 2.5s infinite linear both; animation: folding 2.5s infinite linear both; }
.cube-folding .leaf2 { -moz-transform: rotateZ(90deg) scale(1.1); -ms-transform: rotateZ(90deg) scale(1.1); -webkit-transform: rotateZ(90deg) scale(1.1); transform: rotateZ(90deg) scale(1.1); }
.cube-folding .leaf2::before { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; background-color: #f2f2f2; }
.cube-folding .leaf3 { -moz-transform: rotateZ(270deg) scale(1.1); -ms-transform: rotateZ(270deg) scale(1.1); -webkit-transform: rotateZ(270deg) scale(1.1); transform: rotateZ(270deg) scale(1.1); }
.cube-folding .leaf3::before { -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; background-color: #f2f2f2; }
.cube-folding .leaf4 { -moz-transform: rotateZ(180deg) scale(1.1); -ms-transform: rotateZ(180deg) scale(1.1); -webkit-transform: rotateZ(180deg) scale(1.1); transform: rotateZ(180deg) scale(1.1); }
.cube-folding .leaf4::before { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; background-color: #e6e6e6; }
.cube-wrapper { position: fixed; left: 40%; top: 50%; margin-top: -50px; margin-left: -50px; height: 100px; text-align: center; }
.cube-wrapper:after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; margin: auto; width: 90px; height: 6px; background-color: rgba(0, 0, 0, 0.1); -webkit-filter: blur(2px); filter: blur(2px); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1; -moz-animation: shadow 0.5s ease infinite alternate; -webkit-animation: shadow 0.5s ease infinite alternate; animation: shadow 0.5s ease infinite alternate; }
.cube-wrapper .loading { font-size: 15px; font-weight: bolder; letter-spacing: 0.1em; display: block; color: white; position: relative; top: 25px; z-index: 2; -moz-animation: text 0.5s ease infinite alternate; -webkit-animation: text 0.5s ease infinite alternate; animation: text 0.5s ease infinite alternate; }
.responsive-iframe { position: absolute; bottom: 0; width: 100%; height: 100%; }

@-moz-keyframes folding {
    0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

@-webkit-keyframes folding {
    0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

@keyframes folding {
    0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); -ms-transform: perspective(140px) rotateX(-180deg); -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; }
    25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); -ms-transform: perspective(140px) rotateX(0deg); -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; }
    90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); -ms-transform: perspective(140px) rotateY(180deg); -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

@-moz-keyframes text {
    100% { top: 35px; }
}

@-webkit-keyframes text {
    100% { top: 35px; }
}

@keyframes text {
    100% { top: 35px; }
}

@-moz-keyframes shadow {
    100% { bottom: -18px; width: 100px; }
}

@-webkit-keyframes shadow {
    100% { bottom: -18px; width: 100px; }
}

@keyframes shadow {
    100% { bottom: -18px; width: 100px; }
}