:root{
    --MAIN_COLOR: #646468d4;
    --SUB_COLOR: #646468;
    --BTN_COLOR: #323234;
    --TITLE_COLOR: #8b8a8f;

    --ROW_HIGHLIGHT_COLOR: #7c7c88;

    --MENU_TITLE_COLOR: #323234;
    --MENU_OPTION_COLOR: #4b4b4d;
    
    --CHECKOUT_PRODUCT_WIDGET_COLOR: #35523ba8;
    --CHECKOUT_PRODUCT_ITEM_WIDGET_COLOR: #b4b4bb4d;
    --OPEN_WIDGET_COLOR: #b4b4bb85;
    --WIDGET_COLOR: #404040;
    --WIDGET_SELECTED_COLOR: rgba(115, 255, 0, 0.85);
    --TAB_WIDGET_SELECTED_COLOR: rgb(255, 255, 255);
    --TABLE_BORDER_COLOR: #969696ea;

    --FONT_COLOR: #f0f0f0;
    --DISABLED_FONT_COLOR: rgba(255, 255, 255, 0.5);
    
    --TABLE_BORDER_COLOR: rgb(94, 94, 94);
    
    --ORANGE_PALETTE: #A57F59;
    --GREEN_PALETTE: #688c44b0;
    --RED_PALETTE: #c32d2d;
    --YELLOW_PALETTE: #B2B24C;
    --PURPLE_PALETTE: #5959A5;
    --BLUE_PALETTE: #2647a98b;
    
    --LATE_PALETTE: rgba(178, 76, 76, 0.7);
    --DELAY_PALETTE: rgba(228, 228, 32, 0.7);

    --ORANGE_PALETTE_opacity_half: rgba(165, 127, 89, 0.5);
    --GREEN_PALETTE_opacity_half: rgba(127, 165, 89, 0.5);
    --RED_PALETTE_opacity_half: rgba(178, 76, 76, 0.5);
    --YELLOW_PALETTE_opacity_half: rgba(178, 178, 76, 0.5);
    --PURPLE_PALETTE_opacity_half: rgba(89, 89, 165, 0.5);
    --BLUE_PALETTE_opacity_half: rgba(89, 165, 165, 0.5);


    --DISABLED_COLOR: #585858;
    --DISABLED_INPUT_COLOR: #585858;
    --DISABLED_SELECT_COLOR: #929292;
}





body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: whitesmoke;
}
span, p, a, img, h1, h2, h3, h4, h5, h6{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor: default;
}

button{
    cursor: pointer;
    color: var(--FONT_COLOR);
    transition: transform 0.15s ease;
}
button:hover{
    transform: scale(1.06);
    z-index: 1;
    cursor: pointer;
}
button:disabled, input[type="text"]:disabled, input[type="date"], input[type="textarea"], input[type="checkbox"]:disabled:disabled:disabled, select:disabled
{
    cursor: default;
}
button:disabled:hover{
    cursor: not-allowed;
    transform: none;
}

input {
    color: black;
    -webkit-text-fill-color: black; /* add this */
}
input::placeholder {
    -webkit-text-fill-color: #aaaaaa; /* or whatever gray you want */
    color: #aaaaaa;
}
input:disabled {
    cursor: default;
    color: whitesmoke;
    -webkit-text-fill-color: whitesmoke;
    opacity: 1; /* Safari reduces opacity on disabled inputs by default */
    background-color: #7c7c7c; /* explicitly set your desired background */
    -webkit-opacity: 1;
}
input.invalid{
    border: solid 1px var(--RED_PALETTE);
}
input:hover{
    cursor: text;
}
input[type="text"]{
    cursor: text;
}
input[type="date"]{
    cursor: text;
}
input[type="checkbox"]{
    cursor: pointer;
}
input[type="checkbox"]:disabled:hover{
    transform: none;
}
input[type="checkbox"]:hover{
    z-index: 1;
    transform: scale(1.3);
    cursor: pointer;
}

select {
    color: black;
    -webkit-text-fill-color: black; /* add this */
}
select::placeholder {
    -webkit-text-fill-color: #aaaaaa; /* or whatever gray you want */
    color: #aaaaaa;
}
select:disabled {
    cursor: default;
    color: whitesmoke;
    -webkit-text-fill-color: whitesmoke;
    opacity: 1; /* Safari reduces opacity on disabled inputs by default */
    background-color: #7c7c7c; /* explicitly set your desired background */
    -webkit-opacity: 1;
}

label{
    color: #f0f0f0;
    -webkit-text-fill-color: #f0f0f0; /* add this */
}
label:disabled{
    color: #f0f0f0;
    -webkit-text-fill-color: #f0f0f0; /* add this */
    opacity: 1; /* Safari reduces opacity on disabled inputs by default */
    -webkit-opacity: 1;
}
select{
    cursor: pointer;
}
textarea{
    cursor: text;
}
textarea:disabled{
    cursor: default;
    color: white;
}
i{
    z-index: 60;
    cursor: pointer;
    transition: transform 0.15s ease;
}
i:hover{
    transform: scale(1.3);
}
i:disabled:hover{
    transform: none;
    cursor: not-allowed;
}
span, i{
    color: var(--FONT_COLOR);
}
.row{
    display: flex;
    flex-direction: row;
}
.column{
    display: flex;
    flex-direction: column;
}



*{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor: default;
}

:-ms-input-placeholder{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
::-webkit-input-placeholder{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
input::placeholder{
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}


.btn-default{
    background-color: var(--BTN_COLOR);
    font-size: 1.4em;
    color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

*:focus {
    outline: 0;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    position: relative;
    right: 20px;
}
/* Track */
::-webkit-scrollbar-track {
    /* background: rgba(255, 255, 255, 0.07);  */
    background: rgba(245, 245, 245, 0.756); 
    border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
    cursor: grab;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
    cursor: grab;
}






@-ms-keyframes spin { 
    from { 
        -ms-transform: rotate(0deg); 
    } to { 
        -ms-transform: rotate(360deg); 
    }
}
@-moz-keyframes spin { 
    from { 
        -moz-transform: rotate(0deg); 
    } to { 
        -moz-transform: rotate(360deg); 
    }
}
@-webkit-keyframes spin { 
    from { 
        -webkit-transform: rotate(0deg); 
    } to { 
        -webkit-transform: rotate(360deg); 
    }
}
@keyframes spin { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}




/* text Auto scroll animation */


.scroll-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
  }
/* for Firefox */
@-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
}
/* for Chrome */
@-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
}
@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}














#main-content{
    height: 100vh;
    width: 100vw;
    background-color: whitesmoke;
    position: relative;
}


/* 
    Navigation
 */
.nav-maincontainer{
    /* background-color: lightblue; */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    overflow: hidden;
}
    .nav-maincontainer>h1{
        background-color: wheat;
    }
.nav-maincontainer-{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.nav-content{
    width: calc(100% - 20px);
    height:100%;
    max-height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.nav-content-{
    width: calc(100% - 20px);
    height:100%;
    max-height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}






#maincontainer{
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}





#loading-report{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* display: none; */
}
#loading-report span{
    position: relative;
    width: auto;
    height: auto;
    text-align: center;
    /* margin: auto; */
    font-size: 2em;
    margin-bottom: 10px;
}
#loading-report span.track-progress{
    position: relative;
    min-width: 300px;
    max-width: 500px;
    width: 70%;
    min-height: 25px;
    max-height: 25px;
    font-size: 1.3em;
    text-align: center;
    border-radius: 50px;
    border: solid 0.1px rgba(245, 245, 245, 0.5);
    /* background: linear-gradient(
        to right,
        whitesmoke 10%,
        var(--DISABLED_COLOR) 10%
    ); */
    background: linear-gradient(
        to right,
        whitesmoke,
        var(--DISABLED_COLOR)
    );
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.8s ease-in-out;
}
#loading-report i{
    text-align: left;
    font-size: 3em;
    color: white;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 500ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}
#refreshloading-report{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}
#refreshloading-report span{
    font-size: 2em;
}
#refreshloading-report i{
    font-size: 3em;
    color: white;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 500ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}



#notification{
    z-index: 10000;
    display: none;
}
.notification-con{
    width: 275px;
    min-height: 90px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 40px 20px 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-top-left-radius: 25px;
}
#notification span{
    font-size: 1.2em;
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    /* background-color: red; */
}
#notification h2{
    align-self: flex-start;
}
#notification-close{
    position: absolute;
    right: 0px;
    height: 100%;
    width: 30px;
    /* background-color: red; */
    /* display: flex; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}
#notification-close i{
    font-size: 2em;
}


#action{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    display: none;
}
.actionbar{
    position: relative;
    min-width: 250px;
    max-width: 700px;
    min-height: 140px;
    min-height: 140px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
    margin: auto;
    /* margin-top: 100px; */
    margin-top: calc(50vh - 140px);
}
.action-pick-con{
    width: 90%;
    height: 40px;
    padding: 10px;
    /* background-color: rebeccapurple; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.action-pick-con span{
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 40px;
    justify-content: center;
    /* background-color: red; */
    padding: 5px;
}
.action-pick-con span > i{
    font-size: 1.7em;
    margin: 10px;
    cursor: pointer;
}



#input-box{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    display: none;
}
.input-box{
    position: relative;
    width: 60%;
    height: auto;
    /* height: 40px; */
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.input-box > h3{
    position: relative;
    width: 100%;
    height: auto;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
}
.input-box > input{
    position: relative;
    width: 100%;
    height: auto;
    font-size: 1.5em;
    cursor: text;
    padding: 5px;
    outline: none;
    border: none;
    border-radius: 10px;
}
.input-box > .btn-con{
    position: relative;
    width: 100%;
    height: auto;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 40px;
    justify-content: center;
    /* background-color: red; */
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
}
    .input-box > .btn-con > button{
        position: relative;
        width: 100%;
        height: auto;
        font-size: 1.2em;
        cursor: pointer;
        padding: 5px;
        margin: 10px;
        border-radius: 10px;
    }



/* ALERTS */
#alert{
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    /* background-color: rgba(0, 0, 0, 0.2); */
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}
.alert-con{
    width: calc(300px - 20px);
    height: auto;
    min-height: calc(100vh - 50px);
    max-height: calc(100vh - 70px);
    position: absolute;
    top: 50px;
    left: 0px;
    padding: 10px;
    overflow-y: auto;
    /* background-color: red; */
}
.alert-con-widget{
    width: calc(100% - 20px);
    min-height: 50px;
    border: thin dashed white;
    border-top: none;
    border-right: none;
    border-left: none;
    margin-bottom: 15px;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    padding-bottom: 20px;
    position: relative;
}
.alert-con-widget-title{
    width: 100%;
    height: auto;
    min-height: 20px;
    font-size: 1.1em;
    font-weight: bold;
    /* background-color: red; */
    /* padding-left: 10px; */
}
.alert-con-widget-message{
    width: 100%;
    height: 100%;
    margin-top: 5px;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
}
.alert-con-widget-message > button{
    /* margin: 10px; */
    margin-top: 10px;
    padding: 3px 0px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.alert-con-widget-delete{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.hidden{
    display: none;
}



@media (max-width: 480px) {
    .notification-con{
        min-width: 275px;
    }
    #notification h2{
        font-size: 1.2em;
    }
    #notification span{
        font-size: 1em;
    }


    .input-box > input{
        font-size: 1.3em;
    }
    .input-box > .btn-con > button{
        font-size: 0.9em;
    }
}