@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
  font-family: 'Montserrat', sans-serif;
  background-color: #FCFCFC;
}
.depot-container{
    width: 992px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    /*background-color: #FFF;*/
    /*box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);*/
  }
  .depot-plan{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 640px;
  }
  .depot-plan img{
    width: 100%;
    position: absolute;
    top: 0;
  }
  .depot-plan_rooms{
    position: relative;
    width: 520px;
    height: 142px;
    margin: 0 auto;
    z-index: 9;
    left: 15px;
    top: -28px;
  }
  .depot-plan_rooms::before{
    content: "";
    display: block;
    width: 70px;
    height: 42px;
    background-image: url('/dms/assets/images/depot-plan_tag.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: -38px;
    top: -10px;
    bottom: 0;
    margin: auto;
    z-index: 9;
  }
  .depot-rooms_row{
    display: flex;
    width: 100%;
    gap: 2.2px;
  }
  .depo-room{
    position: relative;
    flex: 1 0 0;
    height: 70px;
    text-align: center;
    background-color: transparent;
    transition: all .40s cubic-bezier(.65,.05,.36,1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .checked-icon::before{
    visibility: hidden;
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    background-image: url('/dms/assets/images/check.svg');
    background-size: contain;
    background-position: center;
    transition: all .40s cubic-bezier(.65,.05,.36,1);
  }
  .booked-room{
    background-color: #42d200;
    cursor: not-allowed !important;
  }
  .depo-room:hover{
    background-color: #42d200;
    cursor: pointer;
  }
  .depo-room:hover .checked-icon::before{
    visibility: visible;
    opacity: 1
  }
  .depo-room .room-info{
    opacity: 0;
    visibility: hidden;
    background-color: #FFF;
    width: 40px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -35px;
    margin: 0 auto;
    padding: 5px 10px;
    text-align: center;
    box-shadow: 0 0 10px 0 rgba(0,0,0, .4);
    z-index: 9999;
    border-radius: 2px;
    transition: all .40s cubic-bezier(.65,.05,.36,1);
    transform: scale(.9);
  }
  .room-info{
    min-width: 100px !important;
  }
  .depo-room .room-info span{
    font-size: 10px;
    line-height: 14px;
    display: block;
  }
  .depo-room .room-info span strong{
    color: #fcbb23;
  }
  .large-room .room-info{
    left: -1px;
  }
  .medium-room .room-info{
    left: -10px;
  }
  .small-room .room-info{
    left: -16px;
  }
  .depo-room:hover .room-info{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .booked-room .checked-icon::before{
    visibility: visible;
    opacity: 1
  }
  .depot-rooms_row.first_row{
    gap: 2.2px;
  }
  .depot-rooms_row.second_row{
    gap: 2.3px;
    margin-top: 1px;
  }
  .second_row .depo-room{
    flex: 0 0 56px;
  }
  .second_row .depo-room.room_13{
    flex: 0 0 41px;
  }
  .second_row .depo-room.room_14{
    flex: 0 0 41.8px;
  }
  .second_row .depo-room.room_15{
    flex: 0 0 27.3px;
  }
  .depo-room.room_12{
    flex: 0 0 39px;
  }
  
  /* SECTION */
  .mt-1 {
      margin-top:50px;
  }
  .dms-card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
  }

  /* On mouse-over, add a deeper shadow */
  .dms-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  /* Add some padding inside the card container */
  .dms-container {
    padding: 30px 30px;
  }
  .depot-content{
    padding: 40px 30px 30px;
  }
  .depot-content .depot-title{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
  }
  .depot-section .depot-section_title{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    margin-bottom: 45px;
  }
  .depot-section p{
    font-size: 14px;
    line-height: 26px;
  }
  .depot-section .depot-section_title::before{
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 40px;
    height: 6px;
    background-color: #fcbb23;
  }
  
  @media(max-width: 992px){
    .depot-container{
      width: 660px;
    }
    .depot-plan_rooms::before{
      width: 50px;
      height: 32px;
      left: 0;
      right: -28px;
      top: 0;
    }
    .depot-plan{
      height: 420px;
    }
    .depot-plan_rooms{
      width: 345px;
      height: 93px;
      left: 10px;
      top: -16px;
    }
    .depo-room{
      height: 46px;
    }
    .second_row .depo-room{
      flex: 0 0 36.6px;
    }
    .second_row .depo-room.room_13{
      flex: 0 0 26px;
    }
    .second_row .depo-room.room_14{
      flex: 0 0 26.8px;
    }
    .second_row .depo-room.room_15{
      flex: 0 0 17.3px;
    }
    .depo-room.room_12{
      flex: 0 0 25px;
    }
    .large-room .room-info{
      left: -11px;
    }
    .medium-room .room-info{
      left: -18px;
    }
    .small-room .room-info{
      left: -20px;
    }
  }
  
  @media(max-width: 768px){
    .depot-container{
      width: 500px;
    }
    .depot-plan{
      height: 320px;
    }
    .depot-plan_rooms::before {
      width: 41px;
      height: 24px;
      left: 0;
      right: -18px;
      top: -6px;
    }
    .depot-plan_rooms {
      position: relative;
      width: 261px;
      height: 69px;
      margin: 0 auto;
      z-index: 9;
      left: 7px;
      top: -13px;
      /* background-color: #D6D6D6; */
    }
    .depo-room{
      height: 34px;
      flex: 0 0 20.1px;
    }
    .depot-rooms_row.first_row{
      gap: 1.9px;
    }
    .depot-rooms_row.second_row{
      gap: 1.8px;
      margin-top: 2px;
    }
    .depo-room.room_1,
    .depo-room.room_12,
    .second_row .depo-room.room_13{
      flex: 0 0 20px;
    }
    .depo-room.room_3,
    .depo-room.room_4,
    .depo-room.room_5{
      flex: 0 0 20.2px;
    }
    .depo-room.room_2,
    .second_row .depo-room.room_14{
      flex: 0 0 20.6px
    }
    .second_row .depo-room.room_15{
      flex: 0 0 12.9px;
    }
    .second_row  .depo-room.room_20{
      flex: 0 0 27.8px;
    }
    .second_row .depo-room {
      flex: 0 0 27.5px;
    }
    .large-room .room-info{
      left: -15px;
    }
    .medium-room .room-info{
      left: -20px;
    }
    .small-room .room-info{
      left: -21px;
    }
  }
  
  @media(max-width: 576px){
    .depot-container{
      width: 400px;
    }
    .depot-plan {
      height: 255px;
    }
    .depot-plan_rooms::before {
      width: 41px;
      height: 20px;
      left: 0;
      right: -18px;
      top: -6px;
    }
    .depot-plan_rooms {
      position: relative;
      width: 209px;
      height: 57px;
      margin: 0 auto;
      z-index: 9;
      left: 6px;
      top: -9px;
    }
    .depot-rooms_row.first_row{
      gap: 1px;
    }
    .depo-room {
      height: 27.5px;
      flex: 0 0 17px;
    }
  
    .second_row .depo-room.room_20{
      flex: 0 0 22.2px;
    }
    .depot-rooms_row.second_row{
      gap: 1.2px;
      margin-top: 1.5px;
    }
    .second_row .depo-room {
      flex: 0 0 22.2px;
    }
    .depo-room.room_1,
    .depo-room.room_12,
    .second_row .depo-room.room_13 {
      flex: 0 0 15.8px;
    }
    .depo-room.room_3,
    .depo-room.room_4,
    .depo-room.room_5 {
      flex: 0 0 16.8px;
    }
    .depo-room.room_8,
    .depo-room.room_9,
    .depo-room.room_10,
    .depo-room.room_11 {
      flex: 0 0 16.4px;
    }
    .depo-room.room_2,
    .second_row .depo-room.room_14 {
      flex: 0 0 16.5px;
    }
    .second_row .depo-room.room_15 {
      flex: 0 0 11px;
    }
  }