@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-Regular.ttf) format('truetype');
}

/* TAGS */

html, body {
    background-color: var(--background);
    color: var(--text-color);
    font-family: "Open Sans", sans-serif;
    min-height: 100vh;
}

:root {
    /*base setting*/
    --background: #15141A;
    --background-side-bar: #161A1E;
    --background-secondary-color: #2e3440;
    --background-footer-color: #272C36;
    --second-primary-color: #FFC929;
    --second-primary-color-hover: #f0be28;
    --primary-color: #232229;
    --secondary-color: #2F3540;
    --text-color: #FFFFFF;
    --text-head-colors: var(--text-head-colors);
    --green-color: #0E9701;
    --red-color: #EA3943;
    --white-color: #FFFFFF;
    /*widget settings*/
    --widget-border-color: none;
    --widget-bg-color: #161A1E;
    --widget-text-color: rgba(255, 255, 255, 0.5);
    /*table settings*/
    --table-bg: #161A1E;
    --table-hover: #2F3540;
    --table-submenu: #2b2932;
    /*header-footer settings*/
    --footer-color: --text-color;
    /*checkbox settings*/
    --checkbox-color: #FFFFFF;
    --checkbox-hover-color: #ccc;
    /*filter settings*/
    --filter-color: #FFFFFF;
    --filter-header-color: rgba(255, 255, 255, 0.5);
    --filter-border-color: rgb(47, 53, 64);
    /*button settings*/
    --button-border-color: none;
    /*modal settings*/
    --modal-bg-color: #232229;
    --modal-text-color: rgba(255, 255, 255, 0.5);
    --modal-border-color: #2F3540;
    --modal-option-bg-color: #232229;
    /*circle settings*/
    --inner-color: #2F3540;
    /*navitem settings*/
    --navitem-color: #ffffff;
}

body {
    margin: 0;
    padding: 0;
    width: 100% !important;
}

select { cursor: pointer; }

/* COLORS */

.sec-prm-col {
    color: var(--second-primary-color)
}

/* ID */

#app { min-height: 100%; }

/* MDC NAW MENU */

#app .mdc-list-item--selected span.nav-item-text {
    background-color: #3A3939;
    border-radius: 5px;
    opacity: 0.5;
    width: 100%;
}

#app .mdc-list-item span.nav-item-text { padding: .5rem 1rem; }

/* PAGE PRELOADER */

.page-preloader {
    display: grid;
    height: 100vh;
    margin: 0;
}

.page-preloader div { place-self: center; }

.page-preloader div svg {
    opacity: .8;
    width: 100px;
    width: 100px;
}

.loadingText {
    color: #cbcbce;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    margin-right: 15px;
    margin-top: 5px;
    text-align: center;
    text-transform: uppercase;
}

.preloader-1 { margin: 10px 0 0 5px; }

.preloader-1 .line {
    animation: opacity-1 1000ms infinite ease-in-out;
    background: #cbcbce;
    display: inline-block;
    height: 12px;
    margin: 0 1px;
    width: 1px;
}


.preloader-1 .line-1.line-1 { animation-delay: 800ms; }

.preloader-1 .line-2 { animation-delay: 600ms; }

.preloader-1 .line-3 { animation-delay: 400ms; }

.preloader-1 .line-4 { animation-delay: 200ms; }

.preloader-1 .line-6 { animation-delay: 200ms; }

.preloader-1 .line-7 { animation-delay: 400ms; }

.preloader-1 .line-8 { animation-delay: 600ms; }

.preloader-1 .line-9 { animation-delay: 800ms; }

@keyframes opacity-1 {
    0% { opacity: 1; }

    50% { opacity: 0; }

    100% { opacity: 1; }
}

@keyframes opacity-2 {
    0% {
        height: 15px;
        opacity: 1;
    }

    50% {
        height: 12px;
        opacity: 0;
    }

    100% {
        height: 15px;
        opacity: 1;
    }
}

/* BLAZORED MODAL */

/* CRUD MODAL */

.crud-modal {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: 533px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 80px;
    width: 522px;
}

.crud-modal-admin {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 80px;
    width: 522px;
    overflow: visible;
}

.crud-modal-edit {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: 433px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 80px;
    width: 522px;
}

.crud-modal-trader {
    animation: preLoad 150ms;
    background-color: #161A1E;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: 775px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 80px;
    width: 850px;
}

.crud-modal-group {
    animation: preLoad 150ms;
    background-color: #161A1E;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: 540px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;
    width: 850px;
}

.crud-modal-price {
    animation: preLoad 150ms;
    background-color: #161A1E;
    border: 1px solid #252B30;
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: 564px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;
    width: 963px;
}

.crud-modal-dark {
    animation: preLoad 150ms;
    background-color: var(--background);
    border-radius: 6px;
    color: var(--white-color);
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    position: relative;
    top: 100px;
    width: 950px;
}

.cashActivities-modal {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    display: block;
    height: 429px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 200px;
    width: 578px;
}

.cashTransfer-modal {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    display: block;
    height: 429px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 200px;
    width: 578px;
}

.route-modal {
    animation: preLoad 150ms;
    background-color: #101010;
    border: 1px solid #252B30;
    border-radius: 6px;
    display: block;
    height: 429px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 200px;
    width: 400px;
}


.crud-modal .blazored-modal-header { padding: 0; }

.crud-modal .blazored-modal-content {
    height: 100%;
    overflow: auto;
}

.crud-modal .blazored-modal-header button {
    background: var(--text-color);
    outline: none;
}

/* CONFIRM MODAL */

.confirm-modal {
    background-color: #161A1E;
    border-radius: 4px;
    color: #fff;
    display: block;
    gap: 22px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 420px;
    width: 300px;
    z-index: 6;
}


.reject-ca-modal {
    background-color: #161A1E;
    border-radius: 4px;
    color: #fff;
    display: block;
    gap: 22px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 420px;
    width: 700px;
    max-height: 80vh;
    z-index: 6;
}

.conofirm-ca-modal {
    background-color: #161A1E;
    border-radius: 4px;
    color: #fff;
    display: block;
    gap: 22px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 420px;
    width: 500px;
    max-height: 80vh;
    z-index: 6;
}

/* MAT BLAZOR DIALOG */

#app .blazored-modal-overlay { z-index: 4; }

#app .mdc-dialog.mdc-dialog--open { z-index: 9999; }

#app .mdc-dialog__surface {
    background-color: var(--secondary-color);
    border-radius: 2px;
}

#app .mdc-dialog__content { color: #fff; }

#app .mdc-dialog__actions button {
    color: #fff;
    outline: none;
}

/* BUTTON */

#app .islb-button {
    border-radius: 2px;
    height: 32px;
    margin-top: 1px;
}

/* OVERRIDE INPUT AUTOFILL */

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px var(--primary-color);
    -webkit-text-fill-color: #fff;
}

@keyframes preLoad {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* MODAL DIALOG MAT THEME */

.mdc-dialog--open, .mdc-dialog--opening, .mdc-dialog--closing { z-index: 99999; }

/* CustomContextMenu */

.CustomContextMenu { display: contents; }

.ContextMenu { color: #000; }

/* MAT TOOLTIP */

.mat-tooltip-wrapper { display: flex; }

/* MAT BLAZOR  */

#app .mdc-list-item { text-align: left; }

/* MAT TOAST */

#app .mat-toast-container > div {
    box-shadow: none;
    opacity: 1;
}

/* ERROR STYLE */

#blazor-error-ui {
    background: gray;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}