@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');
body{
    font-family: 'Tajawal', sans-serif;
}
h1,h2,h3,h4{
    font-family: 'Tajawal', sans-serif;
}
a{
    font-family: 'Tajawal', sans-serif;
}
p{
    font-family: 'Tajawal', sans-serif;
}
span{
    font-family: 'Tajawal', sans-serif;
}
div{
    font-family: 'Tajawal', sans-serif;
}
input{
    font-family: 'Tajawal', sans-serif;
}
button{
    font-family: 'Tajawal', sans-serif;
}
td{
    font-family: 'Tajawal', sans-serif;
}
tr{
    font-family: 'Tajawal', sans-serif;
}
#text_link{
    text-decoration: none;
    color: #061a57;
}
#index_carousel{
    height: 90vh;
}
#carousel_item{
    height: 90vh;
}
#container{
    min-height: 90vh;
}
#login_left_div{
    
}


@media only screen and (min-width: 1367px){
    /**** Large Screens ****/
    
    #banner{
        height: 7vh;
        box-shadow: 0px 0px 5px #00000a3b;
        position: fixed;
        top: 0;
        z-index: 1000000;

    }
    #blank_div_banner{
        height: 7vh;
    }
    #logo_div{
        height: 6vh;
        background: url('../images/logo.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    #default_button{
        background: #051a56;
        color: white;
        text-decoration: none;
        height: 5vh;
        font-family: tajawal;
    }
    #default_border_button{
        border: 1px solid #051a56;
        color: #051a56;
        text-decoration: none;
        height: 5vh;
    }
    #user_name{
        font-size: xx-large;
    }
    #left_div{
        position: fixed;
        top: 15vh;
        height: 93vh;
        background: #f8f9fa;
        z-index: 2;
    }
    #left_div_buttons{
        font-size: larger;
        text-decoration: none;
        color: #8d8f91;      
    }
    #left_div_buttons_active{
        font-size: larger;
        text-decoration: none;
        color: #051a56;
        background: #e4e4e4;
        box-shadow: inset 0px 0px 12px #00000045;
    }
    #total_points{
        background: #051a56;
        color: white;
        font-size: large;
    }
    #redeem_button{
        height: 10vh;
        color: white;
        background: #051a56;
        text-decoration: none;
        box-shadow: inset 0px 0px 12px #0000009c;
        font-size: xx-large;
    }
    .language_button{
        font-size: x-large;
    }
    #logout_button{
        font-size: -webkit-xxx-large;
        color: #051a56;
    }
    #ask_popup{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 40vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }
    #filter_text{
        color: black;
        text-decoration: none;
    }
    #filter_text:hover{
        background: #f8f9fa;
        color: #051a55;
    }
    #filter_text_active{
        background: #f8f9fa;
        color: #051a55;
        text-decoration: none;
    }
    #banner_link{
        height: 7vh;
        text-decoration: none;
        background: #f8f9fa;
        color: #030f31;
    }
    #panel_admin{
        box-shadow: 0px 0px 14px #00000024;
    }
    #redeemed_img{
        height: 30vh;
    }
    #side_admin_menu:hover{
        background: #f1f1f1;
        cursor: pointer;
    }
    #side_admin_menu_active{
        background: #051a56;
        color: white;
        font-weight: bolder;
    }
    #menu_drop_hover:hover{
        background: whitesmoke;
    }
    #carousel{
        height: 100vh;
    }
    #popup_modal{
        height: 36vh;
        top: 35vh;
        left: 35vw;
        box-shadow: 0px 0px 20px #00000014;
        z-index: 5;
    }
     #sticky_popup{
        top: 30vh;
        z-index: 100000;
        left: 60vh;
         position: fixed;
         background: #efefefb5;
    }
    .slides{
        height: 100vh;
    }
}
#popup_done{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 40vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }


@media only screen and (min-width: 601px) and (max-width: 1366px){
    /**** Large Screens ****/
    
    #banner{
        height: 7vh;
        box-shadow: 0px 0px 5px #00000a3b;
        position: fixed;
        top: 0;
        z-index: 10000000;

    }
    #blank_div_banner{
        height: 7vh;
    }
    #logo_div{
        height: 6vh;
        background: url('../images/logo.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    #default_button{
        background: #051a56;
        color: white;
        text-decoration: none;
        height: 5vh;
        font-family: tajawal;
    }
    #default_border_button{
        border: 1px solid #051a56;
        color: #051a56;
        text-decoration: none;
        height: 5vh;
    }
    #user_name{
        font-size: xx-large;
    }
    #left_div{
        position: fixed;
        top: 15vh;
        height: 93vh;
        background: #f8f9fa;
        z-index: 2;
    }
    #left_div_buttons{
        font-size: larger;
        text-decoration: none;
        color: #8d8f91;      
    }
    #left_div_buttons_active{
        font-size: larger;
        text-decoration: none;
        color: #051a56;
        background: #e4e4e4;
        box-shadow: inset 0px 0px 12px #00000045;
    }
    #total_points{
        background: #051a56;
        color: white;
        font-size: large;
    }
    #redeem_button{
        height: 7vh;
        color: white;
        background: #051a56;
        text-decoration: none;
        box-shadow: inset 0px 0px 12px #0000009c;
        font-size: small;
    }
    .language_button{
        font-size: large;
    }
    #logout_button{
        font-size: x-large;
        color: #051a56;
    }
    #ask_popup{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 40vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }
    #filter_text{
        color: #8d8f91;
        text-decoration: none;
    }
    #filter_text:hover{
        background: #f8f9fa;
        color: #051a55;
    }
    #filter_text_active{
        background: #f8f9fa;
        color: #051a55;
        text-decoration: none;
    }
    #popup_done{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 40vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }
    #banner_link{
        height: 7vh;
        text-decoration: none;
        background: #f8f9fa;
        color: #030f31;
    }
    #panel_admin{
        box-shadow: 0px 0px 14px #00000024;
    }
    #redeemed_img{
        height: 30vh;
    }
    #side_admin_menu:hover{
        background: #f1f1f1;
        cursor: pointer;
    }
    #side_admin_menu_active{
        background: #051a56;
        color: white;
        font-weight: bolder;
    }
    #menu_drop_hover:hover{
        background: whitesmoke;
    }
    #carousel{
        height: 100vh;
    }
    #popup_modal{
        height: 36vh;
        top: 35vh;
        left: 35vw;
        box-shadow: 0px 0px 20px #00000014;
        z-index: 5;
    }
    #logo_png{
        width: 10vw;
    }
    #sticky_popup{
        position: fixed;
        top: 30vh;
        z-index: 100000;
        left: 58vh;
        background: #efefefb5;
        min-width: 35vw;
    }
    .slides{
        height: 100vh;
    }
}


@media only screen and (max-width: 600px){
    /*** Small Screens ***/
    #banner{
        height: 7vh;
        box-shadow: 0px 0px 5px #00000a3b;
        position: fixed;
        top: 0;
        z-index: 100000000;
        background: #061a57;

    }
    #logo_png{
        width: 30vw;
    }
    #blank_div_banner{
        height: 7vh;
    }
    #logo_div{
        min-height: 6vh;
        background: url('../images/logo.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    #default_button{
        background: #051a56;
        color: white;
        text-decoration: none;
        height: 5vh;
        font-family: tajawal;
    }
    #default_border_button{
        border: 1px solid #051a56;
        color: #051a56;
        text-decoration: none;
        height: 5vh;
    }
    #left_div_buttons{
        font-size: larger;
        text-decoration: none;
        color: #8d8f91;      
    }
    #left_div_buttons_active{
            font-size: larger;
        text-decoration: none;
        color: #051a56;
        background: #e4e4e4;
        box-shadow: inset 0px 0px 12px #00000045;
    }
    #total_points{
        background: #051a56;
        color: white;
        font-size: large;
    }
    #redeem_button{
        height: 7vh;
        color: white;
        background: #051a56;
        text-decoration: none;
        box-shadow: inset 0px 0px 12px #0000009c;
        font-size: 4vw;
    }
    .language_button{
        font-size: large;
    }
    #logout_button{
        font-size: x-large;
        color: #051a56;
    }
    #ask_popup{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 10vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }
    #filter_text{
        color: #8d8f91;
        text-decoration: none;
    }
    #filter_text:hover{
        background: #f8f9fa;
        color: #051a55;
    }
    #filter_text_active{
        background: #f8f9fa;
        color: #051a55;
        text-decoration: none;
    }
    #popup_done{
        position: fixed;
        height: fit-content;
        top: 30vh;
        left: 10vw;
        background: white;
        box-shadow: 0px 0px 8px black;
        z-index: 4;
    }
    #banner_link{
        height: 7vh;
        text-decoration: none;
        background: #f8f9fa;
        color: #030f31;
    }
    #panel_admin{
        box-shadow: 0px 0px 14px #00000024;
    }
    #redeemed_img{
        height: 30vh;
    }
    #side_admin_menu:hover{
        background: #f1f1f1;
        cursor: pointer;
    }
    #side_admin_menu_active{
        background: #051a56;
        color: white;
        font-weight: bolder;
    }
    #menu_drop_hover:hover{
        background: whitesmoke;
    }
    #carousel{
        height: 40vh;
    }
    #popup_modal{
        height: 36vh;
        top: 33vh;
        left: 10vw;
        box-shadow: 0px 0px 20px #00000014;
        z-index: 5;
    }
    #sticky_popup{
        position: fixed;
        top: 30vh;
        z-index: 100000;
        background: #efefefb5;
        left: 0;
        min-width: 100vw;
    }
}

#shadow{
    background: #00000057;
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 2;
    left: 0;
}
.noselect {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#popup_close{
    font-size: large;
    cursor: pointer;
    z-index: 5;
}
.service-box{
    opacity: 0.5;
}
.service-box:hover{
    opacity: 1;
}
.ui.message{
    
}
#carouselIndicators {
  border-radius: 50%;
}