/* include borders and padding in dimensions of elements */
* {
    box-sizing: border-box;
}

/* set font size -> default to 14px on old browsers not support rem */
html {
    font-size: 62.5%;
    min-height: 100%;
}

body {
    font-size: 14px;
    font-size: 1.4rem;
}
/* =14px */

/* configuration for page wide settings */
html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    line-height: 1.5;
    min-width: 200px;
    text-align: left;
}

/* set base element styles */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.centered_text {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 350;
}

a {
    text-decoration: none;
}

.pointer {
    cursor: pointer;
}

.normal-cursor {
    cursor: default;
}

/* control image scaling */
img {
    width: 100%;
    height: auto;
}

.hidden {
    display: none;
}

.angled-45 {
    position: absolute;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* colors */
.bg-primary {
    background-color: #007bff;
}

.bg-success {
    background-color: #28a745;
}

.bg-info {
    background-color: #17a2b8;
}

.bg-warning {
    background-color: #ffc107;
}

.bg-danger {
    background-color: #dc3545;
}

.bg-secondary {
    background-color: #6c757d;
}

.bg-dark-gray {
    background-color: #343a40;
}

.bg-light-gray {
    background-color: #f8f9fa;
}

.bg-ph-primary {
    background-color: #4aa4a5;
}

.bg-ph-dark {
    background-color: #208687;
}

.bg-white {
    background-color: #ffffff;
}

.bg-black {
    background-color: 000000;
}

.bg-gray {
    background-color: #ddd;
}

.fg-primary {
    color: #007bff;
}

.fg-success {
    color: #28a745;
}

.fg-info {
    color: #17a2b8;
}

.fg-warning {
    color: #ffc107;
}

.fg-danger {
    color: #dc3545;
}

.fg-secondary {
    color: #6c757d;
}

.fg-dark-gray {
    color: #343a40;
}

.fg-light-gray {
    color: #f8f9fa;
}

.fg-ph-primary {
    color: #4aa4a5;
}

.fg-ph-dark {
    color: #208687;
}

.fg-white {
    color: #ffffff;
}

.fg-black {
    color: #000000;
}

.fg-gray {
    background-color: #ddd;
}

.bg-primary-hover:hover {
    background-color: #007bff;
}

.bg-success-hover:hover {
    background-color: #28a745;
}

.bg-info-hover:hover {
    background-color: #17a2b8;
}

.bg-warning-hover:hover {
    background-color: #ffc107;
}

.bg-danger-hover:hover {
    background-color: #dc3545;
}

.bg-secondary-hover:hover {
    background-color: #6c757d;
}

.bg-dark-gray-hover:hover {
    background-color: #343a40;
}

.bg-light-gray-hover:hover {
    background-color: #f8f9fa;
}

.bg-ph-primary-hover:hover {
    background-color: #4aa4a5;
}

.bg-ph-dark-hover:hover {
    background-color: #208687;
}

.bg-white-hover:hover {
    background-color: #ffffff;
}

.bg-black-hover:hover {
    background-color: 000000;
}

.bg-gray-hover:hover {
    background-color: #ddd;
}

.fg-primary-hover:hover {
    color: #007bff;
}

.fg-success-hover:hover {
    color: #28a745;
}

.fg-info-hover:hover {
    color: #17a2b8;
}

.fg-warning-hover:hover {
    color: #ffc107;
}

.fg-danger-hover:hover {
    color: #dc3545;
}

.fg-secondary-hover:hover {
    color: #6c757d;
}

.fg-dark-gray-hover:hover {
    color: #343a40;
}

.fg-light-gray-hover:hover {
    color: #f8f9fa;
}

.fg-ph-primary-hover:hover {
    color: #4aa4a5;
}

.fg-ph-dark-hover:hover {
    color: #208687;
}

.fg-white-hover:hover {
    color: #ffffff;
}

.fg-black-hover:hover {
    color: #000000;
}

.fg-gray-hover:hover {
    background-color: #ddd;
}


/* --------- GRID MANAGEMENT ---------- */
/* make a container div */
.ph_container {
    width: 100%;
    padding: 0px 25px 0px 25px;
    /*position: absolute;*/
    /*left: 55px;*/
    z-index: -1 !important;
}

.flex_row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.flex_row2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.flex_item_1 {
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}

.flex_item_2 {
    -webkit-flex: 2; /* Safari */
    -ms-flex: 2; /* IE 10 */
    flex: 2; /* Standard syntax */
}

.flex_item_3 {
    -webkit-flex: 3; /* Safari */
    -ms-flex: 3; /* IE 10 */
    flex: 3; /* Standard syntax */
}

.flex_item_4 {
    -webkit-flex: 4; /* Safari */
    -ms-flex: 4; /* IE 10 */
    flex: 4; /* Standard syntax */
}


[class*="col-"] {
    width: 100%;
    float: left;
}

/* for new volume report flip to flex row at 1000 width*/
@media only screen and (min-width: 1000px)
{
    .flex_row2 {
        flex-direction: row;
    }
}

/* media queries to show grid columns */
@media only screen and (min-width: 600px) {
    /* For desktop: */
    .flex_row {
        flex-direction: row;
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}

/* after a row, clear the float */
.row::after {
    content: "";
    clear: both;
    display: table;
}

/* -------------- buttons ------------------ */
button {
    cursor: pointer;
    padding: 10px;
    outline: none;
    border: none;
}

.btn-block {
    width: 100%;
}

.btn-ph-primary {
    background-color: #4aa4a5;
    color: #f8f9fa;
    border: 1px solid #4aa4a5;
}

    .btn-ph-primary:hover {
        background-color: #f8f9fa;
        color: #4aa4a5;
        border: 1px solid #4aa4a5;
    }

.btn-shadow {
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
}

/* --------------- form inputs -------------- */
.select {
    padding: 5px;
    border-radius: 5px;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    overflow: visible;
}

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4aa4a5;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4aa4a5;
        cursor: pointer;
    }


/* --------------- panels ------------------- */
.panel {
    width: 100%;
    margin-bottom: 10px;
}

.ph-border-left {
    border-left: 5px solid #4aa4a5;
    padding: 10px;
}

.ph-border-left-hover {
    border-left: 5px solid #6c757d;
    padding: 10px;
}

    .ph-border-left-hover:hover {
        border-left: 5px solid #4aa4a5;
        padding: 10px;
    }


/* ------------------ progress and loaders ---------------- */
.progress_bar {
    background-color: #ddd;
    border-radius: 10px;
    width: 150px;
    position: relative;
    margin: 0 auto;
}

.progress_inner {
    border-radius: 10px;
    padding: 10px;
}

    .progress_inner p {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translateX(-50%)translateY(-50%);
    }

.loader-sm {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #4aa4a5;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1.2s linear infinite; /* Safari */
    animation: spin 1.2s linear infinite;
}

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #4aa4a5;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1.2s linear infinite; /* Safari */
    animation: spin 1.2s linear infinite;
}

.loader-lg {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #4aa4a5;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1.2s linear infinite; /* Safari */
    animation: spin 1.2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

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

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


/* --------- padding and margins ------------ */
.mg-0 {
    margin: 0px;
}

.mg-1 {
    margin: 1px;
}

.mg-3 {
    margin: 3px;
}

.mg-5 {
    margin: 5px;
}

.mg-7 {
    margin: 6px;
}

.mg-10 {
    margin: 10px;
}

.mg-12 {
    margin: 12px;
}

.mg-15 {
    margin: 15px;
}

.mg-18 {
    margin: 18px;
}

.mg-20 {
    margin: 20px;
}

.mg-22 {
    margin: 22px;
}

.mg-25 {
    margin: 25px;
}

.mg-50 {
    margin: 50px;
}

.mg-100 {
    margin: 100px;
}

/* top right bottom left */
.mg-sides-1 {
    margin: 0px 1px 0px 1px;
}

.mg-sides-3 {
    margin: 0px 3px 0px 3px;
}

.mg-sides-5 {
    margin: 0px 5px 0px 5px;
}

.mg-sides-7 {
    margin: 0px 7px 0px 7px;
}

.mg-sides-10 {
    margin: 0px 10px 0px 10px;
}

.mg-sides-12 {
    margin: 0px 12px 0px 12px;
}

.mg-sides-15 {
    margin: 0px 15px 0px 15px;
}

.mg-sides-18 {
    margin: 0px 18px 0px 18px;
}

.mg-sides-20 {
    margin: 0px 20px 0px 20px;
}

.mg-sides-22 {
    margin: 0px 22px 0px 22px;
}

.mg-sides-25 {
    margin: 0px 25px 0px 25px;
}

.mg-sides-50 {
    margin: 0px 50px 0px 50px;
}

.mg-sides-100 {
    margin: 0px 100px 0px 100px;
}

.mg-topbot-1 {
    margin: 1px 0px 1px 0px;
}

.mg-topbot-3 {
    margin: 3px 0px 3px 0px;
}

.mg-topbot-5 {
    margin: 5px 0px 5px 0px;
}

.mg-topbot-7 {
    margin: 7px 0px 7px 0px;
}

.mg-topbot-10 {
    margin: 10px 0px 10px 0px;
}

.mg-topbot-12 {
    margin: 12px 0px 12px 0px;
}

.mg-topbot-15 {
    margin: 15px 0px 15px 0px;
}

.mg-topbot-18 {
    margin: 18px 0px 18px 0px;
}

.mg-topbot-20 {
    margin: 20px 0px 20px 0px;
}

.mg-topbot-22 {
    margin: 22px 0px 22px 0px;
}

.mg-topbot-25 {
    margin: 25px 0px 25px 0px;
}

.mg-topbot-50 {
    margin: 50px 0px 50px 0px;
}

.mg-topbot-100 {
    margin: 100px 0px 100px 0px;
}

.mg-l-1 {
    margin-left: 1px;
}

.mg-l-3 {
    margin-left: 3px;
}

.mg-l-5 {
    margin-left: 5px;
}

.mg-l-7 {
    margin-left: 7px;
}

.mg-l-10 {
    margin-left: 10px;
}

.mg-l-12 {
    margin-left: 12px;
}

.mg-l-15 {
    margin-left: 15px;
}

.mg-l-18 {
    margin-left: 18px;
}

.mg-l-20 {
    margin-left: 20px;
}

.mg-l-22 {
    margin-left: 22px;
}

.mg-l-25 {
    margin-left: 25px;
}

.mg-l-50 {
    margin-left: 50px;
}

.mg-l-100 {
    margin-right: 100px;
}

.mg-r-1 {
    margin-right: 1px;
}

.mg-r-3 {
    margin-right: 3px;
}

.mg-r-5 {
    margin-right: 5px;
}

.mg-r-7 {
    margin-right: 7px;
}

.mg-r-10 {
    margin-right: 10px;
}

.mg-r-12 {
    margin-right: 12px;
}

.mg-r-15 {
    margin-right: 15px;
}

.mg-r-18 {
    margin-right: 18px;
}

.mg-r-20 {
    margin-right: 20px;
}

.mg-r-22 {
    margin-right: 22px;
}

.mg-r-25 {
    margin-right: 25px;
}

.mg-r-50 {
    margin-right: 50px;
}

.mg-r-100 {
    margin-top: 100px;
}

.mg-t-1 {
    margin-top: 1px;
}

.mg-t-3 {
    margin-top: 3px;
}

.mg-t-5 {
    margin-top: 5px;
}

.mg-t-7 {
    margin-top: 7px;
}

.mg-t-10 {
    margin-top: 10px;
}

.mg-t-12 {
    margin-top: 12px;
}

.mg-t-15 {
    margin-top: 15px;
}

.mg-t-18 {
    margin-top: 18px;
}

.mg-t-20 {
    margin-top: 20px;
}

.mg-t-22 {
    margin-top: 22px;
}

.mg-t-25 {
    margin-top: 25px;
}

.mg-t-50 {
    margin-top: 50px;
}

.mg-t-100 {
    margin-bottom: 100px;
}

.mg-b-1 {
    margin-bottom: 1px;
}

.mg-b-3 {
    margin-bottom: 3px;
}

.mg-b-5 {
    margin-bottom: 5px;
}

.mg-b-7 {
    margin-bottom: 7px;
}

.mg-b-10 {
    margin-bottom: 10px;
}

.mg-b-12 {
    margin-bottom: 12px;
}

.mg-b-15 {
    margin-bottom: 15px;
}

.mg-b-18 {
    margin-bottom: 18px;
}

.mg-b-20 {
    margin-bottom: 20px;
}

.mg-b-22 {
    margin-bottom: 22px;
}

.mg-b-25 {
    margin-bottom: 25px;
}

.mg-b-50 {
    margin-bottom: 50px;
}

.mg-b-100 {
    margin-bottom: 100px;
}

.pd-0 {
    padding: 0px;
}

.pd-1 {
    padding: 1px;
}

.pd-3 {
    padding: 3px;
}

.pd-5 {
    padding: 5px;
}

.pd-7 {
    padding: 6px;
}

.pd-10 {
    padding: 10px;
}

.pd-12 {
    padding: 12px;
}

.pd-15 {
    padding: 15px;
}

.pd-18 {
    padding: 18px;
}

.pd-20 {
    padding: 20px;
}

.pd-22 {
    padding: 22px;
}

.pd-25 {
    padding: 25px;
}

.pd-50 {
    padding: 50px;
}

.pd-100 {
    padding: 100px;
}

/* top right bottom left */
.pd-sides-1 {
    padding: 0px 1px 0px 1px;
}

.pd-sides-3 {
    padding: 0px 3px 0px 3px;
}

.pd-sides-5 {
    padding: 0px 5px 0px 5px;
}

.pd-sides-7 {
    padding: 0px 7px 0px 7px;
}

.pd-sides-10 {
    padding: 0px 10px 0px 10px;
}

.pd-sides-12 {
    padding: 0px 12px 0px 12px;
}

.pd-sides-15 {
    padding: 0px 15px 0px 15px;
}

.pd-sides-18 {
    padding: 0px 18px 0px 18px;
}

.pd-sides-20 {
    padding: 0px 20px 0px 20px;
}

.pd-sides-22 {
    padding: 0px 22px 0px 22px;
}

.pd-sides-25 {
    padding: 0px 25px 0px 25px;
}

.pd-sides-50 {
    padding: 0px 50px 0px 50px;
}

.pd-sides-100 {
    padding: 0px 100px 0px 100px;
}

.pd-topbot-1 {
    padding: 1px 0px 1px 0px;
}

.pd-topbot-3 {
    padding: 3px 0px 3px 0px;
}

.pd-topbot-5 {
    padding: 5px 0px 5px 0px;
}

.pd-topbot-7 {
    padding: 7px 0px 7px 0px;
}

.pd-topbot-10 {
    padding: 10px 0px 10px 0px;
}

.pd-topbot-12 {
    padding: 12px 0px 12px 0px;
}

.pd-topbot-15 {
    padding: 15px 0px 15px 0px;
}

.pd-topbot-18 {
    padding: 18px 0px 18px 0px;
}

.pd-topbot-20 {
    padding: 20px 0px 20px 0px;
}

.pd-topbot-22 {
    padding: 22px 0px 22px 0px;
}

.pd-topbot-25 {
    padding: 25px 0px 25px 0px;
}

.pd-topbot-50 {
    padding: 50px 0px 50px 0px;
}

.pd-topbot-100 {
    padding: 100px 0px 100px 0px;
}

.pd-l-1 {
    padding-left: 1px;
}

.pd-l-3 {
    padding-left: 3px;
}

.pd-l-5 {
    padding-left: 5px;
}

.pd-l-7 {
    padding-left: 7px;
}

.pd-l-10 {
    padding-left: 10px;
}

.pd-l-12 {
    padding-left: 12px;
}

.pd-l-15 {
    padding-left: 15px;
}

.pd-l-18 {
    padding-left: 18px;
}

.pd-l-20 {
    padding-left: 20px;
}

.pd-l-22 {
    padding-left: 22px;
}

.pd-l-25 {
    padding-left: 25px;
}

.pd-l-50 {
    padding-left: 50px;
}

.pd-l-100 {
    padding-right: 100px;
}

.pd-r-1 {
    padding-right: 1px;
}

.pd-r-3 {
    padding-right: 3px;
}

.pd-r-5 {
    padding-right: 5px;
}

.pd-r-7 {
    padding-right: 7px;
}

.pd-r-10 {
    padding-right: 10px;
}

.pd-r-12 {
    padding-right: 12px;
}

.pd-r-15 {
    padding-right: 15px;
}

.pd-r-18 {
    padding-right: 18px;
}

.pd-r-20 {
    padding-right: 20px;
}

.pd-r-22 {
    padding-right: 22px;
}

.pd-r-25 {
    padding-right: 25px;
}

.pd-r-50 {
    padding-right: 50px;
}

.pd-r-100 {
    padding-top: 100px;
}

.pd-t-1 {
    padding-top: 1px;
}

.pd-t-3 {
    padding-top: 3px;
}

.pd-t-5 {
    padding-top: 5px;
}

.pd-t-7 {
    padding-top: 7px;
}

.pd-t-10 {
    padding-top: 10px;
}

.pd-t-12 {
    padding-top: 12px;
}

.pd-t-15 {
    padding-top: 15px;
}

.pd-t-18 {
    padding-top: 18px;
}

.pd-t-20 {
    padding-top: 20px;
}

.pd-t-22 {
    padding-top: 22px;
}

.pd-t-25 {
    padding-top: 25px;
}

.pd-t-50 {
    padding-top: 50px;
}

.pd-t-100 {
    padding-bottom: 100px;
}

.pd-b-1 {
    padding-bottom: 1px;
}

.pd-b-3 {
    padding-bottom: 3px;
}

.pd-b-5 {
    padding-bottom: 5px;
}

.pd-b-7 {
    padding-bottom: 7px;
}

.pd-b-10 {
    padding-bottom: 10px;
}

.pd-b-12 {
    padding-bottom: 12px;
}

.pd-b-15 {
    padding-bottom: 15px;
}

.pd-b-18 {
    padding-bottom: 18px;
}

.pd-b-20 {
    padding-bottom: 20px;
}

.pd-b-22 {
    padding-bottom: 22px;
}

.pd-b-25 {
    padding-bottom: 25px;
}

.pd-b-50 {
    padding-bottom: 50px;
}

.pd-b-100 {
    padding-bottom: 100px;
}



/* --------------------------------- BORDERS ---------------------------------- */

.br-1 {
    border-radius: 1px;
}

.br-3 {
    border-radius: 3px;
}

.br-5 {
    border-radius: 5px;
}

.br-7 {
    border-radius: 17px;
}

.br-10 {
    border-radius: 10px;
}

.br-12 {
    border-radius: 12px;
}

.br-15 {
    border-radius: 15px;
}

.br-18 {
    border-radius: 18px;
}

.br-20 {
    border-radius: 20px;
}

.br-22 {
    border-radius: 22px;
}

.br-25 {
    border-radius: 25px;
}

.br-50 {
    border-radius: 50px;
}

.br-100 {
    border-radius: 100px;
}

.br-top-10 {
    border-radius: 10px 10px 0px 0px;
}

.br-right-10 {
    border-radius: 0px 10px 10px 0px;
}

.br-left-10 {
    border-radius: 10px 0px 0px 10px;
}

.br-bottom-10 {
    border-radius: 0px 0px 10px 10px;
}

.bd-primary {
    border: 1px solid #007bff;
}

.bd-success {
    border: 1px solid #28a745;
}

.bd-info {
    border: 1px solid #17a2b8;
}

.bd-warning {
    border: 1px solid #ffc107;
}

.bd-danger {
    border: 1px solid #dc3545;
}

.bd-secondary {
    border: 1px solid #6c757d;
}

.bd-dark-gray {
    border: 1px solid #343a40;
}

.bd-light-gray {
    border: 1px solid #f8f9fa;
}

.bd-ph-primary {
    border: 1px solid #4aa4a5;
}

.bd-ph-dark {
    border: 1px solid #208687;
}


.shadow {
    border: 1px solid #d3d3d3;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
}


/* ------------ charts ---------------- */
.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
}

.circle-bg {
    stroke: #eee;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}


.circle-fg {
    stroke: #4aa4a5;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}


@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}


/* slider */
.slider {
    overflow: hidden;
    width: 88%;
    display: inline-block;
}

.slider_button {
    display: inline-block;
    width: 6%;
}

    .slider_button button {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        outline: none;
        background: none;
        color: #ffffff;
        font-size: 25px;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

.slider_view {
    position: relative;
    width: 10000px;
}

.slider_item {
    display: inline-block;
    background-color: red;
}

.hide {
    display: none;
}

/* table */
/* -------------------------------- TABLES ----------------------------------------- */


table {
    border-collapse: collapse;
    border: 1px solid #ddd;
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    overflow: hidden;
}

th {
    background-color: #4aa4a5;
    color: #ffffff;
    cursor: pointer;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

td {
    cursor: default;
    background-color: #fff;
}

tbody tr:hover {
    background-color: #f5f5f5;
}

tbody tr:last-child {
    border-bottom: #d3d3d3;
}

.mobile_header {
    display: none;
}

.normal_header {
    display: table-row;
}

/* custom scroll */
/* width */
table::-webkit-scrollbar {
    width: 12px;
    position: relative;
}

/* Track */
table::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
table::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px;
}

    /* Handle on hover */
    table::-webkit-scrollbar-thumb:hover {
        background: #000000;
    }


/* 600 and up */
@media only screen and (min-width: 601px) {
    .table_widget {
        display: block;
        overflow-x: auto;
        overflow-y: scroll;
        white-space: nowrap;
        max-height: 600px;
    }

        .table_widget th {
            position: sticky;
            top: 0;
            z-index: 9999;
        }

    .table_th_wide {
        min-width: 150px !important;
    }

    .table_th_medwide {
        min-width: 115px !important;
    }

    .sticky {
        position: sticky;
        left: 0;
    }

        .sticky th {
            position: sticky;
            background-color: #4aa4a5;
            z-index: 999999 !important;
        }

        .sticky td {
            z-index: 999998 !important;
        }

    #mobile_table_sort {
        display: none;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .mobile_header {
        display: table-row;
    }

    #mobile_table_sort {
        display: block;
    }

    .normal_header {
        display: none;
    }

    thead th:not(:first-child) {
        display: none;
    }

    td, th {
        display: block;
    }

        td[data-th]:before {
            font-weight: bold;
            padding-right: 10px;
            content: attr(data-th);
        }

        td:last-child {
            border-bottom: 3px solid #4aa4a5;
        }

    tr:last-child td:last-child {
        border-bottom: none;
    }
}





.typewriter h1 {
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid black; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: typing 1.5s steps(30, end), blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: black
    }
}


/* --------------------------------- SIDE NAV ---------------------------------- */
.sidenav-container-outer {
    width: 55px;
    overflow: visible;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}

.sidenav-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55px;
}

.sidenav-container {
    overflow-y: scroll;
    overflow-x: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidenav-container::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.sidenav-icon {
    width: 55px;
}

.sidenav-icon-ham {
    width: 55px;
}

    .sidenav-icon-ham i {
        font-size: 20px;
        width: 55px;
        margin: 0px;
        padding: 5px;
        height: 45px;
        line-height: 35px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
    }

.sidenav-icon i {
    font-size: 20px;
    width: 55px;
    margin: 0px;
    padding: 5px;
    height: 45px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    border-radius: 7px;
    cursor: pointer;
}

.sidebar-icon-text {
    padding: 5px;
    border-radius: 7px;
    line-height: 35px;
    font-size: 15px;
    display: none;
}