// add poppins fonts
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300&family=Volkhov:wght@700&display=swap');

$sms-primary-dark: #D32F2F;
$sms-primary-light: #FFCDD2;
$sms-primary: #F44336;
$sms-text-icon: #FFFFFF;
$sms-secondary:  #536DFE;
$sms-text-primary: #212121;
$sms-text-secondary: #757575;
$sms-divider: #BDBDBD;


html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

body {
    font-family: 'Poppins', sans-serif;
    // background-image: linear-gradient(120deg,rgba(130,239,91,0.64) 0%,rgba(178,121,129,0.44) 10%,rgba(119,214,124,0.44) 20%,rgba(154,162,206,0.55) 30%,rgba(193,180,120,0.38) 40%,rgba(82,124,124,0.35) 50%,rgba(221,159,224,0.36) 60%,rgba(181,244,244,0.63) 70%,rgba(232,213,118,0.49) 80%,rgba(89,137,132,0.32) 90%,rgba(237,139,191,0.41) 100%) !important
}

// utilities
.sms-my-5 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.sms-btn-primary {
    font-weight: bold;
    background-color: $sms-secondary !important;

    &:hover {
        background-color: $sms-primary-light !important;
    }
}

.sms-bg-primary {
    background-color: $sms-primary !important;
}

.sms-text-icon {
    color: $sms-text-icon !important;
}

// scrollbar
/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #000; 
}

::-moz-scrollbar {
    width: 8px;
}


// sidebar
.main-layout{
    position: relative;
}

.sms-side-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; 
    width: 100px; 
    background-color: $sms-primary-dark !important;
    z-index: 99;
    overflow-y: auto;
    overflow-x: hidden;

    .nav-link {
        &:hover {
            color: $sms-primary-light;
        }
    }

    @media (max-width: 768px) {
        transform: translateX(-100px);
        transition: all 0.3s ease-in-out;
    }

    @media  (min-width: 768px) {
        transform: translateX(0);
        transition: all 0.3s ease-in-out;
    }

    a {
        text-decoration: none;
        // color: rgba(33, 37, 41, 1);
        color: $sms-text-icon;
    }
}

.show-sms-side-nav {
    transform: translateX(0);
    transition: all 0.3s ease-in-out;
}

.main-content {
    margin-left: 100px;
    transition: all 0.3s ease-in-out;

    @media (max-width: 768px) {
        margin-left: 0px;
    }
}
.nav-toggle-btn {
    background-color: $sms-primary;
    position: fixed;
    top: calc(50vh - 40px);
    left: 0px;
    padding: 8px 5px 8px 1px;
    border: none;
    border-radius: 0px 12px 12px 0px;
    outline: none;
    width: auto;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease-in-out;

    @media (min-width: 768px) {
        display: none;
    }
}

.nav-toggle-btn-open {
    left: 100px;
}



// section school-info
.sms-school-info-div {
    width: 100%;
    height: 280px;
    padding: 10px;
    background-color: rgba(255, 255, 255, .6);
    // background-image: url('./top-img.png');
    // background-image: url('./top-img-2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px;
    // border: 2px solid grey;

    @media (max-width: 992px) {
        height: 250px;
    }

    @media (max-width: 768px) {
        height: 200px;
    }

    @media (max-width: 576px) {
        background: none;
        height: auto;
    }
}

.sms-school-logo-container {
    height: 100%;
}

.sms-school-logo {
    height: 220px;
    background-color: #fff;
    padding: 12px;
    border-radius: 25px;

    @media (max-width: 992px) {
        height: 180px;
    }

    @media (max-width: 768px) {
        height: 120px;
    }
}

.sms-school-logo-img {
    height: 200px;

    @media (max-width: 992px) {
        height: 160px;
    }

    @media (max-width: 768px) {
        height: 100px;
    }
}

.sms-school-name {
    color: #fff;
    font-size: 3rem;
    text-shadow: 3px 3px 3px #000;

    @media (max-width: 1200px) {
        // font-size: 2.5rem;
        font-size: calc(1vw + 1.5rem);
    }

    @media (max-width: 768px) {
        font-size: 1.8rem;
    }
}

.sms-school-est, .sms-school-motto, .sms-school-eiin {
    color: #fff;
    text-shadow: 3px 3px 3px #000;

    @media screen and (max-width: 768px) {
        font-size: larger;
    }
        

    @media screen and (max-width: 576px) {
        font-size: large;
    }
}


// section carousel
.sms-carousel-img {
    height: 500px !important;

    @media screen and (max-width: 1200px) {
        height: 400px !important;
    }

    @media screen and (max-width: 992px) {
        height: 350px !important;
    }

    @media screen and (max-width: 768px) {
        height: 300px !important;
    }

    @media screen and (max-width: 576px) {
        height: 250px !important;
    }

    @media screen and (max-width: 400px) {
        height: 200px !important;
    }
}


// section notices
.sms-notice-date-div {
    border-radius: 15px 0 0 15px;
    background-color: $sms-primary;
}

.sms-notice-text-div {
    border-radius: 0;
    background-color: $sms-primary;
}

.sms-notice-download-div {
    border-radius: 0 15px 15px 0;
    background-color: $sms-primary;
}

.sms-notice-date, .sms-notice-text {
    color: $sms-text-icon;
    @media screen and (max-width: 768px) {
        font-size: 1rem !important;
    }
}


// section important links
.sms-imp-links {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    cursor: pointer;
    border-radius: 25px;
    color: $sms-text-primary !important;
    background-color: $sms-secondary !important;


    &:hover {
        background-color: $sms-primary-light !important;
        color: $sms-text-primary !important;
    }

    @media screen and (max-width: 768px) {
        font-size: 1rem;
        padding: .5rem;
    }
}

// section contact us
.sms-contact-info {
    font-size: 1.3rem;
    margin-bottom: 1.3rem;
    word-break: break-all;

    i {
        color: #0d6efd;
    }

    @media screen and (max-width: 992px) {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
}

.sms-map {
    overflow: auto;
    @media screen and (max-width: 992px) {
        margin-top: 20px;
        width: 400px;
    }

    @media screen and (max-width: 768px) {
        width: 300px;
    }
}

// section footer
.sms-footer {
    background-color: $sms-primary-light;
    padding: 1rem 0;
}

.sms-useful-links {
    i {
        font-size: 2rem;
    }

    @media screen and (max-width: 992px) {
        i {
            font-size: 1.5rem;
        }
    }
}

.sms-copyright-info {
    background-color: $sms-text-primary;
}


// about page
.table {
    td {
        padding: 10px !important;
    }

    tr {
        td:first-child {
            font-weight: bold;
        }
    }
}


// teacher page
.sms-teacher-info-btn {
    background-color: $sms-primary-light !important;
    color: $sms-text-primary !important;
    cursor: pointer;
    &:hover {
        background-color: $sms-primary !important;
        color: $sms-text-icon !important;
    }
}

.sms-teacher-info-btn-active {
    background-color: $sms-primary !important;
    color: $sms-text-icon !important;
}


// teachers page
.sms-teacher-card-info {
    a {
        text-decoration: none;
    }
}


// students page
.form-select:focus {
    border-color: $sms-primary !important;
    box-shadow: 0 0 0 .25rem rgba(76, 175, 80,.25) !important;
}


// result page
.sms-result-table, .sms-result-brief {
    @media screen and (max-width: 768px) {
        font-size: 1.2rem !important;
    }
        

    @media screen and (max-width: 576px) {
        font-size: 1rem !important;
    }
}