/*
//  ===== IMPORT GOOGLE FONTS =====  //
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@500;900&display=swap');

/*
//  ===== SCROLLBAR SETTINGS =====  //
*/
::-webkit-scrollbar {
    width: 8px;
    height: max-content;

}

::-webkit-scrollbar-thumb {
    background: orangered;
    border-radius: 16px;
    box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
}

::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #434343, #434343 1px, #1E1E28 0, #1E1E28);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: orange;
}

/*
//  ===== BODY SETTINGS =====  //
*/
*,
*::before,
*::after,
html,
body {
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


/*
//  ===== MAIN CONTAINER =====  //
*/

.container{
    position: relative;
    background-color: grey;
    width: 100%;
   height: 1500px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    overflow: scroll;
}


.header{
    height: 60.0px;
    width: 100%;
    background-color: #2b2b36;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.start_section{
    width: 200.0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.end_section{
    width: 350.0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rect_btn{
    margin-left: 10.0px;
    width: 35px;
    height: 35px;
    outline: none;
    background-color: rgba(69, 64, 94, 0.806);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.0px;
    border-radius: 6.0px;
    border: none;
    text-decoration: none;
}
.rect_btn:hover{
    cursor: pointer;
    background-color: #77779e;
}
.box_icon{
    font-size: 20px;
    color: white;
}


.link_ref{
    margin-left: 10.0px;
    text-decoration: none;
    color: rgb(156, 156, 156);
    font-family: "Alexandria";
}
.link_ref:hover{
    color: rgb(255, 255, 255);
    cursor: pointer;

}

.logo_text{
    font-family: "Alexandria";
    font-size: 30.0;
    color: orange;
    margin-left: 20.0px;
}

.content{
    width: 100%;
    height: 100.0%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

}

.safety_container0{
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tkm_logo{
    width: 150px;
}

.dialog_info{
    margin-top: 5px;
    max-width: 400.0px;
    text-align: center;
    color: black;
    font-size: 30px;
    font-family: "Alexandria";
}

.safety_containerA{
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 40px;
}
.safety_card{
    position: relative;
    width: 500.0px;
    height: 300.0px;
    background-color: #2b2b36;
    border-radius: 10.0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.wll{
    position: absolute;
    bottom: 10.0px;
    right: 10.0px;
    width: 60px;
    height: 60px;
}

.upload_btn{
    position: absolute;
    left: 10.0px;
    bottom: 10.0px;
    width: 40.0px;
    height: 40.0px;
    background-color: rgb(255, 175, 3);
    outline: none;
    text-decoration: none;
    border: none;
    border-radius: 8.0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload_btn:hover{
    cursor: pointer;
    background-color: #77779e;
}

.langtext{
    width: 70.0px;
    height: 80.0px;
    padding: 5px;
    position: absolute;
    top: 10.0px;
    right: 10.0px;
    border: 2px solid rgb(255, 204, 0);
    background-color: #5c5e89;
    font-family: "Alexandria";
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.lang_content{
    height: 220px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
}
.safety_logo{
    width: 120px;
    height: 120px;
}
.rules_span{
    width: 400px;
    color: white;
    font-size: 13px;
    font-family: "Alexandria";
    text-align: justify;
}

.safety_card:hover{
    cursor: pointer;
    background-color: #585871;

}