/* GENERAL
--------------------------------
--------------------------------*/
    
/*
html, body {
    overflow-x: hidden;
    font-family: Helvetica, 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
}
*/
*, *:before, *:after {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none;
    list-style: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    column-gap: 20px;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
/*
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
*/
}

::-moz-selection {
    background: var(--clr-yellow);
    color: white;
}
::selection {
    background: var(--clr-yellow);
    color: white;
}


[contenteditable]:focus {
    outline: none;
} 
[placeholder]:empty::before {
    content: attr(placeholder);
    color: black; 
}
[placeholder]:empty:focus::before {
    content: "";
}




.input, .input * {
    font-family: Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */    
}

/* UI SELECT
--------------------------------
--------------------------------*/

select.input {
    background-color: var(--clr-gray-03);
    height: 20px;
    vertical-align: middle;
    padding: 0px 5px;
    border-radius: 0;
    
    font-family: var(--fontfamily-small);
    font-weight: var(--fontweight-small);
    font-size: var(--fontsize-small);
}
body.invert select.input {
    background-color: var(--clr-gray-00);
}

    
/* UI SLIDER
--------------------------------
--------------------------------*/
    
/*
.input.ui-slider {
    width: 200px;
    border: none;
    outline: none;
    border-radius: 0px;
    height: 20px;
    background: var(--clr-gray-04);

    padding: 0 10px;
}
.input .ui-slider-handle { 
    width: 20px;
    height: 20px;
    top: 0px;
    margin-left: -10px;
    border-radius: 0px;
    border: none;
    outline: none;
    background: black;

    position:relative;
    display:block;
}
.input .ui-slider-range { 
    display: none!important;
}
*/


.input.ui-slider {
    width: 200px;
    border: none;
    outline: none;
    border-radius: 0px;
    height: 19px;
    padding: 0 9px;
    background: transparent;
}
.input.ui-slider:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 9px;
    width: 200px;
    height: 1px;
    background: black;
}
.input .ui-slider-handle { 
    width: 19px;
    height: 19px;
    top: 0;
    margin-left: -9px;
    border-radius: 0px;
    border: none;
    outline: none;
    background: black;

    position:relative;
    display:block;
    cursor: pointer;
}
.input .ui-slider-range { 
    display: none!important;
}

.invert .input.ui-slider:before {
    background: white;
}
.invert .input .ui-slider-handle { 
    background: white;
}

@media screen and (max-width: 1000px){
    .input.ui-slider {
        width: 150px;
    }
    .input.ui-slider:before {
        width: 150px;
    }
}
@media screen and (max-width: 500px){
    .input.ui-slider {
        width: 120px;
    }
    .input.ui-slider:before {
        width: 120px;
    }
}



    
/* DIV BUTTON
--------------------------------
--------------------------------*/
    
.divbutton,
.swiper-button-next, .swiper-button-prev {
    background-color: var(--clr-yellow);
    color: black;
    width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    text-align: center;
    vertical-align: middle;
    line-height: 26px;
    transform: translate(0,-3px);
}
.divbutton:hover,
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: var(--clr-red);
    color: white;
}


/* MIXED COLORS */
/* .swiper-button-prev {
    background-color: var(--clr-green);
}
.swiper-button-next {
    background-color: var(--clr-blue);
}
.divbutton.gxbutton {
    background-color: var(--clr-blue);
}
.divbutton.gxbutton:hover {
    background-color: var(--clr-red);
} */
.swiper-button-disabled {
    opacity: 1 !important;
    background-color: var(--clr-gray);
}


.divbutton.inv {
    width: 16px;
    min-width: 16px;
    height: 16px;
    transform: translate(0,0);
}
.divbutton.inv {
    border: 1px solid black;
}
.invert .divbutton.inv {
    border: 1px solid white;
}
.divbutton.inv,
.invert .divbutton.inv:hover {
    background: linear-gradient(to right, var(--background) 50%, var(--background-invert) 50%);
}
.divbutton.inv:hover,
.invert .divbutton.inv {
    background: linear-gradient(to right, var(--background-invert) 50%, var(--background) 50%);
}




.divbutton.play {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 64 64" fill="black"><polygon points="16,12 48,32 16,52"/></svg>');
    background-repeat: no-repeat;
    background-position: 55% center; 
    background-size: 45%; /* Adjust size */
    color: transparent; /* Hide the text */
}

.divbutton.pause {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 64 64" fill="black"><rect x="16" y="12" width="10" height="40"/><rect x="38" y="12" width="10" height="40"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%; /* Adjust size */
    color: transparent; /* Hide the text */
}





.swiper-button-next, .swiper-button-prev {
    top: 23px;
}
.swiper-button-prev {
    left: 9px;
}
.swiper-button-next {
    left: 41px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    position: absolute;
    font-size: unset;
}
.swiper-button-next:after {
    content: "\2192";
}
.swiper-button-prev:after {
    content: "\2190";
}

.gxbutton {
    display: inline-block;
    white-space: nowrap;
}










/* hide the default checkbox */
input[type='checkbox'].switch-control {
    position: absolute;
    margin-left: -9999px;
}

input[type='checkbox'].switch-control ~ .switch-label {
    position: relative;
    display: inline-block;
    min-height: 26px;
    min-width: 50px;
/*    width: fit-content;*/
    /* transform: translate(0,-6px); */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-color: var(--clr-gray-04);
    overflow: hidden;

    transform: translate3d(0,-6px,0);
    /* transform: translateZ(0);
    -webkit-backface-visibility: hidden; */
}
body.invert input[type='checkbox'].switch-control ~ .switch-label {
    background-color: var(--clr-gray--2);
}

input[type='checkbox'].switch-control ~ .switch-label:before {
    content: '';
    position: absolute;
    top: 20px;

    left: 0;
    bottom: 0;
/*    width: 40px;*/
    min-width: 50px;
/*    width: fit-content;*/
    text-align: center;
    background-color: var(--clr-red);
    color: #333;
    margin: 0;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* MIXED COLORS */
.stylistics input[type='checkbox'].switch-control ~ .switch-label:before {
    background-color: var(--clr-green);
}
.case input[type='checkbox'].switch-control ~ .switch-label:before {
    background-color: var(--clr-blue);
}


input[type='checkbox'].switch-control ~ .switch-label:after {
    content: attr(data);
    position: absolute;
    
    vertical-align: middle;
    left: 0;
/*    width: 40px;*/
    min-width: 50px;
/*    width: fit-content;*/
    
    top: 7px;
    height: 19px;
    line-height: 19px;
    background-color: var(--clr-gray-03);
/*    color: white;*/
    text-align: center;
    
    font-family: var(--fontfamily-small);
    font-weight: var(--fontweight-small);
    font-size: var(--fontsize-small);
    
/*    font-size: 10px;*/
/*    line-height: 13px;*/

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

body.invert input[type='checkbox'].switch-control ~ .switch-label:after {
    background-color: var(--clr-gray-00);
}

/* checked state */
input[type='checkbox'].switch-control:checked ~ .switch-label:before {
/*  content: 'On';*/
/*  content: '';*/
/*  background-color: ;*/
/*  color: #fff;*/
    top: 0px;
}

input[type='checkbox'].switch-control:checked ~ .switch-label:after {
  top: 0;
}





.input-checkbox * {
    cursor: pointer;
}
.input-checkbox input[type='checkbox'].switch-control ~ .switch-label:before {
    content: '\2713';
    text-align: center;
    font-family: var(--fontfamily-small);
    font-weight: var(--fontweight-small);
    font-size: var(--fontsize-small);
    line-height: 19px;
    transform: translate(0, 7px);
    background-color: var(--clr-green);
}
.invert .input-checkbox input[type='checkbox'].switch-control ~ .switch-label:before {
    color: white;
}
.input-checkbox input[type='checkbox'].switch-control ~ .switch-label:after {
    top: 19px;
    height: 7px;
}
.input-checkbox input[type='checkbox'].switch-control:checked ~ .switch-label:after {
    top: 0px;
}











/* CONTROL BAR
--------------------------------
--------------------------------*/   




.control_bar {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
/*    opacity: 0;*/
/*    transition: opacity 0.1s;*/
    padding-top: 6px;
}
.control_bar div {
    display: inline-block;
    vertical-align: top;
}
.control_bar .input {
    margin-bottom: 6px;
    margin-right: 6px;
}
/* .control_bar div div {
    margin-right: 0;
} */

/*
.typehere:hover .control_bar,
.typehere:focus .control_bar {
    opacity: 1;
}
*/

/*
.control_bar {
    text-align: center;
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
}
*/


.variableInputs .gxbutton {
    margin-right: 0px;
}
.variableInputs .gxsliderwrap {
    white-space: nowrap;
}






.module:not(.charmap) .control_bar {
    opacity: 0;
    transition: opacity 0.5s;
}
.module.inview .control_bar,
.module:hover .control_bar {
    opacity: 1;
}

/* .module .control_bar {
    opacity: 1;
    max-height: 200px;
    transition: opacity 0.5s, max-height 0.5s, padding-bottom 0.5s;
}
.module:not(.inview) .control_bar {
    opacity: 0;
    max-height: 0;
    padding-bottom: 0;
} */

.control_bar.singlefont .fontInputs,
.module.clock .control_bar.singlefont .randomize,
.module.typename .control_bar.singlefont .randomize,
.module.charmap .control_bar.singlefont .randomize {
    width: 0px;
    min-width: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
}