:root {
    --portal-expired-rgb: 253,126,23;
}

#div_id_required_certificates ul {
    display: flex;
    flex-direction: column;
    white-space: normal;
}

#div_id_required_certificates .select2-selection__choice {
    width: 98%;
}

#skills-added li {
    list-style: none;
}

#skills-added li::before {
    content: "+";
    margin-right: 4px;
}

#skills-removed li {
    list-style: none;
}

#skills-removed li::before {
    content: "-";
    margin-right: 4px;
}

.form-control:read-only {
    cursor: not-allowed;
}

.text-expired {
    color: rgba(var(--portal-expired-rgb),var(--bs-text-opacity, 1))!important;
}

.bg-expired {
    background-color: rgba(var(--portal-expired-rgb),var(--bs-bg-opacity, 1))!important;
}

.table-expired {
    --bs-table-color: #000;
    --bs-table-bg: #fd7e1440;
    --bs-table-border-color: #e5721340;
    --bs-table-striped-bg: #fdc494;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #669cee;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #ff740047;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: rgb(244 159 89 / 50%);
}

.text-bg-expired {
    color: #fff!important;
    background: rgba(253,126,23,var(--bs-bg-opacity,1))!important;
}


.btn-xs {
    --bs-btn-padding-y: .2rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .74rem;
}

.rouded-top-start {
    border-top-left-radius: var(--bs-border-radius)!important;
}

table.sortable tr th:not(.sorttable_nosort), tr .badge {
    cursor: pointer;
    user-select: none;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE";
}

table .td-min:last-child {
    width: clamp(20px, 25px, 75px);
    text-align: center;
    white-space: nowrap;
}

table .td-min {
    width: clamp(56px, 60px, 65px);
    text-align: center;
    white-space: nowrap;
}

td.skill-count {
    width: clamp(20px, 25px, 50px);
    text-align: center;
}

td {
    max-width: 185px;
}

td a:hover {
    --bs-text-opacity: 0.75;
}

th select {
    min-width: clamp(100px, 120px, 185px)
}

@media screen and (max-width: 1024px){
    th:not(.sorttable_nosort) {
        white-space: nowrap;
    }

    .navbar-brand {
        width: clamp(150px, 200px, 250px);
    }

    #div_id_required_certificates .select2-selection__choice {
        width: 92%;
    }
}