:root {
    --opn: #002e5b;
}
.btn-opn,
.chip-primary {
    background-color: var(--opn) !important;
    border-color: var(--opn) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 0 1px 1px rgba(39, 44, 51, 0.075) !important;
}
.btn-opn:hover {
    background-color: #06488f !important;
}
.btn-opn-delete {
    background-color: #a41010 !important;
}
.chip-outline-opn {
    border-color: var(--opn) !important;
    color: var(--opn) !important;
}
.chip-outline-opn:hover {
    background-color: var(--opn) !important;
    color: white !important;
}
.bg-opn {
    background-color: var(--opn) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--opn) !important;
}
.opn {
    color: var(--opn) !important;
}
.card-opn {
    border-radius: 50px !important;
    background: #f6f4f4 !important;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff !important;
}
.preloader {
    background: var(--opn) !important;
}
.text-opn {
    color: var(--opn);
}
.select-update {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    position: relative;
}
.custom-select-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #000;
}
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.2);
}
.p-1-hover {
    padding: 0.25rem !important;
}
.p-1-hover:hover {
    border-color: #49494a !important;
    background: #49494a !important;
    padding: 0.4rem !important;
}
.active-lang {
    border-color: #49494a !important;
    background: #49494a !important;
    padding: 0.4rem !important;
}
.chip:not(.active-lang) > img {
    filter: grayscale(80%) !important;
    transition: filter 0.3s ease !important;
}
.tinymce-invalid {
    border: 1px solid red !important;
}
table.pointer-table tbody tr {
    cursor: pointer !important;
}
table.pointer-table tbody tr:hover {
    background-color: #063e7b !important;
    color: #ffffff;
}
.required::after {
    content: " *";
    color: red;
}