/* Backend specific CSS */

/* ----------------------------
  SOMMAIRE
  ---------------------------

  1. GENERAL
    1.1 Typo
    1.2 Button
    1.3 Form
    1.4 Table
    1.5 Styles predefinis

  2. LAYOUT
    2.1 Navigation
    2.2 Sidebar
    2.3 Content
      2.3.1 Calendar/Calendrier
      2.3.2 Home
      2.3.3 Legend
      2.3.4 Breadcrumbs
      2.3.5 Footer
      2.3.6 Dashboard
    2.4 Admin
      2.4.1 Pagination
      2.4.2 Filtres

*/

:root{
    --bs-font-sans-serif:'Poppins', sans-serif;
    --bs-border-radius: 0.25rem !important;
    --btn-border-radius : 60px;
    --box-shadow: 0px 0px 23px -4px rgb(56 57 66 / 10%);
    --bs-dark-rgb: 25, 25, 25;
    --bs-on-danger : #fff;
    --bs-gray-500: #ebebeb;
    --bs-transition-base: .3s all ease;
    --sidebar-width: 300px;
  }

body{
    font-family: var(--bs-font-sans-serif);
    min-height: 100vh;
    background-color: #f7f7f7;
}
.row#main{
  min-height: Calc(100vh - 130px);
}
a:hover{
    text-decoration: none;
}

  /* 1. GENERAL */

  .fa {
    color: black;
    font-size: 1.5rem;
  }

  /* 1.1 Typo */

  h1,.h1{
    font-weight: 600;
  }
  h2,.h2{
    font-weight: 300;
  }
  .h3, h3 {
    font-weight: 400;
    text-transform: uppercase;
    color: #6a7075;
  }
  b, strong {
    font-weight: 600;
  }
  .text-xl{
    font-weight: 500;
    margin-bottom: 0;
  }

  .lead{
    font-size: 1.5rem;
  }
  .badge{
    font-weight: normal;
  }
  h2{
    color:rgba(97,97,97,1);
  }

  @media (min-width: 992px){
    h1,.h1{
      font-size: 2rem;
    }
    h2,.h2{
      font-size: 1.5rem;
    }
    .h3, h3 {
      font-size: 1.1rem;
    }
    .text-xl{
      font-size: 2rem;
    }
  }
  @media (max-width: 991.98px) {
    h1,.h1{
      font-size: 1.8rem;
    }
    h2,.h2{
      font-size: 1.3rem;
    }
    .h3, h3 {
      font-size: 1rem;
    }
    .text-xl{
      font-size: 1.7rem;
    }
  }



  /* 1.2 Button */

  .btn{
    border-radius: 60px;
  }
  .btn-primary{
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
  }
  .btn-primary:hover,
  .btn-primary:focus{
    background-color: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
  }

  .btn-outline-primary {
    --bs-btn-color:var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
  }
  .btn-outline-primary:hover{
    background-color: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
  }
  .btn-outline-primary:active,.btn-primary:active{
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
  }

  .btn i{
    font-size: 13px;
    margin-right: 5px;
  }
/*  .btn:first-child:active{
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
  }*/
  i.item-activate {
    cursor:pointer;
  }

  @media (max-width: 768px){
    .inner-nav-btns a, inner-nav-btns button{
      width:100%;
      margin-bottom: 12px;
    }
  }

  /* nav-pills */

  .nav-pills .nav-link{
    border-style: solid;
    border-width: 1px;
  }

  .nav-pills .nav-link.btn-outline-primary{
    --bs-nav-link-color: var(--bs-dark);
  }

  .nav-pills .btn-outline-primary.nav-link:focus,
  .nav-pills .btn-outline-primary.nav-link:hover {
    color: #fff;
  }

  .nav-pills .btn-outline-primary.nav-link:hover {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
  }

  .nav-pills .btn-outline-primary.nav-link.active,
  .nav-pills .show>.nav-link.btn-outline-primary {
    background-color: var(--bs-dark);
  }

  /* 1.3 Form */

  .form-label{
    margin-bottom: 0;
  }
  .form-control,
  .form-select{
    border-radius: var(--bs-border-radius);
  }
  /* form-select hover */
  .form-select option:hover{
    background-color: #212529;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  /* 1.4 Table */

  tbody,
  td,
  tfoot,
  th,
  thead,
  tr {
    vertical-align: middle;
    border-style: none;
    border-width: 0;
    font-size: .9rem;
  }

  .table>:not(caption)>*>* {
    padding: 0.75rem 0.75rem;
  }

  table td:not(:first-child){
    min-width: 150px;
  }

  .table-hover > tbody > tr:hover {
    --bs-table-accent-bg: rgb(246 247 250);
    color: var(--color-base);
  }

  table.table-valign tr td, table.table-valign tr th{
    vertical-align: middle;
  }
  table tr:hover,.cursor-pointer label{
    cursor : pointer!important;
  }
  .card.cursor-pointer{
    padding: 0!important;
  }
  .card.cursor-pointer label{
    padding: 20px 16px;
  }

 /* 1.5 Styles prédéfinis*/
  .text-bg-primary {
    background-color: var(--bs-danger)!important;
  }
  .nav.img-fluid{
    max-width: 200px;
  }

  /* 2. LAYOUT */

  /* 2.1 Navigation */
  .nav2:active .nav-link{
    font-weight: bold;
  }

  .nav-brand img{
    max-height: 50px;
    /* min-width: 130px; */
  }
  header .nav-link{
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 1px;
    display: flex;
    color: #fff;
    /* align-items: center; */
    font-weight: 700;
  }
  header .nav-link:hover{
    color:#fff;
  }
  header .nav-link i{
    font-size: 14px;
    margin-right: 0.5rem;
    color:#fff;
  }

  @media (max-width: 768px){
    .nav.my-2{
      margin: 0 !important;
    }
  }
  @media (max-width: 576px){
    header .nav-link{
      border-radius: 50%;
      /* width: 35px; */
      padding: 8px 0;
      justify-content: center;
    }
/*    header .nav-link i{
      font-size: 20px;
    }*/
    .nav-link span{
      display: none;
    }
    header .nav-link i{
      margin: 0;
    }
    header .nav-link:hover i{
      color:#000;

    }
  }

  @media (min-width : 576px){
    header .nav-link:hover,header .nav-link:hover i{
      background-color: #fff;
      color : var(--bs-black)!important;
    }
  }
  /* 2.2 Sidebar */

/* 2.2 Sidebar */

#sidebar .nav{
  --bs-nav-link-padding-x: 1.5rem;
  --bs-nav-link-padding-y: 1.25rem;
}
#sidebar > .nav{
  --bs-nav-link-padding-x: 1.5rem;
  --bs-nav-link-padding-y: 1.25rem;
  background-color: #fff;
  box-shadow: var(--box-shadow);
}

#sidebar .nav-link {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-danger);
  --bs-nav-link-font-weight: 600;
  --bs-accordion-active-color: var(--bs-danger);
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  transition: var(--bs-transition-base);
  font-size: .95rem;
}

#sidebar .nav-link:hover {
	background-color: var(--bs-gray-100);
  padding-left: calc(var(--bs-nav-link-padding-x) * 1.5);
}
#sidebar .accordion-item .nav-item .nav-link {
  background-color: var(--bs-gray-100);
}
#sidebar .accordion-item .nav-item .nav-link:hover {
  background-color: var(--bs-gray-200);
}
#sidebar .accordion-button:after{
  content: normal;
}
#sidebar .accordion-button .fa-angle-down{
  transition: var(--bs-transition-base);
}
#sidebar .accordion-button[aria-expanded="true"] .fa-angle-down{
  transform: rotate(180deg);
}

#sidebar .nav.nav-pills .nav-item a{
  padding-left: 35px;
}

@media (min-width: 992px){
  #main{
    max-width: calc( 100% - var(--sidebar-width) );
  }
  #sidebar{
    min-width: var(--sidebar-width);
  }

  #sidebar > .nav{
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: fixed;
    min-width: var(--sidebar-width);
  }
}

@media (max-width: 991.98px) {
  #main{
    flex-wrap: wrap!important;
  }
  #sidebar{
    width: 100%;
  }
  #mobile-nav{
    background-color: #fff;
    box-shadow: var(--box-shadow);
  }
  #mobile-nav button{
    border: none;
  }
}

  /* 2.3 Content */

  /* 2.3.1 Calendar */

  .calendar_default_main{
    font-family: var(--bs-font-sans-serif) !important;
  }

  .home__calendar .weekchoice {
    display: flex;
    padding: 0.5rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    background-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
  }


  .calendar_white_colheader,
  .calendar_white_corner{
    height: 52px !important;
    line-height: 1.25;
  }
  .date-detail{
    display: block;
    font-size: 0.8rem;
    color: var(--bs-gray-600);
  }
  .date-detail:last-child{
    font-weight: 700 !important;
    font-size: 1.5rem;
    color: #212529;
  }

  @media (max-width: 767px){
    .home__calendar .calendar_white_main{
      overflow-x: scroll;
    }
    .home__calendar .calendar_white_main > div{
      min-width: 767px;
    }
  }
  @media (max-width: 576px){
    .calendar_white_colheader,
    .calendar_white_corner{
      height: 40px;
    }
    /* .date-detail:first-child{
      display: none;
    } */
    .date-detail:last-child{
      font-size: 1.2rem;
      padding-top: 7px;
    }
  }

  /* 2.3.2 Home */

  .home__form .form-create-appointment {
    display: flex;
    gap: 1rem;
    flex-direction: column;
  }
  #home-admin-form {
    background-color: var(--bs-border-color);
  }

  @media (min-width: 768px){
    body > .row{
      margin: 0;
      /* min-height: calc(100vh - 62px); */
    }
/*    body > .row > div, body > .row > aside{
      padding-top: 1rem;
    }*/
    #home-admin-form{
      position: relative;
    }
    .home-form-inner{
      position: sticky;
      top: 0;
      left: 0;
    }
  }

  @media (max-width: 767px){
    body > .row{
      max-width: 100%;
      margin: 0;
    }
    #home-admin-form {
      margin: 1rem 0px 2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }

  .home-stat{
    font-size: 3rem;
  }
  .home-stat a{
    text-decoration:none;
  }

  /* 2.3.3 Legend */

  fieldset > legend{
    color:var(--bs-gray-600);
  }

  label.required, legend.required, label{
    font-weight: bold;
  }

  .dual_passwd > div > div:nth-child(2){
    margin-bottom: 0 !important;
  }

  .room-container{
    display: flex;
    gap: 0.5rem;
    flex-basis: calc(50% - 0.5rem);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .descr-room{
    font-size: .85rem;
    line-height: 1.1;
    font-style: italic;
    color: var(--bs-gray-600);
  }

  .room{
    height: 20px;
    width: 33.33%;
    border-radius: var(--bs-border-radius);
  }

  .room-one{
    background-color: rgb(61, 64, 255);
  }
  .room-two{
    background-color: rgb(209, 26, 93);
  }
  .room-three{
    background-color: rgb(235, 132, 49);
  }
  .room-four{
    background-color: rgb(36, 163, 160);
  }

  @media (min-width: 1200px) and (max-width: 1370px){
    .room-container{
      flex-basis: 100%;
    }
    .room{
      width: 25%;
    }
  }
  @media (max-width: 767px){
    .legend{
      border-width: 0 0 1px 0;
      padding: 0.75rem 0 0;
      border-radius: 0;
    }
  }
  @media (min-width: 450px) and (max-width: 767px){
    .room-container{
      flex-basis: 25%;
    }
  }

  @media (min-width: 767px){
    .legend{
      flex-direction: column !important;
      flex-wrap: nowrap !important;
    }
    .room-container{
      width: 70%;
    }
  }

    /* 2.3.4 Breadcrumbs */
    ol.breadcrumb{
        background-color: #e9ecef;
        border-radius: var(--bs-border-radius);
        font-size: .8rem;
        text-transform: uppercase;
        font-weight: 500;
        padding: .75rem 1.5rem;
    }
    ol.breadcrumb a,
    .breadcrumb-item+.breadcrumb-item:before,
    .breadcrumb-item{
        color:var(--bs-black);
        text-decoration: none;
    }
    ol.breadcrumb a:hover{
        color:var(--bs-body-color);
    }


    /* 2.3.5 Footer */

    footer {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      /* position: absolute;
      bottom: 0;
      left: 0; */
      width: 100%;
      height: fit-content;
    }

    footer p {
      margin-bottom: .25rem;
      color:#b1c0cf;
    }

    footer p a{
      text-decoration: none;
    }
    footer p a:hover{
      text-decoration: underline;
    }

    /* 2.3.6 Dashboard */
#dashboard-cards {
  min-height: 100vh;
}


  /* 2.4 Admin */

  /* 2.4.1 Pagination */
  .pagination{
    display: flex;
    gap: .5rem;
  }


  /* 2.4.2 Filters */
  .card{
      padding: 20px 16px;
      box-shadow: var(--box-shadow);
      border:0;
  }
  /* .card:not(.form-filter ) .row{
    margin-bottom: 25px;
    border-bottom: solid 1px var(--bs-danger);
  } */

@media(max-width:576px){
  .form-filter .form-group.align-self-end{
    text-align: center!important;
  }

}

/* 2.5 Login & forgot password */
section.login-wrapper{
    background-image: url("/assets/images/background.jpg?v=2");
    background-position: center;
    background-size: cover;
}

img.login-logo {
    width:100%;
}

@media (max-width: 1200px){
    section.login-wrapper{
        background-size: auto 100%;
    }
}
@media (min-width: 768px) {
  #user_password .mb-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .login-wrapper .login-prompt .row{
    height: 100%;
  }
  /* footer{
    position: absolute;
    bottom: 0;
    left: 0;
  } */
}

.login-prompt{
    /* border-radius: 1rem; */
    box-shadow: var(--box-shadow);
}
/* CSS ALICE */
#customers-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  z-index: 99999;
  max-height: 400px;
  overflow-y: scroll;
  display: none;
  width: 100%;
}
#customers-list li span {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  color: black;
  display: block;
  cursor: pointer;
}

/* CSS ALICE */
.navbar-nav {
  margin: auto;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
#background-login {
    background-image: url("../images/photo-chateau.jpg");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "iA Writer Quattro V", sans-serif;
}

.login-wrapper  {
    border: 1px solid #ddd;
    border-radius: 3%;
    max-width: 50%;
    position: absolute;
    background-color: rgb(255,255,255,0.6);
    padding: 30px 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}