/* variables */
:root {
    --tdc-font-family: "DM Sans", "Arial", sans-serif;
    --tdc-sidebar-background-color: #1a1a25;
    --tdc-sidebar-font-color: #f2f2f5;
    --tdc-sidebar-active-root-menuitem-font-color: #ffc948;
    --tdc-sidebar-active-link-in-group-font-color: #ffc948;
    --tdc-navbar-background-color: #ffffff;
    --tdc-navbar-font-color: #1a1a25;
    --tdc-primary: #272e7d;
    --tdc-primary-on-hover: #202566;
    --tdc-primary-font: #ffffff;
    --tdc-secondary: #4e5dfd;
    --tdc-secondary-on-hover: #4350d9;
    --tdc-secondary-font: #ffffff;
    --tdc-success: #4bbf73;
    --tdc-success-on-hover: #66c988;
    --tdc-success-font: #1a1a25;
    --tdc-warning: #e5a54b;
    --tdc-warning-on-hover: #e9b366;
    --tdc-warning-font: #1a1a25;
    --tdc-info: #1f9bcf;
    --tdc-info-on-hover: #1a84b0;
    --tdc-info-font: #ffffff;
    --tdc-info-grey-label: #495057;
    --tdc-danger: #d9534f;
    --tdc-danger-on-hover: #b84743;
    --tdc-danger-font: #ffffff;
    --tdc-content-background-color: #f2f2f5;
    --tdc-semi-transparent-light-background-color: #ffffff70;
    --tdc-transparent-light-background-color: #fffffff2;
    --tdc-transparent-dark-background-color: #00000009;
    --tdc-content-font-color: #1a1a25;
    --tdc-login-background-color: #1a1a25;
}


/* font-family */
body {
    font-family: var(--tdc-font-family) !important;
}


/* anchor tags */
a {
    color: var(--tdc-secondary);
    text-decoration: underline;
}

a:has(.btn):hover {
    text-decoration: none;
}


/* unordered lists */
ul {
    margin-bottom: 0.5rem;
}


/* checkboxes */
input[type="checkbox"] {
    accent-color: var(--tdc-secondary);
    vertical-align: middle;
}


/* input number type */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/* all buttons */
.btn {
    border-radius: 0.4rem;
}

.btn:focus {
    box-shadow: none;
}


/* primary */
.btn-primary {
    background-color: transparent !important;
    border-color: var(--tdc-secondary) !important;
    color: var(--tdc-secondary) !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    background-color: var(--tdc-secondary) !important;
    border-color: var(--tdc-secondary) !important;
    color: var(--tdc-content-background-color) !important;
}

.list-group-item {
    background-color: var(--tdc-semi-transparent-light-background-color);
    color: var(--tdc-secondary);
}

.list-group-item.active {
    background-color: var(--tdc-secondary);
    border-color: var(--tdc-secondary);
    color: var(--tdc-secondary-font)
}

.list-group-item-action:focus, .list-group-item-action:hover:not(.active) {
    background-color: var(--tdc-primary);
    border-color: var(--tdc-primary);
    color: var(--tdc-primary-font);
}


/* secondary */
.btn-secondary {
    background-color: var(--tdc-secondary) !important;
    border-color: var(--tdc-secondary) !important;
    color: var(--tdc-secondary-font) !important;
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: var(--tdc-secondary-on-hover) !important;
    border-color: var(--tdc-secondary-on-hover) !important;
    color: var(--tdc-secondary-font) !important;
}


/* success */
.btn-success {
    background-color: var(--tdc-success) !important;
    border-color: var(--tdc-success) !important;
    color: var(--tdc-success-font) !important;
}

.btn-check:focus + .btn-success,
.btn-success:focus,
.btn-success:hover {
    background-color: var(--tdc-success-on-hover) !important;
    border-color: var(--tdc-success-on-hover) !important;
    color: var(--tdc-success-font) !important;
}


/* ghost button */
.btn-ghost {
    background-color: transparent !important;
    border: none !important;
    color: var(--tdc-secondary) !important;
}

.btn-check:focus + .btn-ghost,
.btn-ghost:focus,
.btn-ghost:hover {
    background-color: transparent !important;
    border: none !important;
    color: var(--tdc-secondary) !important;
    font-weight: bold;
 }


/* warning */
.btn-warning {
    background-color: var(--tdc-warning) !important;
    border-color: var(--tdc-warning) !important;
    color: var(--tdc-warning-font) !important;
}

.btn-check:focus + .btn-warning,
.btn-warning:focus,
.btn-warning:hover {
    background-color: var(--tdc-warning-on-hover) !important;
    border-color: var(--tdc-warning-on-hover) !important;
    color: var(--tdc-warning-font) !important;
}


/* info */
.btn-info {
    background-color: var(--tdc-info) !important;
    border-color: var(--tdc-info) !important;
    color: var(--tdc-info-font) !important;
}

.btn-check:focus + .btn-info,
.btn-info:focus,
.btn-info:hover {
    background-color: var(--tdc-info-on-hover) !important;
    border-color: var(--tdc-info-on-hover) !important;
    color: var(--tdc-info-font) !important;
}


/* danger */
.btn-danger {
    background-color: var(--tdc-danger) !important;
    border-color: var(--tdc-danger) !important;
    color: var(--tdc-danger-font) !important;
}

.btn-check:focus + .btn-danger,
.btn-danger:focus,
.btn-danger:hover {
    background-color: var(--tdc-danger-on-hover) !important;
    border-color: var(--tdc-danger-on-hover) !important;
    color: var(--tdc-danger-font) !important;
}

.btn--table {
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1.5;
    float: right;
}

.btn--table .fas {
    line-height: inherit;
}


/* pill */
.btn-pill {
    border: 1px solid;
}

.btn-pill .fas {
    margin-right: 5px;
}

.btn-pill.active {
    color: var(--tdc-secondary);
}

.btn-pill.inactive {
    border-color: var(--bs-gray-500);
    color: var(--tdc-content-font-color);
}

.btn-pill.inactive .fas {
    display: none;
}

.btn-neutral {
    background-color: var(--tdc-semi-transparent-light-background-color);
    border: 1px solid #ced4da ; 
}


/* microsoft icon */
.fa-microsoft {
    position: relative;
    right: 2px;
    bottom: 2px;
}


/* sidebar */
.sidebar, .sidebar-content, .simplebar-content, .sidebar-header, .sidebar-brand {
    background: var(--tdc-sidebar-background-color) !important;
    color: var(--tdc-sidebar-font-color) !important;
}

.sidebar-link, .sidebar-link i, a.sidebar-link, a.sidebar-link i, .sidebar-dropdown .sidebar-link {
    color: var(--tdc-sidebar-font-color);
}

.sidebar-dropdown .sidebar-item.active .sidebar-link, .sidebar-item.active > .sidebar-link i {
    color: var(--tdc-sidebar-active-link-in-group-font-color);
}

.sidebar-item.active > .sidebar-link,
.sidebar-item.active > .sidebar-link i,
.sidebar-item.active .sidebar-link:hover,
.sidebar-item.active .sidebar-link:hover i {
    color: var(--tdc-sidebar-active-root-menuitem-font-color);
}

.sidebar-link:hover i, .sidebar-link:hover svg,
.sidebar-item.active > .sidebar-group i,
.sidebar-item.active > .sidebar-group,
.sidebar-item .sidebar-link:hover,
.sidebar-dropdown .sidebar-item .sidebar-link:hover,
.sidebar-dropdown .sidebar-item .sidebar-link:hover i {
    color: var(--tdc-sidebar-active-root-menuitem-font-color);
}

.simplebar-content-wrapper {
    background: var(--tdc-sidebar-background-color) !important;
}


/* content */
.content {
    background: var(--tdc-content-background-color) !important;
    overflow-y: visible;
}

.login-screen {
    background: var(--tdc-login-background-color) !important;
}


/* pagination */
.page-link, .page-link:focus {
    background: var(--tdc-semi-transparent-light-background-color);
    color: var(--tdc-content-font-color);
}

.page-link:hover {
    background: var(--tdc-secondary-on-hover) !important;
    border-color: var(--tdc-secondary-on-hover) !important;
    color: var(--tdc-secondary-font) !important;
}

.page.item {
    border-radius: 0.6rem !important;
}

.page-item:first-child .page-link {
    border-radius: 0.6rem 0 0 0.6rem !important;
}

.page-item:last-child .page-link {
    border-radius: 0 0.6rem 0.6rem 0 !important;
}

.page-item.active .page-link {
    background: var(--tdc-secondary) !important;
    border-color: var(--tdc-secondary) !important;
    color: var(--tdc-secondary-font) !important;
}

.page-item.disabled .page-link {
    opacity: 0.6;
}


/* badges */
.bg-primary {
    background-color: var(--tdc-secondary) !important;
    color: var(--tdc-secondary-font) !important;
}

.bg-secondary {
    background-color: var(--tdc-primary) !important;
    color: var(--tdc-primary-font) !important;
}

.bg-success {
    background: var(--tdc-success) !important;
    color: var(--tdc-success-font) !important;
}

.bg-warning {
    background: var(--tdc-warning) !important;
    color: var(--tdc-warning-font) !important;
}


/* text inputs */
form .form-group {
    margin-bottom: 1rem;
    max-width: 600px;
}

form .form-group:last-of-type,
form .row:last-of-type {
    margin-bottom: 0.5rem;
}

.form-control {
    appearance: auto;
}

.form-control, .form-select {
    border-radius: 0.4rem;
}

.form-control, .form-select {
    background: var(--tdc-semi-transparent-light-background-color);
}

table .form-control {
    opacity: 0.6;
}

.form-control:focus {
    opacity: 1 !important
}

.form-check-input {
    background-color: var(--tdc-semi-transparent-light-background-color);
}

.form-group input[type="checkbox"] {
    margin-bottom: 2px;
    margin-right: 5px;
}

.form-group label {
    color: var(--tdc-content-font-color);
}

.form-check-input:checked {
    background-color: var(--tdc-secondary);
    border-color: var(--tdc-secondary);
}

input:focus::placeholder {
    color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}


/* table */
.dataTable.table-striped > tbody > tr.odd {
    --bs-table-accent-bg: var(--tdc-semi-transparent-light-background-color) !important;
}


/* dialogs */
.modal-content {
    background-color: var(--tdc-content-background-color) !important;
    border-radius: 0.6rem;
}


/* dropdowns */
.login-screen .dropdown {
    position: inherit;
}

.dropdown-menu {
    background-color: var(--tdc-content-background-color);
}

.dropdown-menu--fonts {
   max-height: 300px;
   overflow-y: auto;
}

.dropdown-menu > li:hover {
    background-color: var(--tdc-secondary);
}

.dropdown-menu > li:hover > a {
    color: var(--tdc-secondary-font) !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--tdc-secondary);
    color: var(--tdc-secondary-font) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--tdc-secondary-on-hover);
    color: var(--tdc-secondary-font) !important;
}

.dropdown-toggle:after {
    margin-left: 0.7rem;
}

.select2-container--bootstrap4 .select2-selection {
    background-color: var(--tdc-semi-transparent-light-background-color);
}

.select2-container--bootstrap4 .select2-results__option {
    background-color: var(--tdc-content-background-color);
}

.select2-container--bootstrap4 .select2-results__option.select2-results__option--highlighted[aria-selected] {
    background-color: var(--tdc-secondary);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: var(--tdc-semi-transparent-light-background-color);
}


/* nav-links */
.tab .tab-content, .tab .nav-tabs .nav-link.active {
    background-color: var(--tdc-transparent-dark-background-color);
}

.tab .nav-tabs .nav-link.active {
    margin-bottom: 0;
    font-weight: 500;
}

.tab .nav-tabs .nav-link:hover:not(.active) {
    color: var(--bs-gray-dark);
}


/* card */
.rounded-md {
    border-radius: 0.6rem;
}

.rounded-xl {
    border-radius: 1.5rem;
}

.card {
    margin-bottom: 0px;
}

.card .form-card-section:last-of-type {
    margin-bottom: 0px;
}

.card:not(.login-screen .card) {
    background-color: white;
}

.card-header:first-child.rounded-md {
    border-radius: 0.6rem 0.6rem 0 0;
}

.card-header:first-child.rounded-xl {
    border-radius: 1.5rem 1.5rem 0 0;
}

.card-footer:last-child.rounded-md {
    border-radius: 0 0 0.6rem 0.6rem;
}

.card-footer:last-child.rounded-xl {
    border-radius: 0 0 1.5rem 1.5rem;
}

.login-screen .card {
    background-color: var(--tdc-transparent-light-background-color)
}


/* login screen */
a.flag-icon {
    text-decoration: none;
}

.flag-icon {
    padding: 0.5rem !important;
    padding-right: 0.5rem !important
}

.nav-flag {
    font-size: 1rem;
}

.nav-flag .fas {
    margin-right: 2px;
    position: relative;
    top: 2px;
    color: var(--tdc-content-font-color);
}

.login-screen .nav-item .dropdown-menu {
    inset: 50px 20px auto auto !important;
}

.form-label {
    margin-bottom: 0.2rem;
}

.login-screen .language-icon {
    font-size: 1rem;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.login-screen .card-body {
    position: relative;
    padding: 3.5rem 1.5rem 2.25rem 1.5rem;
}


/* list groups */
.list-group-item {
    background-color: var(--tdc-semi-transparent-light-background-color);
    color: var(--tdc-content-font-color);
}

.list-group-item.active {
    background-color: var(--tdc-secondary);
    border-color: var(--tdc-secondary);
    color: var(--tdc-secondary-font)
}

.list-group-item-action:focus, .list-group-item-action:hover:not(.active) {
    background-color: var(--tdc-secondary-on-hover);
    border-color: var(--tdc-secondary);
    color: var(--tdc-secondary-font);
}

/* others */
.border {
    border-color: var(--tdc-content-font-color) !important;
}

small, .small {
    font-size: 90%;
}

.text-justify {
    text-align: justify;
}

.language-flag {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin-right: 5px;
}

.language-row {
    margin: 10px 0;
    display: flex;
    gap: 10px;
}

.warning-text {
    color: var(--tdc-warning);
}

.fw-400 {
    font-weight: 400;
}

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

.input-group-text {
    height: 100%;
}

.icon--action {
    margin-right: 6px;
}

.buildVersion
{
    text-align: right;
    padding: 5px;
    color: var(--tdc-content-font-color);
    opacity: 0.6;
}