﻿/**Loader CSS start**/
.preloaderBg {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background: var(--bg-white);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.preloader {
    background: url(../common/c2_new_logo.svg) no-repeat center;
    background-size: 200px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.preloader2 {
    border: 5px solid var(--bg-primary);
    border-top: 5px solid #E97132;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    animation: spin 1s ease-in-out infinite;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/**Loader CSS end**/

/**Card CSS start**/
.sd-outer-card {
    border-radius: 30px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    padding: 10px;
    position:relative;
}

.sd-inner-card {
    border-radius: 10px;
    background: var(--bg-white);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}
/**Card CSS end**/

/**Button CSS start**/
.primary-btn.rz-button.rz-primary {
    border-radius: 6px;
    border: 1px solid var(--border-secondary) !important;
    background: var(--bg-white) !important;
    padding: 5px 25px !important;
    color: var(--text-secondary) !important;
    text-align: center;
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1px;
}

.common-btn {
    border-radius: 30px !important;
    background: var(--bg-primary) !important;
    padding: 5px 25px !important;
    color: var(--text-black) !important;
    text-align: center;
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.1px;
}

.secondary-btn.rz-button.rz-primary {
    border-radius: 6px;
    background: var(--bg-primary) !important;
    padding: 5px 25px !important;
    color: var(--text-white) !important;
    text-align: center;
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.1px;
}

.badge-1.rz-button.rz-primary {
    background: #ffecc6 !important;
}

.badge-2.rz-button.rz-primary {
    background: #ffdace !important;
}

.badge-3.rz-button.rz-primary {
    background: #f0efc2 !important;
}

.badge-4.rz-button.rz-primary {
    background: #f0c2e0 !important;
}

.badge-5.rz-button.rz-primary {
    background: rgb(26,171,80,0.24) !important;
}

.badge-6.rz-button.rz-primary {
    background: #d0c1fc !important;
}

.badge-7.rz-button.rz-primary {
    background: #d0c1fc !important;
}

/**Button CSS end**/
/**Data-Grid-CSS-Start**/
.sd-data-grid .rz-grid-table-fixed {
    table-layout: auto;
    overflow: auto;
}

.sd-data-grid thead {
    background-color: var(--bg-secondary);
    z-index: 1;
    position: sticky;
    top: 0;
}

.sd-data-grid.rz-data-grid {
    border-radius: 25px !important;
    border: none !important;
}

.sd-data-grid .rz-chkbox-box.rz-state-active {
    background-color: var(--bg-primary) !important;
}

.sd-data-grid .rz-paginator-page.rz-state-active {
    background-color: var(--bg-primary) !important;
}

.sd-data-grid .rz-paginator {
    background-color: transparent !important;
    box-shadow: none;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    display: block !important;
}

.sd-data-grid .rz-datatable-data td:not(:last-child),
.sd-data-grid .rz-grid-table td:not(:last-child) {
    border-right: none !important;
}

.sd-data-grid .rz-datatable-thead th:not(:last-child),
.sd-data-grid .rz-grid-table thead th:not(:last-child) {
    border-right: none !important;
}

.sd-data-grid .rz-grid-table thead th {
    background: #fff !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.sd-data-grid .rz-chkbox-box, .sd-upload-artifacts .rz-chkbox-box {
    border-width: inherit !important;
    border: 1px solid var(--border-primary) !important;
}

/* Highlighted state for rows */
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: var(--bg-primary) !important;
}

/* Hover state for rows that are not highlighted */
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td {
    background-color: #E7ECED !important;
}

/* Target both odd and even td inside the rows for both highlighted and hover states */
.rz-selectable tbody tr.rz-data-row:nth-child(odd):hover:not(.rz-state-highlight) > td,
.rz-selectable tbody tr.rz-data-row:nth-child(even):hover:not(.rz-state-highlight) > td {
    background-color: #E7ECED !important;
}

.rz-selectable tbody tr.rz-data-row:nth-child(odd).rz-state-highlight > td,
.rz-selectable tbody tr.rz-data-row:nth-child(even).rz-state-highlight > td {
    background-color: var(--bg-primary) !important;
}
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #fff !important;
}
.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data{
    color:#000!important;
}
.sd-data-grid .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td {
    background-color: var(--bg-secondary) !important;
}
.sd-data-grid .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data {
    color: var(--text-primary) !important;
}

.sd-grid-text {
    color: var(--text-primary);
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-regular);
}
/**Data-Grid-CSS-End**/

/**Input Css**/
.sd-input-unit {
    position: absolute;
    top: 30%;
    right: 5%;
    color: var(--text-secondary);
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-medium);
}

.sd-unit-range {
    color: var(--text-primary);
    font-size: var(--font-size-tertiary);
    font-weight: var(--font-weight-medium);
    padding-top: 6px;
}

.rz-textbox {
    border: 1px solid var(--border-secondary);
}

.rz-numeric {
    border: 1px solid var(--border-secondary);
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    border: 1px solid var(--border-secondary);
}

.sd-textbox-relative {
    position: relative;
}

.sd-unit-type {
    font-weight: var(--font-weight-semi-bold);
    position: absolute;
    top: 7px;
    right: 30px;
}

/**Gap Css**/

.gap-1 {
    gap: 10px;
}

.gap-2 {
    gap: 20px;
}

.gap-3 {
    gap: 30px;
}


/**TAB CSS**/
.sd-tabs.rz-tabview .rz-tabview-panels {
    border: none;
    box-shadow: none;
}

.sd-tabs.rz-tabview .rz-tabview-nav {
    background: #FFF;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    border-radius: 30px;
    width: max-content;
    padding: 5px;
    gap: 10px;
}

.sd-tabs.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border: 0;
    border-radius: 30px;
    background: #113D4F;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1px;
}

.sd-tabs.rz-tabview .rz-tabview-nav li {
    border-radius: 30px;
    background: #E6EFF5;
    border: 0;
    color: #113D4F;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1px;
    min-width: 120px;
}

    .sd-tabs.rz-tabview .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
        background-color: #E6EFF5;
        color: #113D4F;
    }

    .sd-tabs.rz-tabview .rz-tabview-nav li a {
        justify-content: center;
    }


/**BREADCRUMB CSS**/
/*.sd-common-breadcrumb .rz-breadcrumb {
    position: absolute;
    top: 15px;
    left: 50px;
}*/

.sd-common-breadcrumb .rz-breadcrumb-item .rz-link {
    display: inline-flex;
    align-items: center;
    color: #113D4F !important;
    font-size: 16px;
    font-weight: 700;
}

.sd-common-breadcrumb .rz-breadcrumb-item .rz-label {
    font-size: 16px;
}

.sd-common-breadcrumb i.rzi {
    padding-right: 10px;
}

/*@media(max-width:992px) {
    .sd-breadcrumb .rz-breadcrumb {
        left: 80px;
    }
}*/

/**Toolbar Css**/
.sd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

/**Filter-btn**/

.sd-filter-btn {
    border-radius: 10px;
    border: 1px solid #113D4F;
    background: #FFF;
    padding: 4px 10px;
    color: #113D4F;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

    .sd-filter-btn img {
        padding-left: 5px;
    }

/**Checkbox**/
.rz-chkbox-box .rzi {
    background: #113D4F !important;
    outline: none;
}


/**Product Card CSS Start**/
.sd-product-card {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}

    .sd-product-card img {
        max-width: 75%;
    }

.sd-product-content {
    padding: 20px;
}

    .sd-product-content h6 {
        color: #113D4F;
        font-size: 18px;
        font-weight: 700;
        line-height: 27px;
        text-align: left;
    }

    .sd-product-content p {
        color: rgba(0, 0, 0, 0.55);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
        line-height: 1.5;
        height: 3em;
    }


.img-wrap img {
    max-width: 100% !important;
    max-height: calc(18vh - 10px) !important; /* 20% of viewport height minus 10px */
    min-height: calc(18vh - 10px) !important; /* Same for the minimum height */
    object-fit: contain !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sd-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.info-btn {
    border-radius: 6px;
    border: 1px solid #113D4F;
    background: var(--bg-white);
    padding: 5px 25px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.config-btn {
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 5px 25px;
    color: var(--text-white);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    border: none;
    justify-content: center;
    width: 100%;
}

.info-btn img {
    max-width: 25px;
    padding-left: 5px;
}

.config-btn img {
    max-width: 25px;
    padding-left: 5px;
}

.sd-home-icon {
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 0;
    right: 0;
}

    .sd-home-icon:hover {
        transform: scale(1.1);
    }

/**Product Card CSS End**/

/**Tree Component CSS Start**/
.rz-form-field-content {
    margin-top: inherit;
}

.rz-tree-toggler.rzi-caret-right:before {
    content: '';
    background: url(/common/filter-add.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.rz-tree-toggler.rzi-caret-down:before {
    content: '';
    background: url(/common/filter-minimize.png) no-repeat center;
    display: block;
    width: 24px;
    height: 24px;
}

.rz-treenode-content .rz-treenode-label {
    margin-left: 10px;
}

.rz-treenode-content-selected .rz-treenode-label {
    background: #FFF;
    color: #113D4F;
    font-weight: 700;
}

.rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label {
    background: #FFF;
    color: #113D4F;
    font-weight: 700;
}

/**Tree Component CSS End**/

/**Custom Css for Breadcrumb Start**/
.sd-breadcrumb .rz-breadcrumb-item .rz-label {
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    color: #113D4F !important;
}

/**Custom Css for Breadcrumb End**/

/**Resposniveness Start**/
@media (max-width: 5120px) and (min-width: 1921px) {
    .img-wrap img {
        max-height: 27vh !important;
        min-height: 27vh !important;
    }
}

@media (max-width:1680px) {
    .sd-main-home .col-lg-3 {
        width: 33.33%;
    }

    .config-btn,
    .info-btn {
        padding: 5px 15px;
    }
}

@media(max-width:1280px) {
    .sd-main-home .col-lg-3 {
        width: 50%;
    }
}

@media(max-width:768px) {
    .sd-main-home .col-lg-3 {
        width: 100%;
    }

    .sd-toolbar {
        display: block;
    }

    .sd-toolbar .rz-dropdown {
        width: 100%;
        margin-bottom: 1rem;
    }

    .sd-filter-btn {
        width: 100%;
        margin-top: 1rem;
    }
}

@media(max-width:577px) {


    .sd-card-actions {
        display: block;
    }

    .config-btn,
    .info-btn {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }
}

/**Resposniveness End**/



.description-ellipsis {
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    line-height: 1.5;
    height: 3em;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    cursor: pointer;
    margin-bottom: 10px;
}

.description-ellipsis-grid {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    max-height: 2.8em;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
    cursor: pointer;
}



