/*
    ALC Styling css 2023 22 september
*/

.test-green {
    background: #b2ebb2;
    border-radius: 0.4rem;
    border: 2px solid white; /* Adding white border */
}
.test-red {
    background: #ff000057;
    border-radius: 0.4rem;
    border: 2px solid white; /* Adding white border */
}
.test-gray {
    background: #00000014;
    border-radius: 0.4rem;
    border: 2px solid white; /* Adding white border */
}

.allnode-table-row-color-1 {
    background-color: #f0f8ff; /* AliceBlue */
}

.allnode-table-row-color-2 {
    background-color: #e6e6fa; /* Lavender */
}

/*ROOT SETTING*/
/* For WebKit-based browsers (Chrome, Safari) */
/* Customize the scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

/* Customize the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}

/* Customize the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 6px; /* Rounded corners of the scrollbar thumb */
}

    /* Customize the scrollbar thumb on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color of the scrollbar thumb on hover */
    }

/* For Firefox */
/* Customize the scrollbar track */
* {
    scrollbar-width: thin; /* Width of the scrollbar track */
    scrollbar-color: #888 #f1f1f1; /* Color of the scrollbar thumb and track */
}

/* For Microsoft Edge (Chromium) */
/* Customize the scrollbar track */
*::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

/* Customize the scrollbar track */
*::-webkit-scrollbar-track {
    background: #e9e9e9; /* Background color of the scrollbar track */
}

/* Customize the scrollbar thumb */
*::-webkit-scrollbar-thumb {
    background: #d4d4d4; /* Color of the scrollbar thumb */
    border-radius: 6px; /* Rounded corners of the scrollbar thumb */
}

/* Customize the scrollbar thumb on hover */
*::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar thumb on hover */
}



/*
    COLOURS 
*/

:root {
    --white: white;
    --black: black;
    --gray-100: #f1f1f1;
    --gray-200: #E4E4E4;
    --gray-300: #D9D8D8;
    --gray-400: #CCCBCB;
    --gray-500: #BFBEBE;
    --blue-100: #608BC0;
    --blue-200: #4F82C0;
    --blue-300: #3C78C0;
    --blue-400: #286DC0;
    --blue-500: #1663c0;
    --green-status: #8ac175;
    --amber-status: #ffbf00;
    --red-status: #fd4545;
}



/*
    GRAY
*/
.bg-gray-100 {
    background-color: var(--gray-100);
}
.bg-gray-200 {
    background-color: var(--gray-200);
}
.bg-gray-300 {
    background-color: var(--gray-300);
}
.bg-gray-400 {
    background-color: var(--gray-400);
}
.bg-gray-500 {
    background-color: var(--gray-500);
}

.bg-blue-100 {
    background-color: gray;
}

.bg-blue-200 {
    background-color: gray;
}

.bg-blue-300 {
    background-color: gray;
}

.bg-blue-400 {
    background-color: gray;
}

.bg-blue-500 {
    background-color: gray;
}


/*
   Useable styling in short
*/
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}


.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}


.align-item-center {
    align-items: center;
}

.just-content-center {
    justify-content: center;
}

.just-content-space-between {
    justify-content: space-between;
}

.flex-wrap-wr {
    flex-wrap: wrap;
}

.flex-gap-100 {
    gap: 2px;
}
.flex-gap-200 {
    gap: 5px;
}
.flex-gap-300 {
    gap: 10px;
}
.flex-gap-400 {
    gap: 20px;
}
.flex-gap-500 {
    gap: 30px;
}

.grid{
    display:grid;
}


.grid-2c {
    grid-template-columns: 1fr 1fr;
}

.row-gap-100 {
    row-gap: 10px;
}

.row-gap-200 {
    row-gap: 12px;
}

.row-gap-300 {
    row-gap: 14px;
}

.row-gap-400 {
    row-gap: 16px;
}

.row-gap-500 {
    row-gap: 18px;
}

.column-gap-100 {
    column-gap: 10px;
}

.column-gap-200 {
    column-gap: 12px;
}

.column-gap-300 {
    column-gap: 14px;
}

.column-gap-400 {
    column-gap: 16px;
}

.column-gap-500 {
    column-gap: 18px;
}


.padding-100 {
    padding: 2px;
}
.padding-200 {
    padding: 5px;
}
.padding-300 {
    padding: 8px;
}
.padding-400 {
    padding: 10px;
}
.padding-500 {
    padding: 12px;
}

.padding-bottom-100 {
    padding-bottom: 2px;
}

.padding-bottom-200 {
    padding-bottom: 5px;
}

.padding-bottom-300 {
    padding-bottom: 8px;
}

.padding-bottom-400 {
    padding-bottom: 10px;
}

.padding-bottom-500 {
    padding-bottom: 12px;
}

.full-width {
    width: 100%;
}

.font-bold {
    font-weight: bold;
}

/*
    TEXT/title Styling
*/

.title-500 {
    font-size: 50px;
}
.title-400 {
    font-size: 45px;
}
.title-300 {
    font-size: 40px;
}
.title-200 {
    font-size: 35px;
}
.title-100 {
    font-size: 30px;
}

.border-style-ridge {
    border-style: ridge;
}

hr.title-hr-line {
    margin: 0px;
    border-bottom: solid 1px;
    border-bottom-style: ridge;
    width: 80%;
}

.hr-line {
    margin-bottom: 5px;
    border-bottom: solid 1px;
    border-bottom-style: ridge;
}

.margin-none {
    margin: 0;
}

.border-radius-100 {
    border-radius: 5px;
}
.border-radius-200 {
    border-radius: 10px;
}
.border-radius-300 {
    border-radius: 15px;
}
.border-radius-400 {
    border-radius: 20px;
}
.border-radius-500 {
    border-radius: 25px;
}

.text-align-center{
    text-align:center;
}

.text-des {
    margin-left: auto;
}

.text-500 {
    font-size: 22px;
}

.text-400 {
    font-size: 20px;
}

.text-300 {
    font-size: 18px;
}

.text-200 {
    font-size: 16px;
}

.text-100 {
    font-size: 14px;
}

.cursor-pointer{
    cursor:pointer;
}






/*
    button css
*/

.btn-width-100 {
    width: 100px;
}
.btn-width-200 {
    width: 200px;
}
.btn-width-300 {
    width: 300px;
}

.btn {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

.btn-white {
    background-color: var(--white);
    color: var(--black);
}

.btn-black {
    background-color: var(--black);
    color: var(--white);
}

.btn-blue {
    background: var(--blue-500);
    color: var(--white);
}

/*  custom buttons */

.btn-reset-filterby {
    border: none;
    text-decoration: underline;
}

.btn-filterby {
    text-transform: uppercase;
}

.btn-login {
    width: 230px;
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px;
}

.btn-logout {
    padding: 6px 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    border:none;
}

.btn-install-save {
    width: 230px;
}


.btn-blue:hover {
    background: #0c3669;
    color: #fff;
}


.btn-filterby:hover {
    background-color: var(--black);
    color: var(--white);
}

.btn-hover-gray-100:hover {
    color: var(--black);
    background-color: var(--gray-100);
}



/* Add this CSS to your stylesheet */
.filter-dropdown {
    position: relative;
    display: inline-block;
}



.dropdown-content-csr {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 231px;
    width: 180px;
    margin-top: 4px;
    z-index: 10;
}

.dropdown-content-csr label {
    padding: 5px 10px;
}

input.filter-checkbox {
    margin: 0;
    width: 16px;
    height: 16px;
}


/*

    put thest in different file
*/
.asset-info {
    border: 2px solid #0c3669;
    padding-top: 10px;
    padding-bottom: 10px;
}


.asset-status-box {
    display: flex;
    justify-content: center;
    width: 75px;
    height: 20px;
    border-radius: 5px;
}

span.asset-statuts-state {
    color: white;
    font-size: 15px;
}

.show-none{
    display:none;
}
.status-box {
    width: 10px;
    height: 10px;
    display: inline-block;
}

.status-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: red; /* Default color */
}

.status-box-red {
    background-color: var(--red-status);
}

.status-box-amber {
    background-color: var(--amber-status);
}

.status-box-green {
    background-color: var(--green-status);
}

.status-content-table {
    border: 1px solid #0c3669;
    width: 800px;
    max-height: 500px;
    overflow: auto;
}


.station-csr-status {
    border-top: solid 1px;
    border-top-style: inset;
    padding-top: 10px;
}




/*
    Row sepration
*/

/*.row-border-db {*/
    /* background: aliceblue; */
    /*border-bottom-style: double;
}*/




/*
    STYLING FOR SMALLER SCREEN
*/
    @media (max-width: 780px) {
        .title-500 {
            font-size: 30px;
        }

        .title-400 {
            font-size: 27px;
        }

        .title-300 {
            font-size: 24px;
        }

        .title-200 {
            font-size: 21px;
        }

        .title-100 {
            font-size: 18px;
        }

        .text-500 {
            font-size: 17px;
        }

        .text-400 {
            font-size: 16px;
        }

        .text-300 {
            font-size: 14px;
        }

        .text-200 {
            font-size: 13px;
        }

        .text-100 {
            font-size: 12px;
        }

        .status-content-table {
            width: 400px;
        }

        .station-csr-status {
            width: 400px;
        }
    }

    @media (max-width: 415px) {
        .title-500 {
            font-size: 26px;
        }

        .title-400 {
            font-size: 23px;
        }

        .title-300 {
            font-size: 20px;
        }

        .title-200 {
            font-size: 18px;
        }

        .title-100 {
            font-size: 16px;
        }

        .text-500 {
            font-size: 14px;
        }

        .text-400 {
            font-size: 14px;
        }

        .text-300 {
            font-size: 14px;
        }

        .text-200 {
            font-size: 13px;
        }

        .text-100 {
            font-size: 12px;
        }


        .status-content-table {
            width: 250px;
        }

        .station-csr-status {
            width: 250px;
        }

        .btn-login {
            width: 130px;
        }
    }



   /* THIS IS  FOR MARKERS */

.live-marker-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.live-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgb(0 255 0 / 0.72);*/ /* greenish pulse */
    /*border-radius: 50%;
    animation: pulseAnim 2s infinite ease-out;
    pointer-events: none;*/ /* ensures clicks go to SVG */
    /*z-index: 0;
}*/

.live-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    animation: pulseAnim 2s infinite ease-out;
    pointer-events: none;
    z-index: 0;
}



.live-marker-container svg {
    z-index: 1;
    pointer-events: auto; /* keeps the marker clickable */
}

@keyframes pulseAnim {
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}


/*
    For all node for search bar
*/

.all-node-search-bar {
    width: 70%;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    height: 30px;
}