/* NOTE: Eventually deprecate classes without 's-' prefix (for less conflicts) */

/* modal */
.modal, .s-modal {
    background: rgba(240, 240, 240, 0.95)/*rgba(255,255,255,0.9);*/; margin: 0px auto; animation-fill-mode: forwards; font-size: 1.1em;
    width: 450px; max-width: calc(100% - 40px); padding: 50px; border-radius: 10px; box-sizing: border-box; display: inline-block;
    animation-name: s-modal; animation-duration: 0.3s; animation-timing-function: ease-in-out; text-align: center; flex-shrink: 0;
}
.s-modal-wrap {
    /* background: rgba(0,0,0,0.4); */ width: 100%;
    top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; text-align: center; position: fixed;
    display: flex; justify-content: center; align-items: center;
    animation-fill-mode: forwards; animation-name: s-modal-wrap; animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}
.s-modal-wrap.s-oversized { display: block; }
.s-modal-overlay, .s-block-ui {
    min-height: 100vh; width: 100vw; display: block;
    position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;
}
.s-modal-overlay-background { background-color: rgba(0,0,0,0.4); height: 100vh; width: 100%; display: block; position: fixed; top: 0px; z-index: -1; }
.s-block-ui {
    opacity: 0; position: fixed; animation-fill-mode: forwards; animation-name: s-block-ui-anim; animation-duration: 0.3s;
    animation-timing-function: ease-in-out; background: rgba(255,255,255,0.4); animation-delay: 2s;
}
.s-modal > h1:first-of-type { margin-top: 0px !important; }
.s-modal-footer { font-size: 0.95em; margin: 24px 0px -24px 0px; }
.s-send-error-details { text-align: left; margin: 20px 0px; font-family: 'Courier New', Courier, monospace; }
.s-send-error-details span { border-top: 1px rgba(0,0,0,0.2) solid; width: 100%; display: block; margin: 10px 0px; }
/* shared */
.s-modal-buttons { text-align: center; }
.s-modal-buttons input[type=button], .notification input[type=button], .modal-fixed-buttons input[type=button],
.s-notification input[type=button], .s-modal-fixed-buttons .s-modal-buttons input[type=button] {
    font-size: 1.1em; min-width: 80px;
    background: white; color: #444; margin: 0px; padding: 6px 12px;
    border: 0px; font-weight: normal; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}
.notification input[type=button]:not(:first-of-type),
.modal-fixed-buttons input[type=button]:not(:first-of-type),
.s-modal-buttons input[type=button]:not(:first-of-type), .s-notification input[type=button]:not(:first-of-type),
.s-modal-fixed-buttons input[type=button]:not(:first-of-type) {
    margin-left: 12px; 
}
.modal input[type=button]:focus, .notification input[type=button]:focus, .modal-fixed-buttons input[type=button]:focus { outline: none; }
.modal-fixed-buttons {
    background: rgba(240, 240, 240, 0.95); text-align: center; animation-name: none;
    padding: 10px !important; bottom: 0px; left: 0px; right: 0px; position: fixed; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); border-radius:0px;
}
.s-modal-corner-bttn {
    float: right; width: 24px; height: 24px; line-height: 20px;
}
.s-modal-corner-bttn span.close {
    border: 1px rgb(175,175,175) solid; border-radius: 2px; width: 20px; display: inline-block; box-sizing: border-box;
}
.s-modal-corner-bttn span.close:first-child { transform: translateY(-3px) rotate(45deg); }
.s-modal-corner-bttn span.close:last-child { transform: translateY(-23px) rotate(-45deg); }
.s-modal-tabbed { padding: 0px; }
.s-modal-tab-wrap { padding: 30px 50px 50px; }

body.s-oversized-modal-active { overflow: hidden; }
body.s-oversized-modal-active .modal:not(.modal-fixed-buttons) { margin: 20px auto; }
/* notification */
.notification p, .s-notification p { display: inline-block; margin: 0px; padding: 0px; }
.notification.has-buttons p, .s-notification.s-has-buttons p { margin: 0px 0px 10px 0px; }
.notification, .s-notification {
    width: 350px; max-width: calc(100% - 40px); cursor: default;
    background: white; color: #444; text-align: center; padding: 14px; margin: 0px auto;
    position: fixed; left: 0px; right: 0px; border-radius: 10px; box-shadow: 0px 0px 20px rgba(0,0,0,0.35);
    transition: 0.5s; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-in-out;
}

.notification.has-buttons, .s-notification.s-has-buttons { width: 500px; }
.notification.top, .s-notification.s-top { animation-name: s-notification-top; }
.notification.bottom, .s-notification.s-bottom { animation-name: s-notification-bottom; }
.notification.left, .s-notification.s-left { left: 20px; right: auto; } 
.notification.right, .s-notification.s-right { right: 20px; left: auto;  }
.notification.error, .s-notification.s-error { background-color: rgb(210, 0, 0); color: white; }

.s-search-list .s-option { display: block !important; padding: 8px 12px !important; width: 100%; white-space: nowrap; cursor: default; color: black; text-align: left; }
.s-search-list .s-option a { width: 17px !important; margin-left: -4px; display: none !important; cursor: default; }
.s-search-list .s-option.checked a { display: inline-block !important; }
.s-search-list .s-option:hover { background: rgb(1, 160, 239); color: white; }
.s-search-list .s-option:hover a svg path { stroke: white !important; }
.s-search-list {
    overflow-y: scroll; overflow-x: hidden; display: block; position: absolute; background: white;
    transition: 0.3s; border-top: 1px rgba(0,0,0,0.15) solid; padding: 0px 0px 4px !important; box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.s-search-badge {
    font-size: 0.75em; float: right; margin: 0px 0px -1.15em 0px; background-color: rgba(210,220,230,0.5); padding: 0.2em 0.8em; border-radius: 1em;
}
.s-search-badge:empty{ display: none; }
.s-search-load-bar { height: 4px; background-color: rgb(1, 160, 239); border-radius: 4px; margin: 4px 4px -8px; position: sticky; top: 4px; }
.s-search-load-bar .s-s-thumb {
    width: 25%; background-color: rgba(255, 255, 255, 0.4); display: block; height: 4px; border-radius: 4px;
    animation-name: s-search-load-bar; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
    animation-direction: alternate;
}

.s-condition-hidden { display: none !important; }

/* List */
.s-list-option {
    display: inline-block; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); user-select: none; -webkit-user-select: none;
    background-color: rgba(255,255,255,0.5); border-radius: 8px; padding: 20px; margin: 10px; cursor: pointer; transition: background-color 0.3s;
}
.s-list-option.s-list-selected { background-color: white;  }
.s-list-option:hover:not(:active) { box-shadow: 0px 0px 6px rgba(0,0,0,0.2); }
.s-list-vertical { border-radius: 8px; box-shadow: 0px 0px 4px rgba(0,0,0,0.15); }
.s-list-vertical .s-list-option { display: block; margin: 0px; width: 100%; border-radius: 0px; box-shadow: none; text-align: left; border-bottom: 1px rgba(0,0,0,0.1) solid; padding: 12px 14px; }
.s-list-vertical .s-list-option:first-of-type { border-radius: 8px 8px 0px 0px; }
.s-list-vertical .s-list-option:last-of-type { border-radius: 0px 0px 8px 8px; border-bottom: 0px; }
.s-list-vertical .s-list-option:only-of-type { border-radius: 8px; border-bottom: 0px; }
.s-list-vertical .s-list-option:hover { box-shadow: none; }

.s-list-tab { margin-bottom: 10px; width: 100%; display: table; }
.s-list-tab .s-list-option { margin: 0px; border-radius: 0px; display: table-cell; box-shadow: none; }
.s-list-tab .s-list-option:first-of-type { border-radius: 10px 0px 0px 0px; }
.s-list-tab .s-list-option:last-of-type { border-radius: 0px 10px 0px 0px; }
.s-list-tab .s-list-option:hover { box-shadow: none; }
.s-list-tab .s-list-option.s-list-selected { background-color: rgba(0,0,0,0); color: black; }
.s-list-tab .s-list-option:not(.s-list-selected) { background-color: rgba(195, 203, 228, 0.5); }
.s-list-tab .s-list-option:not(.s-list-selected):hover { background-color: rgba(195, 203, 228, 0.3); }

/* Images */
.s-arrow-right, .s-arrow-right-black { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M1.14%2012.957L6.86%207%201.14%201.043%22%20fill%3D%22none%22%20stroke%3D%22rgb(0%2C0%2C0)%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-arrow-right-white { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M1.14%2012.957L6.86%207%201.14%201.043%22%20fill%3D%22none%22%20stroke%3D%22rgb(255%2C255%2C255)%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-arrow-left, .s-arrow-left-black { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M6.86%201.043L1.141%207l5.719%205.957%22%20fill%3D%22none%22%20stroke%3D%22rgb(0%2C0%2C0)%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-arrow-left-white { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M6.86%201.043L1.141%207l5.719%205.957%22%20fill%3D%22none%22%20stroke%3D%22rgb(255%2C255%2C255)%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-arrow-up { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%208%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M12.957%2C6.86l-5.957%2C-5.72l-5.957%2C5.72%22%20fill%3D%22none%22%20stroke%3D%22rgb%280%2C0%2C0%29%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-arrow-down { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%208%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M1.043%2C1.14l5.957%2C5.72l5.957%2C-5.72%22%20fill%3D%22none%22%20stroke%3D%22rgb%280%2C0%2C0%29%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); }
.s-x-black-1 { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22rgb%280%2C0%2C0%29%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M1.28%2012.957L7%207%201.28%201.043m11.44%200L7%207l5.72%205.957%22%2F%3E%3C%2Fsvg%3E'); }
.s-x-black-2 { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22rgb%280%2C0%2C0%29%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M1.28%2012.957L7%207%201.28%201.043m11.44%200L7%207l5.72%205.957%22%2F%3E%3C%2Fsvg%3E'); }
.s-check-white { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20xmlns%3Av%3D%22https%3A%2F%2Fvecta.io%2Fnano%22%3E%3Cpath%20d%3D%22M1.453%2010.733L7.15%2016.43%2018.547%205.033%22%20fill%3D%22none%22%20stroke%3D%22rgb%28255%2C255%2C255%29%22%20stroke-width%3D%222.498%22%2F%3E%3C%2Fsvg%3E'); }
.s-check-black { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20xmlns%3Av%3D%22https%3A%2F%2Fvecta.io%2Fnano%22%3E%3Cpath%20d%3D%22M1.453%2010.733L7.15%2016.43%2018.547%205.033%22%20fill%3D%22none%22%20stroke%3D%22rgb%280%2C0%2C0%29%22%20stroke-width%3D%222.498%22%2F%3E%3C%2Fsvg%3E'); }

/* Calendar */
.s-calendar { background: white; display: inline-block; box-shadow: 0 0 5px rgba(70, 124, 154, 0.2); border-radius: 8px; -webkit-user-select: none; user-select: none; }
.s-cal-header {
    padding: 20px; border-width: 1px; border-style: solid; border-bottom: 0px;
    border-radius: 8px 8px 0px 0px; text-align: center; font-size: 1.2em; display: flex;
}
.s-cal-header div:not(:nth-of-type(2)) { width: 20%; margin: auto 0px; }
.s-cal-header div:nth-of-type(2) { width: 60%; -webkit-user-select: none; user-select: none; }
.s-cal-year { display: block; color: rgb(140, 150, 179); font-size: 0.6em; }
.s-cal-back, .s-cal-next {
    background-color: rgba(195, 203, 228, 0.5); height: 30px; width: 30px; border-radius: 100%; display: flex; cursor: pointer;
    background-size: 30% auto; background-position: center; background-repeat: no-repeat; background-blend-mode: color-dodge;
}
.s-cal-back { background-position: left 43% center; }
.s-cal-next { margin: auto 0px auto auto; background-position: right 43% center; }
.s-cal-row { display: flex; }
.s-cal-day { display: flex; border-width: 1px; border-style: solid; text-align: center; width: calc(100% / 7); -webkit-user-select: none; user-select: none; cursor: default; }
.s-cal-day a { margin: auto; }
.s-cal-has-events .s-cal-day { flex-direction: column; }
.s-cal-events { line-height: 0em; height: 20%; opacity: 0.6; }
.s-cal-row:not(:last-of-type) .s-cal-day { border-bottom: 0px; }
.s-cal-row .s-cal-day:not(:last-of-type) { border-right: 0px; }
.s-cal-row:last-of-type .s-cal-day:first-of-type { border-radius: 0px 0px 0px 8px; }
.s-cal-row:last-of-type .s-cal-day:last-of-type { border-radius: 0px 0px 8px 0px; }
.s-cal-day, .s-cal-header { border-color: rgb(231, 234, 240); }
.s-Sunday, .s-Saturday { color: rgb(140, 150, 179); }
.s-cal-day-extra { color: rgb(184, 192, 214); background-color: rgb(247, 248, 251); }
.s-cal-unavailable { color: rgba(184, 192, 214, 0.6); }
.s-cal-selected { background-color: rgb(224, 235, 255) }
.s-borderless .s-cal-header { border-top: 0px; border-left: 0px; border-right: 0px; }
.s-borderless .s-cal-row .s-cal-day:first-of-type { border-left: 0px; }
.s-borderless .s-cal-row .s-cal-day:last-of-type { border-right: 0px; }
.s-borderless .s-cal-row:last-of-type .s-cal-day { border-bottom: 0px; }
.s-cal-picker-wrap {
    position: absolute; z-index: 1000; animation-name: s-calendar-picker-anim; animation-duration: 0.3s; animation-timing-function: ease-in-out;
}
.s-cal-picker-wrap:focus { outline: none; }
.s-cal-picker-wrap .s-cal-day { height: 35px; }
.s-cal-picker-wrap .s-calendar { width: 250px; }

/* Book */
.s-book { display: flex; transition: 0.5s; }
.s-page { width: 100%; transition: opacity 0.5s; overflow-y: hidden; opacity: 0; height: 0px; }
.s-page.s-p-active { opacity: 1; height: auto; }

/*** Input Select / Searchable Input ***/
.s-input-select-wrap { display: inline-block; margin: 0px; padding: 0px; }
.s-input-select-wrap .s-is-toggle {
    background-repeat: no-repeat; background-color: rgb(1, 160, 239); position: relative; right: 0px; cursor: pointer;
    transition: background-color 0.3s; display: inline-block; width: 30px; height: 20px; border-radius: 5px; background-size: 12px auto;
    background-position: center; margin: 0px 0px -5px -34px; box-shadow: 0px 0px 4px rgba(146, 164, 179, 0.8); outline: none;
}
.s-input-select-wrap .s-is-toggle:hover { background-color: white; /* background-image: url('../images/dd-arrow.svg?ver=0'); */ }
.s-input-select-wrap input { display: inline-block; margin: 0px; font-size: 0.95em; padding: 4px 36px 4px 10px; transition: 0.3s; }
.s-input-select-wrap .s-is-results {
    width: auto; max-width: 350px; background-color: white; color: black; position: absolute; display: block; border-radius: 0px 0px 6px 6px;
    max-height: 300px; box-shadow: 0px 3px 10px rgba(70, 124, 154, 0.2); transition-timing-function: ease-in-out; margin: 0px; margin-right: 20px;
    transition: 0.3s; opacity: 0; transform: translateY(-20px); overflow: auto; z-index: 5; min-height: 30px; text-align: left; padding: 0px;
}
.s-input-select-wrap .s-is-results.s-is-r-wide { border-radius: 0px 6px 6px 6px; }
.s-input-select-wrap.open .s-is-results { transform: translateY(0px); opacity: 1; }
.s-input-select-wrap.open input { border-radius: 6px 6px 0px 0px; }
.s-input-select-wrap .s-is-results li { padding: 10px; display: block; list-style: none; }
.s-input-select-wrap .s-is-results li mark { color: rgb(1, 160, 239); background-color: rgba(0,0,0,0); }
.s-input-select-wrap .s-is-results li:hover, .s-input-select-wrap .s-is-results li.hover { background-color: rgb(1, 160, 239); color: white; cursor: pointer; }
.s-input-select-wrap .s-is-results li:hover mark, .s-input-select-wrap .s-is-results li.hover mark { color: white; }
.s-input-select-wrap .s-is-results li sub { display: block; opacity: 0.6; font-size: 0.8em; text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; }
.s-input-select-wrap:has(.s-wrap-subtext) .s-is-results li sub { white-space: normal; }
.s-is-results > .s-option-disabled { color: rgba(0,0,0,0.5); }
/*.s-input-select-wrap.open.s-hide-empty-results .s-is-results:not(:has(li)) { opacity: 0; }*/

/*** File Uploader ***/
.s-uploader { width: 100px; height: 100px; border-radius: 20px; overflow: hidden; display: grid !important; }
.s-uploader input[type="file"] { height: 100%; width: 100%; opacity: 0; grid-area: 1 / 1 / 4 / 2; z-index: 3; cursor: pointer; }
.s-uploader-label { width: 100%; height: 100%; grid-area: 1 / 1 / 4 / 2; z-index: 2; display: table; transition: opacity 0.3s; }
.s-uploader-label p { display: table-cell; vertical-align: middle; padding: 0% 20%; text-align: center; white-space: normal; }
.s-uploader-picker {
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); grid-area: 1 / 1 / 4 / 2; z-index: 1; background-size: cover; transition: 0.3s; display: grid; overflow: hidden;
}
.s-uploader-picker img { width: 100%; height: 100%; grid-area: 1 / 1 / 4 / 2; }
.s-uploader:hover .s-uploader-picker { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.s-uploader-borders { width: 100%; height: 100%; display: flex; flex-wrap: wrap; transition: transform 0.2s, opacity 0.2s; margin: auto; grid-area: 1 / 1 / 4 / 2; }
.s-uploader span { width: calc(20% - 3px); height: calc(20% - 3px); display: inline-block; border: 3px solid; border-color: #888; opacity: 0.6; margin: 15%; border-radius: 30%; transition: transform 0.5s, opacity 0.5s; }
.s-uploader span:first-of-type { border-right: 0px; border-bottom: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; transform: translate(-20%, -20%); }
.s-uploader span:nth-of-type(2) { border-left: 0px; border-bottom: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; transform: translate(20%, -20%); }
.s-uploader span:nth-of-type(3) { border-right: 0px; border-top: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 0px; transform: translate(-20%, 20%); }
.s-uploader span:last-of-type { border-left: 0px; border-top: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; transform: translate(20%, 20%); }
.s-uploader:hover span { transform: translate(0px, 0px); opacity: 1; }
.s-uploader.s-uploading span, .s-uploader.s-upload-completed span { opacity: 1; transform: translate(0px, 0px); height: calc(30% - 3px); width: calc(30% - 3px); transition: 0.6s; transition-timing-function: cubic-bezier(.52,.01,.93,.49); border-color: white; }
.s-uploader.s-uploading span:first-of-type, .s-uploader.s-upload-completed span:first-of-type { margin: 20% 0% 0% 20%; border-top-left-radius: 100%; }
.s-uploader.s-uploading span:nth-of-type(2), .s-uploader.s-upload-completed span:nth-of-type(2) { margin: 20% 20% 0% 0%; border-top-right-radius: 100%; }
.s-uploader.s-uploading span:nth-of-type(3), .s-uploader.s-upload-completed span:nth-of-type(3) { margin: 0% 0% 20% 20%; border-bottom-left-radius: 100%; }
.s-uploader.s-uploading span:last-of-type, .s-uploader.s-upload-completed span:last-of-type { margin: 0% 20% 20% 0%; border-bottom-right-radius: 100%; }
.s-uploader.s-uploading span:last-of-type { opacity: 0.4; }
.s-uploader.s-uploading .s-uploader-borders {
    animation-name: s-uploading-anim; animation-duration: 0.8s; animation-iteration-count: infinite; animation-timing-function: linear; animation-delay: 0.63s;
    transition: 0.6s; transition-timing-function: cubic-bezier(.52,.01,.93,.49); /*transform: rotate(20deg);*/
}
.s-uploader.s-uploading .s-uploader-label, .s-uploader.s-uploader-file-selected .s-uploader-label,
.s-uploader.s-uploading .s-uploader-remove-button, .s-uploader.s-uploading .s-uploader-upload-button { opacity: 0; }
.s-uploader:active .s-uploader-borders { transform: scale(0.95); }
.s-uploader .s-uploader-cropper {
    width: 100%; height: 100%; grid-area: 1 / 1 / 4 / 2; z-index: 3; overflow: hidden;
}
.s-uploader.s-uploader-cropper-active input[type="file"], .s-uploader.s-uploader-cropper-active .s-uploader-picker, .s-uploader.s-uploader-cropper-active .s-uploader-upload-button { display: none; }
.s-uploader .s-uploader-cropper img {
    position: relative; user-drag: none; -webkit-user-drag: none; cursor: all-scroll;
    animation-name: s-uploader-load-cropping; animation-duration: 0.5s;
}
.s-uploader .s-uploader-cropper img:active { cursor: grabbing; }
.s-uploader .s-uploader-crop-slider {
    z-index: 4; width: 80%; margin: 10%; grid-area: 2 / 1 / 4 / 2; transition: 0.3s;
    -webkit-appearance: none; appearance: none; height: 4px; outline: none; border-radius: 2px; border: 2px white solid; opacity: 0.8; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}
.s-uploader.s-uploader-rounded .s-uploader-crop-slider { width: 60%; margin: 20%; }
.s-uploader .s-uploader-crop-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 18px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); background: white;
}
.s-uploader .s-uploader-crop-slider:hover { opacity: 1; }
.s-uploader .s-uploader-button {
    z-index: 4; height: 25px; background-color: white; opacity: 0.8; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    border-radius: 25px; padding: 0px; transition: 0.3s; background-repeat: no-repeat; background-size: 11px auto; background-position: center;
    font-size: 0.8em; font-weight: 400; line-height: 25px; font-family: Arial; width: auto; color: black;
}
.s-uploader .s-uploader-remove-button { margin: 8%; width: 25px; grid-area: 1 / 1 / 4 / 1; }
.s-uploader.s-uploader-rounded .s-uploader-remove-button { margin: 18%; }
.s-uploader .s-uploader-crop-button { margin: 8% 8% 8% auto; padding: 0px 12px; grid-area: 1 / 1 / 4 / 1; }
.s-uploader.s-uploader-rounded .s-uploader-crop-button { margin: 18% 18% 18% auto; }
.s-uploader .s-uploader-upload-button { grid-area: 4 / 1 / 2 / 1; margin: 8% auto; padding: 0px 16px; }
.s-uploader.s-uploader-rounded .s-uploader-upload-button { margin: 18% auto; }
.s-uploader .s-uploader-button:hover { opacity: 1; background-color: white; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); }
.s-uploader-file-selected .s-uploader-picker span, .s-upload-completed .s-uploader-picker span { border-color: white; }
.s-upload-completed .s-uploader-label p { color: white; font-size: 1.2em; text-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
.s-upload-completed .s-uploader-borders { background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.s-uploader.s-upload-completed input[type="file"] { display: none; }
.s-uploader-closing .s-uploader-borders, .s-uploader-closing .s-uploader-label, .s-uploader-closing .s-uploader-button { opacity: 0; }

/*** Loader (Circle) ***/
.s-loading-circle {
    width: 100px; height: 100px; display: block; position: absolute;
    top: 100px; left: 100px; transition: opacity 0.3s, transform 0.3s;
}
.s-loading-circle-wrap {
    width: 100%; height: 100%; display: flex; flex-wrap: wrap; animation-name: s-uploading-anim;
    animation-duration: 0.8s; animation-iteration-count: infinite; animation-timing-function: linear;
}
.s-loading-circle span { width: calc(50% - 2px); height: calc(50% - 2px); border-color: black; border-width: 2px; border-style: solid; }
.s-loading-circle span:first-of-type { border-right: 0px; border-bottom: 0px; border-radius: 100% 0px 0px 0px; }
.s-loading-circle span:nth-of-type(2) { border-left: 0px; border-bottom: 0px; opacity: 0.4; border-radius: 0px 100% 0px 0px; }
.s-loading-circle span:nth-of-type(3) { border-right: 0px; border-top: 0px; opacity: 0.4; border-radius: 0px 0px 0px 100%; }
.s-loading-circle span:last-of-type { border-left: 0px; border-top: 0px; opacity: 0.4; border-radius: 0px 0px 100% 0px; }
.s-loading-circle.s-loading-circle-init { opacity: 1; transform: scale(1); }
.s-loading-circle.s-loading-circle-close, .s-loading-circle:not(.s-loading-circle-init) { opacity: 0; transform: scale(0.25); }

/*** Menu ***/
.s-menu-list {
    position: absolute; background-color: white; max-width: 300px; display: block; margin: 0px; opacity: 0;
    padding: 0px; box-shadow: 0px 0px 8px rgba(0,0,0,0.15); border-radius: 6px; transition: none; z-index: 500; overflow-y: overlay;
}
.s-menu-list:has(.s-book) { overflow-x: hidden; }
.s-menu-list::-webkit-scrollbar { width: 0.9em; }
.s-menu-list::-webkit-scrollbar-thumb {
    border-radius: 1em; background-color: rgba(0,0,0,0.4); background-clip: padding-box; border: 0.3em solid rgba(0, 0, 0, 0);
}
.s-menu-list.s-menu-open { animation-name: s-menu-open-anim; animation-duration: 0.4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.s-menu-list.s-menu-closing { animation-name: s-menu-close-anim; animation-duration: 0.4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.s-menu-list li { list-style: none; padding: 8px 12px; display: block; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin: 6px; border-radius: 6px; transition: background-color 0.3s; }
.s-menu-list li sub { display: block; opacity: 0.6; font-size: 0.8em; }
.s-menu-list:not(.s-m-light) li:not(:only-of-type):hover, .s-menu-list:not(.s-m-light) li.s-m-n-back:hover { background-color: rgba(255,255,255,0.2); }
.s-menu-list.s-m-light li:not(:only-of-type):hover, .s-menu-list.s-m-light li.s-m-n-back:hover { background-color: rgba(0,0,0,0.15); }
.s-menu-wedge {
    height: 17px; overflow: hidden; display: block; width: 40px; position: absolute; z-index: 501;
    text-align: center; transform: scale(0.7, 1); opacity: 0;
}
.s-menu-wedge.s-menu-open { animation-name: s-menu-wedge-open-anim; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: 0.3s; }
.s-menu-wedge.s-menu-closing { animation-name: s-menu-wedge-close-anim; animation-duration: 0.3s; animation-fill-mode: forwards; }
.s-menu-wedge span {
    height: 22px; width: 22px; background-color: white; display: block; list-style-type: none; box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    transform: rotate(45deg); margin: 8px auto; border-radius: 4px;
}
.s-menu-list.s-hint li { white-space: normal; cursor: default; }
.s-menu-option-active.s-check-white, .s-menu-option-active.s-check-black { background-size: 16px auto; background-position: right 12px center; padding-right: 40px; background-repeat: no-repeat; }
.s-menu-list li.s-arrow-right-white, .s-menu-list li.s-arrow-right-black { background-size: 10px auto; background-position: right 10px center; padding-right: 35px; background-repeat: no-repeat; }
.s-menu-list .s-m-n-back { background-size: 10px auto; background-position: left 10px center; padding-left: 35px; background-repeat: no-repeat; }
.s-menu-list .s-m-subitems { display: flex; margin: 0px; padding: 0px; min-width: 6em; }
.s-menu-list .s-m-subitems > span { border: 1px rgba(255, 255, 255, 0.2) solid; border-radius: 4px; margin: 0px 6px 0px 20px; }
.s-menu-list.s-m-light .s-m-subitems > span { border: 1px rgba(0, 0, 0, 0.15) solid; }
.s-menu-list .s-m-subitems > ul { padding: 0px; display: block; width: 100%; }
.s-menu-list .s-m-subitems:not(.s-m-nested) > ul {  margin: -6px; width: calc(100% - 22px); }
.s-menu-list .s-m-subitems:not(.s-m-nested):last-child { margin-bottom: 6px; }
.s-menu-list .s-m-nested:not(.s-m-n-active) { display: none; }
.s-m-break { height: 2px; width: calc(100% - 16px); display: block; opacity: 0.2; margin: 0px 8px; background-color: white; }
.s-menu-list:not(.s-m-light) { background-color: black; }
.s-page:not(.s-page.s-p-active) .s-m-n-back { display: none; }

/*** Text-Selector ***/
.s-text-selector { cursor: text; text-align: left; }
.s-text-selector .s-ts-input[type=text] {
    padding: 0px !important; border-radius: 0px !important; background-color: rgba(0,0,0,0) !important; border: 0px !important; box-shadow: none !important;
    max-width: 200px; display: inline-block; margin: 3px 6px 3px 0px;
 }
.s-text-selector .s-ts-input:active, .s-text-selector .s-ts-input:focus { outline: none !important; box-shadow: none !important; border: 0px !important; }
.s-text-selector .s-ts-item { background-color: white; box-shadow: 0px 0px 3px rgba(0,0,0,0.2); padding: 0.15em 0.5em; border-radius: 4px; margin: 3px 6px 3px 0px; display: inline-block; }
.s-text-selector .s-input-select-wrap { display: inline-block; }
.s-ts-item-delete { display: inline-block; width: 0.6em; height: 0.6em; background-size: 0.6em auto; margin-left: 0.5em; background-repeat: no-repeat; background-position: center; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }
.s-ts-item-delete:hover { opacity: 1; }

/*** Slide ***/

.s-slide-parent { overflow-x: hidden; }
.s-slide-actions-wrap { position: relative; display: flex; }
.s-slide-actions-wrap .s-slide-element { width: 100%; z-index: 1; position: relative; transition: transform 0.6s; user-select: none; -webkit-user-select: none; }
.s-slide-actions-wrap:not(.s-slide-active) > div { transition-timing-function: ease-out; }
.s-slide-actions { position: absolute; height: 100%; width: 0px; z-index: 0; transition: 0.6s; overflow: hidden; display: flex; }
.s-slide-active .s-slide-actions-wrap .s-slide-element { cursor: default; transition: 0s; }
.s-slide-active .s-slide-actions { transition: 0s; }
.s-slide-actions-wrap.s-slide-dir-left { flex-direction: row-reverse; }
.s-slide-action { height: 100%; display: flex; transition: width 0.3s, text-indent 0.3s; transition-timing-function: ease-out; cursor: pointer; }
.s-slide-action:first-child:nth-last-child(1) ~ .s-slide-action { width: calc(100% - 50px); }
.s-slide-action:first-child:nth-last-child(2), .s-slide-action:first-child:nth-last-child(2) ~ .s-slide-action { width: calc(50% - (50px / 2)); position: absolute; }
.s-slide-action:first-child:nth-last-child(3), .s-slide-action:first-child:nth-last-child(3) ~ .s-slide-action { width: calc((100% / 3) - (50px / 3)); position: absolute; }
.s-slide-action .s-sa-label { place-self: center; text-align: center; width: 100%; display: block; cursor: pointer; }
.s-slide-action .s-sa-icon {
    height: 1.5em; width: 1.5em; place-self: center; display: block;
    background-repeat: no-repeat; background-position: center; background-size: 1.5em 1.5em;
}
.s-slide-action .s-sa-text { display: flex; width: 100%; transition: 0.3s; place-self: center; flex-direction: column; }
.s-slide-action:has(.s-sa-icon) .s-sa-label { margin-top: 0.2em; }
.s-slide-action:first-child { left: 0px; margin-left: 50px; }
.s-slide-action:last-child { right: 0px; }
.s-slide-actions-wrap.s-slide-default-active .s-slide-actions .s-slide-action.s-default { width: 100%; }
.s-slide-actions-wrap.s-slide-default-active:not(.s-slide-default-done) .s-sa-text { transform: translateX(25px); }
.s-slide-actions-wrap.s-slide-default-done .s-slide-element { transform: translateX(-100%); opacity: 0; transition: transform 0.3s, opacity 1s; }
.s-slide-actions-wrap.s-slide-default-done .s-slide-actions { width: 100%; transition: 0.3s; }
.s-slide-actions-wrap.s-slide-reset .s-slide-element { transform: none; transition: opacity 0.3s; opacity: 1; }
.s-slide-actions-wrap.s-slide-deleting { height: 0px !important; transition: height 0.3s; }
.s-slide-active:active, .s-slide-actions-wrap.s-slide-active .s-slide-element:active { cursor: grabbing !important; }
div:has(.s-slide-actions-wrap) { user-select: none; -webkit-user-select: none; }

/* Animations */
@keyframes s-modal-wrap {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes s-modal-wrap-close {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes s-modal {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes s-modal-close {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); }
    100% { transform: scale(0.5); }
}
@keyframes s-modal-unwrapped {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes s-modal-unwrapped-close {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.1); }
    100% { transform: scale(0.5); opacity: 0; }
}
@keyframes s-notification-top {
    0% { opacity: 0; transform: translateY(-80px); }
    60% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@keyframes s-notification-top-close {
    0% { opacity: 1; transform: translateY(0px); }
    40% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 0; transform: translateY(-80px); }
}
@keyframes s-notification-bottom {
    0% { opacity: 0; transform: translateY(80px); }
    60% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@keyframes s-notification-bottom-close {
    0% { opacity: 1; transform: translateY(0px); }
    40% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(80px); }
}
@keyframes s-block-ui-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes s-calendar-picker-anim {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes s-uploading-anim {
    0% { transform: rotate(20deg); }
    100% { transform: rotate(380deg); }
}
@keyframes s-menu-open-anim {
    0% { transform: translate(0px, -30px) scale(0.9); opacity: 0; }
    60% { transform: translate(0px, 10px) scale(1.05); opacity: 1; }
    100% { transform: translate(0px, 0px) scale(1); opacity: 1; }
}
@keyframes s-menu-close-anim {
    0% { transform: translate(0px, 0px) scale(1); opacity: 1; }
    40% { transform: translate(0px, 10px) scale(1.05); opacity: 1; }
    100% { transform: translate(0px, -30px) scale(0.9); opacity: 0; }
}
@keyframes s-menu-wedge-open-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes s-menu-wedge-close-anim {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes s-uploader-load-cropping {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes s-loading-circle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes s-search-load-bar {
    0% { margin-left: 0%; width: 10%; }
    40% { margin-left: 15%; width: 40%; }
    40% { margin-left: 25%; width: 50%; }
    60% { margin-left: 45%; width: 40%; }
    100% { margin-left: 90%; width: 10%; }
}