@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');

/* Forcing menu and user elements to the theme rather than custom site theme */

.user-interface {
    font-family: 'DM Sans', sans-serif !important;
}

/* Buttons */
.user-interface .btn {
    font-family: var(--app-font-family) !important;
    font-size: var(--app-font-size) !important;
    font-weight: var(--app-font-weight) !important;
    line-height: var(--app-font-size) !important;
    padding: var(--app-btn-padding) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    border-radius: var(--app-btn-radius) !important;
    height: var(--app-btn-height) !important;
    outline: 0 !important;
}
.user-interface .btn.btn-sm {
    height: var(--app-btn-sm-height) !important;
    padding: var(--app-btn-sm-padding) !important;
    line-height: calc(var(--app-btn-sm-height) / 2) !important;
    border-radius: var(--app-btn-xs-border-radius) !important;
}
.user-interface .btn.btn-lg {
    height: var(--app-btn-lg-height) !important;
    padding: var(--app-btn-lg-padding) !important;
    border-radius: var(--app-btn-lg-border-radius) !important;
    font-size: var(--app-btn-lg-size) !important;
}

/*PRIMARY*/

.user-interface .btn-primary,
.user-interface .btn-primary:focus,
.user-interface .btn-primary.active.focus,
.user-interface .btn-primary.active:focus,
.user-interface .btn-primary:active.focus,
.user-interface .btn-primary:active:focus {
    border: 1px solid var(--app-color-dark) !important;
    color: #FFFFFF !important;
    background: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    color: var(--app-color-dark) !important;
}

.user-interface .btn-primary:hover {
    border: 1px solid var(--app-color-secondary) !important;
    color: var(--app-color-secondary) !important;
    opacity: 0.75 !important;
    background: none !important;
}

/*SECONDARY*/

.user-interface .btn-secondary,
.user-interface .btn-secondary:hover,
.user-interface .btn-secondary:active,
.user-interface .btn-secondary:focus,
.user-interface .btn-secondary.active.focus,
.user-interface .btn-secondary.active:focus,
.user-interface .btn-secondary:active.focus,
.user-interface .btn-secondary:active:focus {
    background: none !important;
    border: none !important;
    color: var(--app-color-grey-medium) !important;
    text-shadow: none !important;
    padding: 0 !important;
    height: var(--app-btn-xs-height) !important;
    box-shadow: none !important;
    line-height: var(--app-btn-xs-height) !important;
    margin: 0 10px !important;
}

.user-interface .btn-secondary:hover {
    opacity: var(--app-btn-hover) !important;
}

/*DEFAULT*/

.user-interface .btn-default,
.user-interface .btn-default:focus,
.user-interface .btn-default.active.focus,
.user-interface .btn-default.active:focus,
.user-interface .btn-default:active.focus,
.user-interface .btn-default:active:focus {
    background: var(--app-bg-default-gradient) !important;
    border: 1px solid var(--app-color-default-light) !important;
    color: var(--app-color-dark) !important;
    text-shadow: 0 -1px 0 #FFFFFF !important;
}

.user-interface .btn-default:hover {
    background: var(--app-bg-default-gradient-reverse) !important;
    border: 1px solid var(--app-color-default-light) !important;
    color: var(--app-color-dark) !important;
}

/*SUCCESS*/

.user-interface .btn-success,
.user-interface .btn-success:focus,
.user-interface .btn-success:active,
.user-interface .btn-success.active.focus,
.user-interface .btn-success.active:focus,
.user-interface .btn-success:active.focus,
.user-interface .btn-success:active:focus {
    border: 1px solid var(--app-color-secondary) !important;
    color: #FFFFFF !important;
    background: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    color: var(--app-color-secondary) !important;
}

.user-interface .btn-success:hover,
.user-interface .btn-success:active:hover {
    border: 1px solid var(--app-color-secondary) !important;
    color: var(--app-color-secondary) !important;
    opacity: 0.75 !important;
    background: none !important;
}

/*INFO*/

.user-interface .btn-info,
.user-interface .btn-info:focus,
.user-interface .btn-info.active.focus,
.user-interface .btn-info.active:focus,
.user-interface .btn-info:active.focus,
.user-interface .btn-info:active:focus {
    background: var(--app-bg-info-gradient) !important;
    border: 1px solid var(--app-color-info) !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 var(--app-color-info) !important;
}

.user-interface .btn-info:hover {
    background: var(--app-bg-info-gradient-reverse) !important;
    border: 1px solid var(--app-color-info) !important;
    color: #FFFFFF !important;
}

/*WARNING*/

.user-interface .btn-warning,
.user-interface .btn-warning:focus,
.user-interface .btn-warning.active.focus,
.user-interface .btn-warning.active:focus,
.user-interface .btn-warning:active.focus,
.user-interface .btn-warning:active:focus {
    background: var(--app-bg-warning-gradient) !important;
    border: 1px solid var(--app-color-warning) !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 var(--app-color-warning) !important;
}

.user-interface .btn-warning:hover {
    background: var(--app-bg-warning-gradient-reverse) !important;
    border: 1px solid var(--app-color-warning) !important;
    color: #FFFFFF !important;
}

/*DANGER*/

.user-interface .btn-danger,
.user-interface .btn-danger:focus,
.user-interface .btn-danger.active.focus,
.user-interface .btn-danger.active:focus,
.user-interface .btn-danger:active.focus,
.user-interface .btn-danger:active:focus {
    background: var(--app-bg-danger-gradient) !important;
    border: 1px solid var(--app-color-danger) !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 var(--app-color-danger) !important;
}

.user-interface .btn-danger:hover {
    background: var(--app-bg-danger-gradient-reverse) !important;
    border: 1px solid var(--app-color-danger) !important;
    color: #FFFFFF !important;
}

#gritter-notice-wrapper p,
.user-interface,
.user-interface p,
.dropdown-menu-user p,
.message p {
    color: #1C1D23 !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.user-interface a {
    color: var(--app-color-dark) !important;
}

.user-interface h1 {
    color: var(--app-color-dark) !important;
    font-size: 72px !important;
    font-weight: 500 !important;
    line-height: 75px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.user-interface h2 {
    color: var(--app-color-dark) !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.user-interface h3 {
    color: var(--app-color-dark) !important;
    font-size: 22px !important;
    line-height: 30px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.user-interface h4,
.dropdown-menu-user h4 {
    color: var(--app-color-dark) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.user-interface .box {
    border-radius: var(--app-panel-radius) !important;
    background-color: #FFFFFF !important;
    border: var(--app-panel-border) !important;
    box-shadow: var(--app-panel-shadow) !important;
    margin-bottom: 24px !important;
}

.user-interface .box .head {
    background: none !important;
    border-bottom: var(--app-panel-border) !important;
    padding: 16px 24px !important;
}

.user-interface .box .box-content {
    background: none !important;
    padding: 16px 24px !important;
}

.user-interface .box .box-content .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.user-interface table tr td {
    font-weight: normal !important;
}

.user-interface .table > thead > tr > th {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    color: var(--app-color-grey-medium) !important;
}

.user-interface .table-hover > tbody > tr:hover {
    background-color: #f5f5f5 !important;
}

.user-interface .progress {
    height: 10px !important;
}

.user-interface .progress-bar {
    background-color: var(--app-color-secondary) !important;
}

/* Forms */
.user-interface .form-control {
    color: var(--app-color-dark) !important;
    background: #FFF !important;
    border: 1px solid #B9B7B4 !important;
    border-radius: var(--app-input-radius) !important;
    box-shadow: var(--app-input-shadow) !important;
    font-size: var(--app-font-size) !important;
    padding: 9px 16px !important;
    max-width: 100% !important;
}
body.dark .user-interface .form-control {
    color: var(--app-layout-bg) !important;
}
.user-interface .form-control:not(textarea) {
    height: var(--app-input-height) !important;
}
.user-interface .form-control[disabled] {
    color: var(--app-color-grey-light) !important;
}
.user-interface .form-control:focus, .form-control:focus-visible {
    border: 1px solid var(--app-color-secondary) !important;
    box-shadow: var(--app-input-shadow) !important;
    box-sizing: border-box !important;
}
.user-interface .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--app-input-placeholder) !important;
    opacity: 1 !important; /* Firefox */
}

.user-interface textarea.form-control {
    resize: vertical !important;
    min-height: calc(var(--app-input-height) * 4) !important;
}

.user-interface .input-group {
    display: table !important;
}

.user-interface .checkbox .checker {
    margin-right: 8px !important;
}

.user-interface .form .btn-group .btn {
    padding-left: 26px !important;
    padding-right: 26px !important;
}

.user-interface .input-group-addon {
    border-radius: 8px !important;
}

.user-interface .input-group .input-group-addon {
    border-color: #D2D3E0 !important;
    background-color: #F9FAFB !important;
    height: var(--app-input-height) !important;
    color: #707281 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.6px !important;
    line-height: 20px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    width: auto !important;
    padding-top: 6px;
}
.user-interface .input-group .input-group-addon i {
    font-size: 14px !important;
    line-height: 20px !important;
    min-width: 15px !important;
}

.user-interface .input-group > *:not(div) {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.user-interface .input-group > *:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/*Checkbox + radio*/

.user-interface div.checker input,
.user-interface div.radio input {
    position: absolute !important;
    margin-left: 0 !important;
}

.user-interface .checkbox, .radio {
    margin: 2px 0 !important;
}

.user-interface .checkbox + .checkbox,
.user-interface .radio + .radio {
    margin: 2px 0 !important;
}

.user-interface div.radio span.checked:before,
.user-interface div.checker span.checked:before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    content: "\f00c" !important;
    font-family: FontAwesome, sans-serif !important;
    font-size: 12px !important;
    color: #FFFFFF !important;
    left: 3px !important;
    top: 3px !important;
}

.user-interface div.radio,
.user-interface div.radio span {
    width: var(--app-input-checkbox-width) !important;
    height: var(--app-input-checkbox-height) !important;
}

.user-interface div.radio span {
    background: #FFFFFF;
    border: var(--app-input-radio-border) !important;
    border-radius: var(--app-input-radio-radius) !important;
}

.user-interface div.radio span.checked {
    background-color: #FFFFFF !important;
    box-shadow: var(--app-input-radio-shadow) !important;
}

.user-interface div.radio span.checked:before {
    background: var(--app-bg-secondary-gradient) !important;
    border: var(--app-color-secondary) !important;
    border-radius: var(--app-input-radio-checked-radius) !important;
}

.user-interface div.radio.disabled span {
    background: var(--app-input-radio-disabled-bg) !important;
}

.user-interface div.checker input,
.user-interface div.checker span {
    width: var(--app-input-checkbox-width) !important;
    height: var(--app-input-checkbox-height) !important;
    cursor: pointer !important;
}

.user-interface div.checker span {
    background: #FFFFFF !important;
    border: var(--app-input-checkbox-border) !important;
    box-shadow: var(--app-input-checkbox-shadow) !important;
    border-radius: var(--app-input-checkbox-radius) !important;
}

.user-interface div.checker span.checked {
    background-color: #FFFFFF !important;
}

.user-interface div.checker span.checked:before {
    background: var(--app-bg-secondary-gradient) !important;
    border: var(--app-color-secondary) !important;
    border-radius: var(--app-input-checkbox-checked-radius) !important;
}

.user-interface div.checker.disabled span {
    background: var(--app-input-checkbox-disabled-bg) !important;
}

.user-interface .checkbox label,
.user-interface .radio label {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    min-height: var(--app-input-checkbox-height) !important;
}

/** Labels **/
.user-interface .label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: min-content !important;
    height: var(--app-label-height) !important;
    color: var(--app-color-dark) !important;
    font-size: var(--app-font-size) !important;
    line-height: var(--app-font-size) !important;
    font-weight: var(--app-font-weight) !important;
    padding: var(--app-label-padding) !important;
    font-style: normal !important;
    border-radius: var(--app-label-radius) !important;
}
.user-interface .label.label-multilines {
    height: auto !important;
}

.user-interface .label-default {
    background-color: var(--app-color-default) !important;
    color: var(--app-color-grey-medium) !important;
    border: 1px solid var(--app-color-default-light) !important;
}

.user-interface .label-primary {
    background-color: var(--app-color-default) !important;
    color: var(--app-color-grey-medium) !important;
    border: 1px solid var(--app-color-default-light) !important;
}

.user-interface .label-info {
    background-color: var(--app-color-info-light) !important;
    color: var(--app-color-info) !important;
    border: 1px solid var(--app-color-info-light) !important;
}

.user-interface .label-success {
    background-color: var(--app-color-success-light) !important;
    color: var(--app-color-success) !important;
    border: 1px solid var(--app-color-success-light) !important;
}

.user-interface .label-warning {
    background-color: var(--app-color-warning-light) !important;
    color: var(--app-color-warning) !important;
    border: 1px solid var(--app-color-warning-light) !important;
}

.user-interface .label-danger {
    background-color: var(--app-color-danger-light) !important;
    color: var(--app-color-danger) !important;
    border: 1px solid var(--app-color-danger-light) !important;
}

.user-interface table.table .label {
    height: var(--app-label-small-height) !important;
    font-size: var(--app-label-small-size) !important;
    line-height: var(--app-label-small-size) !important;
    padding: var(--app-label-small-padding) !important;
}

/* Panels */

.user-interface .panel {
    border-radius: var(--app-box-radius) !important;
}

.user-interface .panel .panel-heading {
    border-top-left-radius: var(--app-box-radius) !important;
    border-top-right-radius: var(--app-box-radius) !important;
}

.user-interface .panel .panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
}

/* Alerts */
.user-interface .alert {
    display: block !important;
}


select,
select.form-control,
.user-interface select,
.user-interface select.form-control {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03LjM0Mzc1IDcuMzA2MDNDNy4xNTYyNSA3LjQ5MzUzIDYuODEyNSA3LjQ5MzUzIDYuNjI1IDcuMzA2MDNMMC42MjUgMS4zMDYwM0MwLjQzNzUgMS4xMTg1MyAwLjQzNzUgMC43NzQ3OCAwLjYyNSAwLjU4NzI4QzAuODEyNSAwLjM5OTc4IDEuMTU2MjUgMC4zOTk3OCAxLjM0Mzc1IDAuNTg3MjhMNyA2LjI0MzUzTDEyLjYyNSAwLjU4NzI4QzEyLjgxMjUgMC4zOTk3OCAxMy4xNTYyIDAuMzk5NzggMTMuMzQzOCAwLjU4NzI4QzEzLjUzMTIgMC43NzQ3OCAxMy41MzEyIDEuMTE4NTMgMTMuMzQzOCAxLjMwNjAzTDcuMzQzNzUgNy4zMDYwM1oiIGZpbGw9IiMxQzFEMjMiLz4KPC9zdmc+Cg==) no-repeat calc(100% - 10px) 50% !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px !important;
    padding-left: 10px;
}