.tool-bar-dropdown {
    width: 200px;
    
}

.dxbl-list-box-item-selected {
    color: white;
}

.dropdown-project {
    width: 250px
}

.dropdown-project-large {
    width: 350px;
    height: 40px;
}


@media (min-width: 580px) and (max-width: 950px) {
    .dropdown-project-large {
        width: 230px;
        height: 40px;
    }
}

@media (max-width: 580px) {
    .dropdown-project-large {
        width: 100px;
        height: 40px;
    }
}

.dropdown-project-large-label {
    align-self: center;
}

.dropdown-city {
    width: 180px
}

.dxbl-list-box-item-selected::before {
    background-color: #ffa44f !important;
}

.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: #ffa44f !important;
}


tr.dxbl-grid-filter-row.dxbl-grid-editor-inplace-container td[tabindex="0"]:focus-within {
    outline: 2px solid #ffa44f !important; /* Adjust color and width as desired */
    outline-offset: calc(-1* .15rem);
}

.dropdown-project-modal {
    max-width: 500px;
    min-width: 40%;
    justify-self: start;
}

.search-box {
    width: 200px;
}

.form-spacing-large {
    margin-bottom: 20px;
}

.form-spacing-medium {
    margin-bottom: 10px;
}

.dx-forms-caption {
    min-width: 180px;
}

.answered {
    background-color: #83cbb9;
    color: white;
    text-align: center;
    max-height: 75px;
}

.not-answered {
    background-color: #ed765b;
    color: white;
    text-align: center;
    max-height: 75px;
}

.row-orange {
    background-color: #fdd344;
    color: white
}

.row-orange td {
    background-color: #fdd344;
    color: white
}

.row-orange a {
    color: white
}

.standard-text-container {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    background-color: white;
    padding: 18px;
}

.pager-container {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background-color: white;
    border: 1px solid #d2d2d2;
    border-top: none;
}


/* Custom progressbar styles
-------------------------------------------------- */
.progress-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 10px 0;
}

.progress-track {
    background-color: #ffffff;
    border-radius: 8px !important;
    height: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light bottom shadow */
}

.progress-fill {
    background-color: #f48c06;
    height: 100%;
    border-radius: 8px;
    position: relative;
    transition: width 0.4s ease;
}

.progress-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    white-space: nowrap;
    pointer-events: none;
}

.tick-label {
    position: absolute;
    font-weight: 600;
    font-size: 0.8rem;
    color: #333;
    white-space: nowrap;
}

.tick-label-top {
    top: -12px;
}

.label-top {
    top: -35px;
}

.label-left {
    left: 0px;
    padding-left: 12px;
}

.label-right {
    right: 0px;
    padding-right: 12px;
}

.tick-label-bottom {
    bottom: -12px;
}

.label-bottom {
    bottom: -35px;
}

.label-top.label-left::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 32px;
    left: 0px;
    top: 7px;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    box-sizing: border-box;
}

.label-top.label-right::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 32px;
    right: 0px;
    top: 7px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    box-sizing: border-box;
}

.label-bottom.label-left::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 32px;
    left: 0px;
    bottom: 7px;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    box-sizing: border-box;
}

.label-bottom.label-right::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 32px;
    right: 0px;
    bottom: 7px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    box-sizing: border-box;
}


/*.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before, 
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected::before {
    background-color: #ffa44f !important;
}*/