:root {
    --expedited--text--color: #033161;
    --border--color: #e2e2e2;
    --main--bg--color: #002E5E;
    --danger--bg--color: #ffdf6f;
    --bs-primary-rgb: 0, 46, 94; /*blue bg ma shume* //bg or text-primary*/
    --bs-secondary-rgb: 131,137,140; /*grey* /bg or text-secondary*/
    --bs-success-rgb: 40,167,69; /*green / bg or text-sucess/*/
    --bs-info-rgb: 3,49,97; /*light blue for text /bg or text-info*/
    --bs-warning-rgb: 255,193,7; /*bg or text-warning*/
    --bs-danger-rgb: 220,53,69; /* bg or text-danger*/
    --bs-light-rgb: 255, 255, 255; /*white / bg or text-light*/
    --bs-dark-rgb: 28, 28, 28; /*dark black used for text and titles/ bg or text-dark*/
    --bs-gray-200: 226, 226, 226; /*used for borders/ bg or text-gray-200*/
    --bs-gray-600: #595959; /*gray text color used in active page mooslty*/
    --bs-gray-500: #979797; /*popups  titles*/
    --bs-gray-400: #83898C; /*placeholders text*/
}

 /*------------------------------------ID per teste te Artit----------------------------------------------------*/

#test_submitBid {
  color: #ffffff;
}
#test_viewBid {
    
}
#test_endBidding {
    color: #ffffff;
}
#test_selectCO{
    color: black;
}
#test_selectWinningBid {
    color: #ffffff;
}
#test_confirmWinningBid{
    color: green;
}
#test_acknowledgeBid{
    color:#ffffff;
}
#test_enterCQTid{
    color:#ffffff;
}
#test_enterSPO {
    color: #ffffff;
}
#test_deploy {
    color: #ffffff;
}
#test_next{
    color:#ffffff;
}
#next_step1{
    color:#ffffff;
}
#next_step2 {
    color: #ffffff;
}
#test_submit1 {
    color: #ffffff;
}
#test_submit2 {
    color: #ffffff;
}
#submit_liftPlan {
    color: #ffffff;
}
#closeOut{
    color:#ffffff;
}



/*---------------------------- Transaction details view per mobile----------------------------*/
.transactionView {
    background-color: #F0F8FF;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    padding: 10px;
    overflow-wrap: break-word;
}

.transactionView3 {
    background-color: #D9E2EC;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    padding: 10px;
    color: #19213D;
    overflow-wrap: break-word;
}

.start-text {
    font-weight: bold;
    font-size: 14px;
    color: #19213D;
    word-wrap: break-word;
    overflow-wrap: break-word; 
    white-space: normal;
}

.end-text {
    font-weight: 400;
    font-size: 12px;
    color: #5E6366;
    word-wrap: break-word;
    overflow-wrap: break-word; 
    white-space: normal;
}


.line-with-dot {
    width: 1.5px;  
    height: 10px;  
    background-color: #0c1633;
    position: relative;
    margin: 0 auto;
}
.master-connector {
    position: relative;

}
    /* vertical line */
    .master-connector::before {
        content: "";
        position: absolute;
        top: 10px; 
        bottom: 20px;
        left: 0;
        border-left: 1.5px solid #003366;
    }

    /* Top curve ? */
    .master-connector::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 10px;
        border-top: 1.5px solid #003366;
        border-left: 1.5px solid #003366;
        border-top-left-radius: 20px;
    }

/* Bottom curve ? */
.end-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-bottom: 1.5px solid #003366;
    border-left: 1.5px solid #003366;
    border-bottom-left-radius: 20px;
}

/*Job Details Label with Text Component*/
.text-main {
    color: var(--main--text--color);
}

.background-main-blue {
    background-color: var(--main-bg-color);
}

.expedited-card-color {
    background-color: var(--danger--bg--color);
}

.background-transparent {
    background-color: inherit !important;
    border-width: 0;
    color: var(--main--bg--color)
}

.labeledTextbox {
    width: fit-content;
    display: flex;
    flex-direction: column;
}


    .labeledTextbox span {
        font-size: 12px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        text-align: left;
        color: #111113;
    }

    .labeledTextbox label {
        font-size: 12px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        text-align: left;
        color: #595959;
    }


/*Border Component with Radius*/

.border-Radius-8 {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
}

.borderWithRadius {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 15px 24px;
    margin-bottom: 8px;
    border: 1px solid #e2e2e2;
    border-radius: 24px;
    background-color: #ffffff;
    width: fit-content;
    position: relative;
}

.cards-container-withRadius {
    display: flex;
    flex-direction: column;
    padding:inherit;
    border: 1px solid #e2e2e2;
    border-radius: 24px;
    background-color: #ffffff;
    width: fit-content;
    position: relative;
}

.requestNotesLabel{
    font-size:12px;

}
/*bordder for references and spo component*/
.border-columns {
    min-height: 120px;
    margin: 5px;
    border: 1px solid var(--border--color);
    border-radius: 24px;
    background-color: #ffffff;
    width: 100%;
    position: relative;
    display: grid;
    padding: 23px;
    margin-top: 2px;
    margin-right: 3px;
}
/*Borderi per jobtaska line jobdetails*/

/*titile and Icon in a row*/
.iconNtitle {
    flex-direction: row;
    margin-right: 3px;
    margin-bottom: 10px;
    display: flex;
    overflow-wrap: break-word;
}

    .iconNtitle span {
        font-size: 14px;
        font-weight: 600;
        padding-left: 2px;
    }

/*Spo and  References Text fonts*/
.nametext {
    font-size: 13px;
}

.valuetext {
    font-size: 14px;
    font-weight: bold;
}

/*lift attributes*/

.liftAtributesId {
    width: fit-content;
    height: 21.5px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    border: solid 0.7px rgba(197, 197, 197, 0.5);
    background-color: #f1efef;
    color: #1c1c1c;
}


.cue-orange {
    background-color: #f8d7da !important;
    color: #b71c1c !important;
    border: solid 0.7px #f5c6cb !important;
    font-weight: 400;
    font-size: 12px;
}

.cue-purple {
    background-color: palegreen !important;
    font-weight: 400;
    color: green !important;
    font-size: 12px;
}



.cue-gray-light {
    background-color: #f0f0f0 !important;
    font-weight: 400;
    color: #a0a0a0 !important;
    font-size: 12px;
}


/*///tek te ack downday*/
.dialog-content {
    height: auto!important;  
    overflow-y: auto;
}

#colorAttribute {
}

/*Jobs Cardsss////////////*/
.equipment-name {
    font-size: 1rem!important;
    font-weight: 600!important;
    font-weight:600;

   
}
.tenant-logo {
    height: 20px;
    object-fit: contain;
    max-width: 100px;
}

.logo-section {
    height: 100%;
    background-color: white;
}


/*/*if expedited crane */
.expedited-marker {
    width: 20px;
    background-color: #F5A623;  
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height:auto;
}

.expedited-text {
    color: white;
    font-weight: bold;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    letter-spacing: 7px;
    height:auto;
}
.archived-marker {
    width: 20px;
    background-color: #E4E4E4!important; 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.archived-text {
    color: #B4AEAE;
    font-weight: bold;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    letter-spacing: 7px;
}
.closed-marker {
    width: 20px;
    background-color: #9FA1AA;  
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closed-text {
    color: white;
    font-weight: bold;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    letter-spacing: 7px;
}
.archived-marker {
    width: 20px;
    background-color: #F5A623;  
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
}
.fixed-size-icon {
    width: 50px;
    height: 50px;
    font-size: 15px;
    object-fit: contain;
}


.boldId {
    font-size: 16px;
    font-weight: bold;
    color: #033161;
}

.fixed-section {
    flex-shrink: 0;
    display: flex;
    align-items: start;
    justify-content: start;
    position: relative;
}

.CardColorChange {
    width: 50px;
    height: 50px;
    object-fit: contain;
    color: var(--main--bg--color) !important;
}

.role-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    min-width: 45px !important;
    height: 45px;
    flex-shrink: 0;
}

.cardSection1 {
    display: flex;
    align-items: start;
}

    .cardSection1 span {
        font-size: 14px;
        font-weight: 500;
    }

.multiCard-location {
    display: flex;
    align-items: start;
}

    .multiCard-location span {
        font-size: 13px;
        color: #033161;
        font-weight: 500;
    }

.vr {
    width: 1px !important;
    height: auto!important;
    margin-top: 4px;
    color: #909090 !important;
}

.card-container {
    position: relative;
    background-color: #ffffff;
    margin: 40px 3px 8px 3px;
    border-radius: 11.19px;
    border-top-right-radius: 0px !important;
    border: 1px solid var(--border--color);
    height: 160px !important;
    overflow:visible; 
    clip-path: inset(-40px 0px 0px 0px);
    transition: box-shadow 0.3s ease-in-out;
}

  

.job-statuses-oveflow{
    height:53px;
}

.right-corner,
.right-corner-active {
    position: absolute;
    top: -30px;
    right: -1px;
    width: 90px;
    height: 30px;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: 1px solid var(--border--color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.right-corner-active {
    right: -2px;
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
}

.nokia-text {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #005aff; /* blu si nė foto */
    font-size: 14px;
    letter-spacing: 1px;
}
/* Scrollbar style */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #002E5E26;
    border-radius: 24px;
}

::-webkit-scrollbar-thumb {
    background-color: #002E5E;
    border-radius: 30px;
    height: 30px;
    margin-left: 4px;
}

::-webkit-scrollbar-button {
    display: none;
    margin-right: 3px;
}


/* firefoxscrollbar */
scrollbar-color: #002E5E transparent;
scrollbar-width: thin;

.gridButtons {
    width: auto !important;
    height: auto !important;
    background-image: linear-gradient(#D9E2EC, #D9E2EC) !important;
    border-radius: 8px !important;
    color: var(--main-bg-color) !important;
    border: var(--main-bg-color) !important;
    cursor: pointer !important;
    font-size: 16.5px !important;
    font-weight: 400 !important;
    text-align: center !important;
    transition: box-shadow .3s !important;
    padding: 6px 20px;
}
.skillsButtons {
    width: auto !important;
    height: 65px !important;
    background-image: linear-gradient(#D9E2EC, #D9E2EC) !important;
    border-radius: 8px !important;
    color: var(--main-bg-color) !important;
    border: var(--main-bg-color) !important;
    cursor: pointer !important;
    font-size: 17.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: box-shadow .3s !important;
    padding: 6px 20px;
}
/*zoomed icons*/
.icon-menu {
    font-size: 1.7rem!important;
}

.gridButtons:hover {
    background-color: #D9E2EC !important;
    color: var(--main-bg-color) !important;
    box-shadow: #D9E2EC 0 3px 8px !important;
}

.gridButtons:active {
    background-image: linear-gradient(#D9E2EC,#D9E2EC) !important;
    border-color: #D9E2EC !important;
    outline: none !important;
}

.gridButtons:focus {
    box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px !important;
    outline: none !important;
}

.gridButtons {
    width: auto !important;
    height: auto !important;
    background-image: linear-gradient(#D9E2EC, #D9E2EC) !important;
    color: var(--main-bg-color) !important;
    border: var(--main-bg-color) !important;
}

.button-disabled {
    width: auto !important;
    height: auto !important;
    background-color: #ccc !important;
    border-color: #A6B6C3 !important;
    color: #666 !important;
}


.button-disabled,
.gridButtons {
    width: auto !important;
    height: auto !important;
    border: none;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 16.5px !important;
    font-weight: 400 !important;
    text-align: center !important;
    transition: box-shadow .3s !important;
    padding: 8px 15px;
}
/*
--------------------Weather report css------------------------------------------------------------*/
.weather-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
}

    .weather-container img {
        height: 22px;
        width: 22px;
        object-fit: contain;
        display: block;
    }

.temperature-text {
    font-size: 12px;
    color: #595959;
    font-weight: 500;
}

.tooltip-content-custom {
    padding: 12px 16px;
    min-width: 320px;
    font-size: 14px;
    color: #1c1c1c;
    font-family: 'Inter', sans-serif;
}

.tooltip-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

.weather-status {
    font-size: 16px;
    font-weight: 600;
    color: #FF9900;
}

.weather-date {
    font-size: 15px;
    color: #555;
    margin-top: 2px;
}

.weather-summary {
    margin-top: 12px;
    font-size: 15px;
    color: #333;
}

.weather-icon-lg {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-left: 10px;
}

.tooltip-weather-details {
    margin-top: 10px;
}

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

.tooltip-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12.5px;
}

    .tooltip-info img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        opacity: 0.7;
        font-weight: 600;
    }

.e-tooltip-wrap.weather-tooltip {
    background-color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0 !important;
}

.disclaimer-tooltip {
    background-color: #fefae0;
    color: #333;
    border-radius: 8px;
    font-size: 12.5px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
}

.disclaimer-button {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #1c1c1c;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
    padding: 5px;
}

    .disclaimer-button:hover {
        color: #1c1c1c;
    }
/*GoogleMap button*/

/*--------------------------------------Dashboard---------------------------------*/
.dashboard-area {
    border: 1px solid #EEEEF2;
    border-radius: 8px;
    background-color: #ffffff;
    overflow:scroll!important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    max-height: 30vh

}

.dashboard {
    margin: 5px;
    border: 1px solid #E7E8F1;
    border-radius: 8px;
    background-color: #ffffff;
    width: 240px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

    .dashboard:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        transform: scale(1.02);
    }

    .dashboard span {
        font-size: 16px;
        font-weight: 500;
        color: #71839B;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .dashboard h3 {
        font-size: 24px;
        font-weight: 600;
        color: #002E5E;
        padding-top: 10px;
        padding-bottom: 10px;
    }

.dots-button {
    border: none !important;
    background-color: #ffffff !important;
    font-size: 20px;
    height: 40px;
    width: 40px;
}

.dashboard-name {
    font-size: 16px;
    color: #808192;
}
/* ----------------------------dashboard-GO TO------------------------------------------------------------------------ */
.borderFixed {
    border-radius: 8px;
    border: 1px solid #EEEEF2;
    padding: 20px;
    background-color: #ffffff;
    height: 100%;
    min-width: 30vh;
}

.btn-light {
    background-color: #D9E2EC;
    border: none;
    color: #003366;
    border-radius: 8px;
}

    .btn-light:hover {
        background-color: #d4e3f7;
    }

    .btn-light .bi {
        font-size: 0.9rem;
    }

/*----------------------------------quickactions---------------------------------------*/
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #131313;
    margin-bottom: 18px;
}

.actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border: 1px solid #002E5E;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #002E5E;
    background-color: transparent;
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    white-space: nowrap;
}

    .quick-button:hover {
        background-color: #ECEBFF;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
/*Prefixes per quick search-in*/
.tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .tooltip-container input {
        width: 100%;
        padding-right: 30px;  
        box-sizing: border-box;
    }

.tooltip {
    visibility: hidden;
    background-color: white;
    color: black;
    text-align: left;
    padding: 10px;
    border-radius: 8px;
    position: absolute;
    font-weight: 600;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    white-space: normal;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
    .tooltip code {
        color: #A7C300;
        font-weight: bold;
    }
/* Show tooltip when user hovers over the input */
.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transition-delay: .7s; 
}

/*///////Crane id and manlift id ne job detailsl commpoennt*/

.action-button {
    background-color: #033161;
    color: white;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    color: #ffffff;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: 0.25rem;
}

.blue-Button {
    background-color: #033161 !important;
    color: #ffffff !important;
}


.green-button {
    background-color: #c9e9d0 !important;
    color: #28a745 !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: solid 1px #28a745 !important;
    font-size: 14px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0.25rem !important;
}

.card-tab {
    margin-right: 0px !important;
    border-bottom: white !important;
}

.selectedJob {
   /* transform: scale(1.01);*/
    background-color: #ffff;
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
}
.support-info{
    font-size:14px;
    font-weight:600;
    color:#BFD83E;

}
/* PRICE EDIT COMPONENTS*/
.btn-hollow {
    border: solid 1px #033161;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    padding: 2px 12px 2px 6px;
    border-radius: 8px;
    margin-right: 8px;
    color: #033161;
}


div.alternate div.zebra:nth-child(even) {
    background-color: #fcf3f1;
}

div.alternate div.zebra:nth-child(odd) {
    background-color: #F0F8FF;
}


.lot {
    background-color: #EDEBF1 !important;
}

    .lot .lot {
        background-color: #E0DCE9 !important;
    }

        .lot .lot .lot {
            background-color: #D4CEE2 !important;
        }

            .lot .lot .lot .lot {
                background-color: #CCC2E3 !important;
            }


.btn-add-delete {
    background-color: #c0cbd7 !important;
    border-color: #bfc6ce !important;
    color: #033161 !important;
}

.btn-up-down {
    background-color: #faebd7 !important;
    border-color: #bfc6ce !important;
    color: #033161 !important;
}

/*Price View Component */

.custom-Bid-tab {
    background-color: #eee !important;
}

    .custom-Bid-tab.e-active .e-tab-wrap,
    .custom-tab .e-active .e-tab-wrap {
        background-color: #002e5e !important; /* Active background color */
        color: white !important; /* Active text color */
    }

    .custom-Bid-tab.e-active .e-tab-text,
    .custom-tab .e-active .e-tab-text {
        color: white !important;
    }

.noBackGroundImage {
    background-image: none !important;
}

.custom-Price-tab .e-tab-wrap {
    background-color: rgba(255, 2, 2, 0.2) !important;
    background-image: none !important;
}

.custom-Bid-tab.e-toolbar-item:not(.e-active) .e-tab-text,
.custom-tab .e-toolbar-item:not(.e-active) .e-tab-text {
    color: black !important;
}

.red-fontText {
    font-size: 1rem !important;
    font-weight: 550;
    color: #f00;
}


#detailTable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border: none;
}

    #detailTable td, #detailTable th {
        border: none;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }


    #detailTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #detailTable tr:hover {
        background-color: #ddd;
    }

    #detailTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        border-bottom: 2px solid #ddd;
        color: #002e5e;
        font-weight: 600;
    }

.bold-text {
    color: #002e5e;
    font-weight: 600;
}

/*Job App Bar buttons*/


.lift-plan-view-bid-btn {
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 16px;
    width: auto;
    cursor: pointer;
    color: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .lift-plan-view-bid-btn:hover {
        background-color: #f3f4f6;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }


.advancedFilterBtn {
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 5px;
    font-size: 14px;
    width: auto;
    cursor: pointer;
    color: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    height: 40px !important;
    width: 180px;
}

    .advancedFilterBtn:hover .filter-text,
    .advancedFilterBtn:focus .filter-text,
    .advancedFilterBtn:active .filter-text {
        visibility: visible;
        opacity: 1;
        width: 100px !important;
        height: 40px !important;
    }

.iconifyBtn {
    font-size: 3.3rem;
    margin-right: 12px;
}

.iconFixed {
    font-size: 1.44rem !important;
    margin-right: 4px;
    font-weight: 500 !important;
    align-items: center !important;
}

.icons-in-black {
    font-size: 1.01rem !important;
    margin-right: 4px !important;
    font-weight: 500 !important;
    align-items: center !important;
    margin-top: 2px !important;
}

/*buttons with dropdown*/
.downloads-job-menu-btn {
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 5px 20px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    color: #4b5563 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

 /*   .downloads-job-menu-btn .e-icon-left {
        color: #425466;
        content: url('Components.css/icon-down-arrow');
        display: inline-block;
    }*/
   /* Arrow down per donloads edhe job menu po so tu bo 
       .downloads-job-menu-btn::after {
        content: '\2304';
        font-size: 20px;
        color: #4b5563;
        margin-left: 8px;
        font-weight:550;
        margin-bottom:5px;
    }*/
  /*   PEr me dall pta ne rresht te ri ?*/
.jobDetail {
    max-width: 100%; 
    flex-wrap: wrap;  
}
.e-dropdown-btn .e-caret::before, .e-dropdown-btn.e-btn .e-caret::before {
    content: url('/icon-down-arrow');
}

.e-control e-btn e-lib e-dropdown-btn downloads-job-menu-btn {
    font-size:14px;
}
.e-dropdown-popup ul {
    border: none !important;
}


/*--------------------------files-------------------------------------------------------------------*/
.file-page-wrapper {
    display: flex;
    gap: 16px;
}

.uploaded-files-section, .upload-section {
    display: flex;
    flex-direction: column;
}

.media-upload-box {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fff;
}

.drag-drop-area {
    border: 2px dashed #eaeaea;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
}

.upload-progress .progress-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.upload-progress .progress {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}




/* when the spin button on combobox is not needed... */
.sf-combo-no-spin-button .e-input-group .e-input-group-icon {
    display: none;
}


#sfdropdownbutton70023ce4-f6cf-4d1c-9389-9d0dadf0a490 {
    font-size: 1.5em;
    margin-right: 4px;
    align-items: center !important;
}

.downloads-job-menu-btn:hover {
    background-color: #f3f4f6 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/*edit po style*/
.custom-textbox .e-float-input input {
    padding-right: 40px;
    height: 40px;
    font-size: 1rem;
    color: #666;
    border-radius: 8px;
}
/*-------------------------------uploadedfiles-------------------------------*/
.uploadedfiles-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .uploadedfiles-table thead th {
        text-align: left;
        font-size: 14px;
        color: #1c1c1c;
        font-weight: 600;
        padding: 8px;
        border-top: none;
        border-bottom: none;
    }

    .uploadedfiles-table tbody tr {
        background-color: #f7f7f9;
        border-radius: 8px;
        transition: box-shadow 0.2s ease-in-out;
        margin-bottom: 8px;
    }

        .uploadedfiles-table tbody tr + tr {
            margin-top: 8px;
        }

        .uploadedfiles-table tbody tr:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        .uploadedfiles-table tbody tr:active {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

    .uploadedfiles-table tbody td {
        padding: 12px;
        font-size: 14px;
        color: #495057;
        margin-bottom: 8px;
    }

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .file-info i {
        font-size: 24px;
        color: #1c1c1c;
    }

    .file-info .file-name {
        font-weight: 500;
        color: #1c1c1c;
    }

    .file-info .file-size {
        font-size: 12px;
        color: #1c1c1c;
    }

.icon-file {
    border: 1px solid #1c1c1c;
    border-radius: 4px;
}

.selected-row {
    background-color: #f5f5f5;
    border: 2px solid #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.files-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    color: #5B5B5B;
    transition: background-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

    .files-button:disabled {
        background-color: #e0e0e0;
        color: #999;
        cursor: not-allowed;
        border: none;
    }

    .files-button:not(:disabled):hover {
        background-color: #e9e9e9 !important;
        border: none;
        color: #5b5b5b !important;
    }

.e-control .e-btn .e-lib .files-button:not(:disabled):active {
    background-color: #e9e9e9 !important;
    border: none;
    color: #5b5b5b !important;
}

.e-tab-text {
    font-weight: 500 !important;
}

.stepper-line-inactive {
    flex-grow: 2;
    height: 2px;
    margin-left: 8px;
    margin-right: 8px;
    background: rgba(var(--bs-secondary-rgb));
    position: relative;
    overflow: hidden;
}

.stepper-line-active {
    flex-grow: 2;
    height: 2px;
    margin-left: 8px;
    margin-right: 8px;
    background: rgba(var(--bs-secondary-rgb));
    position: relative;
    overflow: hidden;
}

    .stepper-line-active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(var(--bs-primary-rgb));
        transform: translateX(-100%);
        animation: flowTransition 0.5s linear forwards;
        animation-delay: inherit;
    }

@keyframes flowTransition {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

 

.step-content {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

    .step-content.step-active {
        display: block;
        animation: fadeInUp 0.4s ease-in-out;
        opacity: 1;
        pointer-events: all;
        z-index: 1000;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);  
    }

    to {
        opacity: 1;
        transform: translateY(0);  
    }
}

/*LookupItems*/
.lookupitems-card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
}

.lookupitems-card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
}

.lookupitems-card-body {
    padding: 1.5rem;
}

.lookupitems-form-group {
    margin-bottom: 1rem;
}

    .lookupitems-form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #495057;
    }

.lookupitems-input-readonly {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
}

.lookupitems-e-treeview {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.lookupitems-e-btn {
    text-transform: none;
    font-weight: 500;
}

.lookupitems-e-primary {
    background-color: #002F5E !important;
    border-color: #002F5E !important;
    color: white;
}

.lookupitems-e-danger {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: white;
}

.lookupitems-e-success {
    background-color: #198754;
    color: white;
}

.lookupitems-fw-bold {
    font-weight: 500;
}

.lookupitems-me-2 {
    margin-right: 0.5rem;
}

.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow,
.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: #002F5E;
    border-color: #002F5E;
}


/*SiteMap*/
.siteMapBtn {
    width: 200px;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #add8e6;
    border: 1px #033161!important;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/*Assign Components*/
#listbox1 {
    width: 50%;
    float: left;
    max-height: 250px !important;
    overflow-y: auto;
}

#listbox2 {
    width: 48%;
    float: right;
    max-height: 250px !important;
}

.photosDialog{
    max-height:500px;
}

.displayMeasurements{
    height:auto;
}

/* --             grids TO BE CONTINUED - ENDRIT TOPLICA. --------------*/
.approved {
    color: #10B981;
    font-size: 20px;
}

.not-approved {
    color: #EF4444;
    font-size: 20px;
}

/*VERSION 3.5 NEW REQUEST FORM CLASSES*/
.equipment-selection-container {
    padding: 35px 70px;
    width: 1264px;
    height: auto;
    margin: auto;
    background: white;
    border-radius: 16px;
    text-align: center;
}

.requestEquipmentTitle {
    font-size: 28px;
    font-weight: 600;
    color: #002E5E;
}

#btn-continue {
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.15);
    background-color: #002e5e;
    color: #fff;
}

    #btn-continue:active {
        animation: fade .3s infinite;
        background: #fff;
        color:#002e5e
    }

#btn-previous {
    color: #83898c;
    text-align: left;
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.15);
}

.icon-arrow-right:before {
    color: #ffffff !important;
}

#requestContainer {
    width: 800px;
    height: auto;
    border-radius: 16px;
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.05);
    background-color: #fff;
    z-index: 999;
}

#formContainer {
    width: 514px;
    height: auto;
    gap: 30px;
    border-radius: 16px ;
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.05);
    border: solid 1px #e2e2e2;
    background-color: #fff;
    font-size: 1em;
}

.newRequestTitle {
    font-size: 2em;
    font-weight: 600;
}

#nav-buttons {
    width: 514px;
}

.nav-button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    width: 138px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1em;
}

.submitButtonDisabled {
    background-color: #abb7c2 !important;
}

#deploymentDetails {
    font-size: 15px;
}

#pdf {
    height: auto;
    min-height: 600px;
    border-radius: 16px;
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.05);
    object-fit: contain;
    background-color: #fff;
}

#disclaimer {
    height: auto;
    border-radius: 16px;
    box-shadow: 8px 8px 24px 0 rgba(2, 2, 70, 0.05);
    font-size: 0.8em;
    background-color: #fff;
}