/*
body {font-family: 'Lato', sans-serif;margin-top:0;padding-top: 0}
.container{width: 860px; float:left;margin-right: 30px}
a.selected {color:red}
h1,h3,th{background: #f0f0f0;padding: 8px 12px}
h1{background: #336699;color:whitesmoke}
h1,h3{border-top:1px solid grey;border-bottom:1px solid grey}
td{padding: 2px 12px}
td:not(:first-child){text-align: right}
th{text-align:left}
th.perc{text-align:right}
.dataTables_wrapper .dataTables_filter{margin-bottom: 10px}
input,select{padding: 8px;margin-right: 10px}
button.export{background-image: url('img/excel-icon.png');background-size:cover;width: 24px;height: 24px;background-color: white;border:0;}
#left {float:left;width: 15%;min-height: 100vh;}
#main {float:left;border-left: 1px #000 solid;margin-left: 15px;padding-left: 15px;width: 60%;min-height: 100vh;}
#right {float:left;border-left: 1px #000 solid;margin-left: 15px;width: 18%;text-align: center;min-height: 100vh;}
#main h1:first-child{margin-top: 0}
#menu a {margin-right: 15px}
#menu a.selected {color:red}
.clearfix:before,
.clearfix:after {
    content: " "; !* 1 *!
    display: table; !* 2 *!
}
.clearfix:after {
    clear: both;
}
.w100 {width: 100px}
.w200 {width: 200px}
.wrapper {display: none}
#main #global{display: block}*/
/*
  .oooooo.            .o.       ooooooooo.   ooooo              .o.              .oooo.     .oooo.     .oooo.     .oooo.
 d8P'  `Y8b          .888.      `888   `Y88. `888'             .888.           .dP""Y88b   d8P'`Y8b  .dP""Y88b  .dP""Y88b
888      888        .8"888.      888   .d88'  888             .8"888.                ]8P' 888    888       ]8P'       ]8P'
888      888       .8' `888.     888ooo88P'   888            .8' `888.             .d8P'  888    888     .d8P'      <88b.
888      888      .88ooo8888.    888          888           .88ooo8888.          .dP'     888    888   .dP'          `88b.
`88b    d88b     .8'     `888.   888          888       o  .8'     `888.       .oP     .o `88b  d88' .oP     .o o.   .88P
 `Y8bood8P'Ybd' o88o     o8888o o888o        o888ooooood8 o88o     o8888o      8888888888  `Y8bd8P'  8888888888 `8bd88P'


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////  REPORT  ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*---------------- IMPORT ----------------------------*/
/*//palette*/

:root{

    --lightblu: #99d0ee;
    --altBlue :#76C3FDFF;
    --medblu: #317ac7;
    --yellow: #FCF9BF;
    --violet: #707D9D;
    --white1: rgba(250, 250, 250, 0.47);
    --white2:#F0F8FF;
    --white3:#C7C7C7C;
    --orange: rgba(250, 186, 118, 1);

    /* PRIMARY COLORS */
    --QBlack: #222222;
    --QBlue: #003C71;
    --QWhite: #ffffff;
    --QOrange: #F98132;
    --QLightBluGrey: #EBF0F6;

    /* SECONDARY COLORS */
    --QdarkRed:#721c24 ;
    --Qred:#e14646;
    --QlightestBlue:#f9fcff;
    --QlighterBlue:#eff7fd;
    --QlightBlue:#a5caed;
    --QmediumLightBlue: #4094df;
    --QbrightBlue:#007bff;
    --QmediumBlue:#054a86;
    --QDarkBlue:#162843;
    --Qgreen:#28a745;
    --QlightOrange: #FAA064;
    --QlightYellow:#f8f18f;
    --QdarkYellow:#ffc744;
    --Qgold:#dabe03;
    --QlighterBlueGray:#EBF0F6;
    --QlightestGrey:#eeeeee;
    --QlighterGrey: #e0e0e0;
    --QlightGrey: #b3b4b5;
    --QmediumGrey:#808080;
    --QmediumBlueGrey:  #546f87; ;
    --QdarkAcquamarine:#166a75;
    --QlightAcquamarine:#17a2b8;

    --Qfont-primary: 'Roboto', sans-serif;
    --Qfont-secondary: "Arial Black", arial-black;

    --QfontSize-30: 1.875rem;
    --QfontSize-18: 1.125rem;
    --QfontSize-base:     1rem;
    --QfontSize-14: 0.875rem;
    --QfontSize-12:   .75rem;
    --QfontSize-10: 0.625rem;
    --QfontSize-8:     .5rem;

    /********* UI ELEMENT STYLE ***********/
    --QborderRad:.25rem;
    --QinputHeight:34px;


}



/*----------------  ----------------------------*/
/* ////////////////////////////////
   //////////////   SCROLLBAR   ////////////////////
   //////////////////////////////// */



/* FireFox */
html * {
    @supports not selector(::-webkit-scrollbar) {
        * {
            scrollbar-width: auto;
            scrollbar-color: var(--QlighterBlue) var(--QlightBlue);
        }

        .sidebar-left {
            scrollbar-color: var(--QmediumLightBlue) var(--QmediumBlue);
            scrollbar-width: auto;
        }
    }
}


/* Chrome */
::-webkit-scrollbar {
    width: 5px;
    background: var(--Qgreen);
}
::-webkit-scrollbar-track {
    background: var(--QmediumGrey);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--altBlue);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

.debug * {
    border: solid 1px lime;
}

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

*,*:focus,*:hover{
    outline:none;
}
a {
    text-decoration: none;
}
.shadow{
    -webkit-box-shadow: 0px 10px 18px -4px rgba(22,40,67,0.25);
    box-shadow: 0px 10px 18px -4px rgba(22,40,67,0.25);
}

.d-flex{
    display: flex;
    align-items: center;
}




/************************************   BUTTONS  **********************************/

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color:var(--QBlack);
    min-width: 34px;
    height: var(--QinputHeight);
    font-family: var(--Qfont-primary);
    font-weight: 500;
    font-size: var(--QfontSize-12);
    padding:.5rem;
    user-select: none;
    border-radius:var(--QborderRad);
    text-decoration: none;
    border:none;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out;
}


/*--------  PRIMARY BUTTON------*/

.btn-primary{
    background-color: var(--QOrange);
    border-color: var(--QOrange);
    color: var(--QWhite);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary.disabled, .btn-primary:disabled{
    background-color: var(--QlightOrange);
    border-color: var(--QlightOrange);
    box-shadow: none;
    outline:none;
}

.btn-primary:disabled{
    background-color: var(--QOrange);
    border-color: var(--QOrange);
    color: var(--QWhite);

}

.btn-primary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 0.2rem rgba(249,129,50,.5);
}


/*--------  SECONDARY BUTTON------*/
.btn-secondary{
    background-color: var(--QBlue);
    border-color: var(--QBlue);
    color: var(--QWhite);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary.disabled, .btn-secondary:disabled{
    background-color: var(--QmediumBlue);
    border-color: var(--QmediumBlue);
    box-shadow: none;
    outline:none;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 0.2rem rgba(5,74,134,.5);
}
/*-----------------------------  SELECT  ----------------------------*/

select{
    background-image: linear-gradient(to bottom, var(--QWhite), var(--QlighterBlueGray));
    scrollbar-width: thin;
    padding:.25rem;
    border: 1px solid var(--QlightGrey);
    border-radius: var(--QborderRad);
    color:var(--QBlue);
    min-width: 70px;
    font-family: 'FontAwesome', 'Arial';
}


select:focus, select.active,select:hover,
select:hover:not(select.input-grey),
select:focus:not(select.input-grey),
select:active:not(select.input-grey){
    box-shadow: none;
    outline:none;
}
select option{
    background-color: var(--QWhite);
    color: var(--QBlue);
}

select option:checked,
select.form-control option:hover,
select.form-control-sm option:hover {
    color: var(--QOrange);
}

select option:disabled{
    color:var(--QlightGrey);
}

canvas{
    padding: .5rem
}



body {
    width: 100vw ;
    height: 100vh;
    font-family: var(--Qfont-primary);
    font-size: var(--QfontSize-12);
}

header {
    width: 100%;
    height:65px;
    padding-block:.75rem;
    padding-inline:0;
    display: flex;
    align-items: center;
    color: var(--white2);
    background-color: var(--QDarkBlue);
    border-bottom: solid 1px var(--QlightestGrey);
    & .logoContainer{
        width: 13%;
        height: 100%;
        display: flex;
        justify-content: center;
        & img {
            max-height: 100%;
            width: auto;
        }
        & .bigLogo{
            display: none;
        }
    }
    & .titleContainer {
        width: 87%;
        padding-block:.5rem;
        padding-inline:1.5rem;
        display:flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
    }

    & #logout {

        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding:.5rem;
        border-radius: 3px;
        cursor:pointer;
    }
}

#main {
    height: calc(100% - 65px);
    width: 100%;
    display: flex;
    position: relative;
}

/*-----------------------------  SIDEBAR   ----------------------------*/
#sidebarMenu {
    width: 250px;
    height: 100%;
    margin-left:-250px;
    position: absolute;
    left:0;
    top:0;
    padding: .5rem 0;
    background-color:var(--QDarkBlue);
    z-index: 999;
    -webkit-box-shadow: 6px 0px 10px -2px rgba(0,0,0,0.25);
    box-shadow: 6px 0px 10px -2px rgba(0,0,0,0.25);
    & #sidebarMenuList{
        height: 100%;
        width: 100%;
        padding-block:.25rem;
        overflow-y: auto;
    }
    & .sidebarBlock{
        margin-top: 2rem;
    }
    & #menuAnchor{
        width: 20px;
        height: 44px;
        background-color:var(--QDarkBlue);
        position: absolute;
        right: -20px;
        border-left: solid 1px var(--QlighterGrey);
        border-radius: 0px 10px 10px 0;
        top:0px;
        justify-content: center;
        font-size: .75rem;
        color:var(--QlighterGrey);
    }
    & .menuTitle {
        color: var(--QWhite);
        margin: .5rem 0 .5rem 2rem;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: 300;
        &.selected{
            color: var(--QDarkBlue);
        }
    }
    & a {
        display: flex;
        padding: .5rem 1rem .5rem 0;
        color: var(--QWhite);
        & span {
            margin-left: 3rem;
        }
    }
    & .home a{
        color: var(--QDarkBlue);
    }
    & a.selected {
        background-color: var(--QlighterBlue);
        color: var(--QBlue);
        font-weight: bold;

    }
    & a:hover:not(.selected) {
        /*color:var(--QlightBlue);*/
        background-color: var(--QBlue);
        cursor:pointer;
    }
}

/*-----------------------------  OVERALL CONTAINER  ----------------------------*/
#overview{
    width: 100%;
    height: 100%;
    background-color: var(--QlighterBlue);
    display: flex;
    flex-direction: column;
    align-items: center;
    color:var(--QDarkBlue);
    /*padding-block:1rem;*/
    & #top,
    & #bottom{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding:1rem;
    }
    & #top{
        height: 25%;
        justify-content: space-evenly;
    }
    & #bottom{
        justify-content: space-between;
        overflow-y: auto;
        height: calc(100% - 25%);
    }
}


#top {
    align-items: center;
    -webkit-box-shadow: 6px 0px 10px -2px rgba(0,0,0,0.25);
    box-shadow: 6px 0px 10px -2px rgba(0,0,0,0.25);
    z-index: 10;
    & .sectionTitle{
        text-align: center;
    }
    & h1{
        font-size: 1.5rem;
    }
    & .desc {
        font-size: .75rem;
        margin-top: 0.5rem;
        padding: .25rem;
    }
}

#dateSelection{
    width: 100%;
    height: 80px;
    border-radius:.5rem;
    border-top: 7px solid var(--QBlue);
    margin-block: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--QDarkBlue);
    background-color: var(--QWhite);
    padding:.5rem;
    & .subContainer{
        height: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        /*padding:.25rem;*/
        &.dates{
            width: 45%;
        }
        & .subContainerBlock{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            padding-block:.25rem;
        }
        & input[type="datetime-local"] {
            background-image: linear-gradient(to bottom, var(--QWhite), var(--QlighterBlueGray));
            padding: 0.25rem;
            border: 1px solid var(--QlightGrey);
            border-radius: var(--QborderRad);
            color: var(--QBlue);
            font-family: 'Arial';
            position: relative;
            &::-webkit-calendar-picker-indicator {
                opacity: 0;
                z-index:999;
                cursor:pointer;
            }
            &:after {
                position: absolute;
                font-family: "Font Awesome 6 Pro";
                font-weight: 900;
                font-size: .9rem;
                content: "\f073";
                color: var(--QBlue);
                right: 0;
                top:50%;
                transform: translateY(-50%);
                margin-inline: 5px;
                width: 15px;
                z-index:10;
            }
        }
        &.channels{
            width: 30%;
            & .subContainerBlock{
                width: 100%;
            }
        }
        &.buttons{
            width: 25%;
            & .subContainerBlock{
                width: 100%;
                flex-direction: row;
                align-items: end;
            }
            & .btn{
                margin-inline: .25rem;
                padding:.25rem;
            }
            & i{
                font-size: min(12px ,1.2rem);
            }
        }
        & select,
        & button,
        & input[type="datetime-local"]{
            width: min(100%, 180px);
           /* min-height:min(25px, var(--QinputHeight));
            height:min(25px, var(--QinputHeight));*/
            height: var(--QinputHeight);
        }
        & label{
            color:var(--QmediumGrey);
            font-weight: bold;
        }
    }
}

#overallContainer{
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & .overallBlock{
        background-color: var(--QWhite);
        width:32%;
        height:100%;
        border-radius: .5rem;
        & .overallBlockLeft,
        & .overallBlockRight{
            width: 50%;
            height: 100%;
        }
        & .overallBlockLeft{
            display: flex;
            padding: .5rem;
            flex-direction: column;
            justify-content: space-between;
        }
        & .overallBlockRight{
            justify-content: end;
            align-items: end;
        }
        & img{
            max-height: 95%;
            max-width: 95%;
        }
        & .overallData{
            font-weight: bold;
            padding: .5rem;
            & .dataIcon{
                font-size: 1rem;
                color:var(--Qgreen);
                margin-right: 1rem;
            }
            & .dataValue{
                font-size:  1.25rem;
            }
        }
        & .overallTitle{
            font-size: 1rem;
            padding:.5rem;
        }
    }
}

.graphsContainer{
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    & .squareGraphsBlock{
        margin-block: 1rem;
        background-color: var(--QWhite);
        width:100%;
        height: 95%;
        border-radius: 1rem;
    }
    & .rectGraphsBlock{
        background-color: var(--QWhite);
        width: 100%;
        height: 95%;
        border-radius: 1rem;
        margin-block: 1rem;
    }
    & .graphsBlockTitle{
        background-color: #003C7130;
        width: 100%;
        height: 15%;
        border-radius: 1rem 1rem 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        border-bottom: solid 1px var(--QlightestGrey);
    }
    & .graphsBlockContent{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 80%;
        padding: .5rem;
        & .numberChart{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            & .rowTop,
            & .rowBottom {
                width: 100%;
                height: 50%;
                &.rowTop {
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                }
                &.rowBottom {
                    justify-content: space-evenly;

                }
            }
        }
    }
}

.categorySeparator{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 100%;
    padding:.25rem;
    margin-block: 1rem;
    & .line {
        margin-inline: 1rem;
        background-color: var(--QDarkBlue);
        height: 3px;
        width: 50%;
    }
    & h1{
        font-weight: 500;
        font-size: 1.5rem;
    }
}

.graphsBlockContentVertical{
    height: 80%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: .5rem;
    & .overallBlockRow{
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        &.imgContainer{
            height: 70%;
        }
        & .overallBlockCenter,
        & .overallBlockLeft,
        & .overallBlockRight{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
        }
        & .overallTitle{
            color:var(--QDarkBlue);
            font-size: 1.75rem;
        }
        & .dataValue{
            font-size: 2rem;
            font-weight: bolder;
            color:var(--QlightOrange);
            &.green{
                color:var(--Qgreen);
            }
        }
        & img{
            max-width: 230px;
        }
    }
}

.courierListRows,
.courierListHead{
    padding:1rem;
    justify-content: space-between;
    font-size: 1rem;
    color:var(--QmediumGrey);
    text-align: center;
    & div{
        width: 33%;
    }
    & img{
        width: 25px;
        heigh:25px;
        margin-right: .5rem;
    }
}

.courierListRows{
    padding: .25rem;
}

.courier{
    color:var(--QDarkBlue);
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
}

.days{
    color:var(--QOrange);
    font-size: 1rem;
}

#sendingStatsContainer,
#ordersStatsContainer{
    width: 49%;
    height:100%;
    background-color: var(--QWhite);
    margin-block: 2rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    padding:2rem
}

#lineChart{
    width: 80%;
    height: 80%;
}

#reportsContainer{
    display: flex;
    width: 85%;
}

/*

.reportSection{
    height: 98%;
    box-sizing: border-box;
    padding: 1rem;
    color:var(--QWhite);
}


#sectionCentral {
    width: 50%;
    display: flex;
    flex-flow: column;
    align-items: center;
}







#menu{
    width: 100%;
    height: 8%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    & .reportType {
        min-width: 5rem;
        height: 2rem;
        padding:.25rem;
        margin-inline: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        color:var(--white3);
        border-bottom: solid 1px transparent;

        &.selected{
         color:var(--altBlue);
        font-weight: bold;
        border-bottom: solid 1px var(--altBlue);
            !*background-color:rgba(255, 179, 138, .5);*!


        }
        &:hover{
            cursor:pointer;
            border-bottom: solid 1px var(--lightblu);
            color: var(--lightblu);
        }

    }

}

.tableContainer{
    width: 100%;
    height: 92%;
    margin-top: 1rem;
    border-radius: 10px;
    padding:1rem;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(13, 70, 145, 0.3);
    color:var(--QWhite);
    & #exportButtonContainer{
        display: flex;
        align-items: center;

    }
    & .export{
        background-color: transparent;
        color: var(--QlightestGrey);
        font-size: 1.25rem;
        cursor: pointer;
        margin-left: 1rem;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        border:0;

        & :hover{
            color:var(--lightblu);


        }
    }

    & .reportTable{
        width: 100%;
        & label{
            display: flex;
            align-items: end;
        }
        & th,
        & td{
            text-align: center;
        }
        .larger{
            width: 30%;
            text-align: left;
        }
    }
}


table.dataTable.no-footer {
    border-bottom: 1px solid var(--altBlue);
}
.dataTables_wrapper .dataTables_filter{
    margin-bottom:1rem;
}
.dataTables_wrapper .dataTables_filter input{
    border:none;
    border-bottom: solid 1px rgba(240,240,240,.4);
    border-radius: 0;
    padding: 5px;
    background-color: transparent;
    color: inherit;
    margin-left: 1rem;
}
.dataTables_wrapper .dataTables_filter input:focus{
    outline:none
}
table.dataTable>thead>tr>th {
    text-align: center;
    padding: .25rem;
    color:var(--QlightBlue);
    height: 3.2rem;
    border:none
}


table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after {
    color : var(--QlighterBlue);
    opacity: .8;
}
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before{
    color : var(--altBlue);
    opacity: .5;
}


.channelName {
    text-align: left;
    background:linear-gradient(transparent, transparent) padding-box,
    linear-gradient(to left, rgba(255, 255, 255, 0), rgba(118, 195, 253, .5)) border-box;
    z-index: 10;
    width: 40%;
    border-radius: 15px 0 0 15px;

}


input[type="date"]::-webkit-calendar-picker-indicator {
    !*filter: invert(1);*!

}


#sectionRight {
    width: 35%;
    display: flex;
    flex-flow: column;
    align-items: center;
    & #globalTablesContainer {
        width: 100%;
        height: 40%;
        border-radius: 10px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 10px rgba(13, 70, 145, 0.3);
        padding: 1rem;
        &.smsContainer,
        &.courierContainers{
            height: 100%;
        }
        & #dataContainer{
            height: 95%;
            display: flex;
            & .dataBlock{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                padding:.5rem;
            }
        }

        & .left,
        & .right {
            color: var(--QWhite);
            padding: .5rem;
            display: flex;
        }

        & .title {
            width: 100%;
            font-weight: lighter;
            text-align: center;
            padding: .25rem;
        }


        & .globalTable{
            width: 100%;
            !*height: 80%;*!
            border-collapse: collapse;

        }

        & .globalTable td,
        & .globalTable th {
            padding: .25rem;
            min-width: 30%;
            text-align: end;
            font-size: .75rem;
            height: 34px;

        }

        & .left {
            width: 30%;
            flex-direction: column;
            justify-content: space-evenly;
            & .titleGroup {
                color: var(--QlighterGrey);
            }
            & .top,
            & .bottom {
                height: 50%;
                padding:.25rem;
            }
            & .top {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
            }
            & .bottom {
                display: flex;
                & .titleGroup {
                   font-size: .6rem;
                }
            }
            & .totalNum{
                font-size: 3rem;
                color:var(--white2)
            }
            & .subNum{
                font-size: 1.5rem;
                &.open{
                    color:var(--QlightBlue)
                }
                &.reopen{
                    color:var(--QLightBluGrey)
                }
            }

        }
        & .right {
            width: 70%;
            align-items: center;
            justify-content: center;

        }

    }


    & #globalChartContainer{
        width: 100%;
        height: 100%;
        !*padding: 1rem;*!

    }

    & #relative{
        width: 100%;
        height: 68%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 10px rgba(13, 70, 145, 0.3);
        border-radius: 10px;
        margin-top: 1rem;
        background: linear-gradient(transparent, transparent) padding-box,
        linear-gradient(to right, rgba(15, 111, 189, 0.1), rgba(255, 255, 255, 0.1)) border-box;
        align-items: center;
        justify-content: center;
        color:var(--QWhite)

    }

    & #relativeChartContainer{
        width: 100%;
        height:100%;
        padding: 1rem;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}*/



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////    MEDIA QUERY     //////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*--------------- DESKTOP ----------------------*/

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .graphsContainer {
        & .squareGraphsBlock:not(.shipmentGraph),
        & .rectGraphsBlock
        {
            width: 49%;
        }
        & .shipmentGraph{
            width: 100%;
        }
    }
    #overview {
        & h3 {
            font-size: 2rem;
        }
    }
    #overallContainer {
        .overallBlock {
            & .overallTitle{
                font-size: 1.25rem;
            }
            & .overallData .dataValue{
                font-size: 2rem;
            }
        }
    }
}


@media only screen and (min-width: 1440px) {
    header {
        & .logoContainer {
            justify-content: start;
            max-width: 250px;

            & .bigLogo {
                display: block;
                margin-left: 2rem;
            }

            & .smallLogo {
                display: none;
            }

            & .titleContainer {
                font-size: 1.5rem;
            }
        }
    }

    #sidebarMenu {
        margin-left: 0;
        display: flex;
        flex-flow: column;
        justify-content: start;

        & #menuAnchor {
            display: none;
        }
    }

    #main {
        justify-content: end;
    }

    #overview {
        width: calc(100% - 250px);
        & .sectionTitle {
            width: 70%;
        }
        & h1{
            font-size: 1.5rem;
        }
    }

    #dateSelection {
        width: 70%;
    }

    #overallContainer {
        .overallBlock {
            & .overallTitle{
                font-size: 1.5em;
            }
            & .overallData{
                & .dataIcon{
                    font-size: 1.5em;
                    margin-right: 1rem;
                }
                & .dataValue{
                    font-size: 2.5em;
                }
            }
        }
    }
    .graphsContainer {
        & .graphsBlockTitle {
            font-size: 1.75rem;
        }
        & .squareGraphsBlock {
            width: 32%;
        }
        & .rectGraphsBlock{
            width: 49%;
        }
    }

}