:root {
    --k-height: 1.8rem;
    --k-height-1: 1.7rem;
    --sdad-field-min-height: 3.5rem;
    --sdad-field-small-min-height: 2.25rem;
    --gov-green-button: #006736;
    --gov-green-button-hover: #154a2b;
    --gov-red-button: #b60202;
    --gov-red-button-hover: #880000;
    --gov-button-secondary-bg-color: #cdccce;
    --gov-button-secondary-border-bottom-color: #99989c;
    --gov-button-secondary-bg-color-hover: #b3b2b5;
    --grey-button: #f3f3f3;
    --grey-button-hover: #ccc;
    --input-border-radius: 2px;
    --input-border-style: solid;
    --input-border-color: #d5d5d5;
    --sdad-input-height: 28px;
    --sdad-error-bg-color: #ffeeee;
    --sdad-error-border-color: red;
    --sdad-success-border-color: #4CAF50;
    --sdad-success-bg-color: #eeffee;
    --sdad-info-border-color: #2196F3;
    --sdad-info-bg-color: #ddffff;
    --sdad-warning-border-color: #f39000;
    --sdad-warning-bg-color: #fff6e0;
    --sdad-drop-down-hover-color: #ccc;
    --progress-bar-red: #D32F2F;
    --progress-bar-yellow: #F9A825;
    --progress-bar-green: #388E3C;
    --text-color-inactive: color-mix(in oklab, var(--text-color) 100%, white);
}


/*remove autofill background chrome, mozilla, edge*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

#wrapper {
    display: none;
}

.sdad-position-sticky {
    position: sticky;
}

.sdad-position-relative {
    position: relative;
}

.sdad-header {
    top: 0;
    z-index: 4;
}

#page-navigator {
    z-index: 2;
}

.sdad-w3-button {
    /* simimlar to w3-button */
    border: none;
    display: inline-block;
    padding: 4px 8px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.sdad-w3-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

/*
Input add ons - icons buttons
 */
.sdad-input-addon {
    border: 1px solid #ccc;
    background-color: var(--grey-button);
    font-size: 14px;
    width: 24px;
    text-decoration: none;
}

.sdad-input-addon i.fa, .sdad-input-addon i.fas {
    width: 100%;
    text-align: center;
}

.sdad-input-addon:hover:not(.w3-disabled) {
    background-color: var(--grey-button-hover);
    color: #000 !important;
}

.sdad-input-addon:not(:first-child) {
    border-left: none;
}

.sdad-input-addon:last-child {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}

.sdad-input-group:focus-within {
    outline: 2px solid #333;
    border-radius: var(--input-border-radius);
}

.sdad-input-addon.w3-disabled {
    color: #aaa;
}

/* for inputs that we want to show with white background event when disabled - e.g. SdadFileField filename */
.sdad-disabled-white {
    opacity: 1 !important;
    background-color: white !important;
}

.sdad-icon-button {
    padding: 1px;
    border: 1px solid #ccc;
    display: inline-block;
    text-align: center;
    background-color: var(--grey-button);
    font-size: 14px;
    width: 24px;
    height: 24px;
}


.sdad-icon-button:hover {
    background-color: var(--grey-button-hover);
    color: #000 !important;
}


.sdad-diergasies-dropdown-content {
    position: absolute;
    right: 16px;
    max-width: 400px;
    z-index: 2;
}

.sdad-diergasies-dropdown-content > div > div > div:last-child .w3-bar-item {
    border-bottom: none !important;
}

.sdad-notifications {
    top: calc(var(--navbar-height) + var(--navbar-border-bottom));
    z-index: 2;
}


/* a white box with margin and padding to use around visual blocks (e.g. around a form) */
.sdad-box {
    margin: 8px;
    padding: 8px;
    background-color: white;
    border: 1px solid var(--input-border-color);
}


/* Styling for field sections (layout.header()) */
h2.sdad-field-section {
    border-bottom: 3px solid var(--medium-blue);
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0 4px 8px;
    color: var(--medium-blue);
    padding: 2px 0;
}

h3.sdad-field-section, h3.sdad-field-section-toggle {
    border-bottom: 2px solid var(--medium-blue);
    font-size: 14px;
    font-weight: 500;
    margin: 20px 0 4px 8px;
    color: var(--medium-blue);
    padding: 2px 0;
}

h4.sdad-field-section, h4.sdad-field-section-toggle {
    font-size: 13px;
    font-weight: 500;
    margin: 12px 0 0 12px;
    color: var(--medium-blue);
    padding: 0;
}

/* in criteria forms we don't want larger font or a line separator for toggles and sections */
.sdad-criteria-form h3.sdad-field-section,
.sdad-criteria-form h3.sdad-field-section-toggle,
.sdad-criteria-form h4.sdad-field-section,
.sdad-criteria-form h4.sdad-field-section-toggle {
    font-size: inherit !important;
    border-bottom: none !important;
}

.sdad-field-section-toggle button {
    border: none;
    background-color: inherit;
    color: inherit;
}

.sdad-panel-container {
    padding: 4px 12px;
}

.w3-panel {
    padding: 4px 12px !important;
}

.sdad-layout-message {
    padding: 4px 0;
    margin: 12px;
}

.sdad-layout-message-panel {
    display: flex;
    align-items: flex-start;
}

.sdad-layout-message.sdad-message-info {
    padding: 4px;
    border: 1px solid var(--sdad-info-border-color);
    background-color: var(--sdad-info-bg-color);
}

.sdad-layout-message.sdad-message-error {
    padding: 4px;
    border: 1px solid var(--sdad-error-border-color);
    background-color: var(--sdad-error-bg-color);
}

.sdad-layout-message.sdad-message-success {
    padding: 4px;
    border: 1px solid var(--sdad-success-border-color);
    background-color: var(--sdad-success-bg-color);
}

.sdad-layout-message.sdad-message-warning {
    padding: 4px;
    border: 1px solid var(--sdad-warning-border-color);
    background-color: var(--sdad-warning-bg-color);
}

.sdad-layout-message.sdad-message-grey {
    padding: 4px;
    border: 1px solid var(--input-border-color);
    background-color: var(--grey-button);
}

.sdad-layout-message > i {
    padding: 4px 8px 0px 4px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}

.sdad-layout-message > div {
    display: inline-block;
}

/* Class for input elements */
.sdad-input {
    padding: 4px;
    display: block;
    width: 100%;
    color: var(--text-color) !important;
    font-weight: 400;
}

.sdad-input-height {
    height: var(--sdad-input-height);
}

.sdad-input::placeholder {
    font-style: italic;
    opacity: 0.7;
    font-weight: 400;
}

.sdad-input-border {
    border-radius: var(--input-border-radius);
    border-color: var(--input-border-color) !important;
    border-style: var(--input-border-style) !important;
}

.sdad-input-border:focus {
    outline: 2px solid #333;
}


.sdad-input-border-k:focus-within {
    /* border focus for kendo components */
    outline: 2px solid #333;
}

.sdad-input-border-k:focus-within .sdad-input-border:focus {
    /* elements inside a kendo component shouldn't have a focus border */
    outline: none;
}


.sdad-field-padding {
    padding: 8px 12px;
}

.sdad-field {
    width: 30em;
    min-height: var(--sdad-field-min-height)
}

.sdad-field-wide {
    max-width: 60em;
    min-width: 30em;
    width: -moz-available;
    width: -webkit-fill-available; /*used for chrome + edge*/
    min-height: var(--sdad-field-min-height)
}

.sdad-field-small {
    width: 30em;
    min-height: var(--sdad-field-small-min-height)
}

.sdad-field-wide-small {
    max-width: 60em;
    min-width: 30em;
    width: -moz-available;
    width: -webkit-fill-available; /*used for chrome + edge*/
    min-height: var(--sdad-field-small-min-height)
}

.sdad-field-full {
    min-width: 30em;
    width: -moz-available;
    width: -webkit-fill-available; /*used for chrome + edge*/
    min-height: var(--sdad-field-min-height)
}

/* labels in sdad-fields */
.sdad-field > label, .sdad-field-wide > label, .sdad-field-small > label, .sdad-field-wide-small > label, .sdad-field-full > label {
    font-weight: 700;
}

.sdad-col {
    width: 30em;
}

.sdad-col-wide {
    max-width: 60em;
    min-width: 30em;
    width: -moz-available;
    width: -webkit-fill-available; /*used for chrome + edge*/
}

.sdad-col-full {
    min-width: 30em;
    width: -moz-available;
    width: -webkit-fill-available; /*used for chrome + edge*/
}


/* free text serving as label in legacy panels - this is actually a hack and should eventually be removed*/
.sdad-field, .sdad-field-wide, .sdad-field-small, .sdad-field-wide-small, .sdad-field-full {
    font-weight: 700;
}

/*
Use this for form-components
Resets font-weight that is set to 700 by .sdad-field
*/
.sdad-field-form-component {
    font-weight: normal;
}

/* similar to w3-radio, w3-check, used for all radio-check buttons */
.sdad-radio, .sdad-check {
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
}

.sdad-radio-large {
    width: 25px;
    height: 25px;
    position: relative;
}

.sdad-radio.w3-disabled, .sdad-check.w3-disabled, .sdad-radio-large.w3-disabled {
    opacity: 1 !important;
}

.sdad-dropdown-button .dropdown-actions-container {
    z-index: 3;
    max-width: 30em;
}

.sdad-dropdown-button .dropdown-actions-container:focus-visible {
    outline: none !important;
}

.sdad-menu-bar .sdad-dropdown-button .dropdown-actions-container {
    margin-left: -16px;
    margin-top: 8px;
}

.sdad-button-bar .sdad-dropdown-button .dropdown-actions-container {
    margin-left: -18px;
    margin-top: 6px;
}

.sdad-dropdown-button .dropdown-actions-container input[type=button] {
    overflow-wrap: anywhere;
}

label:has(.sdad-radio), label:has(.sdad-check) {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
}

/* use for SdadRadioField / SdadYesNoField */
.sdad-radio-field {
    display: block;
    padding-top: 4px;
    font-weight: 400;
}


.total-parent-width {
    width: 100% !important;
}

.sdad-checkbox-list label.sdad-field-small, .sdad-checkbox-list label.sdad-field-wide-small {
    padding-left: 0;
}

/*h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", Helvetica, sans-serif;
}*/

div.wicket-aa ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sdad-autocomplete-item {
    width: 100%;
    display: block;
    padding: 4px 8px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
    cursor: pointer;
}

.sdad-autocomplete-item.selected {
    background-color: var(--sdad-drop-down-hover-color);
}

/*general kendo component rules*/
.k-input:focus-within,
.k-picker:focus-within,
.k-popup,
.k-picker.k-focus,
.k-focus.k-selected,
.k-calendar .k-link,
.k-list-item.k-focus,
.k-list-item:focus,
.k-calendar .k-header {
    box-shadow: none !important;
}

.k-selected,
.k-hover,
.k-calendar td.k-selected .k-link,
.k-calendar td.k-hover .k-link,
.k-button-solid-base,
.k-calendar .k-header {
    background-image: none !important;
}

.k-picker-wrap.k-state-border-down {
    padding-bottom: 0 !important;
}

.k-disabled.w3-disabled {
    cursor: not-allowed !important;
    pointer-events: all;
}


/*kendo-dropdown*/

.k-list {
    font-size: var(--sdad-font-size);
    color: var(--text-color);
}

/*We define this min-height in order to have some control when configuring the dropdown choices panel height
 of the SdadDropDownField2 component
 */
.k-list .k-list-content li span.k-list-item-text {
    min-height: 20px;
}

/*this is explicitly set to auto because, when in autoWidth mode, kendo adds a scrollbar even when the choices panel
does not overflow in the y axis*/
.k-list-content.k-list-scroller {
    overflow-y: auto !important;
}

.k-picker.k-dropdownlist {
    display: flex;
    padding: 0 !important;
}

.k-picker.k-dropdownlist .k-button {
    height: 100%;
    background-color: inherit;
}

li.k-list-item.k-selected,
.mce-menu-item.mce-active {
    border: none;
    background-color: var(--sdad-drop-down-hover-color);
    color: inherit;
}

.k-list-item.k-selected.k-hover,
li.k-list-item.k-selected:hover,
.mce-menu-item.mce-active:hover {
    cursor: default;
    color: var(--text-color);
}

.k-list-item, .k-calendar-container.k-popup {
    border-radius: 0;
}

.k-list-item.k-hover, .k-list-item:hover {
    background-color: var(--sdad-drop-down-hover-color) !important;
}

.k-list-filter input,
.k-list-filter .k-searchbox {
    border-radius: 0 !important;
}

.k-list-filter input {
    border: none !important;
}

/*kendo multiselect*/
.k-multiselect {
    min-height: var(--k-height);
    height: auto !important; /* remove effect from sdad-input-height */
    display: inline-flex !important;
    padding: 0 !important;
}

.k-multiselect .k-input-values {
    float: left !important;
    min-height: var(--k-height);
}

.k-multiselect .k-multiselect-toggle-button {
    float: right !important;
    min-height: var(--k-height);
    height: auto;
    border-radius: 0 8px 8px 0;
    background-color: inherit;
}

.k-multiselect .k-clear-value {
    float: left;
    min-height: var(--k-height);
    height: auto;
}

.k-chip-list > .k-chip {
    border-radius: 2px !important;
    border: none;
    height: 20px;
}


.k-list-scroller ul li.k-state-focused,
.k-time-list::before, .k-time-list::after {
    box-shadow: none;
}

li.k-button, li.k-button:hover {
    background-image: none;
    border: none;
}

.k-multiselect-clearable .k-multiselect-wrap {
    padding-right: 3em !important;
}

/*sdad-datepicker*/
.sdad-datepicker.k-datepicker {
    border-radius: var(--input-border-radius);
    display: flex;
    padding: 0 !important;
}

.sdad-datepicker.k-datepicker input {
    border-radius: 0;
    border: 0 !important;
}

.sdad-datepicker.k-datepicker.k-disabled input, .sdad-timepicker.k-timepicker.k-disabled input {
    background-color: inherit !important;
    opacity: 1 !important;
}

.sdad-datepicker.k-datepicker > button.k-input-button {
    height: 100%;
}

.k-calendar-container.k-popup {
    padding: 0 !important;
}

.k-calendar td.k-state-focused .k-link, .k-calendar .k-today .k-link {
    box-shadow: inset 0 0 2px 1px grey;
    color: var(--gov-green-button);
}

.k-disabled {
    opacity: 1.0 !important;
}

.k-calendar .k-calendar-td.k-today a {
    background-color: var(--grey-button);
}

.k-calendar .k-calendar-td.k-hover a {
    background-color: var(--grey-button-hover);
}

.k-calendar .k-calendar-td.k-selected.k-focus a {
    background-color: var(--gov-green-button) !important;
}

.k-calendar .k-calendar-td.k-selected.k-focus.k-hover a {
    background-color: var(--gov-green-button-hover) !important;
}

.k-calendar .k-content .k-link {
    border-radius: var(--input-border-radius);
}

.k-calendar .k-footer .k-nav-today {
    color: var(--gov-green-button) !important;
}

/*sdad-timepicker*/
.sdad-timepicker.k-timepicker {
    border-radius: var(--input-border-radius);
    display: flex;
    padding: 0 !important;
}

.sdad-timepicker.k-timepicker input {
    height: var(--k-height);
    border: 0 !important;
}

.sdad-timepicker.k-timepicker > button.k-input-button {
    line-height: var(--k-height-1) !important;
    height: var(--k-height);
}

.k-time-header > button.k-time-now,
.k-time-footer > button {
    background-image: none !important;
    border-radius: 0 !important;
}

.k-time-header > button.k-time-now {
    line-height: 1.5em;
    min-width: 75px;
}

.k-timeselector .k-popup {
    width: 250px !important;
}

.k-time-list-wrapper {
    width: calc(250px / 2) !important;
}

.k-time-container > ul {
    width: 100% !important;
}

.k-time-now:before, .k-time-now:after, .k-button:before, .k-button.k-flat, .k-time-now {
    transition: none !important;
}

.k-time-list-wrapper.k-focus {
    box-shadow: none !important;
}

.k-time-list .k-item:hover,
.k-time-header .k-time-now .k-button-text {
    color: var(--gov-green-button)
}

/*sdad-datetimepicker*/
.sdad-datetimepicker {
    display: flex;
}

.sdad-datetimepicker > span.k-input {
    width: 50% !important;
}

.sdad-datetimepicker > span.k-input input {
    width: 50% !important;
}

.sdad-datetimepicker > span:first-child {
    margin-right: 2px;
}

.sdad-datetimepicker > span:last-child {
    margin-left: 2px;
}

.sdad-datetimepicker .sdad-timepicker {
    width: 100% !important;
}

.k-icon {
    color: black !important;
}

.k-calendar-container, .k-popup.k-timeselector {
    box-shadow: none !important;
}

/*tinymce-editor*/
.mce-btn-group {
    border-left: none !important;
}

.mce-tinymce {
    background-color: #fff !important;
}

/*this is for editors without a toolbar*/
.mce-edit-area:first-child {
    border-top: 0;
}

/*sdad-table*/
.sdad-table table {
    display: block;
    overflow-y: hidden;
    box-sizing: border-box;
    float: left;
    height: auto;
    width: 100%;
}

.sdad-table table tbody, .sdad-table table thead, .sdad-table tfoot {
    flex-direction: column;
    display: flex;
}

.sdad-table table tbody {
    max-height: calc(100vh - 20rem);
    overflow: auto;
}

.sdad-table table tr {
    display: flex;
}

.sdad-table table td, .sdad-table table th {
    text-align: left;
}

.sdad-scroll-top-button {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
    width: 38px;
    height: 38px;
    font-size: 24px;
}


.sdad-panel-top-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.
.w3-check.w3-disabled {
    opacity: 1.0;
}

td > div.w3-disabled,
td > div.w3-disabled > a.w3-disabled {
    /*cursor: default;*/
    opacity: 1.0;
}

.w3-disabled:not(.sdad-button-color,.w3-button,td *,input.sdad-datepicker,input.sdad-timepicker,.sdad-disabled-white,.sdad-link-text) {
    opacity: 1 !important;
    background-color: #f3f3f3 !important;
    color: var(--text-color-inactive) !important;
    cursor: default;
}

.w3-disabled:not(.sdad-button-color,.w3-button,td *,input.sdad-datepicker,input.sdad-timepicker,.sdad-disabled-white):hover {
    background-color: #f3f3f3 !important;
    color: var(--text-color-inactive) !important;
    cursor: default;
}

.sdad-text-decoration-none {
    text-decoration: none;
}

.sdad-text-decoration-hover-underline:hover {
    text-decoration: underline;
}

.sdad-white-space-break-spaces {
    white-space: break-spaces;
}

.sdad-white-space-nowrap {
    white-space: nowrap;
}

/* Utility class for 100% width  */
.sdad-full-width {
    width: 100%;
}

/* left aligned text (utility class) */
.sdad-text-left {
    text-align: left;
}

/* center aligned text (utility class) */
.sdad-text-center {
    text-align: center;
}

/* right aligned text (utility class) */
.sdad-text-right {
    text-align: right;
}

/* italic text (utility class) */
.sdad-italic {
    font-style: italic;
}

/* bold text (utility class) */
.sdad-bold {
    font-weight: bold
}

/* uppercase text (utility class) */
.sdad-uppercase {
    text-transform: uppercase;
}


.sdad-flex {
    display: flex;
}

.sdad-flex-direction-column {
    flex-direction: column;
}

.sdad-flex-center {
    display: flex;
    align-items: center;
}

.sdad-flex-1 {
    flex: 1;
}

.sdad-flex-gap-8 {
    gap: 8px;
}

.sdad-align-items-flex-end {
    align-items: flex-end;
}

.sdad-no-rounded-corners-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sdad-no-rounded-corners-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sdad-height-100pct {
    height: 100%;
}

.sdad-no-border-right-important:not(:last-child) {
    border-right: 0 !important;
}

.sdad-input-group > :not(:last-child), .sdad-input-group > :not(:last-child) > a.sdad-icon-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sdad-float-right {
    float: right;
}

.sdad-font-smaller {
    font-size: 85%;
}

.sdad-layout-ctrl > .sdad-overlay-above-when-in-layout {
    position: relative;
    top: -16px;
    height: 0;
}

.sdad-layout-ctrl > .sdad-overlay-above-when-in-layout a:not(:last-of-type) {
    margin-right: 6px;
}

div.sdad-button-bar {
    padding: 8px 12px;
    margin-top: 18px;
}


.sdad-button-bar > .sdad-w3-button,
.k-time-footer .k-button {
    padding: 6px 18px;
    background-color: var(--gov-green-button);
    color: #eee;
    border: none !important;
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
}

.sdad-button-bar > .sdad-w3-button.button-secondary,
.k-time-footer .k-button.k-time-cancel,
.sdad-dropdown-button.sdad-w3-button.button-secondary {
    background-color: var(--gov-button-secondary-bg-color);
    color: var(--text-color);
    border: none !important;
    border-bottom: 1px solid var(--gov-button-secondary-border-bottom-color) !important;
    border-radius: 0 !important;
}

.sdad-button-bar > .sdad-w3-button.button-danger {
    background-color: var(--gov-red-button);
    color: #eee;
    border: none !important;
    border-bottom: 1px solid var(--gov-button-secondary-border-bottom-color) !important;
    border-radius: 0 !important;
}

.sdad-button-bar > .sdad-w3-button:not(:last-child) {
    margin-right: 12px;
}

.sdad-button-bar > .sdad-w3-button:hover,
.k-time-footer .k-button.k-time-accept:hover {
    background-color: var(--gov-green-button-hover) !important;
    color: #eee !important;
    border: none !important;
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
}

.sdad-button-bar > .sdad-w3-button.button-secondary:hover,
.k-time-footer .k-button.k-time-cancel:hover {
    background-color: var(--gov-button-secondary-bg-color-hover) !important;
    color: var(--text-color) !important;
}

.sdad-button-bar > .sdad-w3-button.button-danger:hover {
    background-color: var(--gov-red-button-hover) !important;
    color: #eee !important;
}

/* SdadWicketPanel top menu bar */
.sdad-menu-bar {
    margin: 0 8px 0 8px;
    background-color: white !important;
    font-weight: 700;
    position: relative;

}

.sdad-menu-bar .sdad-w3-button:hover {
    background-color: var(--gov-green-button) !important;
    color: #eee !important;
    border: none !important;
    border-radius: 0 !important;
}

.sdad-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sdad-ul li {
    padding: 4px;
}

.sdad-radio-group-panel li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: inherit;
    font-weight: 400;
}

.sdad-radio-group-panel li:last-child {
    border-bottom: none;
}

.sdad-title-color {
    background-color: var(--gov-dark-blue);
    color: white;
}


.sdad-green-button {
    background-color: var(--gov-green-button) !important;
    color: white !important;
}

.sdad-green-button:hover {
    background-color: var(--gov-green-button-hover) !important;
    color: white !important;
}

.sdad-red-button {
    background-color: var(--gov-red-button) !important;
    color: white !important;
}

.sdad-red-button:hover {
    background-color: var(--gov-red-button-hover) !important;
    color: white !important;
}

/* we need child combinator because sdad-feedback-panel-wrapper contains a feedbackPanel and without it the styling would be applied twice */
.sdad-errors > .sdad-feedback-panel-wrapper, .sdad-errors > .feedbackPanel {
    padding: 8px 16px !important;
    border: 1px solid var(--sdad-error-border-color) !important;
    border-left-width: 6px !important;
    background-color: var(--sdad-error-bg-color) !important;
    color: black;
}

.sdad-success > .sdad-feedback-panel-wrapper, .sdad-success > .feedbackPanel {
    padding: 8px 16px !important;
    border: 1px solid var(--sdad-success-border-color) !important;
    border-left-width: 6px !important;
    background-color: var(--sdad-success-bg-color) !important;
    color: black;
}

.sdad-warnings > .sdad-feedback-panel-wrapper, .sdad-warnings > .feedbackPanel {
    padding: 8px 16px !important;
    border: 1px solid var(--sdad-warning-border-color) !important;
    border-left-width: 6px !important;
    background-color: var(--sdad-warning-bg-color) !important;
    color: black;
}

.sdad-feedback-panel-wrapper {
    display: flex;
    justify-content: space-between;
}

ul.feedbackPanel {
    padding: 0 !important;
    margin: 0 !important;
}

.sdad-feedback-panel-wrapper .sdad-feedback-close {
    float: right;
    margin-block: auto;
}

.sdad-feedback-panel-wrapper .sdad-feedback-close {
    border: 0;
    background: inherit;
}

.sdad-feedback-close:hover {
    cursor: pointer;
}

.sdad-errors .sdad-feedback-panel-wrapper .sdad-feedback-close:hover {
    color: var(--gov-red-button-hover);
}

.sdad-success .sdad-feedback-panel-wrapper .sdad-feedback-close:hover {
    color: var(--gov-green-button-hover);
}

.sdad-warnings .sdad-feedback-panel-wrapper .sdad-feedback-close:hover {
    color: #bb7000; /*darker tone of --sdad-warning-border-color */
}

/* SdadModal styles */

.sdad-modal .sdad-title-color {
    background-color: var(--gov-dark-blue);
    border-bottom: 4px solid var(--gov-light-blue);

}

.sdad-modal {
    width: calc(100vw - 250px);
    min-width: 200px;
}

.sdad-modal-xlarge {
    max-width: 95em;
}

.sdad-modal-large {
    max-width: 63em;
}

.sdad-modal-medium {
    max-width: 48em;
}

.sdad-modal-small {
    max-width: 32em;
}

.sdad-modal-content-container {
    min-height: 40px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.sdad-modal-content {
    padding: 16px;
}

/* remove effects of sdad-box when within modal */
.sdad-modal-content .sdad-box {
    border: none;
    margin: 0;
    padding: 0;
}

.sdad-checkbox-column-width {
    width: 2em !important;
}

.sdad-modal-button-bar {
}

.sdad-modal-button-bar .sdad-w3-button {
    margin: 16px 0;
    padding: 6px 18px;
    color: #eee;
    border: none !important;
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
    float: right;
    margin-left: 8px;
    width: 80px;
}

.w3-modal {
    padding-top: 60px;
}

/* styles to stagger modals when shown on top of each other - see SdadModal.staggerModalPosition()*/
.sdad-modal-1 .w3-modal .w3-modal-content {
    top: 20px !important;
    left: 20px !important;
}

.sdad-modal-2 .w3-modal .w3-modal-content {
    top: 40px !important;
    left: 40px !important;
}

.sdad-modal-3 .w3-modal .w3-modal-content {
    top: 60px !important;
    left: 60px !important;
}

/* End SdadModal styles */

.sdad-dashboard-card {
    min-height: 200px;
    max-height: 200px;
}

.sdad-dashboard-card > .sdad-dashboard-card-button-container > a {
    width: 100%;
    border-radius: 0;
}

.sdad-dashboard-card header .w3-badge {
    background-color: var(--gov-light-blue);
    font-size: 60%;
    font-weight: 700;
    padding: 4px 10px;
}

.sdad-dashboard-card-title {
    font-size: 16px;
    font-weight: 600;
}

.sdad-overflow-y-auto {
    overflow-y: auto;
}

.sdad-vertical-align-middle {
    vertical-align: middle;
}

.sdad-table-2 td.sdad-vertical-align-middle, .sdad-table-2 th.sdad-vertical-align-middle {
    vertical-align: middle;
}

.sdad-dashboard-card-bg > .w3-card-2.sdad-dashboard-card {
    position: relative;
}

.sdad-dashboard-card-bg > .w3-card-2.sdad-dashboard-card::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: block;
    position: absolute;
    bottom: 24px;
    right: 7px;
    font-size: 60px;
    opacity: 8%;
}

.sdad-dashboard-card-bg.sdad-card-deletion > .w3-card-2.sdad-dashboard-card::before {
    content: "\f057";
}

.sdad-dashboard-card-bg.sdad-card-expiration > .w3-card-2.sdad-dashboard-card::before {
    content: "\f2f5";
}

.sdad-dashboard-card-bg.sdad-card-approval > .w3-card-2.sdad-dashboard-card::before {
    content: "\f164";
}

.sdad-padding-left-8 {
    padding-left: 8px;
}

.sdad-padding-left-20 {
    padding-left: 20px;
}

.sdad-padding-right-8 {
    padding-right: 8px;
}

.sdad-border-left-white-1 {
    border-left: 1px solid white;
}

.sdad-border-right-white-1 {
    border-right: 1px solid white;
}

.sdad-front-page-environment {
    font-size: 120%;
    color: #880000;
}

.sdad-link-text.w3-disabled {
    opacity: 1;
    text-decoration: none;
}

nav.w3-bar div:last-child {
    border-right: none;
}

/* https://thinkdobecreate.com/articles/css-animating-newly-added-element/ */
.sdad-ajax-show {
    animation: show 400ms 50ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
    /* Prestate */
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: top center;
}

@keyframes show {
    100% {
        opacity: 1;
        transform: none;
    }
}


.sdad-progressbar-content.progress-bar-yellow {
    background-color: var(--progress-bar-yellow);
}

.sdad-progressbar-content.progress-bar-green {
    background-color: var(--progress-bar-green);
}

.sdad-progressbar-content.progress-bar-red {
    background-color: var(--progress-bar-red);
}

.sdad-cursor-pointer {
    cursor: pointer;
}

.w3-disabled .in-place-text-input-icon {
    display: none;
}

.wicketDebugBar {
    z-index: 1000;
}

.cogs {
    position: relative;
    margin-inline: auto;
    width: 200px;
    height: 200px;
}

.cogs > .cog {
    color: var(--gov-dark-blue);
    position: absolute;
    animation-duration: 6s;
}

.cogs > .cog-1 {
    top: 85px;
    left: 116px;
}

.cogs > .cog-2 {
    top: 8px;
    left: 124px;
}

.cogs > .cog-3 {
    top: 20px;
    left: 0;
}


.cog-spin-reverse {
    animation-direction: reverse;
}