/* html {
    height: 0vh;
} */

body {
    background-color: beige;
}

.intro {
    text-align: center;
    font-size: 1rem;
    margin: 1rem 0;
    border: 0.3rem solid #000;
    background-color: rgba(207, 232, 207, 0.3);
    margin-top: 0%;
    margin: 12rem 10%; 
    

}

.input_param {
    width: 4rem;

}

.intro_input {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    justify-content: center;
    margin: 1rem 0;
    align-items: center;
    

}

.intro_input div, button {
    margin: 0 2rem;
    padding: 0.7rem;

}

.intro_input button {
    max-width: fit-content;
    text-align: center;
    align-items: center;
    cursor: pointer;
}

.intro_input div, input {
    margin: 0 1rem;


}

.floor {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: fit-content;
    max-width: fit-content;
    font-size: 1.5rem;
    background-color: rgb(186, 186, 186);
    margin: 1rem 5%;
    padding: 0.8rem 0rem;
    height: 8rem;
}

.container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: left;
    align-items: left;
    max-width: 100vh;
  
    font-size: 1rem;
    
    
    margin-top: 0%;
   
}

.floor_ctrl {
    display: flex;
    flex-direction: column-reverse;
    border: 0.rem solid rgba(82, 85, 85, 0.388);
    width: fit-content;
    height: fit-content;
    padding: 0.4rem;
    margin-left: 0.4rem;
    border-radius: 0.4rem;
    background-color: rgba(88, 75, 104, 0.529);
    backdrop-filter: blur(1rem);
}

.floor_number {
    color: rgb(29, 44, 42);
    display: flex;
    text-align: center;
    justify-content: center;
    margin: 0;
    margin-top: 0;
    padding: 0.5rem;
    font-size: 1.2rem;
 
    border-radius: 0.5rem;
}



.floor_number:hover {
    color: rgba(249, 27, 27, 0.788);
    cursor: pointer;
}

.floor_btn {
    display: flex;
    
    justify-content: center;

}

.floor_btn button{
    margin: 0.3rem;
    padding: 0.5rem;
    background-color: rgba(158, 165, 164, 0.388);
    border: solid rgba(0, 0, 0, 0.923);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.5rem;
}

.floor_btn button:hover {
    
    color: rgb(244, 24, 24);
    border: solid rgb(244, 24, 24);
}



.lift_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    padding: 0rem;
    background-color: rgba(24, 29, 61, 0.67);
    border: solid rgba(0, 0, 0, 0.923);
    border-radius: 0.5rem;
    cursor: pointer;
    
}

.lift_btn button {
    margin: 0;
    font-size: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    
}

.lift_btn button:hover {
    color: rgb(244, 24, 24);
    border: solid rgb(244, 24, 24);
}

.lift_space {
    display: absolute;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 8rem;
    margin:  0 1rem;
    padding: 0rem;
    background-color: rgba(24, 29, 61, 0.67);
    border: solid rgba(0, 0, 0, 0.923);
    border-radius: 0.5rem;
    cursor: pointer;
}

.lift_unit {
    z-index: 1;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* transform: translate(10rem, -10rem); */
    width: 5rem;
    height: 8rem;
    
    padding: 0rem;
    /* background-color: rgba(20, 134, 37, 0.67); */
    color: rgb(255, 255, 255);
    font-weight: 600;
    text-align: center;
    font-size: 2rem;

    
    
    
    /* border: 0.1rem solid rgba(0, 0, 0, 0.923); */
    border-radius: 0.5rem;
}

.outside_lift {
    background-image: url(images/in_door.png);
    background-size: cover;
}

.inside_lift {
    background-image: url(images/lift_image.jpg);
    background-size: cover;
}

.lift_unit1 {
    z-index: 1;
    display: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 8rem;
    height: 12rem;
    margin:  0 1rem;
    padding: 0rem;
    background-color: rgba(220, 27, 27, 0.67);
    border: solid rgba(0, 0, 0, 0.923);
    border-radius: 0.5rem;
}


.lift_doors {
    /* display: absolute; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 5rem;
    height: 8rem;

}

.door_container {
    z-index: 2;
    position: absolute;
    width: 5rem;
    height: 8rem;
    margin-bottom: 12rem;
}

@media  screen and (max-width: 700px) {
    .floor {
        height: 5rem;
    }
    .lift_unit {
        width: 3rem;
        height: 5rem;
        margin-left: 0.25rem;
        
    }
  
    .lift_space {
        width: 3rem;
        height: 5rem;
        margin: 0 0.4rem;
    }
    .lift_doors {
        width: 3rem;
        height: 5rem;
    }
    .door_container {
        width: 3rem;
        height: 5rem;
        margin-bottom: 5rem;
    }
   
    .lift_btn button {
        font-size: 0.3rem;
    }
    .floor_number {
        font-size: 0.8rem;
    }
    .floor_btn button {
        font-size: 0.3rem;
    }

    
}

.lift_door_left {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: rgb(162, 162, 162);
    border:  solid rgb(0, 0, 0);

}

.lift_door_right {
    display: flex;
    
    width: 100%;
    background-color: rgb(162, 162, 162);
    border:  solid rgb(0, 0, 0);

}

.lift_door_open_left {
    width: 0%;
    animation: open_left 2.5s ease-in-out;
    animation-fill-mode: forwards;
}

.lift_door_open_right {
    width: 0%;
    margin-left: auto;
    margin-right: 0%;
    animation: open_right 2.5s ease-in-out;
    animation-fill-mode: forwards;
}

.lift_door_closed_left {
    width: 100%;
    animation: close_left 2.5s ease-in-out;
}

.lift_door_closed_right {
    width: 100%;
    margin-left: auto;
    margin-right: 0%;
    animation: close_right 2.5s ease-in-out;
}

@keyframes open_left {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

@keyframes open_right {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

@keyframes close_left {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes close_right {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.btn_active {
    color: rgb(221, 72, 17);
    border: solid rgb(244, 24, 24);
}