:root {
    --box-shadow1: 0 3px 10px -4px #ccc;
    --box-shadow2: 0 3px 10px -3px #777;
    --clr-light-black: #393D47;
    --clr-btn-green: #96FF01;
    --clr-success: #5BAF00;
    --clr-info: #0088CB;
    --clr-created: #00A7A5;
    --clr-failed: #FF674A;
    --clr-warning: #E0A700;
    --clr-bg-light-gray: #f3f3f3;
}

body {
    background-color: #F0F0F0;
}
.navbar{
    z-index:100;
}
.navbar.hidden {
    transform: translateY(-100%);
}

.header-nav-action .gobgbtn {
    width: 40px;
    height: 40px;
    background-color: #e4e4e4;
    border-color: #e4e4e4;
    color: #777;
}
/*Disabled ------------*/

.opacity-1 {
    opacity: 0.1 !important;
}

.opacity-2 {
    opacity: 0.2 !important;
}

.opacity-3 {
    opacity: 0.3 !important;
}

.opacity-4 {
    opacity: 0.4 !important;
}

.opacity-5 {
    opacity: 0.5 !important;
}

.opacity-6 {
    opacity: 0.6 !important;
}

.opacity-7 {
    opacity: 0.7 !important;
}

.opacity-8 {
    opacity: 0.8 !important;
}
.opacity-9 {
    opacity: 0.9 !important;
}
.opacity-10 {
    opacity: 1 !important;
}
.disabled {
    opacity: 0.65 !important;
    /* background-color: #E9ECEF !important; */
    pointer-events: none !important;
}

/* Toggle switch ---------*/
.enable-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 25px;
    height: 35px;
    padding: 0.3rem 0.5rem 0.3rem 1rem;
    box-shadow: var(--box-shadow1);
    border: solid 1px #f3f3f3;
}
.toggle-switch {
    width: 50px;
    height:22px;
}
    .toggle-switch .slider {
        background-color: #E4E4E4;
    }
    .toggle-switch .slider:before {
        bottom: 4px;
        width: 24px;
        height: 14px;
        border-radius: 25px;
        left: 5px;
        box-shadow: 0 0 10px -3px #777;
    }
.toggle-switch .slider.active:before {
    transform: translateX(16px);
}
    /*Button --------------------*/
    .btn {
        text-transform: initial;
    }

.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
    background-color: #20232d;
    border-color: #20232d;
    color: #fff;
}

.btn-primary:focus {
    background-color: #20232d;
    border-color: #20232d;
    color: #fff;
}

.btn-secondary:focus {
    background-color: #fff;
    border-color: #20232d;
    color: #20232d;
}

.btn-white {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #fff !important;
}

/* Loader ---------------*/
.loader {
    z-index: 1000;
}

.spiner {
    border-top-color: var(--clr-primary);
}

/* pagination ----*/
.pagination .page-navbar .page-list > .page-dots img {
    rotate: 90deg;
}


/* Alert message -------*/
.alert-message {
    border-radius: 5px;
    padding: 0.2rem 0.8rem;
    opacity: 0;
    visibility: hidden;
    font-size: 0.8rem;
}

    .alert-message.active {
        opacity: 1;
        visibility: visible;
    }

/*Multi select styles ---------------------*/
.multi-select {
    z-index: auto;
}

    .multi-select .multi-select-text {
        min-height: 50px;
        border: 1px solid #f3f3f3;
        box-shadow: 0 3px 10px -3px #ccc;
        border-radius: 25px;
        padding: 0.6rem 1.2rem;
        color: #777;
    }

.mlt-slt-container.disabled {
    background-color: transparent;
}

    .mlt-slt-container.disabled .multi-select .multi-select-text {
        background-color: #E9ECEF;
    }

.multi-select .multi-select-text .multi-txt-arrow {
    right: 1rem;
}

.multi-select .multi-select-box {
    border-radius: 25px;
    padding: 0;
    overflow: hidden;
    z-index: 3;
    border: 0;
}

    .multi-select .multi-select-box .multi-drop-content {
        position: relative;
        min-height: 100px;
        max-height: 290px;
        padding: 3rem 0.5rem 2.5rem 1rem;
        overflow-y: auto;
    }

        .multi-select .multi-select-box .multi-drop-content .multi-select-item {
            color: #222;
            padding: 0.5rem 0.5rem 0.5rem 0;
        }

    .multi-select .multi-select-box .multi-select-action {
        align-items: center;
        display: flex;
        margin-top: 1rem;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
    }

.multi-select .multi-select-text .mlt-slt-title {
    font-size: 1rem;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-item .mlt-slt-checkbox {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0rem 0.8rem 0 .5rem;
    background-color: transparent;
    box-shadow: none;
    border: 0;
}

    .multi-select-item .mlt-slt-checkbox .checkinpt {
        width: 15px;
        height: 15px;
    }

    .multi-select-item .mlt-slt-checkbox .check-text {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.multi-select .multi-select-box .multi-select-action .apply-btn-dp,
.multi-select .multi-select-box .multi-select-action .showmore-btn-dp {
    background-color: #20232D;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.5rem;
}

    .multi-select .multi-select-box .multi-select-action .apply-btn-dp:hover,
    .multi-select .multi-select-box .multi-select-action .showmore-btn-dp:hover {
        color: #fff;
        background-color: #20232D;
        opacity: 0.9;
    }

.ebx-model-box {
    padding-top: 3rem;
    align-items: self-start;
    overflow: auto;
}

.ebx-model-body {
    border-radius: 25px;
}

.mltsl-md-item .mlt-slt-checkbox .sld-delete-btn {
    padding: 0.2rem;
    line-height: 1px;
    border: 0;
    background-color: transparent;
}

.selected-lists .mltsl-md-item {
    padding: 0;
    font-size: 0.8rem;
    border-radius: 25px;
    border: 0;
}

    .selected-lists .mltsl-md-item:hover {
        transform: scale(1);
        background-color: #f3f3f3;
    }

.selected-lists {
    margin-top: 0.8rem;
}

.multi-select.invalid .multi-select-text {
    border-color: red !important;
}

    .multi-select.invalid .multi-select-text .mlt-slt-title {
        color: red !important;
    }

.multi-select .multi-select-box .multi-search-box {
    border-radius: 25px;
    height: 35px;
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    position: absolute;
    left: 50%;
    /* right: 10px; */
    top: 10px;
    transform: translateX(-50%);
    background-color: #fff;
    z-index: 1;
    width: 95%;
}

    .multi-select .multi-select-box .multi-search-box:focus {
        outline: 0;
        border-color: #777;
    }

.ebx-orderby > .ebx-orderby-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: solid 1px #ccc;
    background-color: #fff;
    transition: all 0.3s ease;
}

    .ebx-orderby > .ebx-orderby-btn:hover {
        opacity: 1;
        border-color: var(--clr-primary);
    }

.ebx-orderby-btn > img {
    transition: all 0.3s ease;
}

.ebx-orderby > .ebx-orderby-btn:hover img {
    transform: scale(0.8);
}

.ebx-model-header {
    align-items: center;
    padding: 0.8rem 1rem;
}

.close-ebx-model {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin-left: 0;
}

    .close-ebx-model .close-model-btn {
        width: 14px;
        transition: all 0.3s ease;
    }

    .close-ebx-model:hover {
        border-color: var(--clr-primary)
    }

        .close-ebx-model:hover .close-model-btn {
            transform: scale(0.8);
        }

.ebx-filter-search .inputs-control {
    border-radius: 25px;
    height: 35px;
    width: 250px;
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
}

    .ebx-filter-search .inputs-control:focus {
        outline: 0;
        border-color: #777;
    }

.ebx-filter .selectopt {
    min-width: 170px;
}

    .ebx-filter .selectopt .selectopt-nav {
        border-radius: 25px;
        padding: 1rem 1.5rem 0.3rem 1rem;
        height: 35px;
        font-size: 0.8rem;
    }

        .ebx-filter .selectopt .selectopt-nav.active .selectopt-lable {
            font-size: 10px;
        }

        .ebx-filter .selectopt .selectopt-nav > .angle-down,
        .multi-select-text .multi-txt-arrow {
            right: 0.6rem;
            width: 16px;
        }

.mltsl-model-content {
    background-color: #f3f3f3;
    border-radius: 25px;
    width: 97%;
    margin: 0 auto;
    padding: 1rem;
    gap: 1rem;
}

.mltsl-mdl-bx {
    border-radius: 25px;
    padding: 0.8rem 1rem;
    margin-left: -1rem;
    transition: all 0.5s ease;
}

    .mltsl-mdl-bx.active-mltslMdlBx {
        margin-left: 0;
    }

.mltsl-mdl-selected {
    border-left: 0;
    border: 0;
    background-color: #fff;
    border-radius: 25px;
    padding: 0.8rem 0;
    margin-bottom: 0;
    transition: all 0.5s ease;
}

    .mltsl-mdl-selected.active-sldbx {
        border-color: transparent;
    }

    .mltsl-mdl-selected h3 {
        font-size: 1rem;
        padding: 0 0.8rem;
    }

.selected-lists {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    width: auto;
    max-height: 380px;
    overflow-y: auto;
}

.mltsl-mdl-list .mltsl-md-item {
    width: 25%;
}

.multi-select .multi-select-box .multi-drop-content .multi-select-item {
    padding: 0.5rem 0;
}

    .multi-select .multi-select-box .multi-drop-content .multi-select-item:hover {
        padding: 0.5rem 0;
        /* padding-left: 0.5rem 0; */
    }

.mlt-slt-checkbox {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    border-radius: 25px;
    border: solid 1px #f3f3f3;
    padding: 0.5rem 0.8rem;
    box-shadow: var(--box-shadow1);
}

.mltsl-md-item .mlt-slt-checkbox .checkinpt,
.multi-select-item .mlt-slt-checkbox .checkinpt {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0;
    visibility: hidden;
}

.mltsl-md-item .mlt-slt-checkbox .check-text,
.multi-select-item .mlt-slt-checkbox .check-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
    width: calc(100% - 20px);
    font-size: 0.8rem;
}

.model-box-footer {
    border-top: 0;
}

.mltsl-md-item .mlt-slt-checkbox .check-mark,
.multi-select-item .mlt-slt-checkbox .check-mark {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background-color: #f3f3f3;
}

.multi-select-item .mlt-slt-checkbox .check-mark {
    left: 0;
}

    .mltsl-md-item .mlt-slt-checkbox .check-mark:after,
    .multi-select-item .mlt-slt-checkbox .check-mark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 7px;
        height: 13px;
        border-radius: 0;
        border-width: 0 2px 2px 0px;
        border-style: solid;
        border-color: #fff;
        background-color: var(--clr-primary);
        transform: rotate(45deg);
    }

.mltsl-md-item .mlt-slt-checkbox .checkinpt:checked ~ .check-mark,
.multi-select-item .mlt-slt-checkbox .checkinpt:checked ~ .check-mark {
    background-color: var(--clr-primary);
}

    .mltsl-md-item .mlt-slt-checkbox .checkinpt:checked ~ .check-mark:after,
    .multi-select-item .mlt-slt-checkbox .checkinpt:checked ~ .check-mark:after {
        display: block;
    }

.mltslt-card-container.disabled {
    background-color: transparent !important;
}

    .mltslt-card-container.disabled .multi-select-card {
        border-radius: 25px;
        background-color: #E9ECEF;
    }

.mltsl-model-content .model-form {
    width: 50%;
}

.mltslt-no-data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
}

/*Asset Card */
.asset_landing_card {
    position: relative
}

    .asset_landing_card .card-link {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
/*Card container style ----------------*/
.content-card {
    background-color: #fff;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
    border: solid 1px #f3f3f3;
}

.content-card-black {
    background-color: #20232D;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow2);
}

.content-card-ligthblack {
    background-color: #2A2D35;
    border-radius: 25px;
    padding: 1rem;
}

.content-card-ligthblack2 {
    background-color: #393D47;
    border-radius: 25px;
    padding: 1rem;
}

.content-code-view {
    color: #fff;
    line-height: 1.5;
    min-height: 150px;
}


/*subheader _---------------------*/
.subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
}
/*Table  ------*/
.table-container {
    min-height: auto;
}

.table-content {
    background-color: transparent;
    min-height: 100%;
}

.table {
    background-color: transparent;
}

.table-title h2 {
    font-size: 1rem;
}

.table-grid .table > :not(caption) > tr > * {
    border: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    text-align: left;
}

.table-grid .table > :not(caption) > tr > td {
    background-color: #fff;
}

    .table-grid .table > :not(caption) > tr > td:first-child {
        border-radius: 25px 0 0 25px;
    }

    .table-grid .table > :not(caption) > tr > td:last-child {
        border-radius: 0 25px 25px 0;
    }

.table-grid .table {
    box-shadow: none;
    border-spacing: 0rem 1rem;
    border-collapse: inherit;
}

    .table-grid .table tbody > tr {
        box-shadow: var(--box-shadow1);
        border-radius: 25px;
    }

    .table-grid .table > :not(caption):first-child > tr > th {
        background-color: transparent;
        font-size: 0.8rem;
        color: #777;
    }

.td-sn-text {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    background-color: #f3f3f3;
}

.table > :not(caption) > tr > *,
.table-line .table > :not(caption) > tr > * {
    border: 0;
    font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
    text-align: left;
}

.table,
.table-line .table {
    box-shadow: none;
    border-spacing: 0rem 0rem;
    border-collapse: collapse;
}

    .table > thead > tr {
        border: 0px;
    }

    .table-line .table > thead > tr {
        border-bottom: solid 1px #eee;
    }

    .table tbody > tr {
        box-shadow: none;
        border-radius: 0;
        border-bottom: 0;
    }

    .table > :not(caption):first-child > tr > th {
        background-color: transparent;
        font-size: 0.8rem;
        color: #777;
    }

    .table-line .table tbody > tr {
        box-shadow: none;
        border-radius: 0;
        border-bottom: solid 1px #eee;
    }

    .table-line .table > :not(caption):first-child > tr > th {
        background-color: transparent;
        font-size: 0.8rem;
        color: #777;
    }

    .table-line .table > tbody > tr:last-child {
        border-bottom: 0;
    }

.th-sn-text,
.td-sn-text {
    color: #222;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    background-color: #f3f3f3;
}

.th-sn-text {
    background-color: transparent;
    color: #777;
}

.table-hover .table tbody > tr td:first-child {
    border-radius: 25px 0 0 25px;
}

.table-hover .table tbody > tr td:last-child {
    border-radius: 0 25px 25px 0px;
}

.table-hover .table tbody > tr:hover td {
    background-color: #20232D;
    color: #fff;
}

.table-hover .table tbody > tr.active-tble-row td .action-dropdown {
    pointer-events: auto;
}

.table-hover .table tbody > tr.active-tble-row td {
    background-color: #20232D;
    color: #fff;
}

    .table-hover .table tbody > tr.active-tble-row td .status {
        background-color: #fff !important;
        color: #222;
    }


/*Dropdown ------*/
.selectopt {
    z-index: initial;
}

    .selectopt .selectopt-nav {
        border-radius: 25px;
        padding: 1.25rem 2.2rem 0.5rem 1.2rem;
        position: relative;
        height: 50px;
    }
        .selectopt .selectopt-nav > *{
            pointer-events:none;
        }
        .selectopt .selectopt-list {
            padding: 0.5rem;
            border: 1px solid #f3f3f3;
            border-radius: 15px;
            z-index: 1000;
        }

        .selectopt .selectopt-list .selectopt-item {
            list-style: none;
            padding: 0.3rem 0.5rem;
            background-color: #fff;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.3s ease;
        }

            .selectopt .selectopt-list .selectopt-item:hover {
                background-color: #eee;
                padding-left: 1.3rem;
            }

            .selectopt .selectopt-list .selectopt-item.active {
                background-color: #eee;
            }

    .selectopt .selectopt-nav > .angle-down {
    }

    .selectopt .selectopt-nav > .angle-down,
    .multi-select-text .multi-txt-arrow {
        right: 1rem;
        width: 20px;
    }

        .selectopt .selectopt-nav > .angle-down path,
        .multi-select-text .multi-txt-arrow path {
            fill: #777;
        }

.selectopt-lable {
    position: absolute;
    top: 50%;
    font-size: 1rem;
    color: #777;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.selectopt-nav.active .selectopt-lable {
    top: 22%;
    font-size: 12px;
}

/* Time zone style ---------------*/
.timezone-list {
    max-height: 300px;
    overflow-y: auto;
}

.timezone-list {
    padding: 0;
    margin: 0;
}


/* Action dropdown -----*/
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-nav {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
}

    .action-dropdown-nav > * {
        pointer-events: none;
    }

    .action-dropdown-nav .action-dp-icon {
        width: 18px;
        height: auto;
        /*    transform: rotate(90deg);*/
    }

.action-dropdown-list {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 110px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--box-shadow1);
    padding: 0.5rem;
    border: solid 1px #f3f3f3;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}


    .action-dropdown-list.active {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        animation-name: actiondpactive;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
    }

    .action-dropdown-list.reverse-y {
        top: auto !important;
        bottom: 100% !important;
    }

    .action-dropdown-list.reverse-x {
        left: auto !important;
        right: 100% !important;
    }

@keyframes actiondpactive {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }
}

.action-dropdown-list.fade {
    display: block;
    animation-name: actiondpfade;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

@keyframes actiondpfade {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    50% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        display: none;
    }
}

.action-dp-item {
    padding: 0.3rem 0.5rem;
    background-color: #fff;
    border-radius: 10px;
    cursor: pointer;
    text-wrap: nowrap;
    font-size: 0.8rem;
    color: #222;
    text-align:left;
}

    .action-dp-item:hover {
        background-color: #f3f3f3;
    }

.response {
    background-color: #20232D;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 25px;
}

.response-200 {
    background-color: #5BAF00 !important;
    color: #fff !important;
}

.response-500 {
    background-color: #FF4B26 !important;
    color: #fff !important;
}


/*Model box ---*/
.model-box {
    align-items: start;
    padding-top: 3rem;
    padding-bottom: 2rem;
    overflow-y: auto;
    z-index:10000;
}

    .model-box .model-body {
        border-radius: 25px;
        padding: 0 1.2rem 1.5rem;
        height: auto;
        /* max-height: 90vh; */
    }

    .model-box .model-header {
        padding: 0.8rem 0;
    }

        .model-box .model-header .close-model-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

            .model-box .model-header .close-model-btn:hover {
                border-color: var(--clr-primary);
            }

.model-content {
    overflow: initial;
}

.mdlCloseIcon {
    width: 14px;
    height: auto;
    transition: all 0.3s ease;
}

.close-model-btn:hover .mdlCloseIcon {
    transform: scale(0.8);
}

.model-content {
    overflow-y: initial;
}



/*Form card ------*/
.form-card {
    background-color: #f3f3f3;
    border-radius: 25px;
    padding: 0 1rem 1rem;
}

.code-preview {
    background-color: #fff;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
    border: solid 1px #f3f3f3;
}

    .code-preview pre,
    .code-preview code {
        white-space: pre-line;
        word-break: break-all;
    }

.form-card .tab-card-pills .tab-content {
    padding: 0rem;
}
/*Tab card pill ------- */

.tab-navbar .tab-menu > * {
    pointer-events: none;
}

.tab-card-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .tab-card-pills .tab-content {
        width: 100%;
    }

    .tab-card-pills .tab-navbar {
        background-color: #fff;
        border-radius: 0 0 25px 25px;
        padding: 0.5rem 1rem;
        box-shadow: var(--box-shadow1);
        gap: 0.5rem;
    }

        .tab-card-pills .tab-navbar.nav-pills .tab-menu {
            min-width: 110px;
            border-radius: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.3rem 1rem;
            height: 35px;
            background-color: #393D47;
            color: #fff;
        }

            .tab-card-pills .tab-navbar.nav-pills .tab-menu.active {
                background-color: #96FF01;
                color: #222;
            }

                .tab-card-pills .tab-navbar.nav-pills .tab-menu.active .response {
                    background-color: #393D47 !important;
                    color: #fff !important;
                }

.tab-card-pills-dark .tab-navbar.nav-pills {
    background-color: #20232D;
}

.tab-card-pills .tab-navbar.nav-pills .tab-menu.disabled {
    opacity: 1 !important;
    background-color: #f3f3f3 !important;
    color: #999;
}



/* Inputs -----------*/
.input-control {
    border-color: #f5f5f5;
    outline: 0;
    width: 100%;
    padding: 0.5rem;
}

    .input-control:focus {
        border-color: #ccc;
        outline: 0;
    }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*Search box -------------*/
.search-box {
    position: relative;
    z-index: 1;
}

    .search-box .search-btn {
        position: absolute;
        top: 1px;
        right: 1px;
    }

        .search-box .search-btn .actionbtn {
            border: 0;
            width: 33px;
            height: 33px;
        }

    .search-box input {
        width: 35px;
        height: 35px;
        border-radius: 25px;
        background-color: #f3f3f3;
        transition: all 0.5s ease;
        border: solid 1px #ccc;
    }

        .search-box input.search-control {
            width: 100% !important;
        }

.search-box-outline input {
    background-color: transparent;
}

.search-box.active-search input {
    width: 270px;
    background-color: #f3f3f3;
}

.search-box.active-search .actionbtn {
    background-color: transparent;
}

.search-box.active-search .actionbtn-outline {
    background-color: transparent;
    border-color: transparent;
}

.search-box input::placeholder {
    opacity: 0;
    transition: all 0.3s ease;
}

.search-box.active-search input::placeholder {
    opacity: 1;
}

/* Action button ----*/
ebx-actionbtn {
    display: inline-block;
}

.actionbtn, .action-btn .action-dropdown-nav {
    text-decoration: none;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: solid 1px #f5f5f5;
    transition: all 0.3s ease;
}

    .actionbtn > * {
        pointer-events: none;
    }

    .actionbtn:hover {
        background-color: var(--clr-white);
        border-color: var(--clr-primary);
    }

    .actionbtn img {
        width: 18px;
        height: auto;
        transition: all 0.3s ease;
    }

    .actionbtn:hover img {
        transform: scale(0.8);
    }

    .actionbtn.closeIcon img {
        width: 12px;
        height: auto;
    }

.actionbtn-outline, .action-btn-outline .action-dropdown-nav{
    background-color: transparent;
    border: solid 1px #ccc;
}

.actionbtn-black {
    background-color: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
    box-shadow: var(--box-shadow2);
}
.actionbtn-white {
    background-color: var(--clr-white);
    color: #fff;
    border-color: var(--clr-primary);
    box-shadow: var(--box-shadow2);
}
/* Inputs style ----------*/
.form-group .form-control:-webkit-autofill {
    animation-name: autofillstart;
    animation-duration: 0.01s;
    animation-iteration-count: 1;
}
@keyframes autofillstart {
    from {
    }

    to {
    }
}

.form-group.filled .form-control {
    border-radius: 25px;
    padding: 0.6rem 1.2rem;
    box-shadow: var(--box-shadow1);
    border-color: #f3f3f3;
}
.actionbtn-black:hover {
    background-color: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
}
    /* Inputs style ----------*/
    .form-group.filled .form-control {
        border-radius: 25px;
        padding: 0.6rem 1.2rem;
        box-shadow: var(--box-shadow1);
        border-color: #f3f3f3;
    }

.form-group.disabled {
    background-color: transparent;
}

    .form-group.disabled .form-control {
        background-color: #E9ECEF;
        cursor: not-allowed !important;
        pointer-events: none !important;
        color: #777;
    }

.form-group.filled .form-label {
    left: 1.2rem;
    text-transform: initial;
}

.form-group.filled.active .form-control {
    padding-bottom: 0.5rem;
}
.form-group.filled .textarea-group .form-control
{
    overflow:auto
}
.input-group-2 {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: solid 1px #E4E4E4;
    border-radius: 25px;
    padding: 0.3rem 1rem 0.3rem 0.5rem;
}

.nametag {
    display: inline-block;
    background-color: #20232D;
    color: #fff;
    text-align: center;
    padding: 0.3rem 0.5rem;
    border-radius: 25px;
    min-width: 80px;
    font-size: 0.8rem;
}

.input-group-2 .inputUrl {
    flex-grow: 1;
}

    .input-group-2 .inputUrl .input-control {
        width: 100%;
        border: 0;
        font-size: 0.8rem;
        color: #777;
    }

.posttag {
    background-color: #5BAF00 !important;
    color: #fff !important;
}

.form-group-1 {
    position: relative;
    z-index: 1;
}

    .form-group-1 .form-group.weburl-input .form-control {
        padding-right: 120px;
    }

.inptDropdown {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}

.form-group-1 .selectopt .selectopt-nav {
    background-color: #20232D;
    color: #fff;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    height: 40px;
    min-width: 110px;
}

    .form-group-1 .selectopt .selectopt-nav > .angle-down {
        right: 1rem;
    }

        .form-group-1 .selectopt .selectopt-nav > .angle-down path {
            fill: #fff;
        }


.headers-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: var(--box-shadow1);
    border-radius: 25px;
    border: solid 1px #f3f3f3;
    /* padding: 0rem 1.2rem 0.3rem; */
}

    .headers-item .header-item-view {
        width: 50%;
        padding: 0rem 1.2rem 0.3rem;
    }

        .headers-item .header-item-view:first-child {
            border-right: solid 1px #E4E4E4;
        }

.removeHeaderBtn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* checkbox and radio ---------*/

.form-radio,
.form-check {
    cursor: pointer;
    position: relative;
    user-select: none;
}

    .form-check .check-inpt {
        margin-right: 0;
    }

.select-radiobox,
.select-checkbox {
    display: inline-flex;
    min-width: 110px;
    padding: 0.3rem 1.2rem 0.3rem 1rem;
    border-radius: 25px;
    border: solid 1px #f3f3f3;
    background: transparent;
    box-shadow: var(--box-shadow1);
    z-index: 1;
}

.login-condition {
    margin-top: 30px;
}

.login-radio {
    border: none !important;
    box-shadow: none !important;
}

    .select-radiobox .radio-text,
    .select-checkbox .check-text {
        color: #222;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .select-radiobox .radio-mark:after,
    .select-checkbox .check-mark:after {
        left: 6px;
        top: 2px;
        background-color: #fff;
        width: 7px;
        height: 13px;
        border-radius: 0;
        border-width: 0 2px 2px 0px;
        border-style: solid;
        border-color: #222;
        transform: rotate(45deg);
    }

    .select-radiobox .radio-mark,
    .select-checkbox .check-mark {
        display: block;
        height: 20px;
        width: 20px;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background-color: #f3f3f3;
    }

.login-radio .radio-mark {
    background-color: transparent !important;
    border: 1px solid #9a9a9a !important;
}

    .select-radiobox .radio-bg,
    .select-checkbox .check-bg {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #fff;
        border-radius: 25px;
        z-index: -1;
    }

    .select-radiobox .radio-inpt:checked ~ .radio-mark,
    .select-checkbox .check-inpt:checked ~ .check-mark {
        background-color: #fff;
    }

    .select-radiobox .radio-inpt:checked ~ .radio-bg,
    .select-checkbox .check-inpt:checked ~ .check-bg {
        background-color: #20232D;
    }

    .select-radiobox .radio-inpt:checked ~ .radio-text,
    .select-checkbox .check-inpt:checked ~ .check-text {
        color: #fff;
    }

.selectbox-default,
.selectbox-default {
    border: 0;
    box-shadow: none;
}

    .selectbox-default .radio-bg,
    .selectbox-default .check-bg {
        background-color: transparent;
    }

    .selectbox-default .radio-mark,
    .selectbox-default .check-mark {
        background-color: #f3f3f3;
    }

        .selectbox-default .radio-mark:after,
        .selectbox-default .check-mark:after {
            background-color: transparent;
            border-color: #fff;
        }

    .selectbox-default .radio-inpt:checked ~ .radio-bg,
    .selectbox-default .check-inpt:checked ~ .check-bg {
        background-color: transparent;
    }

    .selectbox-default .radio-inpt:checked ~ .radio-mark,
    .selectbox-default .check-inpt:checked ~ .check-mark {
        background-color: var(--clr-primary);
    }
    .selectbox-success .radio-inpt:checked ~ .radio-mark,
    .selectbox-success .check-inpt:checked ~ .check-mark {
        background-color: #5BAF00;
    }

    .selectbox-default .radio-inpt:checked ~ .radio-text,
    .selectbox-default .check-inpt:checked ~ .check-text {
        color: #222;
    }

.selectbox-white .radio-mark:after,
.selectbox-white .check-mark:after {
    border-color: #fff;
    background-color: var(--clr-primary);
}

.selectbox-white .radio-inpt:checked ~ .radio-bg,
.selectbox-white .check-inpt:checked ~ .check-bg {
    background-color: #fff;
}

.selectbox-white .radio-inpt:checked ~ .radio-mark,
.selectbox-white .check-inpt:checked ~ .check-mark {
    background-color: var(--clr-primary);
}

.selectbox-white .radio-inpt:checked ~ .radio-text,
.selectbox-white .check-inpt:checked ~ .check-text {
    color: #222;
}

.selectbox-black .radio-text,
.selectbox-black .check-text {
    color: #fff;
}

.selectbox-black,
.selectbox-black {
    border: 0;
    box-shadow: none;
}

    .selectbox-black .radio-bg,
    .selectbox-black .check-bg {
        background-color: var(--clr-primary);
    }

    .selectbox-black .radio-mark:after,
    .selectbox-black .check-mark:after {
        background-color: transparent;
        border-color: #222;
    }

    .selectbox-black .radio-inpt:checked ~ .radio-bg,
    .selectbox-black .check-inpt:checked ~ .check-bg {
        background-color: var(--clr-primary);
    }

    .selectbox-black .radio-inpt:checked ~ .radio-mark,
    .selectbox-black .check-inpt:checked ~ .check-mark {
        background-color: #96FF01;
    }

    .selectbox-black .radio-inpt:checked ~ .radio-text,
    .selectbox-black .check-inpt:checked ~ .check-text {
        color: #fff;
    }

/*for linear selectbox*/

.selectbox-linear {
    border: 0;
    border-radius: 0;
    padding: 0.9rem 0.2rem 0.5rem 0.3rem;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: none;
    justify-content: space-between;
}

    .selectbox-linear .radio-bg,
    .selectbox-linear .check-bg {
        background-color: transparent;
    }

    .selectbox-linear .radio-mark,
    .selectbox-linear .check-mark {
        background-color: #f3f3f3;
        position: static;
        transform: translateY(0%);
    }

        .selectbox-linear .radio-mark:after,
        .selectbox-linear .check-mark:after {
            background-color: transparent;
            border-color: #fff;
        }

    .selectbox-linear .radio-inpt,
    .selectbox-linear .check-inpt {
        position: absolute;
    }

        .selectbox-linear .radio-inpt:checked ~ .radio-bg,
        .selectbox-linear .check-inpt:checked ~ .check-bg {
            background-color: transparent;
        }

        .selectbox-linear .radio-inpt:checked ~ .radio-mark,
        .selectbox-linear .check-inpt:checked ~ .check-mark {
            background-color: var(--clr-primary);
        }

        .selectbox-linear .radio-inpt:checked ~ .radio-text,
        .selectbox-linear .check-inpt:checked ~ .check-text {
            color: #222;
        }

    .selectbox-linear.read-only {
        cursor: auto;
    }

.selectbox-detail.read-only {
    cursor: auto;
}
/*for detail selectbox*/

.selectbox-detail {
    border: 0;
    border-radius: 0;
    padding: 0.2rem 0.2rem 0.3rem 0rem;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: none;
    justify-content: space-between;
}

    .selectbox-detail .radio-bg,
    .selectbox-detail .check-bg {
        background-color: transparent;
    }

    .selectbox-detail .radio-mark,
    .selectbox-detail .check-mark {
        background-color: #f3f3f3;
        position: static;
        transform: translateY(0%);
    }

        .selectbox-detail .radio-mark:after,
        .selectbox-detail .check-mark:after {
            background-color: transparent;
            border-color: #fff;
        }

    .selectbox-detail .radio-inpt,
    .selectbox-detail .check-inpt {
        position: absolute;
    }

        .selectbox-detail .radio-inpt:checked ~ .radio-bg,
        .selectbox-detail .check-inpt:checked ~ .check-bg {
            background-color: transparent;
        }

        .selectbox-detail .radio-inpt:checked ~ .radio-mark,
        .selectbox-detail .check-inpt:checked ~ .check-mark {
            background-color: var(--clr-primary);
        }

        .selectbox-detail .radio-inpt:checked ~ .radio-text,
        .selectbox-detail .check-inpt:checked ~ .check-text {
            color: #222;
        }

    .selectbox-linear .check-text,
    .selectbox-detail .check-text {
        font-weight: 500;
        font-size: 0.9rem;
    }
/*notification group create style*/
.notifyuser-icon-container {
    background: #f3f3f3;
    border-radius: 50px !important;
    flex-shrink: 0;
    height: 40px;
    width: 40px;
}

.notifyuser-content-container {
    flex-grow: 1;
}

.selectbox-detail .check-mail {
    color: #777;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.selectbox-detail .check-role {
    color: #222;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.notify-user-details {
    width: 70%;
}

.notification-preview-list {
    background-color: #fff;
    padding: 1rem;
}

.notify-group-dp .selectopt-nav {
    height: 35px;
    width: 170px;
    background-color: transparent;
    font-size: 0.8rem;
}

    .notify-group-dp .selectopt-nav > .angle-down {
        right: .5rem;
        width: 18px;
    }

.notify-group-dp .selectopt-list .selectopt-item {
    font-size: 0.8rem;
}

.notification-preview-list .select-checkbox {
    display: block;
}

.notify-preview.active-search input {
    width: 180px !important;
}



/* notification group list screen styles */

.list-of-checkox.list-default .list-checkbox-item {
    background-color: #fff;
    padding: 0.5rem;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    color: #222;
    border: solid 1px #f3f3f3;
    display: flex;
    width: 100%;
    font-size: 0.8rem;
}

.list-default .checkbox-item {
    background-color: #20232D;
}

    .list-default .checkbox-item:after {
        border-color: #fff;
    }

.notifyuser-box-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/*Webhook ------------ */
.webhook-container {
    display: flex;
    align-items: start;
    gap: 15px;
}

.webhook-sidebar {
    width: 300px;
    background-color: #fff;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
    min-height: 200px;
}

.webhook-sidebar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.webhook-content {
    position: relative;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
}

.webhook-sidebar-action {
    display: flex;
    gap: 0.5rem;
    padding-right: 45px;
}

.webhook-sidebar-title .search-box {
    position: absolute;
    top: 0;
    right: 0;
}

.webhooksearch-box .webhooksearchInput {
    border-color: transparent;
}


.webhook-navlink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: #fff;
    cursor: pointer;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

    .webhook-navlink > * {
        pointer-events: none;
    }

    .webhook-navlink ebx-text {
        color: #222;
    }

.wbhArrowIcon img {
    width: 12px;
}

.webhook-navlink:hover,
.webhook-navlink.active {
    background-color: #20232D;
}

    .webhook-navlink:hover ebx-text,
    .webhook-navlink:hover path,
    .webhook-navlink.active ebx-text,
    .webhook-navlink.active path {
        color: #fff;
        fill: #fff;
    }

.webhook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.webhook-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/*Select tag ------------*/
.wbh-selected-item {
    display: flex;
    gap: 0.5rem;
}

.select-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    border: solid 1px #f5f5f5;
    padding: 0.3rem 1rem 0.3rem 0.5rem;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
}

    .select-tag .select-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #20232D;
    }

.select-icon svg {
}

    .select-icon svg path {
        fill: #fff;
    }

.select-tag h5 {
    font-size: 0.8rem;
    color: #222;
    margin-bottom: 0;
    text-transform: capitalize;
}


.skeleton {
    background-color: #F3F3F3;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% );
    animation: shimmer 1s infinite;
}

@keyframes shimmer {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}


/*Status colors ------------*/
.status {
    min-width: 110px;
    background-color: #f3f3f3;
    color: #222;
    padding: 0.3rem 1rem;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
}


.status-success {
    color: #5BAF00;
}

.status-updated {
    color: #0088CB;
}

.status-downloaded {
    color: #ED931B;
}

.status-deleted {
    color: #FF674A;
}

.status-low {
    background-color: rgba(91, 175, 0, 8%) !important;
    color: #5BAF00;
}

.status-medium {
    background-color: rgba(0, 136, 203, 8%) !important;
    color: #0088CB;
}

.status-high {
    background-color: rgba(237, 147, 27, 8%) !important;
    color: #ED931B;
}

.status-created {
    background-color: rgba(0, 167, 165, 8%) !important;
    color: #00A7A5;
}

.status-completed {
    background-color: rgba(91, 175, 0, 8%) !important;
    color: #5BAF00;
}

.status-processing {
    background-color: rgba(0, 136, 203, 8%) !important;
    color: #0088CB;
}

.status-warning {
    background-color: rgba(237, 147, 27, 8%) !important;
    color: #ED931B;
}

.status-failed {
    background-color: rgba(217, 63, 33, 8%) !important;
    color: #FF674A;
}

.completed-bg {
    background-color: #5BAF00 !important;
}

.processing-bg {
    background-color: #0088CB !important;
}

.failed-bg {
    background-color: #FF674A !important;
}

/*Audit trails -----------*/

.audittrail-container {
    display: flex;
    gap: 1rem;
}

.audittrailsTable {
    flex-grow: 1;
}

.audit-trail-view {
    width: 40%;
    position: relative;
}

.audittrail-code-sample {
    height: 100%;
    color: #fff;
    padding: 1rem 3rem 1rem 1rem;
    word-break: break-all;
}

.copyAuditBtn {
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
}
/*File drag and drop -------------------*/
.filedrop-container .filedrop {
    border-radius: 15px;
    position: relative;
    background-size: 55px;
    z-index: 1;
}

.filedrop-container.invalid {
}

.filedrop-container .filedrop:after {
    content: "Drop file here or click";
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #ccc;
    font-size: 0.8rem;
    z-index: -1;
}

.form-fileupload {
    padding: .5rem 1.5rem;
    color: #fff;
    background-color: #222;
    border-radius: 25px;
    text-transform: inherit;
    font-weight: 400;
    font-size: 0.8rem;
    box-shadow: var(--box-shadow2);
}

.filedrop-container .filedrop .preview-files .preview-item img {
    width: 50px;
}

.filedrop-container .filedrop .preview-files .preview-item {
    border-radius: 15px;
    border-color: #f3f3f3;
    box-shadow: 0 3px 10px -4px #ccc;
}

    .filedrop-container .filedrop .preview-files .preview-item .preview-remove {
        top: 4px;
        right: 4px;
    }

.filedrop-container .filedrop-msg {
    font-size: 0.8rem;
    top: 10px;
    z-index: 1;
}

.filedrop.dropover {
    border-color: var(--clr-primary)
}


/*table tab container*/
.table-tab-container {
    border-radius: 25px;
    background: #FFF;
    box-shadow: 0px 2px 10px -4px #CCC;
    position:relative;
    z-index:1000;
}

.filedrop-container .filedrop-group {
    position: relative;
}
/*devive packs details card*/
.packs-details-data-card {
    width: 60%;
    position: relative;
}

.devicePacksDetailsTable {
    flex-grow: 1;
}
/*devive sensor details card*/
.sensor-details-data-card {
    width: 60%;
    position: relative;
}

.deviceSensorDetailsTable {
    flex-grow: 1;
}
/* Diagnostic -----------------*/
.system-card {
    height: 240px;
    box-shadow: none;
    border-color: #E4E4E4;
}

.progress {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.circel-value {
    position: absolute;
    background-color: #fff;
    box-shadow: var(--box-shadow1);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    text-align: center;
    align-content: center;
    color: #777;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 140px;
}

.circle-bg {
    fill: none;
    stroke: #FAFAFD;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-dasharray: 0 100;
}

    .circle.active {
        animation: progress 1s ease-out forwards;
    }

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

    100% {
        stroke-dasharray: var(--progress-value);
    }
}

.circular-chart.green .circle {
    stroke: #6BC906;
}

.percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
}


.card-name-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    border-radius: 50px !important;
    height: 40px;
    width: 40px;
}

.card-number {
    margin: 0.6rem 0;
    background-color: #fff;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    border: solid 15px #FAFAFD;
    box-shadow: var(--box-shadow1);
    text-align: center;
    align-content: center;
}

.card-content .card-content-list {
    margin: 1rem 0;
    padding: 0 1rem;
}

    .card-content .card-content-list:first-child {
        border-right: solid 1px #E4E4E4;
    }

.card-speedometer {
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 1;
}

.speedometer {
    position: absolute;
    width: 150px;
    height: 150px;
    background-image: conic-gradient(from 180deg at 50% 50%, #5BAF00 90deg, #FFDE01 157.5deg, #FA0 211.15383625030518deg, #FF4B26 268.2692241668701deg);
    border-radius: 50%;
    clip: rect(0px,150px,75px,0px);
    z-index: -1;
}

.speedometer-inner {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 20px;
}

.speedometer-angle {
    text-align: center;
    position: absolute;
    top: 5px;
    left: 25px;
    /* border: solid 1px #ccc; */
    transform: rotate(0deg);
    transform-origin: 50px 67px;
}

    .speedometer-angle.active {
        animation: temperature 1s ease-out forwards;
    }

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

    100% {
        transform: rotate(var(--temperature-value));
    }
}

.speedometer-angle .gaugeIcon {
    transform: rotate(0deg) translate(-25px, 30px);
    display: block;
}

.card-speedometer .temp-value {
    text-align: center;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.content-item-status .content-item-list {
    border-right: solid 1px #E4E4E4;
    padding-right: 1.2rem;
}

    .content-item-status .content-item-list:last-child {
        border: 0;
    }

.status-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    border-radius: 25px;
    padding: 0.3rem 0.4rem 0.3rem 0.8rem;
}

    .status-box.active {
        background-color: #393D47;
    }

    .status-box.active-white {
        background-color: #fff;
        border: solid 1px #777;
    }

.timestamp {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.5rem;
}

.item-status {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #f3f3f3;
    box-shadow: var(--box-shadow2);
}

    .item-status.status-success {
        background-color: #5BAF00;
    }

        .item-status.status-success:after {
            content: "";
            position: absolute;
            top: 8px;
            left: 6px;
            width: 13px;
            height: 7px;
            border-width: 0 0 2px 2px;
            border-color: #fff;
            border-style: solid;
            transform: rotate(-40deg);
        }

    .item-status.status-error {
        background-color: #E72020;
    }

        .item-status.status-error:before {
            content: "";
            position: absolute;
            top: 7px;
            left: 5px;
            width: 14px;
            height: 2px;
            transform: rotate(45deg) translate(3px, 3px);
            background-color: #fff;
        }

        .item-status.status-error:after {
            content: "";
            position: absolute;
            top: 8px;
            left: 5px;
            width: 14px;
            height: 2px;
            transform: rotate(-40deg) translate(-2px, 3px);
            background-color: #fff;
        }

.filesystem-col {
    width: 23%;
}

.database-col {
    width: 29.33%;
}

.connectivity-col {
    width: 31%;
}

.diagnostic-card-table .table tbody > tr {
    border-bottom: solid 1px #CCC;
}

    .diagnostic-card-table .table tbody > tr:last-child {
        border: 0;
    }

/*Filters -----------------------*/
.filter-container {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
}

.link-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    border: solid 1px var(--clr-primary);
    padding: 0.3rem 1.2rem;
    border-radius: 25px;
    height: 35px;
    text-align: center;
    align-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--clr-primary);
    box-shadow: var(--box-shadow2)
}

.link-btn-outline {
    background-color: transparent;
    border-color: #ccc;
    color: #222;
}

.link-btn:hover {
    background-color: #fff;
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

    .link-btn:hover svg path {
        fill: var(--clr-primary);
    }

.filter-sortby .selectopt-nav {
    height: 35px;
    width: 170px;
    background-color: transparent;
    font-size: 0.8rem;
    padding: 1rem 1.5rem 0.3rem 1rem;
}
.filter-sortby .selectopt-nav.active .selectopt-lable{
    font-size: 10px;
}

    .filter-sortby .selectopt-nav.active .selectopt-lable {
        font-size: 10px;
    }

    .filter-sortby .selectopt-nav > .angle-down {
        right: .5rem;
        width: 18px;
    }

.filter-sortby .selectopt-list .selectopt-item {
    font-size: 0.8rem;
}

.filter-mlt-select .multi-select .multi-select-text {
    width: 220px;
    min-height: 35px;
    padding: 0.3rem 1.6rem 0.3rem 1rem;
    background-color: transparent;
    border: solid 1px #ccc;
    box-shadow: none;
}

    .filter-mlt-select .multi-select .multi-select-text .multi-txt-arrow {
        right: 0.5rem;
        width: 1rem;
    }

.search-filter .search-box input {
    background-color: transparent;
}

.search-filter.active-search input {
    background-color: transparent;
}

/*Alerts and rules -------------------*/
.alert-message-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 2rem;
    flex-wrap: wrap;
    border-bottom: solid 1px #E4E4E4;
    padding: 1rem 0 2rem;
    margin-bottom: 1rem;
}

.message-content {
    width: 75%;
    padding: 0 1rem;
}

#ruletablelist .table thead > tr > th:last-child,
#ruletablelist .table tbody > tr > td:last-child {
    text-align: right;
}

.rule-details {
    border: solid 1px #E4E4E4;
    padding: 1rem;
    border-radius: 10px;
    ;
}

.rule-code-container {
    border-radius: 25px;
    background-color: #20232D;
    padding: 1rem;
}

.rule-code-editor {
    border-radius: 25px;
    background-color: #2A2D35;
    height: 500px;
}

.code-editor-card {
    border-radius: 25px;
    background-color: #2A2D35;
}

.code-sample-card {
    height: 100%;
    color: #fff;
    padding: 1rem 3rem 1rem 1rem;
    word-break: break-all;
}
/* Device config model -----------------*/
#deviceConfigModel .model-body {
    width: 50%;
    overflow: hidden;
}

.form-group-1 .monitor-interval-dropdown .selectopt-nav {
    width: 120px;
}

#logFileSizeInpt .form-control,
#uploadFrequencyInpt .form-control {
    padding-right: 130px;
}

.form-group-1 .upload-frequency-drp .selectopt-nav {
    width: 120px;
}

.active-message {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Device config model -----------------*/
.deviceconfig-container .model-body {
    min-height: 350px;
    overflow: hidden;
}

.form-group-1 .monitor-interval-dropdown .selectopt-nav {
    width: 120px;
}

#logFileSizeInpt .form-control,
#uploadFrequencyInpt .form-control {
    padding-right: 130px;
}

.form-group-1 .upload-frequency-drp .selectopt-nav {
    width: 120px;
}

.active-message {
    opacity: 1 !important;
    visibility: visible !important;
}


/*Form dropdown group -----*/
.form-group.filled .form-label,
.form-group.outlined .form-label,
.form-group.standard .form-label {
    color: #777;
}

.form-selectdropdown-group,
.form-dropdown-input {
    display: flex;
    /* align-items: center; */
    background: #fff;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    padding: 0;
}

    .form-dropdown-input.invalid-dpinpt {
        border-color: red !important;
    }

.devicediagnostic-dropDown {
    flex-grow: 1;
}

    .devicediagnostic-dropDown .selectopt .selectopt-nav {
        border-radius: 25px 0 0 25px;
        border-color: transparent;
        /* border-right-color: #e4e4e4; */
    }

        .devicediagnostic-dropDown .selectopt .selectopt-nav > .angle-down {
            right: 0.5rem;
        }

.form-selectdropdown-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.6rem;
    border-left: solid 1px #e4e4e4;
}

.form-selectdropdown-group .btn {
    box-shadow: none;
}

.form-selectdropdown-group .multi-select .multi-select-text,
.form-dropdown-input .multi-select .multi-select-text,
.form-dropdown-input .form-group.filled .form-control {
    box-shadow: none;
    min-height: 46px;
    height: 46px;
    border-radius: 25px;
    border-color: transparent;
    /* border-right-color: #e4e4e4; */
}

.form-option-dropdown .selectopt .selectopt-nav {
    height: 50px;
    border-color: #f3f3f3;
    box-shadow: var(--box-shadow1);
    color: #777;
}

.selectopt.invalid .selectopt-nav {
    border-color: red !important;
    color: red !important;
}


.form-dropdown-input {
    border: solid 1px #ccc;
}

    .form-dropdown-input .mlt-slt-option,
    .form-dropdown-input .fdi-input-control {
        width: 43%;
    }


    .form-dropdown-input .form-group.filled .form-control {
        border-width: 0 0 0 1px;
        border-radius: 0;
        border-color: #e4e4e4;
    }

    .form-dropdown-input .form-group {
        margin-bottom: 0;
    }

    .form-dropdown-input .form-selectdropdown-action {
        flex-grow: 1;
    }
/* Fetching card ------*/
.fetching-card-1 {
    background-color: #fff;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
}

.fetching-details {
    flex-grow: 1;
}

.fetching-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fetching-data {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.fetching-data-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

.fetching-card-percentage .progress {
    width: 70px;
}

    .fetching-card-percentage .progress .circular-chart {
        max-width: 100%;
        margin: 0;
    }

    .fetching-card-percentage .progress .circel-value {
        width: 45px;
        height: 45px;
        font-size: 0.7rem;
    }

/* Label tags style ---------------*/
.label-tags-container {
    border: solid 1px #ccc;
    background-color: #fff;
    padding: 1rem;
    border-radius: 25px;
}

.sensor-tags-list,
.label-tags-list {
    display: flex;
    align-items: start;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.label-tag-box {
    background-color: #fff;
    border-radius: 25px;
    padding: 0.3rem 0.5rem;
    border: solid 1px #f3f3f3;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--box-shadow1);
}

.label-tag-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 1rem;
}

.tag-name-icon {
    width: 15px;
    height: auto;
}

.label-tag-action {
    padding: 0 .4rem 0 0.5rem;
    border-left: solid 1px #e4e4e4;
}

    .label-tag-action > * {
        pointer-events: none;
    }

    .label-tag-action .tag-close-icon img {
        width: 11px;
        height: auto;
    }

.label-tag-input {
    flex-grow: 1;
}

    .label-tag-input input.form-control {
        padding: 0.5rem 0rem;
        border-color: #fff;
    }


/*device Creation ---------------*/
.content-filedrop {
    border-radius: 25px;
    /* box-shadow: var(--box-shadow1); */
    border-color: #fff;
    padding: 0;
}

    .content-filedrop .filedrop {
        border-radius: 15px;
        background-color: #9e9e9e0a;
        border-color: transparent;
        position: relative;
    }

.download-csv-sample {
    position: absolute;
    right: .5rem;
    top: .5rem;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background-color: #20232D;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow2);
    cursor: pointer;
}

.list-content {
    list-style: none;
    color: #777;
    font-size: 1rem;
    margin: 0 0 1rem 0;
    padding: 0;
}

    .list-content li {
        margin-bottom: 0.3rem;
    }

.copyDeviceInitialBtn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.code-view-block {
    position: relative;
    padding: 1rem 3rem 1rem 1rem;
}



/* infotab container -----------------*/
.infotab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

    .infotab-container .infotab-sidebar {
        background-color: var(--clr-primary);
        border-radius: 25px;
        padding: 0.8rem 0.5rem;
        width: 220px;
        min-height: 250px;
        box-shadow: var(--box-shadow2);
        list-style: none;
        margin: 0;
    }

.infotab-sidebar .infotab-item {
    color: #9DA5BC;
    font-size: 1rem;
    list-style: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 25px;
    background-color: transparent;
    transition: all 0.3s ease;
}

    .infotab-sidebar .infotab-item.active {
        background-color: #393D47;
        color: #fff;
    }

    .infotab-sidebar .infotab-item > * {
        pointer-events: none;
    }

    .infotab-sidebar .infotab-item:hover {
        background-color: #393D47;
        color: #fff;
    }

        .infotab-sidebar .infotab-item:hover path,
        .infotab-sidebar .infotab-item.active path {
            fill: #fff;
        }

.infotab-content {
    flex-grow: 1;
    background-color: #f3f3f3;
    border-radius: 25px;
    padding: 1rem;
    position: relative;
}

.infotab-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .infotab-title .infotabtitle-icon path {
        fill: var(--clr-primary);
    }

.infotab-data {
    background-color: #fff;
    box-shadow: var(--box-shadow1);
    padding: 1rem;
    border-radius: 25px;
    height: 100%;
}

.infotab-data-item {
    border-bottom: solid 1px #E4E4E4;
    padding: 0.8rem 0.5rem;
}

    .infotab-data-item:last-child {
        border-bottom: 0;
    }

.infotab-panel.show {
    display: block;
    opacity: 0;
    visibility: hidden;
    animation-name: infotabshow;
    animation-duration: 0.3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes infotabshow {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

.infotab-panel.fade {
    display: none;
    opacity: 0;
    visibility: hidden;
    animation-name: infotabfade;
    animation-duration: 0.3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes infotabfade {
    0% {
        display: none;
        opacity: 1;
        visibility: visible;
    }

    100% {
        display: none;
        opacity: 0;
        visibility: hidden;
    }
}

.infotab-value-list {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

    .infotab-value-list li {
        position: relative;
        padding-left: 1.2rem;
        padding-bottom: 0.5rem;
        color: #333;
    }

        .infotab-value-list li::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0.4rem;
            width: 12px;
            height: 12px;
            background-color: var(--clr-primary);
            border: solid 2px #e4e4e4;
            box-shadow: var(--box-shadow2);
            border-radius: 50%;
        }

.infotab-logo {
    display: inline-block;
    border: solid 1px #ccc;
    border-radius: 25px;
    padding: 1rem 2rem;
}


/*list of checkox --------------------*/
.list-of-checkox {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .list-of-checkox .list-checkbox-item {
        position: relative;
        color: #9DA5BC;
        font-size: 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.checkbox-item {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #96FF01;
    position: relative;
}

    .checkbox-item:after {
        content: "";
        position: absolute;
        left: 4px;
        top: 6px;
        width: 12px;
        height: 7px;
        border-style: solid;
        border-width: 0 0 2px 2px;
        border-color: var(--clr-primary);
        transform: rotate(-40deg);
    }

.viewBtn-sm {
    background-color: #96FF01;
    color: #222;
    border-color: #96FF01;
    font-weight: 600;
}

    .viewBtn-sm:hover {
        background-color: #96FF01;
        color: #222;
        border-color: #96FF01;
        opacity: 0.9;
    }

/*User management ----------------*/
.usermanagement-container {
    position: relative;
}

.role-permission-list,
.card-tab-list,
.card-tab-details {
    max-height: 55vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 1rem;
}

    .role-permission-list .select-checkbox,
    .card-tab-list .select-radiobox {
        display: flex;
    }


.content-card-selectbox .selectbox-default .radio-mark,
.content-card-selectbox .selectbox-default .check-mark {
    background-color: transparent;
    border: solid 1px #9DA5BC
}

    .content-card-selectbox .selectbox-default .radio-mark:after,
    .content-card-selectbox .selectbox-default .check-mark:after {
        border-color: #9DA5BC;
        left: 5px;
        top: 2px;
        width: 7px;
        height: 12px;
    }

.content-card-selectbox .selectbox-default .radio-text,
.content-card-selectbox .selectbox-default .check-text {
    color: #9DA5BC;
    font-size: 1rem;
}

.content-card-selectbox .selectbox-default .radio-inpt:checked ~ .radio-text,
.content-card-selectbox .selectbox-default .check-inpt:checked ~ .check-text {
    color: #9DA5BC;
}

/*Microservice file history ------------------*/
.msfilehistory-table .table > :not(caption) > tr > th:last-child,
.msfilehistory-table .table > :not(caption) > tr > td:last-child,
.modelfilehistory-table .table > :not(caption) > tr > th:last-child,
.modelfilehistory-table .table > :not(caption) > tr > td:last-child {
    text-align: right;
}

.microcard-item {
    position: relative;
}

.microcard-link {
    /* border-radius: 25px; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.microcard-morebtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.microcard-item .microcard-body {
    display: flex;
    margin-bottom: 1rem;
}

.microcard-body .microcard-img-box {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 15px;
    background-image: linear-gradient(to left, #F3F3F3, #FFFFFF);
    border: solid 1px #f3f3f3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.microcard-img-box img {
    width: 50px;
    height: auto;
}

.microcard-img-box .microcard-ribbon {
    position: absolute;
    left: -30px;
    top: 8px;
    color: #222;
    padding: 0.2rem 1rem;
    text-align: center;
    width: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background-image: linear-gradient(to left, #6CCF00, #9CFFA7);
    box-shadow: 0 3px 10px -4px #777;
    transform: rotate(-45deg);
}

    .microcard-img-box .microcard-ribbon.free {
        background-image: linear-gradient(to left, #6CCF00, #9CFFA7);
    }

    .microcard-img-box .microcard-ribbon.prime {
        background-image: linear-gradient(to left, #E1AD00, #FFE9A1);
    }

.microcard-content {
    width: calc(100% - 100px);
    position: relative;
    flex-grow: 1;
    padding: 0.3rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .microcard-content .microcard-name h3 {
        font-size: 1.1rem;
        color: #222;
        font-weight: 700;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: calc(75%); */
        position: relative;
        width: calc(100% - 15px);
    }

    .microcard-content .microcard-name h5 {
        font-size: 0.8rem;
        font-weight: 400;
        color: #777;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100%);
    }

    .microcard-content .install-btn {
        height: 25px;
        min-width: 80px;
        font-size: 0.8rem;
        position: relative;
        padding: .3rem 1rem;
        z-index: 2;
    }

    .microcard-content .microcard-title {
        z-index: 2 !important;
    }

.microcard-footer {
    display: flex;
    border-top: solid 1px #e4e4e4;
    padding: 0.8rem 0 0;
}

.microcard-ftr-details {
    padding: 0 1rem;
    text-align: center;
    position: relative;
}

    .microcard-ftr-details:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 40px;
        background-color: #e4e4e4;
        transform: translateY(-50%);
    }

    .microcard-ftr-details:last-child::after {
        width: 0;
    }

.loading-btns {
    background-color: #fff;
    color: #222;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 120px;
    box-shadow: var(--box-shadow2);
    border: solid 1px #20232d;
}

    .loading-btns ebx-image {
    }

/* Progress bar ---------------*/
.bgtask-pgbr1 {
    border-radius: 25px;
}

    .bgtask-pgbr1 .progress-bar {
        border-radius: 25px;
        animation: none;
        background-image: none;
        justify-content: end;
        padding-right: 0.3rem;
    }

/* Checkbox static ----------*/
.checkbox-static {
    position: relative;
    background-color: #fff;
    border: solid 1px #777;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    box-shadow: 0 3px 10px -4px #777;
}

    .checkbox-static:after {
        content: "";
        position: absolute;
        left: 3px;
        top: 5px;
        width: 12px;
        height: 6px;
        border-style: solid;
        border-width: 0 0 1px 1px;
        border-color: #777;
        transform: rotate(-45deg);
    }

    .checkbox-static.checkbox-success,
    .checkbox-static.checkbox-completed {
        border-color: #5BAF00 !important;
    }

        .checkbox-static.checkbox-success:after,
        .checkbox-static.checkbox-completed:after {
            border-color: #5BAF00 !important;
        }

    .checkbox-static.checkbox-info,
    .checkbox-static.checkbox-processing {
        border-color: #0088CB !important;
    }

        .checkbox-static.checkbox-info:after,
        .checkbox-static.checkbox-processing:after {
            border-color: #0088CB !important;
        }

        .checkbox-static.checkbox-processing:after {
            border-color: #0088CB !important;
            opacity: 0;
            visibility: hidden;
        }

    .checkbox-static.checkbox-error,
    .checkbox-static.checkbox-failed {
        border-color: #E72020 !important;
    }

        .checkbox-static.checkbox-error:after,
        .checkbox-static.checkbox-failed:after {
            border-color: #E72020 !important;
            border-width: 0 0 1px 0 !important;
            left: 1px;
            top: 5px;
        }

        .checkbox-static.checkbox-error:before,
        .checkbox-static.checkbox-failed:before {
            content: "";
            position: absolute;
            left: 5px;
            top: 4px;
            width: 12px;
            height: 7px;
            border-style: solid;
            border-width: 0 0 1px 0px;
            border-color: #E72020;
            transform: rotate(45deg);
        }

/*Background tasks table -----------------*/
.background-task-table .table > :not(caption) > tr > th:first-child {
    text-align: center;
}

.background-task-table .table > :not(caption) > tr > td:first-child {
    width: 40px;
    text-align: center;
}

/* Error page ------------------*/
.payload-list-item {
    display: flex;
    align-items: self-start;
    border-bottom: solid 1px #e4e4e4;
    padding: 1.2rem 0;
}

    .payload-list-item:first-child {
        padding-top: 0;
    }

    .payload-list-item:last-child {
        border-bottom: 0;
    }

.payload-icon svg {
    width: 18px;
}

    .payload-icon svg path {
        fill: #E76120;
    }

.payload-content {
    padding: 0 1rem;
    flex-grow: 1;
}

    .payload-content .payload-title h3 {
        color: #222;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .payload-content .payload-title h4 {
        color: #777;
        font-size: 0.8rem;
    }

    .payload-content .payload-data {
        padding-top: 2rem;
    }

.payload-data-item {
    display: flex;
    margin-bottom: 1rem;
}

.payload-name {
    width: 12%;
    flex: 0 0 auto;
    padding: 1rem 0;
}

    .payload-name h3 {
        font-size: 1rem;
    }

.payload-data-value {
    flex: 0 0 auto;
    width: 88%;
    padding: 1rem;
    border-radius: 15px;
    background-color: #FFEEE5;
    word-break: break-all;
}

.payload-data-item .read-more {
    color: #E76120;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
/* Tree hierarchy -----------------*/
.tree-hierarchy-row .tree-hierarchy-td a:hover {
    color: #0088CB;
}
/* hierarchy dropdown container --------------*/
.hierarchy-dp-container {
    position: relative;
}

.hierarchy-dropdown-nav {
    border-radius: 25px;
    height: 50px;
    background-color: #fff;
    border: solid 1px #f3f3f3;
    box-shadow: var(--box-shadow1);
    display: flex;
    align-items: center;
    padding: 0.3rem 1rem;
    text-transform: capitalize;
    color: #222;
    position: relative;
}

    .hierarchy-dropdown-nav .angle-down {
        position: absolute;
        right: 1rem;
        top: 54%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
    }

        .hierarchy-dropdown-nav .angle-down path {
            fill: #777;
        }

.hierarchy-dropdown-list {
    /* position: absolute; */
    left: 0;
    top: 110%;
    width: 100%;
    background-color: #FAFAFD;
    border-radius: 25px;
    padding: 1rem;
    box-shadow: var(--box-shadow1);
    z-index: 1000;
    display: none;
    /* opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); */
    transform: translateY(10px);
    transition: all 0.3s ease;
}



    .hierarchy-dropdown-list.active {
        display: block;
        /* opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    animation-name: actiondpactive;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 0.5s; */
    }

    .hierarchy-dropdown-list.reverse-y {
        top: auto !important;
        bottom: 100% !important;
    }

    .hierarchy-dropdown-list.reverse-x {
        left: auto !important;
        right: 100% !important;
    }

@keyframes actiondpactive {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }
}

.hierarchy-dropdown-list.fade {
    display: block;
    animation-name: actiondpfade;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

@keyframes actiondpfade {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    50% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        display: none;
    }
}

.hierarchy-dropdown-list .tree-hierarchy-header .select-checkbox {
    pointer-events: auto;
    margin-bottom: 0;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    padding: 0.5rem 1.2rem 0.5rem 1rem;
}

    .hierarchy-dropdown-list .tree-hierarchy-header .select-checkbox .check-bg {
        background-color: transparent;
    }

    .hierarchy-dropdown-list .tree-hierarchy-header .select-checkbox .check-mark {
        border: solid 1px #ccc;
        background-color: #fff;
        box-shadow: var(--box-shadow2);
        left: 12px;
    }

.hierarchy-dropdown-list .tree-hierarchy-header .selectbox-white .check-inpt:checked ~ .check-text {
    color: #5BAF00;
}

.hierarchy-dropdown-list .tree-hierarchy-header .selectbox-white .check-inpt:checked ~ .check-mark {
    background-color: #5BAF00;
    border-color: #5BAF00;
}

.hierarchy-dropdown-list .tree-hierarchy-header .selectbox-white .check-mark:after {
    border-color: #fff;
    background-color: #5BAF00;
}

.hierarchy-dp-container.invalid .hierarchy-dropdown-nav {
    border-color: red !important;
    color: red !important;
}

.add-hierarchy-btn {
    height: 35px;
    min-width: 100%;
    margin-top: 4px;
}

.crt-hierarchy-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.crt-hir-th {
    color: #777;
    font-size: 1rem;
    font-weight: 600;
}

.crt-hierarchy-table {
}

.tree-hierarchy-body {
    /* background-color: #fff; */
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    /* border:solid 1px #eee; */
}

    .tree-hierarchy-body .tree-hierarchy .tree-hierarchy-header {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

        .tree-hierarchy-body .tree-hierarchy .tree-hierarchy-header .tree-hierarchy-td {
            padding: .5rem 1rem;
        }

    .tree-hierarchy-body .tree-hierarchy .tree-hierarchy-content {
        /* border-radius: 25px; */
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        overflow: visible;
    }

.tree-hierarchy-th.th-name,
.tree-hierarchy-td.td-name {
    width: 60%;
}

.tree-hierarchy-th.th-type,
.tree-hierarchy-td.td-type {
    width: 40%;
}

.tree-hierarchy-th.th-addchild,
.tree-hierarchy-td.td-addchild {
    /* width: 15%; */
}

.tree-hierarchy-body .tree-hierarchy .tree-hierarchy-header .td-action {
    /* width: 5%; */
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

.tree-hierarchy-body .tree-hierarchy .tree-hierarchy-header:hover .td-action {
    opacity: 1;
    visibility: visible;
}
/*Installer style ----------------------*/
.installer-container {
    background-color: #fff;
    box-shadow: var(--box-shadow1);
    border-radius: 25px;
    border: solid 1px #e4e4e4;
    width: 90%;
    margin: 1.5rem auto;
    min-height: 90vh;
    display: flex;
}

.login-container {
    background-color: #fff;    
}
.login-page-bg {
    height: 100vh;
    background-image: url("../images/bg-login-min.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-page-bg::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background-image: linear-gradient(to left, #ffffff, transparent);
}
.login-page-form{
    width:65%;
}
.form-input-group .form-control {
    background-color: #F3F3F3;
}
.form-input-group .login-pswd-icon{
    position:absolute;
    top:1rem;
    right:1rem;
    cursor:pointer;
    z-index:1;
}
.login-pswd-icon img{
    width:1rem
}
.installer-info-view {
    display: flex;
    /* align-items: center; */
    flex: 0 0 auto;
    width: 42%;
    padding: 1rem;
    border-radius: 25px 0 0 25px;
    background-image: linear-gradient(to right, hsl(0deg 0% 0% / 30%), hsl(0deg 0% 0% / 30%)), url(/images/installer-bg-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.info-content {
    align-self: self-start;
    width: 80%;
    background-color: rgb(255 255 255 / 80%);
    border-radius: 25px;
    padding: 1.5rem;
    position: relative;
    top: calc(100% - 60vh);
}

.line-hr {
    background-color: #96FF01;
    border-radius: 25px;
    height: 6px;
    width: 70px;
    margin: 1rem 0;
}

.installer-form-group {
    padding: 1.2rem;
    flex-grow: 1;
}

.installer-forms {
    background-color: #f3f3f3;
    border-radius: 25px;
    padding: 1rem;
}

.installer-form-title {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.text-bg {
    background-color: #ffffffcc; /* white with 80% opacity */
    padding: 1rem;
    border-radius: 8px;
}


.card-bg-installer {
    background-color: #f3f3f3;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: var(--box-shadow1);
    border: solid 1px #f3f3f3;
}

/* Toast style -------------------*/
.toast {
    border-radius: 15px;
    border: solid 1px #fff;
    transition: all 0.3s ease;
}

    .toast:hover {
        background-color: #F8F8F8;
        border-color: #ccc;
    }

    .toast .toast-header {
        position: relative;
        padding: 0.8rem 1rem 0.8rem 1.8rem;
        background-color: transparent;
        border: 0;
    }

.toast-icon {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 16px;
    height: auto;
    transform: translateY(-50%);
}

.toast .toast-header h3 {
    font-size: 0.8rem;
}

.toast .can-close {
    width: 20px;
    height: 20px;
}

.toast .toast-content:nth-child(1) {
    padding: 1rem 1.5rem 1rem 1rem
}

.toast .can-close:nth-child(2) {
    right: 5px;
    top: 0.6rem;
}

.toast .can-close:nth-child(3) {
    right: 5px;
    top: 0.6rem;
}

.toast .can-close .close-img {
    width: 10px;
    height: auto;
}

.toast .toast-content {
    padding: 0rem 1rem 0.8rem 1.8rem;
}

    .toast .toast-content p {
        background-color: #F8F8F8;
        border-radius: 10px;
        padding: 0.5rem 0.5rem 0;
        font-size: 0.8rem;
        color: #222;
        min-height: 35px;
        max-height: 50px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
    }

.toast:hover .toast-content p {
    background-color: #fff;
}

.toast-success.progress:before {
    border-color: #5BAF00;
}

.toast-error.progress:before {
    border-color: #FF674A;
}

.toast-warning.progress:before {
    border-color: #E0A700;
}

.toast-info.progress:before {
    border-color: #0088CB;
}

.toast.show {
    /* animation-duration: 0.7s; */
    animation-timing-function: ease-out;
}

.toast.hide-toast {
    /* animation-duration: 0.7s; */
    animation-timing-function: ease-out;
}
/*tree hierarchy dropdown styles*/
.tree-hierarchy .tree-hierarchy-header .tree-action-menu .dropdown-list {
    border-radius: 15px;
    padding: 0.5rem;
    border: solid 1px #f3f3f3;
}

.dropdown .dropdown-list .dropdown-item {
    border-radius: 10px;
    text-wrap: nowrap;
    font-size: 0.8rem;
    color: #222;
}

.ebx-model-box {
    z-index: 1000 !important;
}


/*Rollout --------------------*/
.rollout-info {
    background-color: #f3f3f3;
    padding: 1rem;
    border-radius: 25px;
    height: 100%;
}

.rollout-list-card {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.8rem;
    gap: 1rem;
}

.schedule-card-1 {
    background-color: var(--clr-white);
    border-radius: 15px;
    border: solid 1px #ccc;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 150px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.schedule-card-1.card-light-black {
    background-color: #393D47;
    border-color: #393D47;
}

.schedule-card-1 > * {
    pointer-events: none;
}

.schedule-card-1.active {
    background-color: var(--clr-primary);
}

.schedule-card-1:hover {
    box-shadow: 0 3px 10px -4px #777;
}

.schedule-card-1.card-light-black:hover {
    box-shadow: none;
    border-color: #9DA5BC;
}

.schedule-card-1.card-light-white {
    background-color: #fff;
    border-color: #e4e4e4;
}

.schedule-card-1.card-light-white:hover {
    box-shadow: var(--box-shadow1);
    border-color: #f3f3f3;
}

.schedule-card-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3;
}

.schedule-card-1.card-light-black .schedule-card-icon {
    background-color: var(--clr-primary);
}

.schedule-card-1.active .schedule-card-icon {
    background-color: var(--clr-light-black);
}

.schedule-card-icon svg {
    width: 20px;
    height: 20px;
}

    .schedule-card-icon svg path {
        fill: var(--clr-primary);
    }

.schedule-card-1.active .schedule-card-icon svg path {
    fill: var(--clr-white);
}

.schedule-card-content {
    color: #222;
    font-size: 0.8rem;
    flex: 0 0 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-light-black .schedule-card-content .schdl-card-name {
    color: #9DA5BC;
}

.card-light-black .schedule-card-content .schdl-card-val {
    color: #fff;
}

.schedule-card-1.active .schedule-card-content {
    color: var(--clr-white);
}

.schedule-card-morebtn {
    position: absolute;
    top: 4px;
    right: 4px;
    transform: scale(0.9);
    pointer-events: auto;
}

.schedule-card-1.card-light-black .action-dropdown-nav {
    background-color: #9DA5BC;
}

.schedule-card-transparent {
    background-color: transparent;
    border-color: transparent;
}

.rollout-phased {
    padding: 1rem;
    background-color: #f3f3f3;
    border-radius: 25px;
}

.phased-header {
    display: flex;
    justify-content: space-between;
}

.phased-info-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.phased-info-text {
    background-color: var(--clr-primary);
    color: #fff;
    text-align: center;
    border-radius: 25px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.8rem;
    font-weight: 400;
}

.phased-info-time .form-group {
    width: 280px;
}

.tbSonTag {
    display: inline-block;
    text-align: center;
    color: #222;
    border-radius: 25px;
    padding: 0.3rem 0.85rem;
    background-color: #f3f3f3;
}

.phased-form {
    position: relative;
}

    .phased-form input {
        border-radius: 25px;
        width: 100%;
        height: 30px;
        padding: 0.3rem 0.8rem;
    }

    .phased-form .inpt-percent {
        position: absolute;
        top: 5px;
        right: 0;
        color: #777;
        font-size: 0.8rem;
        border-left: solid 1px #ccc;
        padding: 0rem 0.7rem 0 0.5rem;
    }

.table > :not(caption) > tr:last-child > td.batch-size-td {
    width: 150px;
}

.phasedelay-drp {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    z-index: 1000;
}

    .phasedelay-drp .selectopt .selectopt-nav {
        background-color: #20232D;
        color: #fff;
        border-radius: 25px;
        padding: 0.3rem 1rem;
        height: 25px;
        min-width: 90px;
        font-size: 0.7rem;
    }

        .phasedelay-drp .selectopt .selectopt-nav > .angle-down {
            right: 0.5rem;
            width: 16px;
        }

            .phasedelay-drp .selectopt .selectopt-nav > .angle-down path {
                fill: #fff;
            }

    .phasedelay-drp .selectopt .selectopt-list .selectopt-item {
        font-size: 0.7rem;
    }

.table > :not(caption) > tr:last-child > td.phased-delay-td {
    width: 220px;
}

.tdremove-phasebtn .actionbtn {
    width: 30px;
    height: 30px;
}

.form-control.invalid, .schedule-card-1.invalid {
    border-color: red !important;
    color: red !important;
}

.rm-phaseinfobtn {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
}

.rollout-list-info {
    max-height: 320px;
    overflow-y: auto;
}

.rollout-info {
    position: relative;
    right: -105%;
    transition: all 0.5s ease;
    transition-delay: 0.6s;
}

    .rollout-info.active {
        right: 0;
    }


/* Firmware style ------------------------*/
.firmware-creation-container {
    position: relative;
}

.fm-step {
    background-color: var(--clr-bg-light-gray);
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.2rem 0 0.5rem;
}

.firmware-create-info, .firmware-table-info {
    height: 100%;
}

    .firmware-create-info .fm-infolist,
    .firmware-table-info .fm-infolist {
        border-bottom: solid 1px #393D47;
        /* padding-bottom: 1rem; */
    }

        .firmware-create-info .fm-infolist:nth-child(4),
        .firmware-table-info .fm-infolist:nth-child(4) {
            border-bottom: 0;
        }

.form-slide-container {
    position: relative;
}

.form-slide-inner {
    position: relative;
    overflow: hidden;
    display: flex;
}

    .form-slide-inner.active {
        overflow: initial;
    }

.form-slide-item {
    flex: 0 0 100%;
    opacity: 0;
    visibility: hidden;
    position: relative;
    transition: transform 1s ease;
}

.form-slide-item.active {
    opacity: 1;
    visibility: visible;
}

.config-slt-tag {
    position: absolute;
    background-color: var(--clr-primary);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    border-radius: 25px;
    box-shadow: var(--box-shadow2);
    top: -15px;
    left: 18px;
}
/* Popover -------------------*/
.popover-container {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid rgb(0 0 0 / 14%);
    border-radius: 10px;
    /* padding: 10px; */
    z-index: 1000;
    box-shadow: var(--box-shadow1);
    display: none;
    max-width: 270px;
}

    .popover-container.show {
        animation-name: showpopover;
        animation-timing-function: ease;
        animation-duration: 0.3s;
    }

@keyframes showpopover {
    0% {
        display: block;
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

.popover-container.fade {
    display: none;
    animation-name: fadepopover;
    animation-timing-function: ease;
    animation-duration: 0.3s;
}

@keyframes fadepopover {
    0% {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.popover-container .popover-angle {
    position: absolute;
    left: 10px;
    top: 100%;
    width: 1rem;
    height: 0.5rem;
    /* background-color: #fff;
    box-shadow: var(--box-shadow1); */
}

.popover-angle:after,
.popover-angle:before {
    position: absolute;
    display: block;
    content: "";
    border-style: solid;
    border-color: transparent;
    border-width: .5rem .5rem 0;
}

.popover-angle:after {
    bottom: 1px;
    border-top-color: #fff;
}

.popover-angle:before {
    bottom: 0px;
    border-top-color: rgb(0 0 0 / 14%);
}

.popover-container.pop-end .popover-angle {
    bottom: auto;
    top: 50%;
    left: calc(-.5rem - 1px);
    width: .5rem;
    height: 1rem;
    transform: translate(0, -50%);
}

    .popover-container.pop-end .popover-angle:after,
    .popover-container.pop-end .popover-angle:before {
        left: 0;
        bottom: auto;
        border-width: .5rem .5rem .5rem 0;
    }

    .popover-container.pop-end .popover-angle:after {
        left: 1px;
        border-top-color: transparent;
        border-right-color: #fff;
    }

    .popover-container.pop-end .popover-angle:before {
        left: 0px;
        border-top-color: transparent;
        border-right-color: rgb(0 0 0 / 14%);
    }

.popover-container.pop-start .popover-angle {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(-.5rem - 1px);
    width: .5rem;
    height: 1rem;
    transform: translate(0, -50%);
}

    .popover-container.pop-start .popover-angle:after,
    .popover-container.pop-start .popover-angle:before {
        right: 0;
        bottom: auto;
        border-width: .5rem 0 .5rem .5rem;
    }

    .popover-container.pop-start .popover-angle:after {
        right: 1px;
        border-top-color: transparent;
        border-left-color: #fff;
    }

    .popover-container.pop-start .popover-angle:before {
        left: 0px;
        border-top-color: transparent;
        border-left-color: rgb(0 0 0 / 14%);
    }

.popover-container.pop-bottom .popover-angle {
    bottom: auto;
    top: calc(-.5rem - 1px);
    left: 50%;
    width: 1rem;
    height: .5rem;
    transform: translate(-50%, 0);
}

    .popover-container.pop-bottom .popover-angle:after,
    .popover-container.pop-bottom .popover-angle:before {
        bottom: auto;
        border-width: 0 .5rem .5rem .5rem;
    }

    .popover-container.pop-bottom .popover-angle:after {
        top: 1px;
        border-top-color: transparent;
        border-bottom-color: #fff;
    }

    .popover-container.pop-bottom .popover-angle:before {
        top: 0px;
        border-top-color: transparent;
        border-bottom-color: rgb(0 0 0 / 14%);
    }

.popover-container.pop-top .popover-angle {
    bottom: calc(-.5rem - 1px);
    left: 50%;
    width: 1rem;
    height: .5rem;
    transform: translate(-50%, 0);
}

    .popover-container.pop-top .popover-angle:after,
    .popover-container.pop-top .popover-angle:before {
        border-width: .5rem .5rem 0;
    }

    .popover-container.pop-top .popover-angle:after {
        bottom: 1px;
        border-top-color: #fff;
    }

    .popover-container.pop-top .popover-angle:before {
        bottom: 0px;
        border-top-color: rgb(0 0 0 / 14%);
    }

.popover-header {
    display: flex;
    align-items: center;
    padding: 0.3rem 1.5rem 0.3rem 1rem;
    background-color: #f5f5f5;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.popover-content {
    font-size: 0.8rem;
    padding: 1rem;
}

.popover-close {
    position: absolute;
    top: 0.5rem;
    right: 0.3rem;
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .popover-close > img {
        width: 10px;
        height: auto;
        transition: all 0.3s ease;
    }

    .popover-close:hover img {
        transform: scale(0.8);
    }

/*Master configurator style -----------------------*/
.help-popover {
    position: absolute;
    top: 0.8rem;
    right: 2rem;
    display: block;
    border-radius: 25px;
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    padding: 0.3rem 1rem;
    z-index: 1;
    background-color: var(--clr-primary);
    line-height: 1;
    box-shadow: var(--box-shadow2);
}

.config-file-table {
}

.config-file-tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    padding: 0.5rem;
    position: relative;
    margin-right: 50px;
}

.config-file-thead {
    background-color: transparent;
    box-shadow: none;
}

.config-file-tr > * {
    padding-left: 1rem;
    padding-right: 1rem;
}

.config-file-thead > * {
    color: #777;
    font-weight: 600;
}

.config-file-tbody .td-sno,
.config-file-thead .th-sno {
    padding: 0;
}

    .config-file-thead .th-sno,
    .config-file-tbody .td-sno > span {
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .config-file-tbody .td-sno > span {
        background-color: #f3f3f3;
        border-radius: 50%;
        font-size: 0.8rem;
    }

.config-file-thead .th-os,
.config-file-tbody .td-os {
    flex: 0 0 auto;
    width: 30%;
}

.config-file-thead .th-drive,
.config-file-tbody .td-drive {
    flex: 0 0 auto;
    width: 40%;
}

.config-file-thead .th-action,
.config-file-tbody .td-action {
    flex: 0 0 auto;
    padding-right: 0;
}

.config-file-thead .th-action {
    width: 35px;
}

.config-td .multi-select .multi-select-text {
    box-shadow: none;
    min-height: 35px;
    height: 35px;
    border-color: #ccc;
    padding: 0.3rem 0.8rem;
}

    .config-td .multi-select .multi-select-text .mlt-slt-title {
        font-size: 0.8rem;
    }

    .config-td .multi-select .multi-select-text .multi-txt-arrow {
        right: 0.8rem;
        width: 18px;
    }

.config-td .fileupload-driver {
    border: solid 1px #ccc;
    border-radius: 25px;
    padding: 0.3rem 6rem 0.3rem 0.8rem;
    height: 35px;
    position: relative;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

    .config-td .fileupload-driver.invalid {
        border-color: red;
        color: red;
    }

    .config-td .fileupload-driver ebx-fileupload {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .config-td .fileupload-driver .form-fileupload {
        height: 28px;
        padding: 0.3rem 1.5rem;
        box-shadow: none;
    }

.td-action-add {
    position: absolute;
    right: -50px;
    padding: 0;
}

    .td-action-add .actionbtn {
        background-color: var(--clr-primary);
        box-shadow: var(--box-shadow2);
        border-color: var(--clr-primary);
    }
.search-box-white .input-control {
    background-color: #fff !important;
}

.actionbtn-white {
    background-color: #fff !important
}

.list-of-checkox.list-item-masterdata .list-checkbox-item {
    width: 23.33%;
}

.link-btn svg {
    width: 22px;
    height: 22px;
}

.filter-sortby-white .selectopt-nav {
    background-color: #fff !important
}

.orderby-white .actionbtn {
    background-color: #fff !important
}

.infotab-sidebar-heading {
    z-index: 1;
}

    .infotab-sidebar-heading::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: white;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1
    }

.card-bg-masterdata {
    background-color: #20232D;
    border-radius: 25px;
    box-shadow: var(--box-shadow1);
    border: solid 1px #20232D;
}

.ms-table table tr th:last-child,
.ms-table table tr td:last-child {
    text-align: right;
}

.form-card.invalid {
    border:solid 1px red;
}
/* Card 3---*/
.card-3 {
    width: 12%;
}