/** ********************************* **
/** *        C O N T R O L S        * **
/** ********************************* **/

:root {

    --controls__upload                    : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,-13 10,-4 7,-1 2,-6 2,5 -2,5 -2,-6 -7,-1 -10,-4'/></g></svg>");
/*
    --controls__download                  : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,7 11,-2 7,-5, 2,0 2,-15 -2,-15 -2,0 -7,-5 -11,-2'/></g></svg>");
    --controls__arrowup                   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8.5,8 8.5,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown                 : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8.5,-8 -10,-6 -1,8 1,8 10,-6 8.5,-8'/></g></svg>");
*/
    --controls__arrowup                   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8,8 0,-4.5 8,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown                 : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %2341201F;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8,-8 -10,-6 -1,8 1,8 10,-6 8,-8 0,4.5'/></g></svg>");

    --controls__upload-size               : 45px 45px;
    --controls__arrow-size                : 30px 40px;
    --controls__arrow-position            : 100% 50%;

    --controls__placeholder-font          : var(--fw-normal) 1.1rem/1.4 var(--ff-regular);
	--controls__placeholder-opacity       : 1;

    --controls__font                      : var(--fw-bold) 1.1rem/1.4 var(--ff-regular);
    --controls__color                     : var(--black);
    --controls__bg-color                  : var(--white);
    --controls__disabled-bg-color         : var(--grey);
    --controls__border-radius             : 5px;
    --controls__inset-shadow              : inset 1px 1px 3px #3334;

    --controls__dd-option                 : var(--fw-normal) 1.1rem/1.4 var(--ff-regular);

    --controls__case                      : none;

    --controls__button-font               : var(--fw-bold) 2.2rem/1.4 var(--ff-condensed);
    --controls__button-color              : var(--white);
    --controls__button-bg-color           : var(--site__color-accent);
    --controls__button-border-radius      : 10px;

}

/** ********************************************* **/
/** MISCELLANEOUS                                 **/
/** ********************************************* **/

.no-border {
    border                  : none;
}

/** ********************************************* **/
/** CONTAINERS                                    **/
/** ********************************************* **/

.grid-row {
    align-self              : center;
    justify-self            : left;
}

.row,
.row-center,
.button-container {
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : 1rem;
}

.row {
    justify-content         : left;
}

.button-container {
    gap                     : 2rem;
}

/** ********************************************* **/
/** LINK BUTTON AND ASP BUTTON                    **/
/** STYLED (PROMO) BUTTON                         **/
/** ********************************************* **/

button,
.aspbutton,
.promo-button, 
.button-container a {
    font                    : var(--controls__button-font);
    text-transform          : var(--controls__case);
    text-decoration         : none;
    color                   : var(--controls__button-color);
    background-color        : var(--controls__button-bg-color);
    padding                 : 0.4cap 1.4ch;
    outline                 : none;
    border                  : none;
    border-radius           : var(--controls__button-border-radius); /* 9999px; */
    cursor                  : pointer;
}

button:hover,
.aspbutton:hover,
.promo-button:hover,
.button-container a:hover {
    color                   : #FCD109;
    background-color        : var(--controls__button-color);
}

/** ********************************************* **/
/** TEXT BOX AND COMBO BOX                        **/
/** ********************************************* **/

::placeholder {
    color                   : var(--controls__color);
    text-transform          : var(--controls__case);
    opacity                 : var(--controls__placeholder-opacity);
    font                    : var(--controls__placeholder-font);
}

::selection {
    color                   : var(--white);
    background-color        : var(--site__color-accent);
}

.textbox {
    font                    : var(--controls__font);
}

.textbox, 
.combobox {
    width                   : 100%;
    height                  : 2.4rem;
    border                  : none;
    border-radius           : var(--controls__border-radius);
    outline                 : transparent;
    padding-left            : 0.5rem;
    color                   : var(--controls__color);
    background              : var(--controls__bg-color);
    box-shadow              : var(--controls__inset-shadow);
}

.textbox:placeholder-shown,
.combobox:placeholder-shown {
    font                    : var(--controls__placeholder-font);
}

.textbox:not(:placeholder-shown) {
    font                    : var(--controls__font);
}

.textbox:disabled,
.combobox:disabled {
    background-color        : var(--controls__disabled-bg-color);
    opacity                 : 0.5;
}

/* Change autofill text in textbox */
select:-webkit-autofill,
input:-webkit-autofill { 
    color                   : var(--controls__color);
    background-color        : var(--controls__bg-color);
    -webkit-text-fill-color : var(--controls__color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    transition              : background-color 5000s ease-in-out 0s;
}

/** ********************************************* **/
/** COMBO BOX                                     **/
/** ********************************************* **/
 
.combobox {
    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    
    background                : var(--controls__bg-color) var(--controls__arrowdown) no-repeat right;
    background-size           : var(--controls__arrow-size);
    background-position       : var(--controls__arrow-position);
    
    position                  : relative;
    z-index                   : 0;

    text-indent               : 0.01px; /*In Firefox*/
    text-overflow             : '';     /*In Firefox*/
    text-transform            : var(--controls__case); 
    text-overflow             : ellipsis;
    overflow                  : hidden;
    white-space               : nowrap;

    padding-inline-end        : 3em;
}

.combobox:valid {
    font                      : var(--controls__font);
}
.combobox:invalid {
    font                      : var(--controls__placeholder-font);
    color                     : var(--controls__color);
}

.combobox:active, 
.combobox:focus {
    color                     : var(--controls__color);
    background                : var(--controls__bg-color) var(--controls__arrowup) no-repeat right;
    background-size           : var(--controls__arrow-size);
    background-position       : var(--controls__arrow-position);
}

.combobox option {
    font                      : var(--controls__dd-option);
    color                     : var(--controls__color);
    background-color          : var(--controls__bg-color);
    line-height               : 2;
    height                    : 2rem;
    padding                   : 1rem 0;
}

.combobox option:active {
    color                     : var(--controls__color);
    font-weight               : var(--fw-bold);
}

.combobox option:first-child {
    color                     : var(--controls__color);
    font-weight               : var(--fw-bold);
}

/** ********************************************* **/
/** CHECK BOX                                     **/
/** ********************************************* **/

.checkbox {
    --_color-on               : var(--site__color-accent);
    --_color-off              : var(--controls__bg-color);

    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    display                   : inline-block;
    position                  : relative;
    height                    : 1.6rem;
    min-width                 : 1.6rem;
    cursor                    : pointer;
    outline                   : none;
    color                     : var(--controls__color);
    background-color          : var(--controls__bg-color);
    border-radius             : var(--controls__border-radius);
    box-shadow                : var(--controls__inset-shadow);
}

.checkbox:hover {
    border                    : 4px solid var(--_color-on);
    background-color          :           var(--_color-off);
}

/* Type 1 */
.checkbox:checked {
    border                    : 4px solid var(--_color-off);
    background-color          :           var(--_color-on);
}

.checkbox:hover:checked {
    border                    : var(--_color-on);
    background-color          : var(--_color-on);
}

/* Type 2 */
/*.checkbox:checked::before {
    position                  : absolute;
    font-size                 : 14px;
    font-weight               : bold;
    font-family               : system-ui, sans-serif;
    left                      : .5em;
    top                       : .15em;
    content                   : '\02143';
    transform                 : rotate(40deg);
}*/

/** ********************************************* **/
/** RADIO BUTTONS                                 **/
/** ********************************************* **/

.radio {
    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    display                   : inline-block;
    position                  : relative;
    height                    : 1.6em;
    width                     : 1.6em;
    cursor                    : pointer;
    outline                   : transparent;
    color                     : var(--controls__color);
    background-color          : var(--controls__bg-color);
    border                    : solid 5px var(--controls__color);
    border-radius             : 50%;
}

.radio:hover {
    color                     : var(--white);
    background-color          : var(--controls__bg-color);
}

/** ********************************************* **/
/** UPLOAD CONTROL AND PREVIEW PANEL              **/
/** ********************************************* **/

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : var(--controls__color);
    background-color          : var(--controls__bg-color);
    text-align                : center;
    font-size                 : inherit;
    padding                   : 1rem;
    border-radius             : var(--controls__border-radius);
    box-shadow                : var(--controls__inset-shadow);
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : var(--controls__case);
    font                      : var(--controls__font);
    line-height               : 1;
    outline                   : transparent;
    padding                   : 0 1rem;
/*  border                    : 2px dashed var(--controls__bg-color);*/
    border-start-start-radius : var(--controls__border-radius);
    border-start-end-radius   : var(--controls__border-radius);
    overflow                  : hidden;
    width                     : 100%;
    height                    : 6rem;
    color                     : var(--controls__color);
    background                : transparent var(--controls__upload) no-repeat center 2rem;
    background-size           : var(--controls__upload-size);
    transition: color            .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color     .15s ease-in-out,
                box-shadow       .15s ease-in-out;
}

.upload-control {
    opacity                   : 0;
    position                  : absolute;
    top                       : 0;
    left                      : 0;
    width                     : 100%;
    height                    : 100%;
    cursor                    : pointer;

}

.upload-preview-panel {
    display                   : none;
    max-width                 : 100%;
    transition                : height .3s ease-out;
    height                    : 0;
    overflow                  : hidden;
    background-color          : var(--controls__bg-color);
    margin                    : auto !important;
}

.upload-preview-panel img {
    height                    : inherit;
    width                     : 100%;
    margin                    : auto;
}

.upload-label {
    display                   : block;
    text-align                : center;
    font                      : var(--controls__font);
    line-height               : 1.4;
    color                     : var(--controls__color);
    background-color          : var(--controls__bg-color);
    border-end-start-radius   : var(--controls__border-radius);
    border-end-end-radius     : var(--controls__border-radius);

    padding-block-start       : 0.5rem;
}

/** ********************************************* **/
/** FOR KEYBOARD NAVIGATION AND ACCESSABILITY     **/
/** ********************************************* **/

      .upload-panel:focus-within,
                  a:focus-visible,
             button:focus-visible,
             select:focus-visible,
             .radio:focus-visible,
           .textbox:focus-visible,
          .checkbox:focus-visible, 
         .aspbutton:focus-visible,
      .promo-button:focus-visible,
.button-container a:focus-visible {
    outline        : 2px solid var(--site__color-accent);
    outline-offset : 1px;
}