body, html{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  body {
    background-color: #ecebeb;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #3d3d3d;
  }
  body .input{
    /* border-radius: 0.7vh; */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1vw;
    outline: none;
    padding: 0.7vh 0.7vw;
    -webkit-transition: 300ms;
    transition: 300ms;
    width: 100%;
  }
  .navbar-toggler{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 1.45em;
  }
  .navbar-toggler-icon{
    height: 0.15em;
  }
  .navbar{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 111;
  }
  a{
    color:unset;
  }
  .dropdown-toggle{
    transition: 0.30s;
  }
  .dropdown-toggle:after{
    transition: 0.30s;
  }

  .card-custom{
    margin-right: 224px;

  }

  .card-body-custom{
    padding: 13px 390px 0px 390px;
    /* justify-content: center; */
    text-align: justify;
  }
/*
  .btn-link{
      padding-block: 10px 10px;
  } */

  .btn-yellow{
    background-color: #edaa00;
    color: #fff;
  }


  .nav-link-toggle{
    color:#368ec0;
    transition: 0.30s;
  }
  .nav-link-toggle:hover{
    color:#368ec0;
  }
  .nav-link-toggle:after{
    transform: rotate(180deg);
    transition: 0.30s;
  }
  .nav-custom{
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: transparent;
    width: 150px;
    border-radius: 5px;
    overflow: hidden;
  }
  .nav-custom li{
    position: relative;
    background-color: #fff;
    visibility: visible;
    opacity: 1;
    cursor: pointer;
    transition: 0.10s;
  }
  .nav-custom li.collapse-custom {
    visibility: hidden;
    opacity: 0;
  }
  .collapsing{
    /* height: 186px !important; */
  }
  /* .nav-custom li:nth-child(1){
    transform: translateY(7px);
  }
  .nav-custom li:nth-child(2){
    transform: translateY(19px);
  }
  .nav-custom li:nth-child(3){
    transform: translateY(31px);
  }
  .nav-custom li.collapse-custom:nth-child(1){
    transform: translateY(-32px);
  }
  .nav-custom li.collapse-custom:nth-child(2){
    transform: translateY(-70px);
  }
  .nav-custom li.collapse-custom:nth-child(3){
    transform: translateY(-107px);
  }
  .nav-custom li.collapse-custom:nth-child(1), .nav-custom li:nth-child(1){
    transition: 0.10s;
  }
  .nav-custom li.collapse-custom:nth-child(2), .nav-custom li:nth-child(2){
    transition: 0.20s;
  }
  .nav-custom li.collapse-custom:nth-child(3), .nav-custom li:nth-child(3){
    transition: 0.40s;
  } */
  .nav-custom li:hover{
    background-color: #e3e1e1;
    transition: 0s;
  }
  a:active, a:hover{
    text-decoration: none;
    color:unset;
  }
  .font-size-10{
    font-size: 10px;
  }
  .font-size-12{
    font-size: 12px;
  }
  .font-size-14{
    font-size: 14px;
  }
  .font-size-16{
    font-size: 16px;
  }
  .font-size-18{
    font-size: 18px;
  }
  .overflow-hidden{
    overflow: hidden;
  }
  .font-weight-semi{
    font-weight: 600;
    text-align: justify;
  }
  header{
    background-size: cover;
    background-repeat: no-repeat;
  }
  .navbar{
    padding: 0.2rem 1rem;
  }
  .navbar-header img{
    width: 140px;
    height: auto;
  }
  .dropdown-toggle::after {
    font-family: FontAwesome;
    content: '\f078';
    border:unset;
    height: unset;
    width: unset;
    font-size: 16px;
    margin-left: 0.8rem;
  }

  /* CSS LOGOUT */
  .box-account div.box-profil{
    position: relative;
    background-color: #00000050;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 10px;
  }
  .box-account-dropdown{
    position: absolute;
    width: 160px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 10px #00000020;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.25s;
  }

  a.show ~ .box-account-dropdown{
    visibility: visible;
    opacity: 1;
    transition: 0.25s;
  }
  @media screen and (min-width:541px){
    .box-account-dropdown{
      transform: translate( 0, 15px);
      right: 0px;
    }

    a.show ~ .box-account-dropdown{
      transform: translate(0, 5px);
    }
    .scroll-custom{
      margin-top: 0px;
    }
    .scroll-custom .form-group{
      left: 266px;
      right: 106px;
    }
    .form-serach{
      /* width:100%; */
      width:425px;
    }
    .fa-search{
      right: 26px;
    }
  }
  @media screen and (max-width:540px){
    .box-account-dropdown{
      transform: translate(0, 15px);
    }

    a.show ~ .box-account-dropdown{
      transform: translate(0, 5px);
    }
    .nav-custom{
      padding-left: 15px;
    }
    .content-hotel .row .col-lg-2{
      display: none;
    }
    /* .nav-custom{
      position: absolute;
    } */
    .nav-link-toggle + .nav-custom{
      position: relative;
    }
    .scroll-custom{
      margin-top: 0px;
    }
    .scroll-custom .form-group{
      left: 13px;
      right: 15px;
    }
    .form-serach{
      width:100%;
    }
    .fa-search{
      right: 20px;
    }
  }
  .box-account-dropdown ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.box-account-dropdown ul li{
    padding: 5px 15px;
}
.box-account-dropdown ul li:hover{
    background-color: #00000010;
}

.content-head{
    padding: 30px 30px;
    box-shadow: 0 0 20px #80808015;
    border-radius: 10px;
    margin-bottom: 30px;
    height: 135px;
}

  .form-serach{
    background-color: #fff;
    border: 1px solid #80808015;
    padding:10px;
    border-radius: 5px;
  }

.form-serach:hover{
    border: 1px solid #007bff;

}
  .form-search{
    /* min-width: 1000px; */
    width: 100%;
    background-color: #fff;
    border: 1px solid #00000040;
    padding:10px;
    border-radius: 5px;
  }
  .form-search:focus{
    outline: unset;
    box-shadow: 0 0 15px #368ec030;
    border-color: #368ec090;
  }
  .fa-search{
    position: absolute;
    top: 50%;
    transform: translateY(-80%);
    font-size:25px !important;
  }

  .box{
    width: 190px;
    padding: 12px 25px 20px 25px;
    border-radius: 5px;
    box-shadow: 0 5px 15px #00000020;
    background-color: #fff;
    text-align: left;
  }
  .box img{
    width: 50px;
    height: auto;
    margin-bottom: 15px;
  }

  /* CSS FOR CONTENT GETTING START HOTEL SYSTEM */
  .content-hotel{
    padding: 30px;
    box-shadow: 0 0 20px #00000015;
    border-radius: 10px;
  }
  .content-hotel ul{
    list-style: none;
    margin: 0;
  }
  .content-hotel .parent-list{
    padding:0;
  }
  .content-hotel ul li{
    padding:2px 0;
  }
  .content-hotel ul:not(.parent-list){
    padding-left:25px;
  }
  iframe, img{
    width: 100%;
    max-width: 560px;
  }
  .scroll-custom{
    overflow-y: scroll;
    height: calc(100vh - 190px);
    width: 100%;
    overflow-x: hidden;
  }
  .scroll-custom .form-group{
    position: sticky;
  }
  .scroll-custom::-webkit-scrollbar {
    width: 5px;
  }
  /* Track */
  .scroll-custom::-webkit-scrollbar-track {
    background: #fff;
  }

  /* Handle */
  .scroll-custom::-webkit-scrollbar-thumb {
    background: rgb(184, 184, 184);
    border-radius: 10px;
  }

  /* Handle on hover */
  .scroll-custom::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  /* CSS FOR CONTENT GETTING START HOTEL SYSTEM */

  .card-custom{
    border:unset;
    /* max-width: 1000px; */
    width: 100%;
    background-color: #dbdbdb40;
    margin: 15px auto;
    padding: 5px 15px;
  }


  .card-body-custom{
    padding: 5px 0 15px 0;
  }
  .btn-link{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn-link h6{
    /* margin-right: 730px; */
  }
  .btn-link i{
    color: #368ec0;
    transform: rotate(180deg);
    transition: 0.15s ease-in;
  }
  .btn-link.collapsed i{
    color:#3d3d3d;
    transform: rotate(0);
    transition: 0.15s ease-out;
  }
  .btn-link h5{
    color: #368ec0;
    transition: 0.15s ease-in;
  }
  .btn-link.collapsed h5{
    color:#3d3d3d;
    transition: 0.15s ease-in;
  }
  .btn-link:hover h5, .btn-link:hover i{
    color: #368ec0;
  }
  .btn-link:hover{
    color: #368ec0;
  }
  .btn-link:hover, .btn-link:active, .btn-link:focus{
    text-decoration: unset;
  }

  .h6{
      color: black;
  }

  .content-hotel ul li{
    cursor: default;
  }

  .content-hotel ul li ul li{
    cursor: pointer;
  }

  .box-search::-webkit-scrollbar{
    width: 7px;
  }
  .box-search::-webkit-scrollbar-track{
    background-color: transparent;
  }
  .box-search::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 20px;
  }
  .box-search::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  .box-search{
    position: absolute;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 15px #00000015;
    max-height: 170px;
    overflow-y: auto;
    z-index: 1111;
    transform: translateY(-10px);
    visibility: hidden;
    opacity: 0;
    transition: 0.455s;
  }
  .box-search.show{
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: 0.455s;
  }
  .box-search ul{
    margin:0;
    padding:0;
    list-style: none;
  }
  .box-search ul li{
    padding: 10px 20px;
    cursor: pointer;
  }
  .box-search ul li:hover{
    background-color: #00000010;
  }

@media screen and(min-width:720px){
    .header{
        height: 100vh;
    }
}

.card-custom .btn{
    white-space: unset;
    text-align: left;
}

.card-custom h6{
    margin-right: 20px;
}

.zoom{
  transition: 0.5s;
}

.zoom:hover{
  transform: scale(1.6) translateX(80px);
  transition: 0.5s;
}

.loading-body{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    top:0;
    left:0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .body{

  }
  @-moz-keyframes timer-loader {
    0% {
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes timer-loader {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes timer-loader {
    0% {
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  /* :not(:required) hides this rule from IE9 and below */
  .timer-loader:not(:required) {
    border: 6px solid #63c5da;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-indent: -9999px;
    width: 72px;
    height: 72px;
  }
  .timer-loader:not(:required)::before {
    -moz-animation: timer-loader 1250ms infinite linear;
    -webkit-animation: timer-loader 1250ms infinite linear;
    animation: timer-loader 1250ms infinite linear;
    -moz-transform-origin: 3px 3px;
    -ms-transform-origin: 3px 3px;
    -webkit-transform-origin: 3px 3px;
    transform-origin: 3px 3px;
    background: #63c5da;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 23.2px;
    left: 28px;
    top: 28px;
  }
  .timer-loader:not(:required)::after {
    -moz-animation: timer-loader 15000ms infinite linear;
    -webkit-animation: timer-loader 15000ms infinite linear;
    animation: timer-loader 15000ms infinite linear;
    -moz-transform-origin: 3px 3px;
    -ms-transform-origin: 3px 3px;
    -webkit-transform-origin: 3px 3px;
    transform-origin: 3px 3px;
    background: #63c5da;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 18px;
    left: 28px;
    top: 28px;
  }