input::-ms-reveal,
input::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
}

.no-records-height {
    height: 74vh;
}

/* Color Styles */

.heading-txt-color {
    color: var(--heading-text-color);
}

.para-txt-color {
    color: var(--para-text-color);
}

.label-color {
    color: var(--label-color);
}

.primary-txt-color {
    color: var(--primary-color);
}

.secondary-txt-color {
    color: var(--secondary-color);
}

.validation-txt {
    color: var(--red-color);
}

.grey-txt {
    color: var(--grey-text-color);
}


/* login styles */

.login-bg-image {
    background-image: url('../images/login-bg-img.svg');
    background-size: cover;
    border-radius: 24px;
}

.login-height {
    height: 97vh;
}

.login-logo-size {
    width: 190px;
    height: 75px;
}


/* upload-file */

.upload-file-line-height {
    line-height: 64px;
}

.li-line-height {
    line-height: 40px;
}

.upload-files-container {
    background-color: var(--upload-bg-color);
    border: 1px dashed var(--secondary-color);
    border-radius: 4px;
}

.uploaded-file-batch {
    border-radius: 50px;
    border: 0.5px solid var(--input-border-color);
    padding: 5px 14px;
    position: relative;
}

.uploaded-file-batch:hover {
    background-color: var(--file-batch-bg-color);
}

.uploaded-file-batch:hover .file-close-icon {
    display: block;
}

.file-close-icon {
    display: none;
    position: absolute;
    right: 15px
}

.custom-select {
    padding: 9px 24px 9px 12px;
}

.uploaded-file {
    border-radius: 8px;
    background-color: #FCFCFC;
}

.logout-menu {
    min-width: fit-content !important;
}

/* header-styles */

.header-logo-size {
    width: 102px;
    height: 40px;
}

.custom-navbar .navbar-nav {
    gap: 24px;
}

.custom-navbar .navbar-nav li a {
    color: var(--heading-text-color);
    font-family: var(--font-regular);
    padding: 8px 16px !important;
    border-radius: 6px;
}

.custom-navbar .navbar-nav li .nav-link:hover {
    background-color: var(--light-primary-color);
    border-radius: 8px;
    color: var(--heading-text-color);
}

.custom-navbar .navbar-nav li .nav-link.active {
    background-color: var(--primary-color);
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--font-regular);
}

.profile-container {
    background-color: var(--light-secondary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.petronas-chat-logo-container {
    background-color: var(--primary-color);
}

/* chat container styles */
.chat-container {
    background-color: var(--chat-bg-color);
    overflow-y: scroll;
    scrollbar-width: thin;
    height: 80vh;
    border-radius: 16px;
}

.chat-content-user {
    padding: 15px;
    background-color: white;
    max-width: 80%;
    background: linear-gradient(275deg, #191B23 10.59%, #4E4E4E 166.87%);
    border-radius: 14px 0px 14px 14px;
    background: linear-gradient(275deg, #191B23 10.59%, #4E4E4E 166.87%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.chat-content {
    padding: 15px;
    background-color: #ffffff;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 0px 14px 14px 14px;
    max-width: 70%;
}

.dot-typing {
    position: relative;
    left: -9992px;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    color: #1D2B50;
    margin-right: 15px;
    box-shadow: 9984px 0 0 0 #1D2B50, 9999px 0 0 0 #1D2B50, 10014px 0 0 0 #1D2B50;
    animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px 0 0 0 #25292F;
    }

    16.667% {
        box-shadow: 9984px -8px 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px 0 0 0 #25292F;
    }

    33.333% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px 0 0 0 #25292F;
    }

    50% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px -8px 0 0 #25292F, 10014px 0 0 0 #25292F;
    }

    66.667% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px 0 0 0 #25292F;
    }

    83.333% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px -8px 0 0 #25292F;
    }

    100% {
        box-shadow: 9984px 0 0 0 #25292F, 9999px 0 0 0 #25292F, 10014px 0 0 0 #25292F;
    }
}


.custom-tab .nav-item .nav-link.active {
    color: var(--secondary-color);
    border: 0;
    border-bottom: 3px solid var(--secondary-color);
    font-family: var(--font-medium);
}

.custom-tab .nav-item .nav-link {
    color: var(--tab-inactive-color);
    font-family: var(--font-medium);
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
}

.custom-tab .nav-item .nav-link:hover {
    border: 0;
    background-color: var(--light-secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}

.custom-tab .nav-item .nav-link:focus {
    border: 0;
    background-color: var(--light-secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}

.loader-container {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    align-items: center;
}

.loading {
    font-size: 120px;
    --duration: 1s;
    --num-dot: 10;
    --color-dot: #fff;
    width: 108px;
    position: relative;
}

.loading>* {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: rotate(calc((360deg / var(--num-dot)
                    /* Number of child */
                ) * var(--index)));
}

.loading>*::before {
    position: absolute;
    content: '';
    top: .15em;
    left: .45em;
    width: .1em;
    height: .1em;
    transform: scale(0);
    /* First state is scale from 0 */
    border-radius: 50%;
    background-color: var(--color-dot);
    animation: scaleTo1 var(--duration) ease-in-out calc(var(--duration) / var(--num-dot) * var(--index)) infinite reverse;
}

@keyframes scaleTo1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}



/* total circuits chart */

.circuits-list {
    .legend {
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }

    .legend.light-blue {
        background-color: #7ED2EE;
    }

    .legend.violet {
        background-color: #999CF8;
    }

    .legend.yellow {
        background-color: #FBC774;
    }

    .legend.green {
        background-color: #77DE9B;
    }

    .legend.purple {
        background-color: #C288ED;
    }

    .legend.gold {
        background-color: #FDC770;
    }

    .legend.blue {
        background-color: #7DA5F6;
    }

    .legend.orange {
        background-color: #F78166;
    }

    .legend.pink {
        background-color: #FF8DE6;
    }
}


.indication {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 4px;
}

.indication.high {
    .flag {
        color: #F94C4C;
    }

    background-color: #FEDBDB;
}


.indication.medium {
    .flag {
        color: #F9BC4C;
    }

    background-color: #FEF1DB;
}


.indication.low {
    .flag {
        color: #0E7FC5;
    }

    background-color: #E9F3FA;
}


.width-40 {
    width: 40px;
}

.analysis-indicator {
    display: inline-block;
    width: 16px;
    height: 3px;
}

.visualization-container {
    width: 850px;
    height: 412px;
    object-fit: cover;
}


/*toast styles*/
.success-toast {
    border-radius: 12px;
    border: 1px solid var(--Solid-Sucess-border, #43D590);
    background: var(--Solid-Sucess-background, linear-gradient(95deg, #32BB71 15.3%, #2A9D8F 113.45%));
}

.failure-toast {
    border-radius: 12px;
    border: 1px solid var(--Solid-Error-border, #F0863A);
    background: var(--Solid-Error-background, linear-gradient(95deg, #F6743E -6.96%, #D42525 108.25%));
}

/*accordion arrow*/
.accordion-arrow.collapsed {
    transform: rotate(-90deg);
}


/*custom scrollbar styles starts*/
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(202, 202, 202, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(169, 169, 169, 0.3);
}

/*custom scrollbar styles ends*/

.add-source-table {
    max-height: 50vh;
    overflow-y: scroll;
}

.custom-dropdown {
    max-height: 150px;
    overflow: auto;
}