/*** application coloring ***/

a, a:visited, a:hover {
    color: var(--sparq-teal);
}

.dialog-body {
    background-color: var(--sparq-white);
    color: var(--sparq-black);
}

.dialog-body a, .dialog-body a:visited {
    color: var(--sparq-teal);
}

button {
    background-color: var(--sparq-dark-blue);
    color: var(--sparq-white);
    border: solid 2px var(--white);
}

button:hover {
    color: var(--sparq-teal);
    border: solid 2px var(--sparq-teal);
}

button:disabled {
    color: var(--sparq-gray);
    background-color: var(--sparq-white);
    border: solid 2px var(--sparq-gray)
}

.sysdialog a.dropbox-dropin-btn, a.google-drive-button, a.adobe-cc-button {
    border: solid 2px var(--sparq-dark-blue);
    color: var(--sparq-dark-blue);
    background: var(--sparq-white);
}

.sysdialog a.dropbox-dropin-btn:hover, a.google-drive-button:hover, a.adobe-cc-button:hover {
    border: solid 2px var(--sparq-orange);
    color: var(--sparq-orange);
}

.sysdialog a.dropbox-dropin-btn:disabled, a.google-drive-button:disabled, a.adobe-cc-button:disabled {
    border: solid 2px var(--sparq-gray);
    color: var(--sparq-gray);
}


input, select, textarea {
    background-color: var(--sparq-teal-with-alpha) !important;
    border: solid 1px var(--sparq-dark-blue);
}

input:focus, select:focus, button:focus, textarea:focus, .sysdialog a:focus, div[role="button"]:focus {
    outline: dashed 1px var(--sparq-orange) !important;
}

.label.required .label-text:after {
    color: var(--sparq-orange);
}

.form-field.file-button-field button {
    background-color: var(--sparq-white);
    border: solid 1px var(--sparq-dark-blue);
    color: var(--sparq-dark-blue);
}

.form-field.file-button-field button:hover {
    border: solid 1px var(--sparq-blue);
    color: var(--sparq-blue);
}

div.quick-container {
    background-color: var(--sparq-teal-with-alpha);
    color: var(--sparq-black);
    border-top: solid 2px var(--sparq-blue);
    border-bottom: solid 2px var(--sparq-blue);
}

.dialog-body input {
    color: var(--sparq-black);
}

.dialog-body input::placeholder, .dialog-body textarea::placeholder {
    color: var(--sparq-dark-gray);
}

textarea {
    font-family: 'Barlow', sans-serif;
}

#navigation {
    background-color: var(--sparq-dark-blue);
    color: var(--white);
    border-bottom: solid 1px var(--sparq-teal);
}

#profile\.menu {
    right: 2.8em;
}

.captions-container h3, .video-container h3, .audio-container h3, .document-container h3 {
    color: var(--sparq-blue);
}

.video-elements, .audio-elements, .document-elements {
    background-color: var(--sparq-blue);
}

.up-arrow {
    border-bottom-color: var(--sparq-dark-blue) !important;
}

.profile-menu-items, .main-menu-items {
    background-color: var(--sparq-dark-blue);
}

#navigation a:hover {
    color: var(--sparq-teal);
}

.edition-nav select {
    background-color: var(--sparq-dark-blue-with-alpha) !important;
    color: var(--sparq-dark-blue) !important;
}

section#main {
    background-color: var(--sparq-white);
    color: var(--sparq-black);
}

.page {
    background-color: var(--sparq-white);
}

.app-navigation {
    background: none;
    border-right: solid 1px var(--sparq-dark-blue);
}

.app-navigation li:hover {
    background-color: var(--sparq-teal-with-alpha);
}

.app-navigation li.current {
    background-color: var(--sparq-gray);
    color: var(--sparq-white);
}

.app-navigation li.current a {
    color: var(--sparq-white);
}

.app-navigation li.current img {
    filter: brightness(0) invert(1)
}

.app-menu li {
    color: var(--sparq-blue);
}

.app-menu a, .app-menu a:visited, .app-menu a:hover {
    color: var(--sparq-blue);
}

.app-menu li.current {
    border-color: var(--sparq-teal);
}

.app-menu li.current a, .app-menu li.current a:visited {
    color: var(--sparq-teal);
}

span.form-help {
    background-color: var(--sparq-teal);
}

.help-link a, .help-link a:visited {
    color: var(--sparq-dark-blue);
}

.help-link a:hover {
    color: var(--sparq-teal);
}

.label {
    color: var(--sparq-blue) !important;
}

.video-label.label, .file-label.label {
    color: var(--sparq-white) !important;
}

.sysdialog {
    background-color: var(--sparq-teal-with-alpha);
}

form {
    border-color: var(--sparq-blue);
    box-shadow: 2px 4px 8px var(--sparq-gray);
}

.radio-button {
    background-color: var(--sparq-white);
    border: solid 1px var(--sparq-gray);
}

.radio-button-container input:checked ~ .radio-button {
    background-color: var(--sparq-teal);
}

.ime-selection {
    background-color: var(--sparq-teal);
    color: var(--sparq-dark-blue);
}

.itas-option {
    color: var(--sparq-black);
}

.itas-options {
    background-color: var(--sparq-white);
    border-color: solid 1px var(--sparq-teal);
}

.itas-selections span {
    background-color: var(--sparq-teal);
    color: var(--sparq-dark-blue);
}

.itas-selections.itas-single span.itas-required {
    background-color: var(--sparq-teal);
}

#spinner\.container {
    background-color: var(--sparq-teal-with-alpha);
    z-index: 11;
    cursor: progress;
}

.progress {
    border-color: var(--sparq-blue);
    background-color: var(--sparq-teal);
    z-index: 12;
}

#currentProgress {
    background-color: var(--sparq-blue);
}

.load-progress-container {
    background-color: var(--sparq-teal-with-alpha);
    border: solid 1px var(--sparq-teal);
}

.img-cal-container {border-color: var(--sparq-dark-blue);}

.img-cal-date-header {
    border-color: var(--sparq-dark-blue);
    background-color: var(--sparq-teal);
    color: var(--sparq-white);
}

.img-cal-event.img-cal-all-day-event {
    background-color: var(--sparq-teal-with-alpha);
    color: var(--sparq-dark-blue);
}

.img-cal-day:not(:first-child) {
    border-color: var(--sparq-dark-blue);
}

.img-cal-event.block-event {
    border-left-color: purple;
}

.img-cal-event.deadline-event {
    border-left-color: crimson;
}

.img-cal-event.promotion-event {
    border-left-color: chartreuse;
}

.img-cal-event.start-event,  .img-cal-event.end-event {
    border-left-color: darkgreen;
}

.img-cal-event.notification-event {
    border-left-color: goldenrod;
}

.img-cal-event.live-event {
    border-left-color: gold;
}

.img-cal-event.live-stream {
    border-left-color: magenta;
}

.action-options {
    border-top:  solid 1px var(--sparq-teal);
    border-bottom:  solid 1px var(--sparq-teal);
}

.action-options a, .action-options a:hover, .action-options a:visited {
    color: var(--sparq-teal);
}

.progress-dots span {
    background: var(--sparq-teal);
}

.dialog-with-poster {
    background-color: var(--sparq-dark-blue);
    color: var(--sparq-white);
}


.dialog-with-poster .dialog-content {
    max-height: 40vh;
}

.dialog-with-poster h2 {
    color: var(--sparq-teal);
}

.dialog-with-poster h3 {
    color: var(--sparq-teal);
}

.dialog-with-poster .dialog-close a {
    color: var(--sparq-white);
}

.dialog-with-poster .rating-field > label {
    background: url('/_fest/img/icons/white/widgets/rating-off.webp');
    background-size: contain;
}

.dialog-with-poster .rating-field > label:before {
    background: url('/_fest/img/icons/white/widgets/rating-on.webp');
    background-size: contain;
}

.dialog-with-poster textarea,
.dialog-with-poster select,
.dialog-with-poster input[type='text'],
.dialog-with-poster input[type='email'],
.dialog-with-poster input[type='url'],
.dialog-with-poster input[type='password'],
.dialog-with-poster input[type='date'],
.dialog-with-poster input[type="number"]
{
    color: white;
}

.dialog-with-poster textarea::placeholder,
.dialog-with-poster input[type='text']::placeholder,
.dialog-with-poster input[type='email']::placeholder,
.dialog-with-poster input[type='url']::placeholder,
.dialog-with-poster input[type='password']::placeholder,
.dialog-with-poster input[type='date']::placeholder,
.dialog-with-poster input[type='number']::placeholder
{
    color: white;
}

@keyframes big-dots {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
    50% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        background: var(--sparq-teal-with-alpha);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
}

@keyframes dots {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
        background: var(--sparq-teal-with-alpha);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
}

@-webkit-keyframes inline-dots {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        background: var(--sparq-teal-with-alpha);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        background: var(--sparq-teal);
    }
}

.slider {
    background-color: var(--sparq-gray);
}

.slider:before {
    background-color: var(--sparq-white);
}

input:checked + .slider {
    background-color: var(--sparq-dark-blue);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--sparq-teal);
}

.idp-label {
    border: solid 1px var(--sparq-dark-blue);
    color: var(--sparq-black);
}

.idp-calendar {
    border: solid 1px var(--sparq-teal);
    background-color: var(--sparq-white);
    color: var(--sparq-black);
    box-shadow: 4px 6px 8px var(--sparq-gray);
}

.idp-calendar-header {
    border-bottom: solid 1px var(--sparq-dark-blue);
}

.idp-calendar-cell-before, .idp-calendar-cell-after {
    background-color: var(--sparq-teal-with-alpha);
}

.idp-calendar-cell-selected {
    background-color: var(--sparq-orange);
    color: var(--sparq-white);
}

.idp-associated {
    border-bottom: solid 2px var(--sparq-blue);
}

.idp-clock-entry {
    background-color: var(--sparq-white);
    color: var(--sparq-black);
    box-shadow: 4px 6px 8px var(--sparq-gray);
}

.img-cal-title {
    color: var(--sparq-dark-blue);
}

.img-cal-container {
    border: solid 2px var(--sparq-teal);
}

.img-cal-day:not(:first-child) {
    border-left: solid 2px var(--sparq-teal);
}

.img-cal-date-header {
    border-bottom: solid 2px var(--sparq-teal);
    background-color: var(--sparq-dark-blue);
    color: var(--sparq-white);
}

.datetime-widget {
    border: solid 1px var(--sparq-dark-blue);
}

.datetime-widget .datetime-component .placeholder {
    color: var(--sparq-gray);
}

.datetime-widget .datetime-picker {
    background-color: var(--sparq-teal);
    color: var(--white);
    box-shadow: 2px 4px 6px var(--sparq-dark-gray);
}

.day-of-week {
    background-color: var(--sparq-dark-teal);
    color: var(--white);
}

.hour:focus, .minute:focus {
    background-color: var(--sparq-teal);
    color: var(--white);
}

.calendar .calendar-navigation .prior-month, .calendar .calendar-navigation .next-month {
    background-color: var(--sparq-teal);
}

.calendar .calendar-actions {
    border-top: solid 1px var(--sparq-teal);
}

.calendar .calendar-actions span.calendar-action {
    color: var(--sparq-dark-blue);
}

.calendar .calendar-actions span.calendar-action:focus {
    border-bottom: dashed 1px var(--sparq-dark-blue);
}

.calendar .calendar-actions span.calendar-action:hover {
    color: var(--sparq-teal);
}

.calendar .calendar-body .calendar-date:not(.empty-date):hover {
    background-color: var(--sparq-gray);
}

.calendar .calendar-body .calendar-date.current-date:hover, .calendar .calendar-headers .calendar-date:hover {
    background-color: transparent;
}

.calendar .calendar-body .calendar-date:focus {
    border: dashed 1px var(--sparq-dark-blue);
    outline: none;
}