/* #region Base Declaration */

:root {
    /* Kermit */
    /*    --color1: #75BDE0;
    --color2: #78D1D2;
    --color3: #97DBAE;
    --color4: #CDE4AD;*/
    /* Beachside */
    /*    --color1: #3B7097;
    --color2: #75BDE0;
    --color3: #A9D09E;
    --color4: #F6E2BC;*/
    /* Caribbean */
    /*     --color1: #53D2DC;
    --color2: #3196E2;
    --color3: #FF826C;
    --color4: #FFC05F;*/
    /* Traverse City */
    /*    --color1: #5193B3;
    --color2: #62C4C3;
    --color3: #F8D49B;
    --color4: #F8E6CB;*/
    /* Rayner Custom */
    --color1: #2f89cc;
    --color2: #75b7f2;
    --color3: #A9D09E;
    --color4: #ffb03e;
}

@font-face {
    font-family: "Inter";
    src: url("/font/static/Inter-Regular.ttf") format('truetype');
}

/* #endregion */

html {
    min-height: 100vh;
}

body {
    min-height: 100vh;
    position: relative;
    font-family: Inter;
    margin: 0;
}

/*#region Color */
.color-1 {
    color: var(--color1);
}

.color-2 {
    color: var(--color2);
}

.color-3 {
    color: var(--color3);
}

.color-4 {
    color: var(--color4);
}

/*#endregion */

/*#region Btn */

.custom_btn_primary {
    background-color: var(--color1)!important;
    border-radius: 5px;
    color: white!important;
    border: 1px solid transparent;
/*    font-weight: bold;*/
}

    .custom_btn_primary:hover {
        opacity: 0.9;
        background-color: var(--color1)!important;
        color: white!important;
    }

    .custom_btn_primary:active {
        opacity: 0.9;
        background-color: var(--color1)!important;
        color: white!important;
    }

.custom_btn_secondary {
    background-color: var(--color4)!important;
    color: white!important;
    border-radius: 5px;
    /*font-weight: bold;*/
    border: 1px solid transparent;
}

    .custom_btn_secondary:hover {
        background-color: var(--color4)!important;
        opacity: 0.9;
    }

    .custom_btn_secondary:active {
        background-color: var(--color4)!important;
        opacity: 0.9;
    }

.custom_outline_primary{
    border-color: var(--color1)!important;
}

    .custom_outline_primary:hover{
        background-color: var(--color1)!important;
        color: white!important;
    }

.custom_outline_secondary{
    border-color: var(--color4)!important;
}

    .custom_outline_secondary{
        background-color: var(--color4)!important;
    }

/*.btn{
    font-weight: bold;
}*/

/*#endregion */

header {
    background-color: white;
}

.contentBody {
    height: auto !important;
    background-color: white;
}

    /* To prevent distorted when adjust margin */
    .d-flex::before, .contentBody::before, .d-flex::after, .contentBody::after {
        content: "";
        display: table;
        clear: both;
    }

#loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1) url(/img/loading.gif) center no-repeat;
    z-index: 4;
    top: 0;
    left: 0;
    display: none;
}

#loading_full {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1) url(/img/loading2.gif) center no-repeat;
    z-index: 1001; /* dropdown menu 1000 so need 1001 to cover */
    top: 0;
    left: 0;
    display: none;
}

.title {
    font-weight: bold;
    border-bottom: 1px solid;
}

.page-item.active .page-link, .menubar a:active {
    background-color: var(--color1) !important;
    border-color: var(--color1);
}

.page-link {
    color: var(--color1);
}

.modal-body{
    padding: 2rem;
}

/*.table th, .table td{
    padding: 0.5rem!important;
}*/

/*#region Animation Keyframes */

@keyframes shake {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(-5deg);
    }

    20% {
        transform: rotate(5deg);
    }

    30% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/*#endregion */

/* #region Header Items (eMart Logo, Login Btn, Search Btn, Cart Btn) */
.eMart_logo_container {
    display: flex;
}

.eMart_logo {
    cursor: pointer;
}

    .eMart_logo img {
        height: 45px;
        margin: 5px 0px;
    }

.account {
    margin: 12px 0 5px auto;
}

header h4 {
    margin-top: 5px;
    color: gray;
}

header a:active {
    background-color: transparent !important;
    color: black !important;
}

.headerbtn {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 0;
    position: relative;
}

    .headerbtn i {
        font-size: 30px;
        cursor: pointer;
        color: var(--color1);
        margin-top: 6px;
    }

    .headerbtn span {
        color: black;
        font-weight: bold;
    }

    .headerbtn .badge {
        position: absolute;
        top: 0;
        right: 10px;
        background-color: red;
        color: white;
    }

    .headerbtn:hover {
        animation: shake 0.5s;
    }

.dropdown-toggle::after {
    border: none;
}

.account .nav-link:hover {
    color: var(--color4) !important;
}

.account .nav-link:focus {
    color: var(--color4) !important;
}

.search-container {
    position: relative;
    transition: box-shadow 0.2s ease;
    border-radius: 20px;
    margin: 2px auto 0 auto;
    height: 40px;
}

    .search-container:hover {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }

    .search-container input {
        border: none;
        border-radius: 20px;
        width: 250px;
        background-color: #eee;
        color: #444;
        padding: 8px 15px;
    }

        .search-container input:focus {
            border-color: #555;
        }

    .search-container button {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }

        .search-container button:hover {
            color: #555;
        }

    .search-container input:focus {
        outline: none;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    .search-container button:focus {
        background-color: #eee;
    }

/* #endregion */

/*#region Menubar */

.menubar {
    background-color: var(--color1);
    min-height: 40px;
}

    .menubar .navbar {
        height: 100%;
    }

    .menubar .navbar-nav{
        flex-flow: wrap;
    }

    .menubar .nav-link {
        color: white;
        padding: 10px 16px;
    }

    /*.menubar .nav-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }*/

    .menubar .dropdown-menu {
        padding: 0;
        margin-top: -3px; /* Hide gap betwwen menu and dropdown menu */
        background-color: var(--color1);
    }

    .menubar .dropdown-item {
        color: white;
        cursor: pointer;
    }

        .menubar .dropdown-item:active {
            background-color: var(--color1);
        }

        .menubar .dropdown-item:hover {
            color: black;
        }


/*#endregion */

/* #region Banner & Highlight */
.banner {
    margin: 0 auto;
}

.slick-slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-carousel img{
    object-fit: contain;
}

.slick-prev {
    left: 25px !important;
    z-index: 1;
}

.slick-next {
    right: 25px !important;
    z-index: 1;
}

.slick-slider {
    margin: 0 auto;
}

#highlight {
    position: relative;
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    #highlight div {
        position: relative;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        margin: 10px;
    }

        #highlight div img {
        }


/* #endregion */

/* #region Footer */
footer {
    display: block;
    position: relative;
    width: 100%;
    background-color: var(--color1);
    padding: 1em 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color:white;
    
}

    footer li {
        list-style-type: none;
    }

    footer ul > li:first-child {
        font-weight: bold;
    }

    footer a {
        color: white;
        text-decoration: underline;
    }

.small-screen-footer {
    margin-left: 4%;
}

footer i {
    color: var(--color1);
}

footer a:hover{
    color: black;
}

.footer ul{
    padding-left: 0;
}

/* #endregion */

/*#region LoginForm, changePw and background */
.background {
    width: 100vw;
    background: url("../img/bg-1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    opacity: 0.5;
}

.loginForm, .changePwForm {
    padding-top: 20px;
    margin: 0 auto;
    width: 30rem;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%)
}

.eyeiconposition {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 12px;
}

/*#endregion */

/*#region eMartHome */

.tileContainer {
    position: relative;
}

.eMartTitle {
    text-align: center;
    padding-top: 20px;
}

.eMart_name {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: black;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    opacity: 0.8;
    color: white;
    text-align: center;
}

    .eMart_name label {
        margin-top: 0.5rem;
    }

.imgContainer {
    height: inherit;
    margin: 0 auto;
}

    .imgContainer img {
        border-radius: 20px;
        object-fit: fill;
        width: 250px;
        height: 265px;
        border: 1px lightgray solid;
        padding: 16px;
        box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
        -webkit-box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
        -moz-box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
    }

    .imgContainer .eMartDesc {
        width: 250px;
        height: 250px;
    }

.eMartDesc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    color: white;
    background-color: var(--color2);
    transition: 0.5s;
    height: inherit;
    padding: 20px;
    opacity: 0;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    width: 100%;
}

    .eMartDesc:hover {
        opacity: 0.9;
        transition: 0.5s;
    }

    .eMart_name label {
        font-size: small;
    }


    .eMartDesc label {
        font-size: medium;
    }

.eMartHref, .eMartDetailsForm {
    height: inherit;
}

/*#endregion */

/*#region SearchPanel */

#searchPanel {
    flex-shrink: 0;
    margin: 10px 0 10px 0;
    overflow: hidden;
    transition: width .3s ease;
    border-top: 3px solid var(--color3);
}

    #searchPanel.hidden {
        width: 0;
        height: 0;
        overflow: hidden;
        transition: width .3s ease;
    }

    #searchPanel .form-group {
        margin-bottom: 5px;
    }

    #searchPanel .btn {
        font-weight: bold;
    }

    #searchPanel .card-body {
        padding: 1rem 1rem 0 1rem;
    }

.formSearchbtn {
    margin: 8px 0 8px 0;
}

.searchPanelExpand {
    display: block;
    margin-top: 15px;
    transform: translateX(-10px);
    width: 46px;
    transition: width .3s ease;
}

    .searchPanelExpand button {
        border-radius: 0 20px 20px 0;
        padding: 10px 15px;
        border: 1px solid var(--color4);
        background-color: white;
        color: blue;
    }

        .searchPanelExpand button:hover {
            background-color: var(--color4);
        }

    .searchPanelExpand.hidden {
        width: 0;
        height: 0;
        overflow: hidden;
        transition: width .3s ease;
    }

/*#endregion */

/*#region PopularPanel */

#popularPanel {
    flex-shrink: 0;
    margin-top: 10px;
    overflow: hidden;
    transition: width .3s ease;
    border-top: 3px solid var(--color3);
}

    #popularPanel.hidden {
        width: 0;
        height: 0;
        overflow: hidden;
        transition: width .3s ease;
    }

    #popularPanel .card-body > ul > li {
        font-weight: bold;
    }

    #popularPanel .card-body > ul > ul button {
        font-weight: 400!important;
    }

    #popularPanel .card-body ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #popularPanel .card-body .caret, #popularPanel .card-body .caret-down {
        cursor: pointer;
        user-select: none;
    }

        #popularPanel .card-body .caret-down::before {
            content: "\25B6";
            color: var(--color1);
            display: inline-block;
            margin-right: 6px;
            transform: rotate(90deg);
        }

        #popularPanel .card-body .caret::before {
            transform: rotate(0deg);
        }

    #popularPanel .card-body .nested {
        display: none;
    }

    #popularPanel .card-body .active {
        display: block;
    }

    #popularPanel .btn {
        border-color: white !important;
        border-radius: 5px;
        margin-left: 20px;
        text-align: left;
    }

.popularPanelExpand {
    display: block;
    margin-top: 15px;
    transform: translateX(-10px);
    width: 46px;
    transition: width .3s ease;
}

    .popularPanelExpand button {
        border-radius: 0 20px 20px 0;
        padding: 10px 15px;
        border: 1px solid var(--color4);
        background-color: white;
        color: blue;
    }

        .popularPanelExpand button:hover {
            background-color: var(--color4);
        }

    .popularPanelExpand.hidden {
        width: 0;
        height: 0;
        overflow: hidden;
        transition: width .3s ease;
    }

/*#endregion */

/*#region TablePanel */

.tablePanel {
    margin: 10px 0 10px 10px;
    overflow: hidden;
    border-top: 3px solid var(--color3);
}

    .tablePanel .btn {
        font-weight: bold;
    }

    .tablePanel .card-header button {
        padding: 1.5px 10px;
    }

.table-striped tbody tr:nth-of-type(odd), .odd .dtfc-fixed-left {
    background-color: snow !important;
}

.buttonContainer {
    text-align: end;
}

    .buttonContainer label {
        font-size: 12px;
        margin-right: 20px;
        line-height: 30px;
        font-weight: 400 !important;
        cursor: pointer;
        margin: 0px 10px 0 0;
    }

    .buttonContainer div div {
        margin-right: 10px
    }

#procurementEstimated {
    width: 90px;
}

#purchaseRequisition th, #procurementProcess th, #requisitionApproval th {
    font-weight: 400;
}

.tableheader, thead .tableheader .dtfc-fixed-left {
    background-color: var(--color2) !important;
}

.dataTables_length, .dataTables_filter {
    display: none;
}

.filters > th {
    padding: 6px 6px;
}

.table td, .table th{
    padding: 6px 6px;
}

/*#endregion */

/*#region ProductPanel */

.productPanel {
    margin: 10px 0 0 10px;
    overflow: hidden;
    width: 100%;
}

    .productPanel > .card {
        border-top: 3px solid var(--color3);
    }

/*    .productPanel .btn {
        font-weight: bold;
    }*/

    .productPanel .d-flex:first-child div {
        height: 35px;
        margin: 5px 0 10px 0;
    }

#ProductDetailsModal .form-group {
    margin-bottom: 0.2rem !important;
}

.productPanel thead{
    background-color: var(--color2);
    color: white;
}

.productTile table {
    margin-left: 10px;
}

/*#endregion */

/*#region Browse */

/*.productContainer {
    margin: 5px;
}*/

.productcard {
    box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
    -webkit-box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
    -moz-box-shadow: 1px 0px 11px 1px rgba(130,130,130,0.75);
    border-radius: 10px;
}

.productimg {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    object-fit: contain;
}

.productName {
    height: 55px;
    display: inline-block;
    font-size: 12px;
    overflow: hidden;
    text-align: left !important;
    padding: 0 10px;
    margin: 0 auto;
}

.productcurrency {
    display: inline-block;
    min-height: 20px;
    overflow: hidden;
    font-size: 12px;
}

.productprice {
    display: inline-block;
    min-height: 20px;
    overflow: hidden;
    font-size: 12px;
    padding: 0 10px;
}

.productuom {
    display: inline-block;
    min-height: 20px;
    overflow: hidden;
    font-size: 12px;
}

.productdetailsbtn {
    width: 100%;
    border-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.rslides_tabs {
    box-shadow: 0 0 1px rgb(255 255 255 / 30%), inset 0 0 5px rgb(0 0 0);
    -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
    -webkit-box-shadow: 0 0 1px rgb(255 255 255 / 30%), inset 0 0 5px rgb(0 0 0);
    font-size: medium;
    list-style: none;
    margin: 10px auto 10px;
    padding: 10px 0;
    text-align: center;
    width: 250px;
    border-radius: 20px;
}

.rslides img {
    float: none !important;
}

.rslides_tabs li {
    display: inline;
    float: none;
    margin-right: 1px;
}

.rslides_tabs a {
    width: auto;
    line-height: 20px;
    padding: 9px 20px;
    height: auto;
    background: transparent;
    display: inline;
}

.modal_description a {
    white-space: nowrap;
    margin-left: 1rem;
}

/*#endregion */

/*#region Cart */

.imageHeader, .actionHeader {
    width: 10%;
}

.productHeader {
    width: 80%;
}

.cartBody .left-panel-label {
    width: 150px;
    align-self: center;
    margin-right: 3%;
    flex-shrink: 0;
}

.cartBody .left-panel-value {
    width: 100%;
    margin-right: 3%;
}

.cartBody .right-panel-label {
    width: 120px;
    margin-right: 3%;
    align-self: center;
    flex-shrink: 0;
}

.cartBody .right-panel-value {
    width: 120px;
    flex-shrink: 0;
}

.total {
    margin-left: 84%;
    width: 10%;
}

.cartBody input{
    width: 100%;
}

.cartBody button, .checkOut, .checkOut_small, .cartAction_horizontal button {
    width: 155px;
    flex-shrink: 0;
}

.cart-container {
    padding-top: 10px;
}

    .cart-container thead {
        background-color: var(--color2);
        color: white;
    }

.cartBody span {
    font-weight: 400;
}

.docWrap, .addressWrap{
    align-self: center;
}

#cartTable thead{
    display: table-header-group;
}

.cartAction_horizontal{
    display: none!important;
}

.checkOut_small{
    display: none;
}

/*#cartTable tbody tr th:nth-child(3), #cartTable tfoot tr th:nth-child(3) {
    display: inline-table;
}*/

/*#endregion */

/* #region mobile screen */
@media only screen and (min-width: 360px) and (max-width: 767px){

    /*#region Banner Img & Highlight Img */

    .slick-slide img {
        height: 350px !important;
        object-fit: cover;
    }

    #highlight div img {
        width: 280px;
        height: 210px;
    }
    /*#endregion */

    /*#region Footer */
    footer ul li, footer span, .footer b {
        font-size: x-small!important;
    }

    footer .container > .row:first-child {
        min-height: 52px;
    }

    /*#endregion */

    .background{
        height: 500px;
    }

    .loginForm{
        width: 80%;
        font-size: x-small!important;
    }

    .loginForm button{
        font-size: x-small!important;
    }

    .changePwForm{
        width: 80%;
        font-size: x-small!important;
    }

    .changePwForm button{
        font-size: x-small!important;
    }

    .modal-body{
        padding: 10px;
    }

    /* #region Header */

    .account{
        display: none!important;
    }

    .account-mobile{
        display: flex;
        margin: 12px 10px 5px auto;
    }

    .search-container{
        margin: 5px auto;
        height: 30px;
    }

    .search-container input{
        width: 160px;
        padding: 3px 10px;
    }

    .welcome-user{
        font-size: small;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .badge{
        right: -5px!important;
    }

    .account-mobile .dropdown-menu{
        font-size: small!important;
    }

    /* #endregion */

    /* #region Menubar */
    .menubar a {
        font-size: small !important;
    }

        .menubar ul {
            overflow-x: scroll;
            white-space: nowrap !important;
            flex-wrap: nowrap !important;
            -webkit-overflow-scrolling: touch;
        }

    .navbar .nav-item:active .dropdown-menu {
        display: block;
    }

    .menubar .nav-link:active, .menubar .dropdown-item:focus {
        background-color: white!important;
        color: black;
    }

    .dropdown-menu.show{
        
    }

    /* #endregion */

    /* #region Browse */

    .productPanel label, .productPanel select, .productPanel option, #ProductDetailsModal div,
    #ProductDetailsModal option, #ProductDetailsModal select, #ProductDetailsModal input, #ProductDetailsModal .btn,
    .divDeliveryInfo .btn, .productcard a, .pagination li a, .productTile, .productTile .btn{
        font-size: x-small;
    }

    .productPanel select {
        height: 25px;
        align-self: center;
    }

    .productContainer {
        width: 50%;
    }

    .productimg {
        height: 130px;
        margin: 5px 0px;
    }

    .productName, .productcurrency, .productprice, .productuom {
        font-size: x-small;
    }

    .popular-btn{
        width: 100%;
        font-size: x-small;
    }

    .popularItem span, .popularItem button{
        font-size: x-small;
    }

    .popularItem > ul > li {
        font-weight: bold;
    }

    .popularItem > ul > ul button {
        font-weight: 400 !important;
    }

    .popularItem ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .popularItem .caret, .popularItem .caret-down {
        cursor: pointer;
        user-select: none;
    }

        .popularItem .caret-down::before {
            /*content: "\25B6";*/
            content: "\25B2";
            color: var(--color1);
            display: inline-block;
            margin-right: 6px;
            transform: rotate(90deg);
        }

        .popularItem .caret::before {
            transform: rotate(180deg);
        }

    .popularItem .nested {
        display: none;
    }

    .popularItem .active {
        display: block;
    }

    .orderby-container label, .orderby-container select, .view-container label, .view-container select{
        font-size: x-small;
    }

    #ProductDetailsModal img{
        height: 300px;
    }

    .modal-body div, .modal-body select, .modal-body option {
        font-size: 12px;
    }

    /*.modal_site {
        width: 200px;
    }*/

    /* #endregion */

    /* #region OrderHistory */
    .search-collapse-btn {
        width: 100%;
        font-size: x-small;
    }

    #OrderHistoryCollapse, #OrderHistoryCollapse label, #OrderHistoryCollapse input, #OrderHistoryCollapse select, #OrderHistoryCollapse button, #OrderDetailsModal label, #OrderDetailsModal span, #OrderDetailsModal button{
        font-size: x-small;
    }

    #OrderDetailsModal .modal-title {
        font-size: small;
    }


    /* #endregion */

    /* #region Approval */
    #PendingApprovalModal .modal-body, #PendingApprovalModal button, #ApprovalCollapse, #ApprovalCollapse label, #ApprovalCollapse input, #ApprovalCollapse select, #ApprovalCollapse button, 
    #OrderDetailsModal input, #OrderDetailsModal select {
        font-size: x-small;
    }

    #PendingApprovalModal .modal-title {
        font-size: small;
    }




    /* #endregion */

    /* #region Procurement */

    #ProcurementCollapse label, #ProcurementCollapse input, #ProcurementCollapse button, #ProcurementCollapse select{
        font-size: x-small!important;
    }

    /* #endregion */

    /* #region Cart */
    .cart-container, .cart-container button, .cart-container input{
        font-size: x-small;
    }

    .cart-details img{
        height: 150px;
        width: 100px;
    }

    /* #endregion */

    .custom-collapse-border, .custom-border{
        margin-top: 2px;
        border: 1px solid gray;
        border-radius: 5px
    }

    .tablePanel, .tablePanel .card-body .btn, .tablePanel .card-body button, .tablePanel input, .tablePanel select, .tablePanel label{
        font-size: x-small!important;
    }

    .card-title, .modal-title {
        font-size: small;
    }

    .contentBody{
        min-height: 440px;
    }

    .desktop {
        display: none !important;
    }

}
/* #endregion end of mobile screen */

/* #region Old desktop screen */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: calc(100vw - 40px)
    }

    .modal-dialog.modal-custom {
        max-width: calc(100vw - 40px)
    }

    .custom_btn_primary, .btn, .custom_btn_secondary {
        font-size: x-small;
    }

    .title {
        font-size: medium;
    }

    /* #region Header */
    .eMart_logo img {
        height: 45px;
    }

    .welcome-user, .account .dropdown-item {
        font-size: small;
    }

    /* #endregion */

    /*#region Footer */
    footer ul li, footer span {
        font-size: 12px;
    }

    footer .container > .row:first-child {
        min-height: 52px;
    }

    /*#endregion */

    /*#region Banner Img & Highlight Img */

    .slick-slide img {
        height: 350px !important;
    }

        #highlight div img {
            width: 280px;
            height: 210px;
        }

    /*#endregion */

    /*#region Content */

    .contentBody, .background {
        min-height: calc(100vh - 213px)
    }

    /*#endregion */

    /*#region MenuBar */

    .menubar .nav-link, .menubar .dropdown-item {
        font-size: 12px;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .menubar .nav-link:hover, .menubar .dropdown-item:focus {
        background-color: white;
        color: black;
    }

    /*#endregion */

    /*#region eMart */

    .tileContainer {
        margin: 10px;
    }

/*    .imgContainer img, .eMartDesc {
        width: 280px;
        height: 280px;
    }*/

/*        .eMart_name label, .eMartDesc label {
            font-size: 12px
        }*/

    /*#endregion */

    /*#region SearchPanel */

    #searchPanel {
        width: 245px;
        height: 686.67px /*For animation not distorted */
    }

    /*#endregion */

    /*#region TablePanel */

    .card-body label, .card-body a, .card-body input,
    .card-body select, .card-body option, table th, tbody td,
    .dataTables_info, .pagination li a, #procurementStatus {
        font-size: x-small;
    }

    .updateSelectedRecord {
        font-size: x-small;
    }

    #purchaseRequisition_wrapper .dataTables_scrollBody {
        min-height: 430px;
    }

    #procurementProcess_wrapper .dataTables_scrollBody {
        min-height: 367px;
    }

    #requisitionApproval_wrapper .dataTables_scrollBody{
        min-height: 387px;
    }

    /*#procurementStatus, .updateSelectedRecord {
        width: 125px;
    }*/

    /*#endregion */

    /*#region Browse */

    .productPanel label, .productPanel select, .productPanel option, #ProductDetailsModal div, #ProductDetailsModal option, #ProductDetailsModal select {
        font-size: x-small;
    }

    .productPanel select {
        height: 25px;
        align-self: center;
    }

    .productContainer {
        width: 200px;
    }

    .productimg {
        height: 150px;
    }

    .productName, .productcurrency, .productprice, .productuom {
        font-size: x-small;
    }

    #popularPanel {
        width: 250px;
    }

        #popularPanel .card-body > ul li {
            font-size: 12px;
            font-weight: bold;
        }

        #popularPanel .card-body > ul ul li button {
            font-size: x-small;
            font-weight: 400;
        }

    .modal-body div, .modal-body select, .modal-body option {
        font-size: 12px;
    }

    .modal_site{
        width: 200px;
    }

    /*#endregion */

    /*#region Cart */
    .total, .cart_total {
        font-size: 14px;
    }

    #cartTable th, .cartBody input {
        font-size: x-small;
    }

    .cartBody input {
        /*width: 90px;*/
        font-size: x-small;
    }

    /*#endregion */

    .account {
        display: block;
    }

    .mobile {
        display: none!important;
    }
}
/* #endregion */

/* #region 14" laptop screen */
@media only screen and (min-width: 1024px) and (max-width: 2043px) {

    .container {
        max-width: calc(100vw - 200px);
    }

    .modal-dialog.modal-custom {
        max-width: 90em;
    }

    .custom_btn_primary, .btn, .custom_btn_secondary {
        font-size: 12px;
    }

    .title {
        font-size: large;
    }

    /*#region Header */

    .welcome-user, .account .dropdown-item {
        font-size: medium;
    }

    /*#endregion */

    /* #region Footer */
    footer ul li, footer span {
        font-size: 14px;
    }

    footer .container > .row:first-child{
        min-height: 58px;
    }

    /* #endregion */

    /* #region Banner Img & Highlight Img */
    .slick-slide img {
        height: 400px !important;
    }


        #highlight div img {
            width: 300px;
            height: 240px;
        }
    /* #endregion */

    /*#region Content */

    .contentBody, .background {
        min-height: calc(100vh - 219px)
    }

    /*#endregion */

    /*#region MenuBar */

    .menubar .nav-link, .menubar .dropdown-item {
        font-size: 14px;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .menubar .nav-link:hover, .menubar .dropdown-item:focus {
        background-color: white;
        color: black;
    }

    /*#endregion */

    /*#region eMart */

    .tileContainer {
        margin: 10px;
    }

/*    .imgContainer img, .eMartDesc {
        width: 300px;
        height: 300px;
    }*/

/*        .eMart_name label, .eMartDesc label {
            font-size: 14px
        }*/

    /*#endregion */

    /*#region SearchPanel */

    #searchPanel {
        width: 275px;
        height: 700px;
    }

    /*#endregion */

    /*#region TablePanel */

    .card-body label, .card-body a, .card-body input,
    .card-body select, .card-body option, table th, tbody td,
    .dataTables_info, .pagination li a, #procurementStatus {
        font-size: 12px;
    }

    .updateSelectedRecord {
        font-size: 12px;
    }

    #purchaseRequisition_wrapper .dataTables_scrollBody {
        min-height: 439px;
    }

    #procurementProcess_wrapper .dataTables_scrollBody, #requisitionApproval_wrapper .dataTables_scrollBody {
        min-height: 392px;
    }

    #procurementStatus {
        width: 140px;
    }

    /*#endregion */

    /*#region Browse */

    .productPanel label, .productPanel select, .productPanel option, #ProductDetailsModal div, #ProductDetailsModal option, #ProductDetailsModal select {
        font-size: 12px
    }

    .productPanel select {
        height: 28px;
        align-self: center;
    }

    .productContainer {
        width: 205px;
    }

    .productimg {
        height: 155px;
    }

    .productName, .productcurrency, .productprice, .productuom {
        font-size: 12px;
    }

    #popularPanel {
        width: 280px;
    }

        #popularPanel .card-body > ul li {
            font-size: 14px;
            font-weight: bold;
        }

        #popularPanel .card-body > ul ul li button {
            font-size: 12px;
            font-weight: 400;
        }

    .modal-body div, .modal-body select, .modal-body option {
        font-size: 12px;
    }

    .modal_site {
        width: 25em;
    }

    /*#endregion */

    /*#region Cart */

    .total, .cart_total {
        font-size: medium;
    }

    #cartTable th, .cartBody input {
        font-size: 12px
    }

    .cartBody input {
        /*width: 120px;*/
        font-size: 12px;
    }

    /*#endregion */

    .account {
        display: block;
    }

    .mobile {
        display: none!important;
    }
}
/* #endregion */

/* #region Large desktop screen */
@media only screen and (min-width: 2048px) {

    .container {
        max-width: calc(100vw - 200px)
    }


    .modal-dialog.modal-custom {
        max-width: 100em;
    }

    .custom_btn_primary, .btn, .custom_btn_secondary {
        font-size: 14px;
    }

    .title {
        font-size: 20px;
    }

    /*#region Header */

    .welcome-user, .account .dropdown-item {
        font-size: medium;
    }

    /*#endregion */

    /* #region Footer */
    footer ul li, footer span {
        font-size: medium;
    }

    footer .container > .row:first-child {
        min-height: 64px;
    }

    /* #endregion */

    /* #region Banner Img & Highlight Img */
    .slick-slide img {
        height: 600px !important;
    }

        #highlight div img {
            width: 380px;
            height: 280px;
        }
    /* #endregion */

    /*#region Content */

    .contentBody, .background {
        min-height: calc(100vh - 225px)
    }

    /*#endregion */

    /*#region MenuBar */

    .menubar .nav-link, .menubar .dropdown-item {
        font-size: medium;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .menubar .nav-link:hover, .menubar .dropdown-item:focus {
        background-color: white;
        color: black;
    }

    /*#endregion */

    /*#region eMart */

    .tileContainer {
        margin: 30px;
    }

/*    .imgContainer img, .eMartDesc {
        width: 400px;
        height: 400px;
    }*/

/*        .eMart_name label, .eMartDesc label {
            font-size: medium;
        }*/

    /*#endregion */

    /*#region SearchPanel */

    #searchPanel {
        width: 275px;
        height: 710px;
    }

    /*#endregion */

    /*#region TablePanel */

    .card-body label, .card-body a, .card-body input,
    .card-body select, .card-body option, table th, tbody td,
    .dataTables_info, .pagination li a, #procurementStatus {
        font-size: 12px;
    }

    .updateSelectedRecord {
        font-size: 14px;
    }

    #purchaseRequisition_wrapper .dataTables_scrollBody {
        min-height: 447px;
    }

    #procurementProcess_wrapper .dataTables_scrollBody {
        min-height: 400px;
    }

    #requisitionApproval_wrapper .dataTables_scrollBody{
        min-height: 395px;
    }
    /*#endregion */

    /*#region Browse */
    .productPanel label, .productPanel select, .productPanel option, #ProductDetailsModal div, #ProductDetailsModal option, #ProductDetailsModal select {
        font-size: 14px
    }

    .productPanel select {
        height: 32px;
        align-self: center;
    }

    .productContainer {
        width: 280px;
    }

    .productimg {
        height: 280px;
    }

    .productName, .productcurrency, .productprice, .productuom {
        font-size: 14px;
    }

    #popularPanel {
        width: 300px;
    }

    .modal_site {
        width: 28em;
    }

    /*#endregion */

    /*#region Cart */

    .total, .cart_total {
        font-size: large;
    }

    #cartTable th, .cartBody input {
        font-size: 14px;
    }

    .cartBody input {
        /*width: 150px;*/
        font-size: 14px;
    }

    /*#endregion */

    .account {
        display: block;
    }

    .mobile {
        display: none!important;
    }

}
/* #endregion */

/* Special Handling */
@media only screen and (max-width : 1290px) {

    /*#region Cart */

    #cartTable thead {
        display: none;
    }

    #cartTable tbody tr th:nth-child(3), #cartTable tfoot tr th:nth-child(3) {
        display: none;
    }

    .cartAction_horizontal {
        display: flex !important;
    }

    .checkOut_small {
        display: block;
    }

    .checkOut {
        display: none;
    }

    .total {
        margin-left: 45%;
        width: 95%;
    }

    /*#endregion */
}