@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html {
    position: relative;
    min-height: 100%;
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
}

html, body, buttons, input, textarea, etc {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

body {
    background-color: white;
}

body.modal-open {
    height: 100vh;
    overflow-y: hidden;
}

/*.modal-content {
    border-radius: 1rem 0 0 0 !important;
    border: none;
}*/

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    html {
        font-size: 16px;
    }

    .mobile-hidden {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .mobile-hidden {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

/*#region Name*/
/*#endregion*/

/*#region APP*/
.app-nav {
    background-color: #000000;
    color: #49B618 !important;
}

.app-bg-light {
    background-color: #f0f1f2;
}

.app-color {
    color: #49B618;
}

label {
    /*color: #D9E2EC !important;*/
    font-weight: normal !important;
}

.user-icon {
    height: 50px;
    width: 50px;
    background-color: #212529;
    color: #fff;
    border-radius: .25rem;
    margin: .25rem;
    cursor: pointer;
}

/* USE FOR FILTER USER SERACH */
.app-user-search-div {
    position: absolute;
    z-index: 1000;
    max-height: 200px;
    overflow-y: scroll;
    background-color: white;
    color: black;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
    margin-top: 0.5rem;
    border: 1px solid #ced4da;
    border-top: 3px solid #007bff;
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: none;
}

    .app-user-search-div ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }

    .app-user-search-div li a {
        padding: 0;
        color: black;
    }
/*#endregion*/

/*#region COLOR*/
/* Blue Grey
    // https://compilezero.medium.com/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
    50      #F0F4F8
    100     #D9E2EC
    200     #BCCCDC
    300     #9FB3C8
    400     #829AB1
    500     #627D98
    600     #486581
    700     #334E68
    800     #243B53
    900     #102A43
*/

/* DARK MODE NOT USED*/
.app-dark {
    background-color: #102A43 !important;
    color: #F0F4F8 !important;
}

.app-dark-500 {
    background-color: #627D98 !important;
    color: #F0F4F8 !important;
}

.app-dark-700 {
    background-color: #334E68 !important;
    color: #F0F4F8 !important;
}

/*input, select, textarea {
    background-color: #BCCCDC !important;
}*/
/*#endregion*/

/*#region TAG*/
.app-tag {
    border-radius: .25em;
    padding: .2em .6em .3em;
}

.app-tag-sm {
    font-size: 75%;
    border-radius: .25em;
    padding: .3em;
}

.app-tag-success {
    background-color: #28a745;
    color: white;
}

.app-tag-danger {
    background-color: #dc3545;
    color: white;
}

.app-tag-secondary {
    background-color: #6c757d;
    color: white;
}
/*#endregion*/

.ach-bg {
    /*background-color: #eaab00;*/ /* gold */
    background: linear-gradient(90deg, rgba(234,188,0,1) 0%, rgba(234,172,0,0.9641106442577031) 35%, rgba(234,153,0,1) 100%);
}

.ach-text {
    color: #eaab00; /* gold */
}


.ach-wrapp {
    width: 100%;
    margin: 0 auto;
    padding: 2px;
    background-color: #eaab00; /* gold */
    /* Single pixel data uri image http://jsfiddle.net/LPxrT/ 
    /* background-image: gold, gold, white */
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='), url('data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
    background-repeat: no-repeat;
    background-size: 0 2px, 0 100%, 0% 2px;
    background-position: top center, top center, bottom center;
    -webkit-animation: drawBorderFromCenter 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes drawBorderFromCenter {
    0% {
        background-size: 0 2px, 0 0, 100% 100%;
    }
    20% {
        background-size: 100% 2px, 100% 0, 100% 100%;
    }
    66% {
        background-size: 100% 2px, 100% 98%, 100% 100%;
    }
    99% {
        background-size: 100% 2px, 100% 98%, 0 2px;
    }
}

.ach-content {
    background: white;
    padding: 2em;
    text-align: center;
    text-transform: uppercase;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.app-modal-scroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.app-modal-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}