.container {
    background-color: #fff;
}

@media (min-width: 768px) {

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }

    .navbar-brand {
        width: 45%;
    }

    /* .row {
        height: 100vh;
        display: flex;
    }

    .container {
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
    } */
}

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


    .navbar-brand {
        width: 45%;
    }

    /* .row {
        height: 100vh;
        display: flex;
    }
    .container {
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
    } */
}

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

    .navbar-brand {
        width: 45%;
    }

    /* .row {
        height: 100vh;
        display: flex;
    }
    .container {
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
    } */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {


    .navbar-brand {
        width: 45%;
    }

    /* .row {
        height: 100vh;
        display: flex;
    }

    .container {
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
    } */
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}

.bg-orange {
    background-color: #F27C21;
}

.bg-blue {
    background-color: #60B0EE;
}

.bg-pink {
    background-color: #EF4581;
}

.bg-weekend {
    background-color: #43A047;
}

@media (max-width: 768px) {
    .bg-blue {
        background-color: #60B0EE;
    }

    .bg-pink {
        background-color: #EF4581;
    }
}
/* SHADOW */

.shadow-orange {
    box-shadow: 0px 4px 8px rgba(242, 124, 33, 0.5) !important;
}

.shadow-blue {
    box-shadow: 0px 4px 8px rgba(96, 176, 238, 0.5) !important;
}

.shadow-pink {
    box-shadow: 0px 4px 8px rgba(239, 69, 129, 0.5) !important;
}

/* BUTTUN DISABLE */

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #F27C21;
    --bs-btn-border-color: #F27C21;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #EC6E0E;
    --bs-btn-hover-border-color: #D4630C;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D4630C;
    --bs-btn-active-border-color: #BC580B;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #F27C21;
    --bs-btn-disabled-border-color: #F27C21;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #60B0EE;
    --bs-btn-border-color: #60B0EE;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3299E9;
    --bs-btn-hover-border-color: #1b8ee7;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1b8ee7;
    --bs-btn-active-border-color: #1b8ee7;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #60B0EE;
    --bs-btn-disabled-border-color: #60B0EE;
}


/*PLACEHOLDER*/
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* LISTGROUP ITEM  */
.list-group a {
    transition: 0.3s
}

.list-group a:hover {
    /* background-image: linear-gradient(to right, #F27C21, #FFFFFF); */
    background-color: #F27C21;
    border-color: #F27C21;
    color: #FFFFFF;
}

/* FOOTER */
#foot-link a,
#foot-add a {
    text-decoration: none;
}

#foot-link li>a,
#foot-add li>a {
    color: #F27C21;
}

#foot-add li>a>i {
    font-size: 24px;
}

/* DROPDOWN */
.dropdown:hover>.dropdown-menu {
    display: block;
}

.dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/* BORDER */
.border-bottom {
    border-image: linear-gradient(to right, #F27C21, #FFFFFF) 1;
}

.border-top {
    border-image: linear-gradient(to right, #F27C21, #FFFFFF) 1;
}

/* OFFCANVAS */
.offcanvas {
    background-color: #F2F2F2;
}

.text-bg-dark {
    color: #fff !important;
    background-color: #F2F2F2 !important;
}

/* NAVBAR */
.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.bg-body-orange {
    /* --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; */
    /* background-color: #FFFFFF; */
    border-top: #F27C21 1px solid;
    border-bottom: #F27C21 1px solid;
    border-image: radial-gradient(#F27C21, #FFFFFF) 10;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 21px;
}

/* PAGINATION */
.active>.page-link,
.page-link.active {
    background-color: #F27C21;
    border-color: #F27C21;
}

.page-link {
    color: #F27C21;
}

.page-link:hover {
    color: #d4630c;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.modal{
    font-family: "Anuphan", sans-serif;
}

/* FONT */
.anuphan {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.anuphan-light {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.anuphan-regular {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.anuphan-medium {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.anuphan-semibold {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.anuphan-bold {
    font-family: "Anuphan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}