/* ==================== Input Field ==================== */
input {
    color: var(--theme-text-color) !important;
}
.ui.input:not(.transparent) input, .ui.form input {
    color: var(--theme-text-color) !important;
    border-color: var(--theme-border-color) !important;
    background-color: var(--theme-items-color) !important;
    transition-property: border-color, color, background-color;
    transition-duration: 0.5s !important;
}
.ui.input:not(.transparent) input:focus, .ui.form input:focus {
    color: var(--theme-text-color) !important;
    border-color: var(--theme-border-color) !important;
    background-color: var(--theme-active-color) !important;
}

.field input {
    color: var(--theme-text-color) !important;
    border-color: var(--theme-border-color) !important;
    background-color: var(--theme-items-color) !important;
    transition-property: border-color, color, background-color;
    transition-duration: 0.5s !important;
}
.field input:focus {
    color: var(--theme-text-color) !important;
    border-color: var(--theme-border-color) !important;
    background-color: var(--theme-active-color) !important;
}
.ui.icon.input .icon {
    color: var(--theme-text-color);
}

.ui.input.error input, .ui.form .field.error input {
    border-color: rgba(255, 0, 0, 0.2) !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
    color: #e0b4b4 !important;
}



/* ==================== Menu ==================== */
.ui.menu {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.menu .item {
    color: var(--theme-text-color) !important;
}
.ui.menu .item:not(.disabled):hover {
    color: var(--theme-text-color) !important;
    background-color: var(--theme-active-color) !important;
}
.ui.menu .item.active {
    color: var(--theme-text-color) !important;
    background-color: var(--theme-active-color) !important;
}
.ui.menu .item.disabled, .ui.menu .item.disabled:hover {
    color: var(--theme-text-color) !important;
}



/* ==================== Vertical Menu ==================== */
.ui.vertical.menu {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.vertical.menu .item .header {
    color: var(--theme-primary-color);
    background-color: var(--theme-container-color);
}
.ui.vertical.menu .item .menu {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.vertical.menu .item .menu .item {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.vertical.menu .item .menu .item:hover {
    color: var(--theme-primary-color) !important;
    background-color: var(--theme-container-color) !important;
}
.ui.vertical.menu .item .menu .item.active {
    color: var(--theme-primary-color);
    background-color: var(--theme-container-color);
}



/* ==================== Dropdown Selection ==================== */
.ui.selection.dropdown {
    color: var(--theme-text-color);
    border-color: var(--theme-border-color);
    background-color: var(--theme-items-color);
    transition-property: border-color, color, background-color;
    transition-duration: 0.5s !important;
}
.ui.selection.dropdown:hover {
    color: var(--theme-text-color);
    border-color: var(--theme-border-color);
    background-color: var(--theme-items-color);
}
.ui.selection.dropdown.active {
    color: var(--theme-text-color);
    border-color: var(--theme-border-color);
    background-color: var(--theme-items-color);
}
.ui.selection.dropdown .menu .item {
    color: var(--theme-text-color);
    border: none;
    background-color: var(--theme-items-color);
}
.ui.selection.dropdown .menu .item:hover {
    color: var(--theme-text-color);
    border: none;
    background-color: var(--theme-active-color);
}
.ui.selection.dropdown .menu .item.active {
    color: var(--theme-text-color);
    border: none;
    background-color: var(--theme-active-color);
}



/* ==================== Dropdown ==================== */
.ui.dropdown:hover {
    border-color: var(--theme-border-color) !important;
}
.ui.dropdown .menu, .ui.menu .ui.dropdown .menu {
    color: var(--theme-text-color) !important;
    border-color: var(--theme-border-color) !important;
    background-color: var(--theme-items-color) !important;
}
.ui.dropdown .menu .header, .ui.menu .ui.dropdown .menu .header {
    color: var(--theme-text-color) !important;
    border: none !important;
    background-color: var(--theme-items-color) !important;
}
.ui.dropdown .menu .item, .ui.menu .ui.dropdown .menu .item {
    color: var(--theme-text-color) !important;
    border: none !important;
    background-color: var(--theme-items-color) !important;
}
.ui.dropdown .menu .item:hover, .ui.menu .ui.dropdown .menu .item:hover {
    color: var(--theme-text-color) !important;
    border: none !important;
    background-color: var(--theme-active-color) !important;
}
.ui.dropdown .menu .item.active, .ui.menu .ui.dropdown .menu .item.active {
    color: var(--theme-text-color) !important;
    border: none !important;
    background-color: var(--theme-active-color) !important;
}

.ui.dropdown.error, .ui.form .field.error .ui.dropdown {
    background: none !important;
    border-color: rgba(255, 0, 0, 0.2) !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
    color: #e0b4b4 !important;
}
.ui.dropdown.error .text, .ui.form .field.error .ui.dropdown .text {
    background: none !important;
}



/* ==================== Label ==================== */
label {
    color: var(--theme-text-color) !important;
}



/* ==================== Message ==================== */
.message:not(.warning, .info, .positive, .negative, .error, .success) {
    color: var(--theme-text-color) !important;
}
.ui.message {
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.05);
}
.ui.info.message {
    background-color: rgba(39, 111, 134, 0.1);
    box-shadow: none;
}
.ui.warning.message {
    background-color: rgba(148, 97, 25, 0.1);
    box-shadow: none;
}
.ui.positive.message {
    background-color: rgba(68, 161, 25, 0.1);
    box-shadow: none;
}
.ui.negative.message {
    background-color: rgba(161, 35, 35, 0.1);
    box-shadow: none;
}
.ui.error.message {
    background-color: rgba(161, 35, 35, 0.1);
    box-shadow: none;
}
.ui.success.message {
    background-color: rgba(68, 161, 25, 0.1);
    box-shadow: none;
}



/* ==================== Text ==================== */
.text {
    color: var(--theme-text-color) !important;
}



/* ==================== Segment ==================== */
.ui.segment {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.raised.segment {
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 2px 10px 0 rgb(0 0 0 / 15%);
}



/* ==================== Checkbox Toggle ==================== */
.ui.toggle.checkbox label {
    color: var(--theme-text-color);
}
.ui.toggle.checkbox input:focus:checked~label {
    color: var(--theme-primary-color) !important;
}
.ui.toggle.checkbox input:checked~label {
    color: var(--theme-primary-color) !important;
}
.ui.toggle.checkbox input:checked~label:before {
    background-color: var(--theme-light-color) !important;
}
.ui.toggle.checkbox input:focus:checked~label:before {
    background-color: var(--theme-light-color) !important;
}
.ui.toggle.checkbox label:before {
    background-color: var(--theme-items-color);
}
.ui.toggle.checkbox label:after {
    background-color: var(--theme-primary-color);
}



/* ==================== Checkbox ==================== */
.ui.checkbox:not(.toggle) input:checked~label:after {
    color: var(--theme-primary-color) !important;
    border: 1px solid;
    border-radius: 0.21428571rem;
    border-color: var(--theme-border-color);
    background-color: var(--theme-active-color);
}
.ui.checkbox input:checked~label:before {
    background-color: transparent;
}
.ui.checkbox:not(.toggle) input:focus~label:before {
    border-color: var(--theme-border-color);
    background-color: var(--theme-items-color);
}
.ui.checkbox:not(.toggle) label:before {
    border-color: var(--theme-border-color);
    background-color: var(--theme-items-color);
}
.ui.checkbox:not(.toggle) label:hover::before {
    border-color: var(--theme-border-color);
    background-color: var(--theme-active-color);
}



/* ==================== Scroll Bar ==================== */
body ::-webkit-scrollbar-track {
    background-color: var(--theme-scrollbar-track);
}
body ::-webkit-scrollbar-thumb {
    background-color: var(--theme-container-color);
}



/* ==================== Table ==================== */
.ui.table {
    color: var(--theme-text-color);
    background-color: var(--theme-sec-container-color);
}
.ui.table thead tr th {
    color: var(--theme-primary-color);
    background-color: var(--theme-active-color);
}
.ui.selectable.table tbody tr:hover {
    color: var(--theme-text-color) !important;
    background-color: var(--theme-active-color) !important;
}
.ui.striped.table tbody tr:nth-child(2n) {
    background-color: var(--theme-table-stripe-color);
}



/* ==================== Header ==================== */
.ui.header {
    color: var(--theme-text-color);
}



/* ==================== Statistics ==================== */
.ui.statistics .statistic .value, .ui.statistic .value {
    color: var(--theme-text-color);
}
.ui.statistics .statistic .label, .ui.statistic .label {
    color: var(--theme-text-color);
}



/* ==================== Modal ==================== */
.ui.modal {
    background-color: transparent;
}
.ui.modal:not(.basic) > .header:not(.ui) {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
    border-bottom: 2px solid var(--theme-border-color);
}
.ui.modal:not(.basic) > .content {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
}
.ui.modal:not(.basic) > .actions {
    color: var(--theme-text-color);
    background-color: var(--theme-container-color);
    border-top: 2px solid var(--theme-border-color);
}
.ui.basic.modal > .header {
    border: none;
}
.ui.basic.modal > .content {
    border: none;
}
.ui.basic.modal > .actions {
    border: none;
}



/* ==================== Default Tags ==================== */
h1, h2, h3, h4, h5, h6, p, li {
    color: var(--theme-text-color);
}



/* ==================== Label ==================== */
.ui.label {
    background-color: var(--theme-container-color) !important;
    color: var(--theme-text-color) !important;
}



/* ==================== Card ==================== */
.ui.card, .ui.cards > .card {
    box-shadow: none;
    background: none;
    border: 1px solid;
    border-color: var(--theme-border-color);
}
.ui.card > .content, .ui.cards > .card > .content {
    background-color: var(--theme-container-color);
    color: var(--theme-text-color);
    border-color: var(--theme-border-color) !important;
}
.ui.card > .content > .header, .ui.cards > .card > .content > .header {
    color: var(--theme-text-color);
}