@font-face {
        font-family: 'Assistant-SemiBold';
        src: url('../fonts/Assistant-SemiBold.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Assistant-Light';
        src: url('../fonts/Assistant-Light.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Assistant-Bold';
        src: url('../fonts/Assistant-Bold.ttf') format('truetype');
    }

    body {
        font-family: Assistant-Light;
        margin: 0;
        padding: 0;
        background-color: #fff6e8;
        transition: margin-left 0.3s;
    }

    h2, h5 {
        font-family: Assistant-Bold;
        margin-top: 1vh;
        padding: 0 0 10px 0;
    }

    .dashboard-logo > img {
        width: 50vh;
        display: flex;
        margin: auto;
    }

    #menu-toggle {
        display: none;
    }

    .ProfileContainer {
        display: flex;
        justify-content: space-between;
        background-color: #4d0000;
    }

    .menu-icon {
        font-size: 20px;
        cursor: pointer;
        color: aliceblue;
        transition: .2s;
        padding: 5px 10px;
        background-color: #960000;
        margin: 1vh 1vh 1vh 1vh;
        border-radius: 5px;
    }

    .sidenav {
        font-size: smaller;
        height: 100%;
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #960000;
        transition: left .2s ease-in-out;
        overflow-x: hidden;
        -webkit-box-shadow: -1px 10px 43px 0px rgba(0,0,0,0.54);
        -moz-box-shadow: -1px 10px 43px 0px rgba(0,0,0,0.54);
        box-shadow: -1px 10px 43px 0px rgba(0,0,0,0.54);
    }

    .menu-item button {
        padding: 10px 10px 10px 10px;
        font-size: 15px;
        text-decoration: none;
    }


    .accordion-button {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        color: aliceblue !important;
    }

        .accordion-button > i {
            padding: 0 8px 0 5px;
            font-size: 17px;
        }

    .submenu > a:hover {
        background-color: rgb(207 95 49 / 0.30);
        border-radius: 5px;
        color: aliceblue !important;
    }

    .active {
        background-color: floralwhite;
        color: #7D0A0A !important;
        border-radius: 5px;
        font-family: Assistant-SemiBold;
        box-shadow: 2px -1px 5px 2px rgba(0,0,0,0.39);
    }

    .submenu a {
        color: white;
        text-decoration: none;
        display: block;
        margin: 0 9px 1vh 3em;
        transition: .5s;
        padding: 2px 8px;
    }

    .menuDashboard {
        font-size: 15px;
        font-family: Assistant-Light;
        text-decoration: none;
        padding: 0 0 0 .4rem;
        margin: 0 10px 0 5px;
        transition: .2s;
    }

        .menuDashboard i {
            padding: 0 5px 0 0;
            font-size: 20px;
        }

        .menuDashboard a {
            text-decoration: none;
            color: white;
        }

        .menuDashboard:hover {
            background-color: rgb(207 95 49 / 0.30);
            border-radius: 5px;
            color: azure;
        }

    .main-content {
        margin: 0 20px 0 270px;
        transition: margin-left 0.2s ease-in-out;
    }

    .bn48 {
        font-family: Assistant-Light;
        cursor: pointer;
        font-size: 14px;
        color: aliceblue !important;
        text-decoration: none;
        margin: 0 2em 0 0;
        border: none;
    }

    #profile-dropdown > .dropdown-item:hover {
        background-color: #7D0A0A;
        border-radius: 5px;
        color: aliceblue;
    }

    .dropdown-menu {
        display: none;
        font-size: smaller;
        background-color: aliceblue;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 10px 5px;
    }

    .dropdown-divider {
        background-color: aliceblue;
        width: 70%;
        margin: auto;
        opacity: 0.3;
    }

    .dropdown-menu a {
        color: #0b192b;
    }

    .dropdown-item:hover {
        background-color: rgba(216, 197, 209, 0.4);
    }

    /* INTERFACE PAGE*/
    .table {
        margin: auto;
        width: 100%;
        font-size: .85rem;
    }

    .search-container {
        border: none;
        border-radius: 7px;
    }

    /*General Settings*/
    #txt-search, .txt-search {
        width: 25vh;
        padding: .250em 0 .250em .4em;
        border: none;
        outline: none;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
    }
    #btn-search {
        background-color: rgb(116 116 116 / 0.81);
        color: floralwhite;
        border: none;
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
        padding: .250em .7em;
        cursor: pointer;
        font-size: 1em;
    }

        #btn-search:hover {
            background-color: #b1b1b1;
        }

    .fa-trash-can {
        color: crimson;
    }

    .ri-edit-2-line {
        color: royalblue;
        font-size: 22px;
    }

    input[type="checkbox"] {
        position: relative;
        width: 30px;
        height: 15px;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: red;
        outline: none;
        border-radius: 80%;
        cursor: pointer;
        box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
    }

        input[type="checkbox"]::before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 80%;
            border: 1px solid rgba(0,0,0,0.34);
            background: #DC3545;
            position: absolute;
            top: 0;
            left: 0;
            transition: 0.3s;
        }

        input[type="checkbox"]:checked::before {
            transform: translateX(110%);
            background: #fff;
        }

        input[type="checkbox"]:checked {
            background: #09d100;
        }

    .btnAdd {
        padding: .1vw .3vw .1vw .3vw;
        font-size: .9rem;
        font-family: Assistant-SemiBold;
        color: azure;
        border-radius: 2rem;
        border: 1px solid rgb(222 0 0 / 0.90);
        background-color: rgb(222 0 0 / 0.90);
        height: 100%;
        margin-left: -2em;
    }

        .btnAdd:hover {
            background-color: rgb(168 0 0 / 0.90);
            color: white;
            border: 1px solid rgb(222 0 0 / 0.90);
        }

    .btnPrint {
        padding: 5px 8px 5px 8px;
        font-size: 15px;
        font-family: Assistant-SemiBold;
        color: aliceblue;
        border-radius: 2rem;
        border: .01em solid aliceblue;
        background-color: rgb(94 94 94);
        height: 100%;
    }

        .btnPrint:hover {
            background-color: #fff6e8;
            color: darkslategray;
        }

    .btnContainer {
        width: 100%;
        display: flex;
        margin-bottom: 2vh;
    }


    .tblContent {
        font-weight: 100;
    }

    .menu-item > a {
        color: aliceblue;
        padding: 10px 10px 10px 10px;
        font-size: 15px;
        text-decoration: none;
    }

    .active-menu {
        background-color: #fff6e8;
        border-radius: 5px;
        font-family: Assistant-SemiBold;
        box-shadow: -5px 5px 20px rgba(0,0,0,0.34);
        margin: 0 10px 0 5px;
    }

        .active-menu i {
            padding: 0;
        }

        .active-menu a {
            color: #4d0000;
            margin: 0 .8rem 0 .5rem;
        }

    .interface-header,
    .dr-add-interface-header {
        margin: auto;
        width: 97%;
        display: flex;
        justify-content: space-between;
        padding: 8px 8px 8px 8px;
        background-color: #524e4c;
        border-radius: 2rem;
        margin-bottom: 2.2vh;
    }

    .addInterfaceHeader {
        display: flex;
        justify-content: space-between;
        padding: 8px 8px 8px 8px;
        background-color: #524e4c;
        border-radius: .2rem;
        margin-bottom: 2.2vh;
    }

    table {
        box-shadow: 0px 3px 5px rgba(0,0,0,0.24);
    }

    .btnRemove {
        color: red;
    }


    /*MODAL*/
    .modal-body, modal-footer {
        font-family: Assistant-Light;
    }

    .modal-header {
        background-color: #7D0A0A;
        color: aliceblue;
        font-family: Assistant-Bold;
    }

    .tblHeader {
        font-family: Assistant-Bold;
    }

    .fa-regular {
        font-size: 20px;
        padding: 0 5px;
    }

    .optionContainer {
        margin-left: 2rem;
        border: none;
        background-color: transparent;
        color: #0b192b;
    }

    label {
        font-weight: bold;
    }

    /*LOGIN PAGE*/

    .login-page {
        background-color: #7D0A0A;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 360px;
        height: 550px;
        background-color: #fff6e8;
        border-radius: 10px;
        box-shadow: 2px 9px 20px 8px rgba(0,0,0,0.24);
        -webkit-box-shadow: 2px 9px 20px 8px rgba(0,0,0,0.24);
        -moz-box-shadow: 2px 9px 20px 8px rgba(0,0,0,0.24);
    }

    #login-img {
        width: 180px;
        height: 180px;
        margin-bottom: 20px;
    }

    .login-label {
        font-family: Assistant-Bold;
    }

    #btn-print {
        font-family: Assistant-SemiBold;
    }

    .login-box-msg {
        font-family: Assistant-light;
        text-align: left;
        font-size: 15px;
    }

    .error {
        color: tomato;
        border: 1px solid tomato;
    }

    .input-login {
        border: 0 0 2px 0 solid;
    }

    #btnLogin {
        font-family: Assistant-SemiBold;
        color: aliceblue;
        background-color: rgba(125, 10, 10, 0.9);
        padding: 5px 10px;
        border-radius: 5px;
        width: 100%;
        margin-top: 3vh;
        transition: .3s;
    }

        #btnLogin:hover {
            background-color: rgb(68 0 0);
            color: #fbdad6;
            transform: scale(1.1);
        }

    .login-row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*CHANGE PASSWORD*/

    .changepw-row {
        margin-top: 20px;
        margin-left: 20%;
        font-family: Assistant-Light;
        width: 60%;
    }

    .changepw-title {
        margin-left: 1rem;
    }

    .form-parent > .form-group {
        margin: 10px 20px;
        padding: 0 25px;
    }


    /*INTERFACE PAGE*/

    .loader {
        margin: auto;
        margin-top: 15%;
        margin-bottom: 15%;
        border: 16px solid #dddddd;
        border-radius: 50%;
        border-top: 16px solid #db3434;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 1s linear infinite; /* Safari */
        animation: spin 2s linear finite;
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

    .mainmenu-add-interface {
        background-color: ghostwhite;
        padding: 4vh;
        width: 50%;
        box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.24);
        border-radius: 10px;
        margin: auto;
        font-family: Assistant-SemiBold;
    }

    .rrpersupplier-header {
        display: flex;
        justify-content: space-between;
    }