:root{
    /*--navbar-width: 1rem;*/

}

html, body {
    background: white;
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 10pt;
}


html {
    overflow-y: hidden; /* Add this line */
    /*width: var(--navbar-width);*/
}



.font-serif {
    font-family: 'HCo Chronicle Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}

/*==============================*/
/*  Buttons                     */
/*==============================*/
.ssy-btn, .btn {
    /*Pad*/
    display: inline-block;
    vertical-align: middle;
    padding: 0.375rem 0.75rem;
}

.ssy-btn, .btn,
.ssy-btn-main, .btn-primary,
.ssy-btn-dark, .btn-info,
.ssy-btn-light, .btn-secondary,
.ssy-btn-green, .btn-success,
.ssy-btn-yellow, .btn-warning,
.ssy-btn-red, .btn-danger,
.ssy-btn-grey, .btn-inactive,
.ssy-btn-white {
    /*FONT*/
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    /**/
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*Default Colours*/
    color: #163E9F;
    background-color: #FFFFFF;
    border: 1px solid #163E9F;
    border-radius: 9999px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active,
.ssy-btn:hover, .btn:hover {
    color: #FFFFFF;
    background-color: #163E9F;
    border: 1px solid #163E9F;
}
.btn-check:checked + .btn path, .btn.active path, .btn.show path, .btn:first-child:active path, :not(.btn-check) + .btn:active path,
.ssy-btn:hover path, .btn:hover path{
    fill: #FFFFFF !important;
}
/*Checked/Active*/
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: #FFFFFF;
    background-color: #163E9F;
    border: 1px solid #163E9F;
}
/*Focus Visible*/
.btn-check:checked + .btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check) + .btn:active:focus-visible,
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #405864;
}

/*Main*/
.ssy-btn-main, .btn-primary {
    color: #FFFFFF;
    background-color: #163E9F;
    border: 1px solid #163E9F;
}

.ssy-btn-main:hover, .btn-primary:hover,
.btn-check:checked + .btn-primary.btn, .btn-primary.btn.active, .btn-primary.btn.show, .btn-primary.btn:first-child:active, :not(.btn-check) + .btn-primary.btn:active {
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #000061;
}

.ssy-btn-main:hover path, .btn-primary:hover path,
.btn-check:checked + .btn-primary.btn path, .btn-primary.btn.active path, .btn-primary.btn.show path, .btn-primary.btn:first-child:active path, :not(.btn-check) + .btn-primary.btn:active path {
    fill: #000061 !important;
}

.ssy-btn-main-icon {
    font-size: 15px;
    opacity: 0.9;
}
/*Dark*/
.ssy-btn-dark, .btn-info {
    color: #FFFFFF;
    background-color: #000061;
    border: 1px solid #000061;
}

.btn-check:checked + .btn-info.btn, .btn-info.btn.active, .btn-info.btn.show, .btn-info.btn:first-child:active, :not(.btn-check) + .btn-info.btn:active,
.ssy-btn-dark:hover, .btn-info:hover {
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #000061;
}

.btn-check:checked + .btn-info.btn path, .btn-info.btn.active path, .btn-info.btn.show path, .btn-info.btn:first-child:active path, :not(.btn-check) + .btn-info.btn:active path,
.ssy-btn-dark:hover path, .btn-info:hover path {
    fill: #000061 !important;
}
/*Light*/
.ssy-btn-light, .btn-secondary {
    color: #FFFFFF;
    background-color: #009DC9;
    border: 1px solid #009DC9;
}

.btn-check:checked + .btn-secondary.btn, .btn-secondary.btn.active, .btn-secondary.btn.show, .btn-secondary.btn:first-child:active, :not(.btn-check) + .btn-secondary.btn:active,
.ssy-btn-light:hover, .btn-secondary:hover {
    background-color: #FFFFFF;
    color: #009DC9;
    border: 1px solid #009DC9;
}

.btn-check:checked + .btn-secondary.btn path, .btn-secondary.btn.active path, .btn-secondary.btn.show path, .btn-secondary.btn:first-child:active path, :not(.btn-check) + .btn-secondary.btn:active path,
.ssy-btn-light:hover path, .btn-secondary:hover path {
    fill: #009DC9 !important;
}
/*Grey - Disabled */
.ssy-btn-grey, .btn-inactive, .btn:disabled {
    color: #B5CBD6;
    background-color: #405864;
    border: 1px solid #405864;
    /*Make it look like its not clickable*/
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.btn-check:checked + .btn-inactive.btn, .btn-inactive.btn.active, .btn-inactive.btn.show, .btn-inactive.btn:first-child:active, :not(.btn-check) + .btn-inactive.btn:active,
.ssy-btn-grey:hover, .btn-inactive:hover {
    background-color: #405864;
    color: #B5CBD6;
    border: 1px solid #405864;
}

/*White*/
.ssy-btn-white {
    color: #000061;
    background-color: #FFFFFF;
    border: 1px solid #000061;
}

.ssy-btn-white:hover {
    background-color: #000061;
    color: #FFFFFF;
    border: 1px solid #000061;
}

.ssy-btn-white:hover path {
    fill: #FFFFFF;
}
/*Green*/
.ssy-btn-green, .btn-success {
    background-color: #91A527;
    color: #FFFFFF;
    border: 1px solid #91A527;
}

.btn-check:checked + .btn-success.btn, .btn-success.btn.active, .btn-success.btn.show, .btn-success.btn:first-child:active, :not(.btn-check) + .btn-success.btn:active,
.ssy-btn-green:hover, .btn-success:hover {
    background-color: #FFFFFF;
    color: #91A527;
    border: 1px solid #91A527;
}

.btn-check:checked + .btn-success.btn path, .btn-success.btn.active path, .btn-success.btn.show path, .btn-success.btn:first-child:active path, :not(.btn-check) + .btn-success.btn:active path,
.ssy-btn-green:hover path, .btn-success:hover path {
    fill: #91A527 !important;
}
/*Yellow*/
.ssy-btn-yellow, .btn-warning {
    background-color: #F7A506;
    color: #FFFFFF;
    border: 1px solid #F7A506;
}

.btn-check:checked + .btn-warning.btn, .btn-inactive.btn.active, .btn-warning.btn.show, .btn-warning.btn:first-child:active, :not(.btn-check) + .btn-warning.btn:active,
.ssy-btn-yellow:hover, .btn-warning:hover {
    background-color: #FFFFFF;
    color: #F7A506;
    border: 1px solid #F7A506;
}

.btn-check:checked + .btn-warning.btn path, .btn-inactive.btn.active path, .btn-warning.btn.show path, .btn-warning.btn:first-child:active path, :not(.btn-check) + .btn-warning.btn:active path,
.ssy-btn-yellow:hover path, .btn-warning:hover path {
    fill: #F7A506 !important;
}
/*Red*/
.ssy-btn-red, .btn-danger {
    background-color: #DB303A;
    color: #FFFFFF;
    border: 1px solid #DB303A;
}

.btn-check:checked + .btn-danger.btn, .btn-danger.btn.active, .btn-danger.btn.show, .btn-danger.btn:first-child:active, :not(.btn-check) + .btn-danger.btn:active,
.ssy-btn-red:hover, .btn-danger:hover {
    background-color: #FFFFFF;
    color: #DB303A;
    border: 1px solid #DB303A;
}

.btn-check:checked + .btn-danger.btn path, .btn-danger.btn.active path, .btn-danger.btn.show path, .btn-danger.btn:first-child:active path, :not(.btn-check) + .btn-danger.btn:active path,
.ssy-btn-red:hover path, .btn-danger:hover path {
    fill: #DB303A !important;
}

.ssy-btn-no-style {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
/*==================================================*/
/*  Radio/Select/BlazorBootstrap Tabs (Pills Type)  */
/*==================================================*/
.ssy-radio-main {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3px;
    overflow: auto;
}

.ssy-radio-main input, .ssy-radio-vertical input {
    position: relative;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    visibility: hidden;
    overflow: hidden;
}

.ssy-radio-main label,
.nav.nav-pills > button.nav-link,
.ssy-tablist-main > button.ssy-btn {
    background-color: #E9EFF9;
    color: #000061;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
    border-radius: 0;
}

.ssy-radio-main label:hover,
.ssy-radio-vertical label:hover,
.nav.nav-pills > button.nav-link:hover,
.ssy-tablist-main > button.ssy-btn:hover {
    cursor: pointer;
    background-color: white;
    color: #000061;
}

.ssy-radio-main input:disabled + label,
.ssy-radio-vertical input:disabled + label,
.nav.nav-pills > button.nav-link:disabled,
.ssy-tablist-main > button.ssy-btn:disabled {
    cursor: not-allowed;
    background-color: white;
    color: rgba(0, 0, 0, 0.3);
}

.ssy-radio-main input:checked + label,
.ssy-radio-vertical input:checked + label,
.nav.nav-pills > button.nav-link.active,
.ssy-tablist-main > button.ssy-btn[tabindex = "0"] {
    background-color: #163E9F;
    color: white;
    cursor: pointer;
}

.ssy-radio-main label:first-of-type,
.nav.nav-pills:not(.flex-column) > button.nav-link:first-of-type,
.ssy-tablist-main > button.ssy-btn:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ssy-radio-main label:last-of-type,
.nav.nav-pills:not(.flex-column) > button.nav-link:last-of-type,
.ssy-tablist-main > button.ssy-btn:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* hide tabpanels when not seleted */
.ssy-tabpanel-main > div[role="tabpanel"][tabindex = "-1"]{
    display: none;
}

.ssy-radio-vertical {
    display: flex;
    flex-wrap: wrap;
    /*margin-bottom: 3px;*/
    overflow: auto;
    flex-direction: column
}

.ssy-radio-vertical label {
    background-color: #E9EFF9;
    color: #000061;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 8px;
    margin-top: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.ssy-radio-vertical label:first-of-type {
    border-radius: 4px 4px 0 0;
}

.ssy-radio-vertical label:last-of-type {
    border-radius: 0 0 4px 4px;
}

select.ssy-btn-main {
    padding: 5px;
}

.ssy-dropdown-white {
    background-color: #f3f3f3f0;
    border: 1px solid #B5CBD6;
    border-radius: 4px;
    padding: 3px 15px 3px 15px;
}

.ssy-select-long {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    overflow: hidden;
}

.ssy-select-long.overflow-show {
    overflow: auto;
}

.ssy-select-long option {
    padding: 0.2rem;
}

.ssy-select-long option:checked {
    background-color: #000061;
    color: #FFFFFF;
}

.ssy-select-long option:hover {
    background-color: #E9EFF9;
    color: #000000;
}

.ssy-select-long-white {
    background-color: #FFFFFF;
    color: #000061;
    outline: 1px solid #000061;
}

.ssy-select-long-white.valid.modified:not([type=checkbox]) {
    outline: 1px solid #000061;
}

/*==============================*/
/*  Tab bar                     */
/*==============================*/
.ssy-tab-grey .nav-link, .ssy-tab-grey-blue .nav-link {
    background-color: #E9EFF9;
    color: #000061;
    border: 1px solid #c7ced9;
}

.ssy-tab-grey .nav-link:hover, .ssy-tab-grey-blue .nav-link:hover {
    background-color: white;
    color: #000061;
}

.ssy-tab-grey-blue .active {
    background-color: #163E9F !important;
    color: white !important;
}



/*==============================*/
/*  Headers                     */
/*==============================*/
h1, .ssy-h1 {
    font-family: Georgia, Cambria, 'Times New Roman', Times, serif; 
    /*'HCo Chronicle Display', ui-serif, -- Removing this because it was not working for 2 years and nobody said anything.  Georgia looks 100% the same just sized different. */
    font-size: 3em;
    color: #000061;
    display: inherit;
    margin: 5px 0 5px 0;
    font-weight: normal;
    line-height: 1;
}

h2, .ssy-h2 {
    font-family: 'Soehne breit', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 2em;
    color: #009DC9;
    display: inherit;
    margin: 0;
    font-weight: 400;
    line-height: 1;
}

.ssy-h2-bold {
    font-weight: 700;
}

h3, .ssy-h3 {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.5em;
    color: #009DC9;
    display: inherit;
    margin: 0;
    font-weight: 700;
    line-height: 1;
}

h4, .ssy-h4 {
    font-family: 'Soehne', 'Franklin Gothic Book', Arial, sans-serif;
    font-size: 1.5em;
    color: #000061;
    display: inherit;
    margin: 0;
    font-weight: normal;
    line-height: 1;
}

/*==============================*/
/*  Colour combinations         */
/*==============================*/

/*primary palette colours*/
.ssy-colour-dw {
    background-color: #000061;
    color: white;
}

.ssy-colour-lw {
    background-color: #009DC9;
    color: white;
}

.ssy-colour-ld {
    background-color: #009DC9;
    color: #000061;
}

.ssy-colour-wd {
    background-color: white;
    color: #000061;
}

.ssy-colour-wl {
    background-color: white;
    color: #009DC9;
}

.ssy-colour-mw {
    background-color: #163e9f;
    color: white;
}
.ssy-colour-wm {
    background-color: white;
    color: #163e9f;
}

/*other chart palette colours*/
.ssy-colour-brightblue-white {
    background-color: #0087CB; /* Bright Blue */
    color: white;
}

.ssy-colour-vividpink-white {
    background-color: #EB3871; /* Vivid Pink */
    color: white;
}

.ssy-colour-tealgreen-white {
    background-color: #01A39E; /* Teal Green */
    color: white;
}

.ssy-colour-goldenyellow-white {
    background-color: #F7A506; /* Golden Yellow */
    color: white;
}

.ssy-colour-aquamarine-white {
    background-color: #24DEBD; /* Aquamarine */
    color: white;
}

.ssy-colour-brightorange-white {
    background-color: #FF670F; /* Bright Orange */
    color: white;
}

.ssy-colour-royalpurple-white {
    background-color: #752FD0; /* Royal Purple */
    color: white;
}

.ssy-colour-lemonyellow-white {
    background-color: #FFD025; /* Lemon Yellow */
    color: white;
}

.ssy-colour-cyanblue-white {
    background-color: #009DCA; /* Cyan Blue */
    color: white;
}

.ssy-colour-slategray-white {
    background-color: #405864; /* Slate Gray */
    color: white;
}

.ssy-colour-lightblue-gray-white {
    background-color: #B5CBD6; /* Light Blue-Gray */
    color: white;
}

.ssy-colour-crimsonred-white {
    background-color: #DB303A; /* Crimson Red */
    color: white;
}

.ssy-colour-olivegreen-white {
    background-color: #91A527; /* Olive Green */
    color: white;
}


/*==============================*/
/*  Table Items                 */
/*==============================*/

table {
    border-collapse: collapse;
}

table .fixed {
    table-layout: fixed;
}

table .fixed td {
    overflow: hidden;
}

.table-th-notbold th {
    font-weight: normal;
}

.table-th-dw th, .ssy-table-dw th, .quickgrid[theme=ssy-table-dw] thead, .quickgrid[theme=ssy-table-dw] .col-title {
    font-weight: normal;
    background-color: #000061;
    color: white;
}

.table-th-lw th, .ssy-table-lw th, .quickgrid[theme=ssy-table-lw] thead , .quickgrid[theme=ssy-table-lw] .col-title {
    font-weight: normal;
    background-color: #009DC9;
    color: white;
}


.table-th-ld th, .ssy-table-ld th, .quickgrid[theme=ssy-table-ld] thead, .quickgrid[theme=ssy-table-ld] .col-title {
    font-weight: normal;
    background-color: #009DC9;
    color: #000061;
}

.table-th-wd th, .ssy-table-wd th, .quickgrid[theme=ssy-table-wd] thead, .quickgrid[theme=ssy-table-wd] .col-title {
    font-weight: normal;
    background-color: white;
    color: #000061;
}

.table-th-wl th, .ssy-table-wl th, .quickgrid[theme=ssy-table-wl] thead, .quickgrid[theme=ssy-table-wl] .col-title {
    font-weight: normal;
    background-color: white;
    color: #009DC9;
}

.table-th-mw th, .ssy-table-mw th, .quickgrid[theme=ssy-table-mw] thead , .quickgrid[theme=ssy-table-mw] .col-title {
    font-weight: normal;
    background-color: #163E9F;
    color: white;
}


.table-th-wm th, .ssy-table-wm th, .quickgrid[theme=ssy-table-wm] thead, .quickgrid[theme=ssy-table-wm] .col-title {
    font-weight: normal;
    background-color: white;
    color: #163E9F;
}

.table-striped tbody, .ssy-table-dw tbody, .ssy-table-lw tbody, 
.ssy-table-ld tbody, .ssy-table-wd tbody, .ssy-table-wl tbody, .ssy-table-wm tbody, .ssy-table-mw tbody,
.quickgrid[theme=ssy-table-dw] tbody, .quickgrid[theme=ssy-table-lw] tbody, 
.quickgrid[theme=ssy-table-mw] tbody, .quickgrid[theme=ssy-table-wm] tbody,
.quickgrid[theme=ssy-table-ld] tbody, .quickgrid[theme=ssy-table-wd] tbody, .quickgrid[theme=ssy-table-wl] tbody {
    line-height: 1.2em;
}

.table-striped tbody tr:nth-of-type(even), 
.ssy-table-dw tbody tr:nth-of-type(even), .ssy-table-lw tbody tr:nth-of-type(even), 
.ssy-table-ld tbody tr:nth-of-type(even), .ssy-table-wd tbody tr:nth-of-type(even), .ssy-table-wl tbody tr:nth-of-type(even),
.ssy-table-wm tbody tr:nth-of-type(even), .ssy-table-mw tbody tr:nth-of-type(even),
.quickgrid[theme=ssy-table-dw] tbody tr:nth-of-type(even):has(td > *), .quickgrid[theme=ssy-table-lw] tbody tr:nth-of-type(even),
.quickgrid[theme=ssy-table-mw] tbody tr:nth-of-type(even):has(td > *), .quickgrid[theme=ssy-table-wm] tbody tr:nth-of-type(even),
.quickgrid[theme=ssy-table-ld] tbody tr:nth-of-type(even):has(td > *), .quickgrid[theme=ssy-table-wd] tbody tr:nth-of-type(even), .quickgrid[theme=ssy-table-wl] tbody tr:nth-of-type(even) {
    background-color: #E9EFF9;
    color: unset;
}

.table-striped tbody tr:nth-of-type(odd),
.ssy-table-dw tbody tr:nth-of-type(odd), .ssy-table-lw tbody tr:nth-of-type(odd),
.ssy-table-ld tbody tr:nth-of-type(odd), .ssy-table-wd tbody tr:nth-of-type(odd), .ssy-table-wl tbody tr:nth-of-type(odd),
.ssy-table-wm tbody tr:nth-of-type(odd), .ssy-table-mw tbody tr:nth-of-type(odd),
.quickgrid[theme=ssy-table-dw] tbody tr:nth-of-type(odd):has(td > *), .quickgrid[theme=ssy-table-lw] tbody tr:nth-of-type(odd):has(td > *),
.quickgrid[theme=ssy-table-mw] tbody tr:nth-of-type(odd):has(td > *), .quickgrid[theme=ssy-table-wm] tbody tr:nth-of-type(odd):has(td > *),
.quickgrid[theme=ssy-table-ld] tbody tr:nth-of-type(odd):has(td > *), .quickgrid[theme=ssy-table-wd] tbody tr:nth-of-type(odd):has(td > *), .quickgrid[theme=ssy-table-wl] tbody tr:nth-of-type(odd):has(td > *) {
    background-color: white;
    color: unset;
}

.table-hover tbody tr:hover,
.ssy-table-dw tbody tr:hover, .ssy-table-lw tbody tr:hover,
.ssy-table-ld tbody tr:hover, .ssy-table-wd tbody tr:hover, .ssy-table-wl tbody tr:hover,
.ssy-table-wm tbody tr:hover, .ssy-table-mw tbody tr:hover,
.quickgrid[theme=ssy-table-dw] tbody tr:has(td > *):hover, .quickgrid[theme=ssy-table-lw] tbody tr:has(td > *):hover,
.quickgrid[theme=ssy-table-mw] tbody tr:has(td > *):hover, .quickgrid[theme=ssy-table-wm] tbody tr:has(td > *):hover,
.quickgrid[theme=ssy-table-ld] tbody tr:has(td > *):hover, .quickgrid[theme=ssy-table-wd] tbody tr:has(td > *):hover, .quickgrid[theme=ssy-table-wl] tbody tr:has(td > *):hover {
    /*    color: #212529;*/
    background-color: #B5CBD6;
}

.ssy-table-dw.ssy-table-padding td, .ssy-table-dw.ssy-table-padding th,
.ssy-table-lw.ssy-table-padding td, .ssy-table-lw.ssy-table-padding th,
.ssy-table-ld.ssy-table-padding td, .ssy-table-ld.ssy-table-padding th, 
.ssy-table-wd.ssy-table-padding td, .ssy-table-wd.ssy-table-padding th,
.ssy-table-wl.ssy-table-padding td, .ssy-table-wl.ssy-table-padding th,
.ssy-table-wm.ssy-table-padding td, .ssy-table-wm.ssy-table-padding th,
.ssy-table-mw.ssy-table-padding td, .ssy-table-mw.ssy-table-padding th,
.datatablerowpadding /* <- This is being used by quite a few tables */
{ 
    padding: 5px 15px 5px 5px;
}

.pointer_hover:hover {
    cursor: pointer;
}

.quickgrid[theme=ssy-table-lw] table {
    table-layout: fixed;
    border-collapse: collapse;
}


.quickgrid[theme=ssy-table-dw] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-dw] .col-sort-asc .sort-indicator,
.quickgrid[theme=ssy-table-mw] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-mw] .col-sort-asc .sort-indicator,
.quickgrid[theme=ssy-table-lw] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-lw] .col-sort-asc .sort-indicator{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');
}

.quickgrid[theme=ssy-table-ld] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-ld] .col-sort-asc .sort-indicator,
.quickgrid[theme=ssy-table-wd] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-wd] .col-sort-asc .sort-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000061"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');
}

.quickgrid[theme=ssy-table-wl] .col-sort-desc .sort-indicator, .quickgrid[theme=ssy-table-wl] .col-sort-asc .sort-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#009DC9"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');
}

.quickgrid[theme=ssy-table-dw] th .col-options-button, .quickgrid[theme=ssy-table-lw] th .col-options-button,
.quickgrid[theme=ssy-table-mw] th .col-options-button {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.5 0 21 24" stroke="white" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>') center center / 1rem no-repeat;
}

.quickgrid[theme=ssy-table-dw] th.search-column .col-options-button, .quickgrid[theme=ssy-table-lw] th.search-column .col-options-button,
.quickgrid[theme=ssy-table-mw] th.search-column .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}

.quickgrid > tbody > tr > td.grid-cell-placeholder:after {
    content: '\2026'; /* &hellip; */
    opacity: 0;
}



/*==============================*/
/*  Other objects               */
/*==============================*/

.ssy-input-grey {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    color: #212529;
    padding: .375rem .75rem;
    line-height: 1.1rem;
}

.processing-rings,
.processing-rings:after {
    box-sizing: border-box;
}

.processing-rings {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: #000061;
}

.processing-rings:after {
    content: " ";
    display: block;
    width: 1em;
    height: 1em;
    margin: 0;
    border-radius: 50%;
    border: 2px solid #003F9A;
    border-color: #003F9A transparent #003F9A transparent;
    animation: processing-rings-animation 1.2s linear infinite;
}

@keyframes processing-rings-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.date-select-simple {
    padding: 5px;
}

.date-select-simple .date-arrows {
    cursor: pointer;
    text-align: center;
    padding: 0 15px 0 15px;
}

.date-select-simple .date-arrows:hover {
    color: #009DC9;
    cursor: pointer;
}


.elementToFadeOutAndIn {
    -webkit-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
}


@-webkit-keyframes fadeinout {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }
}

@keyframes fadeinout {
    0%, 100% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }
}

.hidden-item {
    visibility: hidden;
}

.visible-item {
    visibility: visible;
}

.raised {
    box-shadow: 2px 2px 2px 0 #b9bfc5;
}

.raised:active, .raised.active {
    box-shadow: none;
    transform: translate(0, 3px);
}

.raised:hover {
    box-shadow: 3px 3px 3px 0 #b9bfc5;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin-top: calc(var(--bs-modal-margin) * 3);
    }
}

.form-control:focus {
    color: inherit;
    background-color: inherit;
    border-color: unset;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #000061;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #000061;
    color: #FFFFFF;
    opacity: 1;
}

.form-control:disabled+label, .form-control[readonly]+label{
    color: #FFFFFF;
}

/* https://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit */
select.form-control{
    /* https://www.svgrepo.com/svg/533653/chevron-down */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 2rem 1.5rem;
    background-position: right center;
    background-clip: border-box;
    cursor: pointer;
}

/*    MODAL   */
/* ========== */
/*.modal-backdrop {
    z-index: 99;*/ /*to do with this (fixed nav bar top) */
/*}
.ssyPopup {
    z-index:100;
}*/



.ssyPopupTitle {
    display: grid;
    grid-template-columns: 4.0rem auto 1.6rem;
    gap: 5px;
    padding: 5px;
    /*width: 100%;*/
    background: #000061;
    /*background-image: linear-gradient(to bottom right,#2e2718, #7d6838);*/
    color: white !important;
    /* Overwrite color of bootstrap */
    font-size: 1.25rem;
}

.ssyPopupTitle img {
    padding: 0;
    height: 1.6rem;
    max-width: 50px;
    max-height: 50px;
}

.ssyPopupTitle button {
    display: inline-block;
    border: none;
    background-color: unset;
    color: white;
    padding: 0;
    font-size: 1.25rem;
    cursor: pointer;
}

.ssyPopupTitle button:hover {
    color: navajowhite;
}

.ssyPopupFooter button {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #000061;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-color: #000061;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.ssyPopupFooter button:hover {
    background-color: #000061;
    color: white;
}

.modal-content {
    width: unset;
    max-width: 100%;
    max-height: 100%;
}

.ssy-overflow-auto, .ssy-overflow-auto-lw, .ssy-overflow-auto-dw,.ssy-overflow-auto-center {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.ssy-overflow-auto-center {
    scrollbar-gutter: stable both-edges;
}

.ssy-overflow-auto-lw {
    scrollbar-color: #009DC9 transparent;
}

.ssy-overflow-auto-dw {
    scrollbar-color: #000061 transparent;
}


/*    DIALOG   */
/* ========== */
.ssyDialog .ssyDialogHeader {
    /*background: linear-gradient(to right, #003F9A, #0092D1, #1544A3);*/
    background: #000061;
    color: white !important;
}

.ssyDialog .ssyDialogHeader > .modal-title {
    position: relative;
    display: inline-block;
    margin-left: 70px;
}

.ssyDialog .ssyDialogHeader > .modal-title::before {
    position: absolute;
    width: 63.13px;
    left: -70px;
    height: 25px;
    background: url("../assets/Logo/SSYLogo_1Line_White_S.png") 0 0 no-repeat;
    background-size: 100% 100%;
    display: block;
    content: "";
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}


/* =============================
    Checkbox
    ============================
*/
.ssy-checkbox-dot {
    appearance: none;
    position: relative;
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    border-radius: 100%;
    font-size: inherit;
    background-color: #163E9F;
    cursor: pointer;
}


.ssy-checkbox-slider {
    appearance: none;
    position: relative;
    display: inline-block;
    height: 1em;
    width: 2em;
    vertical-align: middle;
    border-radius: 1em;
    transition: 0.2s linear background;
    font-size: inherit;
    background-color: #163E9F;
    cursor: pointer;
}

    .ssy-checkbox-slider.red, .ssy-checkbox-dot.red {
        background-color: #DB303A;
    }

    .ssy-checkbox-slider.lightblue, .ssy-checkbox-dot.lightblue {
        background-color: #0087CB;
    }

    .ssy-checkbox-slider.lighterblue, .ssy-checkbox-dot.lighterblue {
        background-color: #009DC9;
    }

    .ssy-checkbox-slider.darkblue, .ssy-checkbox-dot.darkblue {
        background-color: #163E9F;
    }

    .ssy-checkbox-slider.darkerblue, .ssy-checkbox-dot.darkerblue {
        background-color: #000061;
    }

    .ssy-checkbox-slider.orange, .ssy-checkbox-dot.orange {
        background-color: #FF670F;
    }

    .ssy-checkbox-slider.gold, .ssy-checkbox-dot.gold {
        background-color: #F7A506;
    }

    .ssy-checkbox-slider.green, .ssy-checkbox-dot.green {
        background-color: #01A39E;
    }

    .ssy-checkbox-slider.olive, .ssy-checkbox-dot.olive {
        background-color: #91A527;
    }

    .ssy-checkbox-slider.darkgrey, .ssy-checkbox-dot.darkgrey {
        background-color: #405864;
    }

    .ssy-checkbox-slider.lightgrey, .ssy-checkbox-dot.lightgrey {
        background-color: #B5CBD6;
    }

.ssy-checkbox-dot::before {
    content: '';
    display: block;
    transition: 0.25s linear transform;
}

.ssy-checkbox-slider::before {
    content: '';
    display: block;
    width: 0.8em;
    height: 0.8em;
    background-color: #fff;
    border-radius: 1em;
    position: absolute;
    top: 0.1em;
    left: 0.1em;
    box-shadow: 0px 1px 3px #0003;
    transition: 0.2s linear transform;
    transform: translateX(0rem);
}

.ssy-checkbox-dot:checked::before {
    height: 64%;
    width: 30%;
    border-bottom: 0.17em solid white;
    border-right: 0.17em solid white;
    transform: rotate(40deg);
    /*margin-left: 25%;*/
    margin: 15% 0 0 30%;
}

.ssy-checkbox-dot:not(:checked) {
    background-color: white;
    border: 2px solid lightgrey;
}

.ssy-checkbox-slider:not(:checked) {
    background-color: lightgrey;
}

.ssy-checkbox-slider:checked::before {
    transform: translateX(1em);
}

.ssy-checkbox-dot:focus, .ssy-checkbox-slider:focus {
    outline: 2px solid;
    outline-color: #163E9F;
    outline-offset: 1px;
}

/* =============================
    https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-9.0#reflect-the-server-side-connection-state-in-the-ui
    
    Change the components-reconnect-modal
    ============================
*/

/*#components-reconnect-modal .components-reconnect-overlay {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    z-index: 10000;*/
/*    display: none;*/
/*    overflow: hidden;*/
/*    animation: components-reconnect-fade-in;*/
/*}*/

/*#components-reconnect-modal.components-reconnect-show .components-reconnect-overlay {*/
/*    display: block;*/
/*}*/

/*.components-reconnect-overlay::before {*/
/*    content: '';*/
/*    background-color: rgba(0, 0, 0, 0.4);*/
/*    position: absolute;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    animation: components-reconnect-fadeInOpacity 0.5s ease-in-out;*/
/*    opacity: 1;*/
/*}*/

/*#components-reconnect-modal .components-reconnect-header{*/
/*    display: grid;*/
/*    grid-template-columns: 4.0rem auto 4.0rem;*/
/*    gap: 5px;*/
/*    padding: 5px;*/
/*    background: #000061;*/
/*    color: white;*/
/*    font-size: 1.25rem;*/
/*    width: 100%;*/
/*    border-top-left-radius: 0.5rem;*/
/*    border-top-right-radius: 0.5rem;*/
/*    font-weight: bold;*/
/*    font-family: "Soehne", "Franklin Gothic Book", "Arial", sans-serif;*/
/*}*/

/*#components-reconnect-modal .components-reconnect-header img {*/
/*    padding: 0;*/
/*    height: 1.6rem;*/
/*    max-width: 50px;*/
/*    max-height: 50px;   */
/*}*/

/*.components-reconnect-overlay p {*/
/*    margin: 0;*/
/*    text-align: center;*/
/*}*/

/*#components-reconnect-modal.components-reconnect-failed .components-reconnect-retries,*/
/*#components-reconnect-modal.components-reconnect-rejected .components-reconnect-retries {*/
/*    color: #FFF;*/
/*}*/

/*.components-reconnect-overlay button {*/
/*    color: #FFFFFF;*/
/*    background-color: #000061;*/
/*    border: 1px solid #FFFFFF;*/
/*    padding: 4px 24px;*/
/*    border-radius: 4px;*/
/*    display: none;*/
/*}*/

/*.components-reconnect-overlay button:hover {*/
/*    color: #000061;*/
/*    background-color: #FFFFFF;*/
/*    border: 1px solid #000061;*/
/*}*/

/*.components-reconnect-overlay button:active {*/
/*    color: #000061;*/
/*    background-color: #FFFFFF;*/
/*    border: 1px solid #000061;*/
/*}*/

/*#components-reconnect-modal.components-reconnect-failed .components-reconnect-overlay button.components-reconnect-btn-failed{*/
/*    display: block;*/
/*}*/
/*#components-reconnect-modal.components-reconnect-rejected .components-reconnect-overlay button.components-reconnect-btn-rejected{*/
/*    display: block;*/
/*}*/

/*.components-reconnect-dialog {*/
/*    position: relative;*/
/*    background-color: white;*/
/*    width: 20rem;*/
/*    min-height: 20rem;*/
/*    margin: 20vh auto;*/
/*    border-radius: 0.5rem;*/
/*    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    opacity: 0;*/
/*    animation: components-reconnect-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-fadeInOpacity 0.5s ease-out 0.3s;*/
/*    animation-fill-mode: forwards;*/
/*    z-index: 10001;*/
/*}*/

/*.components-rejoining-animation {*/
/*    display: block;*/
/*    position: relative;*/
/*    width: 80px;*/
/*    height: 80px;*/
/*}*/

/*.components-rejoining-animation div {*/
/*    position: absolute;*/
/*    border: 3px solid #00E2FD;*/
/*    opacity: 1;*/
/*    border-radius: 50%;*/
/*    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;*/
/*}*/

/*.components-rejoining-animation div:nth-child(2) {*/
/*    animation-delay: -0.5s;*/
/*}*/

/*@keyframes components-rejoining-animation {*/
/*    0% {*/
/*        top: 40px;*/
/*        left: 40px;*/
/*        width: 0;*/
/*        height: 0;*/
/*        opacity: 0;*/
/*    }*/

/*    4.9% {*/
/*        top: 40px;*/
/*        left: 40px;*/
/*        width: 0;*/
/*        height: 0;*/
/*        opacity: 0;*/
/*    }*/

/*    5% {*/
/*        top: 40px;*/
/*        left: 40px;*/
/*        width: 0;*/
/*        height: 0;*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        top: 0px;*/
/*        left: 0px;*/
/*        width: 80px;*/
/*        height: 80px;*/
/*        opacity: 0;*/
/*    }*/
/*}*/

/*@keyframes components-reconnect-fadeInOpacity {*/
/*    0% {*/
/*        opacity: 0;*/
/*    }*/

/*    100% {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*@keyframes components-reconnect-slideUp {*/
/*    0% {*/
/*        transform: translateY(30px) scale(0.95);*/
/*    }*/

/*    100% {*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/



/* =============================
    bootstrap and js overrides
    ============================
*/
.flex-container {
    display: flex;
}

.ui-datepicker-trigger { /*used in JS*/
    border: none;
    background: none;
}

.input-group {
    margin-left: 1%;
}

a.text-dark:focus, a.text-dark:hover {
    color: white;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* Additional Widths in class style similar to bootstrap. Also with overrides to stop !important on other w-* classes */
.w-0 {
    width: 0;
}
.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 {
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-65 {
    width: 65%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-95 {
    width: 95%;
}
.w-100 {
    width: 100%;
}
/* Additional Heights in class style similar to bootstrap. Also with overrides to stop !important on other h-* classes */
.h-0{
    height: 0;
}
.h-5 {
    height: 5%;
}
.h-10 {
    height: 10%;
}
.h-15 {
    height: 15%;
}
.h-20 {
    height: 20%;
}
.h-25 {
    height: 25%;
}
.h-30 {
    height: 30%;
}
.h-35 {
    height: 35%;
}
.h-40 {
    height: 40%;
}
.h-45 {
    height: 45%;
}
.h-50 {
    height: 50%;
}
.h-55 {
    height: 55%;
}
.h-60 {
    height: 60%;
}
.h-65 {
    height: 65%;
}
.h-70 {
    height: 70%;
}
.h-75 {
    height: 75%;
}
.h-80 {
    height: 80%;
}
.h-85 {
    height: 85%;
}
.h-90 {
    height: 90%;
}
.h-95 {
    height: 95%;
}
.h-100 {
    height: 100%;
}