.bg-blue-mahidol {
    background-color: #1A458B;
}
.color-blue-mahidol {
    color: #1A458B;
}
.navbar-brand-image{
    width: 2.5rem;
    height: auto;
}
body.student-body {
    overflow-y: unset;
}
.userinfo-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70%;
}
.flag-lang {
    width: 2rem;
    height: 1.5rem;
}
.custom-switch-icon {
    display: inline-block;
    line-height: 1;
    border: 0;
    padding: 0;
    background: 0 0;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: bottom;
    position: relative;
    cursor: pointer;
}

    .custom-switch-icon .switch-icon-a {
        opacity: 1;
        display: block;
        width: 100%;
        height: 100%;
    }
/***************** TrackingStatus.aspx ****************/
.tracksts .nav-link.active {
    background-color: #BBDEFB;
    border-color: #BBDEFB;
}

/***************** Main.aspx ****************/
.menu-icon-card > span {
    font-size: 5rem;
}
.menu-icon-card .icon-docreq {
    color: #5599FF;
}
.menu-icon-card .icon-chgname {
    color: #ECEFF1;
    --fa-inverse: #78C4E3;
}
.menu-icon-card .icon-newcard {
    color: #FFA726;
    /*--fa-inverse: #1A458B;*/
}
.menu-icon-card .icon-tracksts {
    /*color: #FFFFFF;*/
    color: #1A458B;
    /*--fa-inverse: #5599FF;*/
}
.menu-card:hover {
    cursor: pointer;
    opacity: 0.9;
    background-color: #E3F2FD;
    border: 1px solid #1A458B;
}

/***************** QRPayment.aspx ****************/
.msg-paymethod-icon .icon {
    --tblr-icon-size: 1rem;
    vertical-align:middle;
}
/*** Desktops ***/
.menu-div {
    width: 20%;
    margin: 0.5rem !important;
}

/*** Extra small devices (portrait phones, less than 576px) ***/
@media (max-width: 575.98px) {
    .menu-div {
        width: 100%;
        margin: 0.5rem 0rem 0rem 0rem !important; /* top,right,bottom,left */
    }
    .menu-row {
        flex-direction: column !important;
    }
    .menu-icon-card > span {
        font-size: 2rem;
    }
}

/*** Small devices (landscape phones, 576px and up) ***/
@media (min-width: 576px) and (max-width: 767.98px) {
    .menu-div {
        width: 100%;
        margin: 0.5rem 0rem 0rem 0rem !important; /* top,right,bottom,left */
    }
    .menu-row {
        flex-direction: column !important;
    }
    .menu-icon-card > span {
        font-size: 3rem;
    }
}

/*** Medium devices (tablets, 768px and up) ***/
@media (min-width: 768px) and (max-width: 991.98px) {
    .menu-div {
        width: 100%;
        flex-direction: column !important;
    }
}

/*** Large devices (desktops, 992px and up) ***/
@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

/*** Extra large devices (large desktops, 1200px and up) ***/
@media (min-width: 1200px) {
    
}