/*
 + --------------------------------------------------
 | Variables
 | Use pixel unit when declaring variables in root
 | to avoid issues when using the calc() function
 + --------------------------------------------------
 */
:root {
    --ws-color: #ff9500;
    --ws-color-rgb: 255, 149, 0;

    --ws-scroll-fill: rgba(255, 255, 255, 0);
    --ws-scroll-width: 8px;
    --ws-scroll-space: 1px;
}


/*
 + --------------------------------------------------
 | Reset elements
 + --------------------------------------------------
 */
* {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;

    outline: none;
    text-shadow: none;
    text-rendering: geometricPrecision;
    font-synthesis: none;

    scroll-behavior: smooth;
    scrollbar-width: thin; /* thin=8px */
    scrollbar-color: #999 transparent;
}

/*
::-webkit-scrollbar {
    width: var(--ws-scroll-width);
    background-color: var(--ws-scroll-fill);
}

::-webkit-scrollbar-thumb {
    background-color: #999;
    background-clip: padding-box;
    border-radius: var(--ws-scroll-width);
    border-width: var(--ws-scroll-space);
    border-style: solid;
    border-color: var(--ws-scroll-fill);
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}

::-webkit-scrollbar-thumb:active {
    background: #777;
}
*/

*,
:before,
:after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
}

html, body,
blockquote, code, pre,
fieldset, legend, form, input, textarea, select, button,
h1, h2, h3, h4, h5, h6,
menu, ol, ul, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a * {
    cursor: pointer;
}

dl, ol, ul, menu {
    list-style: none;
    margin: 0;
}

img {
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: table;
}

iframe {
    max-width: 100%;
}

input,
textarea {
    font-family: inherit;
    letter-spacing: inherit;
}

textarea {
    display: block;
    resize: vertical;
    font-size: 1em;
}

input[type = button],
input[type = submit],
button {
    border: none;
    background: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

table {
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}


/*
 + --------------------------------------------------
 | Global properties
 + --------------------------------------------------
 */
.ws-hide {
    display: none;
}

.ws-clear {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
}

.ws-require:after {
    content: '*';
    color: var(--ws-color);
    margin-left: .2em;
    display: inline-block;
    line-height: 1;
    font-size: inherit;
    /* vertical-align: super; */
    transform: translateY(-.25em);
}

.ws-paragraph p {
    margin-top: 1.5em;
}

.ws-paragraph h2,
.ws-paragraph h3 {
    margin-bottom: 0;
}

.ws-paragraph h2:not(:first-child),
.ws-paragraph h3:not(:first-child) {
    margin-top: 1.5em;
}

.ws-paragraph h4,
.ws-paragraph h5,
.ws-paragraph h6 {
    margin-bottom: 0
}

.ws-paragraph h4:not(:first-child),
.ws-paragraph h5:not(:first-child),
.ws-paragraph h6:not(:first-child) {
    margin-top: .75em
}

.ws-paragraph h2 + p,
.ws-paragraph h3 + p,
.ws-paragraph h4 + p,
.ws-paragraph h5 + p,
.ws-paragraph h6 + p {
    margin-top: .75em
}

.ws-paragraph ol,
.ws-paragraph ul {
    margin-top: 1em;
    margin-bottom: 0;
    padding-left: 3em;
}

.ws-paragraph ul {
    list-style: disc;
}

.ws-paragraph li + li {
    margin-top: 1em;
    margin-bottom: 0;
}

.ws-paragraph table {
    margin-top: 1em;
}

.ws-paragraph table,
.ws-paragraph th,
.ws-paragraph td {
    border: 1px solid
}

.ws-paragraph blockquote {
    padding: 2em 0 2em 2em;
}


/*
 + --------------------------------------------------
 | Flex layout
 + --------------------------------------------------
 */
.ws-flex {
    display: flex;
    display: -webkit-flex;
}

.ws-flex-important {
    display: flex !important;
    display: -webkit-flex !important;
}

.ws-flex-inline {
    display: inline-flex;
    display: -webkit-inline-flex;
}

.ws-flex-inline-important {
    display: inline-flex !important;
    display: -webkit-inline-flex !important;
}

.ws-flex-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- */

.ws-flex-row {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.ws-flex-row-reverse {
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
}

.ws-flex-column {
    flex-direction: column;
    -webkit-flex-direction: column;
}

.ws-flex-column-reverse {
    flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
}

/* ---------- */

.ws-flex-wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.ws-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
}

.ws-flex-nowrap {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
}

/* ---------- */

.ws-flex-jc-start {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.ws-flex-jc-end {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.ws-flex-jc-center {
    justify-content: center;
    -webkit-justify-content: center;
}

.ws-flex-jc-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.ws-flex-jc-around {
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

/* ---------- */

.ws-flex-ac-start {
    align-content: flex-start;
    -webkit-align-content: flex-start;
}

.ws-flex-ac-end {
    align-content: flex-end;
    -webkit-align-content: flex-end;
}

.ws-flex-ac-center {
    align-content: center;
    -webkit-align-content: center;
}

.ws-flex-ac-between {
    align-content: space-between;
    -webkit-align-content: space-between;
}

.ws-flex-ac-around {
    align-content: space-around;
    -webkit-align-content: space-around;
}

/* ---------- */

.ws-flex-ai-start {
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.ws-flex-ai-end {
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.ws-flex-ai-center {
    align-items: center;
    -webkit-align-items: center;
}

.ws-flex-ai-baseline {
    align-items: baseline;
    -webkit-align-items: baseline;
}

.ws-flex-ai-stretch {
    align-items: stretch;
    -webkit-align-items: stretch;
}

/* ---------- */

.ws-flex-as-start {
    align-self: flex-start;
    -webkit-align-self: flex-start;
}

.ws-flex-as-end {
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

.ws-flex-as-center {
    align-self: center;
    -webkit-align-self: center;
}

.ws-flex-as-baseline {
    align-self: baseline;
    -webkit-align-self: baseline;
}

.ws-flex-as-stretch {
    align-self: stretch;
    -webkit-align-self: stretch;
}

/* ---------- */

.ws-flex-col-1 {
    width: calc(100% / 12);
    width: -webkit-calc(100% / 12);
}

.ws-flex-col-2 {
    width: calc((100% / 12) * 2);
    width: -webkit-calc((100% / 12) * 2);
}

.ws-flex-col-3 {
    width: 25%
}

.ws-flex-col-4 {
    width: calc((100% / 12) * 4);
    width: -webkit-calc((100% / 12) * 4);
}

.ws-flex-col-5 {
    width: calc((100% / 12) * 5);
    width: -webkit-calc((100% / 12) * 5);
}

.ws-flex-col-6 {
    width: 50%;
}

.ws-flex-col-7 {
    width: calc((100% / 12) * 7);
    width: -webkit-calc((100% / 12) * 7);
}

.ws-flex-col-8 {
    width: calc((100% / 12) * 8);
    width: -webkit-calc((100% / 12) * 8);
}

.ws-flex-col-9 {
    width: 75%;
}

.ws-flex-col-10 {
    width: calc((100% / 12) * 10);
    width: -webkit-calc((100% / 12) * 10);
}

.ws-flex-col-11 {
    width: calc((100% / 12) * 11);
    width: -webkit-calc((100% / 12) * 11);
}

.ws-flex-col-12 {
    width: 100%;
}

/* ---------- */

.ws-flex-w-1 {
    width: 1%
}

.ws-flex-w-2 {
    width: 2%
}

.ws-flex-w-3 {
    width: 3%
}

.ws-flex-w-4 {
    width: 4%
}

.ws-flex-w-5 {
    width: 5%
}

.ws-flex-w-6 {
    width: 6%
}

.ws-flex-w-7 {
    width: 7%
}

.ws-flex-w-8 {
    width: 8%
}

.ws-flex-w-9 {
    width: 9%
}

.ws-flex-w-10 {
    width: 10%
}

.ws-flex-w-11 {
    width: 11%
}

.ws-flex-w-12 {
    width: 12%
}

.ws-flex-w-13 {
    width: 13%
}

.ws-flex-w-14 {
    width: 14%
}

.ws-flex-w-15 {
    width: 15%
}

.ws-flex-w-16 {
    width: 16%
}

.ws-flex-w-17 {
    width: 17%
}

.ws-flex-w-18 {
    width: 18%
}

.ws-flex-w-19 {
    width: 19%
}

.ws-flex-w-20 {
    width: 20%
}

.ws-flex-w-21 {
    width: 21%
}

.ws-flex-w-22 {
    width: 22%
}

.ws-flex-w-23 {
    width: 23%
}

.ws-flex-w-24 {
    width: 24%
}

.ws-flex-w-25 {
    width: 25%
}

.ws-flex-w-26 {
    width: 26%
}

.ws-flex-w-27 {
    width: 27%
}

.ws-flex-w-28 {
    width: 28%
}

.ws-flex-w-29 {
    width: 29%
}

.ws-flex-w-30 {
    width: 30%
}

.ws-flex-w-31 {
    width: 31%
}

.ws-flex-w-32 {
    width: 32%
}

.ws-flex-w-33 {
    width: 33%
}

.ws-flex-w-34 {
    width: 34%
}

.ws-flex-w-35 {
    width: 35%
}

.ws-flex-w-36 {
    width: 36%
}

.ws-flex-w-37 {
    width: 37%
}

.ws-flex-w-38 {
    width: 38%
}

.ws-flex-w-39 {
    width: 39%
}

.ws-flex-w-40 {
    width: 40%
}

.ws-flex-w-41 {
    width: 41%
}

.ws-flex-w-42 {
    width: 42%
}

.ws-flex-w-43 {
    width: 43%
}

.ws-flex-w-44 {
    width: 44%
}

.ws-flex-w-45 {
    width: 45%
}

.ws-flex-w-46 {
    width: 46%
}

.ws-flex-w-47 {
    width: 47%
}

.ws-flex-w-48 {
    width: 48%
}

.ws-flex-w-49 {
    width: 49%
}

.ws-flex-w-50 {
    width: 50%
}

.ws-flex-w-51 {
    width: 51%
}

.ws-flex-w-52 {
    width: 52%
}

.ws-flex-w-53 {
    width: 53%
}

.ws-flex-w-54 {
    width: 54%
}

.ws-flex-w-55 {
    width: 55%
}

.ws-flex-w-56 {
    width: 56%
}

.ws-flex-w-57 {
    width: 57%
}

.ws-flex-w-58 {
    width: 58%
}

.ws-flex-w-59 {
    width: 59%
}

.ws-flex-w-60 {
    width: 60%
}

.ws-flex-w-61 {
    width: 61%
}

.ws-flex-w-62 {
    width: 62%
}

.ws-flex-w-63 {
    width: 63%
}

.ws-flex-w-64 {
    width: 64%
}

.ws-flex-w-65 {
    width: 65%
}

.ws-flex-w-66 {
    width: 66%
}

.ws-flex-w-67 {
    width: 67%
}

.ws-flex-w-68 {
    width: 68%
}

.ws-flex-w-69 {
    width: 69%
}

.ws-flex-w-70 {
    width: 70%
}

.ws-flex-w-71 {
    width: 71%
}

.ws-flex-w-72 {
    width: 72%
}

.ws-flex-w-73 {
    width: 73%
}

.ws-flex-w-74 {
    width: 74%
}

.ws-flex-w-75 {
    width: 75%
}

.ws-flex-w-76 {
    width: 76%
}

.ws-flex-w-77 {
    width: 77%
}

.ws-flex-w-78 {
    width: 78%
}

.ws-flex-w-79 {
    width: 79%
}

.ws-flex-w-80 {
    width: 80%
}

.ws-flex-w-81 {
    width: 81%
}

.ws-flex-w-82 {
    width: 82%
}

.ws-flex-w-83 {
    width: 83%
}

.ws-flex-w-84 {
    width: 84%
}

.ws-flex-w-85 {
    width: 85%
}

.ws-flex-w-86 {
    width: 86%
}

.ws-flex-w-87 {
    width: 87%
}

.ws-flex-w-88 {
    width: 88%
}

.ws-flex-w-89 {
    width: 89%
}

.ws-flex-w-90 {
    width: 90%
}

.ws-flex-w-91 {
    width: 91%
}

.ws-flex-w-92 {
    width: 92%
}

.ws-flex-w-93 {
    width: 93%
}

.ws-flex-w-94 {
    width: 94%
}

.ws-flex-w-95 {
    width: 95%
}

.ws-flex-w-96 {
    width: 96%
}

.ws-flex-w-97 {
    width: 97%
}

.ws-flex-w-98 {
    width: 98%
}

.ws-flex-w-99 {
    width: 99%
}

.ws-flex-w-100 {
    width: 100%
}

/* ---------- */

.ws-flex-h-1 {
    height: 1%
}

.ws-flex-h-2 {
    height: 2%
}

.ws-flex-h-3 {
    height: 3%
}

.ws-flex-h-4 {
    height: 4%
}

.ws-flex-h-5 {
    height: 5%
}

.ws-flex-h-6 {
    height: 6%
}

.ws-flex-h-7 {
    height: 7%
}

.ws-flex-h-8 {
    height: 8%
}

.ws-flex-h-9 {
    height: 9%
}

.ws-flex-h-10 {
    height: 10%
}

.ws-flex-h-11 {
    height: 11%
}

.ws-flex-h-12 {
    height: 12%
}

.ws-flex-h-13 {
    height: 13%
}

.ws-flex-h-14 {
    height: 14%
}

.ws-flex-h-15 {
    height: 15%
}

.ws-flex-h-16 {
    height: 16%
}

.ws-flex-h-17 {
    height: 17%
}

.ws-flex-h-18 {
    height: 18%
}

.ws-flex-h-19 {
    height: 19%
}

.ws-flex-h-20 {
    height: 20%
}

.ws-flex-h-21 {
    height: 21%
}

.ws-flex-h-22 {
    height: 22%
}

.ws-flex-h-23 {
    height: 23%
}

.ws-flex-h-24 {
    height: 24%
}

.ws-flex-h-25 {
    height: 25%
}

.ws-flex-h-26 {
    height: 26%
}

.ws-flex-h-27 {
    height: 27%
}

.ws-flex-h-28 {
    height: 28%
}

.ws-flex-h-29 {
    height: 29%
}

.ws-flex-h-30 {
    height: 30%
}

.ws-flex-h-31 {
    height: 31%
}

.ws-flex-h-32 {
    height: 32%
}

.ws-flex-h-33 {
    height: 33%
}

.ws-flex-h-34 {
    height: 34%
}

.ws-flex-h-35 {
    height: 35%
}

.ws-flex-h-36 {
    height: 36%
}

.ws-flex-h-37 {
    height: 37%
}

.ws-flex-h-38 {
    height: 38%
}

.ws-flex-h-39 {
    height: 39%
}

.ws-flex-h-40 {
    height: 40%
}

.ws-flex-h-41 {
    height: 41%
}

.ws-flex-h-42 {
    height: 42%
}

.ws-flex-h-43 {
    height: 43%
}

.ws-flex-h-44 {
    height: 44%
}

.ws-flex-h-45 {
    height: 45%
}

.ws-flex-h-46 {
    height: 46%
}

.ws-flex-h-47 {
    height: 47%
}

.ws-flex-h-48 {
    height: 48%
}

.ws-flex-h-49 {
    height: 49%
}

.ws-flex-h-50 {
    height: 50%
}

.ws-flex-h-51 {
    height: 51%
}

.ws-flex-h-52 {
    height: 52%
}

.ws-flex-h-53 {
    height: 53%
}

.ws-flex-h-54 {
    height: 54%
}

.ws-flex-h-55 {
    height: 55%
}

.ws-flex-h-56 {
    height: 56%
}

.ws-flex-h-57 {
    height: 57%
}

.ws-flex-h-58 {
    height: 58%
}

.ws-flex-h-59 {
    height: 59%
}

.ws-flex-h-60 {
    height: 60%
}

.ws-flex-h-61 {
    height: 61%
}

.ws-flex-h-62 {
    height: 62%
}

.ws-flex-h-63 {
    height: 63%
}

.ws-flex-h-64 {
    height: 64%
}

.ws-flex-h-65 {
    height: 65%
}

.ws-flex-h-66 {
    height: 66%
}

.ws-flex-h-67 {
    height: 67%
}

.ws-flex-h-68 {
    height: 68%
}

.ws-flex-h-69 {
    height: 69%
}

.ws-flex-h-70 {
    height: 70%
}

.ws-flex-h-71 {
    height: 71%
}

.ws-flex-h-72 {
    height: 72%
}

.ws-flex-h-73 {
    height: 73%
}

.ws-flex-h-74 {
    height: 74%
}

.ws-flex-h-75 {
    height: 75%
}

.ws-flex-h-76 {
    height: 76%
}

.ws-flex-h-77 {
    height: 77%
}

.ws-flex-h-78 {
    height: 78%
}

.ws-flex-h-79 {
    height: 79%
}

.ws-flex-h-80 {
    height: 80%
}

.ws-flex-h-81 {
    height: 81%
}

.ws-flex-h-82 {
    height: 82%
}

.ws-flex-h-83 {
    height: 83%
}

.ws-flex-h-84 {
    height: 84%
}

.ws-flex-h-85 {
    height: 85%
}

.ws-flex-h-86 {
    height: 86%
}

.ws-flex-h-87 {
    height: 87%
}

.ws-flex-h-88 {
    height: 88%
}

.ws-flex-h-89 {
    height: 89%
}

.ws-flex-h-90 {
    height: 90%
}

.ws-flex-h-91 {
    height: 91%
}

.ws-flex-h-92 {
    height: 92%
}

.ws-flex-h-93 {
    height: 93%
}

.ws-flex-h-94 {
    height: 94%
}

.ws-flex-h-95 {
    height: 95%
}

.ws-flex-h-96 {
    height: 96%
}

.ws-flex-h-97 {
    height: 97%
}

.ws-flex-h-98 {
    height: 98%
}

.ws-flex-h-99 {
    height: 99%
}

.ws-flex-h-100 {
    height: 100%
}


/*
 + --------------------------------------------------
 | UI Table element
 + --------------------------------------------------
 */
.ws-table {
    display: table
}

.ws-table-important {
    display: table !important;
}

.ws-table-caption {
    display: table-caption;
}

.ws-table-head {
    display: table-header-group;
}

.ws-table-body {
    display: table-row-group
}

.ws-table-foot {
    display: table-footer-group;
}

.ws-table-row {
    display: table-row;
}

.ws-table-row > * {
    display: table-cell;
    vertical-align: middle;
}


/*
 + --------------------------------------------------
 | UI Select element
 + --------------------------------------------------
 */
.ws-select {
    --ws-select-color: #000;
    --ws-select-arrow: 3rem;

    width: auto;
    border-bottom: solid thin var(--ws-select-color);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    position: relative;
    transition: .3s ease-in-out;
}

.ws-select:hover {
    background: #fff;
}

/*.ws-select > * {*/
/*height: 100%;*/
/*position: relative;*/

/*display: inline-flex;*/
/*display: -webkit-inline-flex;*/

/*align-items: center;*/
/*-webkit-align-items: center;*/
/*}*/

.ws-select:before,
.ws-select:after {
    content: '';
    height: 20%;
    min-height: 1rem;
    border-left: solid thin var(--ws-select-color);
    position: absolute;
    right: calc(var(--ws-select-arrow) / 2);
    top: 0;
    bottom: 0;
    margin: auto;
    transform-origin: center bottom;
}

.ws-select:before {
    /*transform: translate3d(-25%, 0, 0) rotate(45deg);*/
    transform: rotate(45deg);
}

.ws-select:after {
    /*transform: translate3d(25%, 0, 0) rotate(-45deg);*/
    transform: rotate(-45deg);
}

.ws-select select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    font-size: inherit;
    background: transparent;
    margin-right: var(--ws-select-arrow);
}

/* ------------------------- */

.ws-select-new {
    border-bottom: dashed thin #000;
    display: inline-flex;
    display: -webkit-inline-flex;
    align-items: center;
    -webkit-align-items: center;
}

.ws-select-new select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 100%;
    border: none;
    padding: 0 .5em;
    box-shadow: none;
    font-size: inherit;
    background: transparent;
    box-sizing: content-box;
}

.ws-select-new option {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    padding: 0 !important;
}


/*
 + --------------------------------------------------
 | UI Radio element
 + --------------------------------------------------
 */
.ws-radio {
    --ws-radio-size: 2em;
    --ws-radio-size-inner: 60%;
    --ws-radio-border: solid thin #e5e5e5;
    --ws-radio-spacing: 1em;

    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}

.ws-radio input[type=radio],
.ws-radio input[type=radio]:before {
    border-radius: 50%;
}

.ws-radio input[type=radio] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    width: var(--ws-radio-size);
    height: var(--ws-radio-size);
    border: var(--ws-radio-border);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1) inset;
    margin-right: var(--ws-radio-spacing);
    position: relative;
    transition: .3s ease-out;
}

.ws-radio input[type=radio]:before {
    content: '';
    width: 0;
    height: 0;
    background: var(--ws-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: inherit;
}

.ws-radio input[type=radio]:checked:before {
    width: var(--ws-radio-size-inner);
    height: var(--ws-radio-size-inner);
}

.ws-radio input[type=radio]:checked {
    border-color: var(--ws-color)
}


/*
 + --------------------------------------------------
 | UI Checkbox element
 + --------------------------------------------------
 */
.ws-checkbox {
    --ws-checkbox-size: 2em;
    --ws-checkbox-fill: transparent;
    --ws-checkbox-color: var(--ws-color);
    --ws-checkbox-border: solid thin #ebebeb;
    --ws-checkbox-border-radius: 5px;
    --ws-checkbox-spacing: 1em;

    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    user-select: none;
}

.ws-checkbox input[type=checkbox] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    width: var(--ws-checkbox-size);
    height: var(--ws-checkbox-size);
    background: var(--ws-checkbox-fill);
    border-radius: var(--ws-checkbox-border-radius);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1) inset;
    border: var(--ws-checkbox-border);
    position: relative;
    margin-right: var(--ws-checkbox-spacing);
}

.ws-checkbox input[type=checkbox]:checked {
    background: var(--ws-checkbox-color);
    border-color: var(--ws-checkbox-color);
    box-shadow: none;
}

.ws-checkbox input[type=checkbox]:before {
    content: '';
    color: #fff;
    font-size: calc(var(--ws-checkbox-size) / 1.25);
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: inherit;
}

.ws-checkbox input[type=checkbox]:checked:before {
    content: '\2713';
}

.ws-checkbox input[type=checkbox] + * {
    width: calc(100% - var(--ws-checkbox-size) - var(--ws-checkbox-spacing));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*user-select: none;*/
}

.ws-checkbox input[type=checkbox]:checked + * {
    color: var(--ws-checkbox-color)
}


/*
 + --------------------------------------------------
 | UI Toggle element
 + --------------------------------------------------
 */
.ws-toggle {
    --ws-toggle-size: 2em;
    --ws-toggle-size-bar: calc(var(--ws-toggle-size) / 1.6);
    --ws-toggle-fill-back: #e5e5e5;
    --ws-toggle-fill-fore: #fff;

    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    min-width: calc(1.8 * var(--ws-toggle-size));
    height: var(--ws-toggle-size);
    border-radius: var(--ws-toggle-size);
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.ws-toggle:before,
.ws-toggle:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
}

.ws-toggle:before {
    width: 100%;
    height: var(--ws-toggle-size-bar);
    border-radius: var(--ws-toggle-size-bar);
    background: var(--ws-toggle-fill-back);
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.ws-toggle:checked:before {
    --ws-toggle-fill-back: rgba(var(--ws-color-rgb), .2);
}

.ws-toggle:after {
    width: var(--ws-toggle-size);
    height: var(--ws-toggle-size);
    border-radius: 50%;
    background: var(--ws-toggle-fill-fore);
    /*box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 2px 1px 3px 1px rgba(0, 0, 0, .15);*/
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 2px 0 2px rgba(0, 0, 0, .2);
    top: calc((var(--ws-toggle-size) - var(--ws-toggle-size)) / 2);
    cursor: pointer;
    transition: .3s ease-out;
}

.ws-toggle:checked:after {
    left: calc(100% - var(--ws-toggle-size));
    background: var(--ws-color);
    /*box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), -2px 1px 3px 1px rgba(0, 0, 0, .15);*/
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), -2px 0 2px rgba(0, 0, 0, .2);
}


/*
 + --------------------------------------------------
 | UI Image element
 + --------------------------------------------------
 */
[class *= "ws-img-"] {
    width: 100%;
    position: relative;
}

[class *= "ws-img-"] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 0;
}

[class *= "ws-img-1-1"] {
    padding-bottom: 100%
}

[class *= "ws-img-2-3"] {
    padding-bottom: 150%
}

[class *= "ws-img-3-1"] {
    padding-bottom: 33.333%
}

[class *= "ws-img-3-2"] {
    padding-bottom: 66.667%
}

[class *= "ws-img-4-3"] {
    padding-bottom: 75%
}

[class *= "ws-img-16-9"] {
    padding-bottom: 56.25%
}

[class *= "ws-img-16-10"] {
    padding-bottom: 62.5%
}

[class *= "ws-img-screen"] {
    padding-bottom: 100vh;
}