/*
 + --------------------------------------------------
 |  Constants
 + --------------------------------------------------
 */
:root {
    --ws-color: #ff9500;
    --ws-color-rgb: 255, 149, 0;
}


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

    text-shadow: none;
    text-rendering: geometricPrecision;
    outline: none;
    scrollbar-width: thin;
}

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

::-webkit-scrollbar {
    width: 9px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #cdcdcd;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:active {
    background: #606060;
}

html,
body {
    width: 100%;
    min-height: 100vh;
}

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

a {
    text-decoration: none;
    color: inherit;
}
a * {
    cursor: pointer;
}

ul {
    list-style: none;
}

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;
    letter-spacing: inherit;
}

table {
    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 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-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);
    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-color);
    border-color: var(--ws-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-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, .04), 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%;
    display: block;
    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;
}