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

:root {

/* To convert simple svg images files to url embedded svgs (see below) use website https://yoksel.github.io/url-encoder/ 
    To change the color, then set the fill eg: fill='%23FF0000' (red). */
/*  --controls__arrowup:   url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' stroke='none'%3E%3Cpath d='M115 170 c-19 -38 -35 -74 -35 -80 0 -6 32 -10 80 -10 48 0 80 4 80 10 0 19 -70 150 -80 150 -5 0 -26 -31 -45 -70z'/%3E%3C/g%3E%3C/svg%3E%0A");
    --controls__arrowdown: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' fill='%233AB54A' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' stroke='none'%3E%3Cpath d='M80 230 c0 -19 70 -150 80 -150 10 0 80 131 80 150 0 6 -32 10 -80 10 -48 0 -80 -4 -80 -10z'/%3E%3C/g%3E%3C/svg%3E ");*/

    --controls__upload                    : url("../assets/images/upload-3.png");
    --controls__arrowup                   : url("../assets/images/arrow-up-3.png");
    --controls__arrowdown                 : url("../assets/images/arrow-down-3.png");
    --controls__upload-size               : 32px 40px;
    --controls__arrow-size                : 20px 12px;

    --controls__dropdown-font             : 400 1.1rem/1.2 var(--font-dropdown);


    --controls__placeholder-font          : 400 1.1rem/1.2 var(--ff-regular);
	--controls__placeholder-opacity       : 1;

    --controls__font                      : 700 1.1rem/2.4 var(--ff-regular);
    --controls__color                     : var(--site__color-accent                );
    --controls__background-color          : var(--site__color-light);
    --controls__disabled-background-color : var(--site__color-disabled);
    --controls__border                    : 3px solid var(--controls__background-color);
    --controls__border-radius             : 3px;

    --controls__case                      : uppercase;

    --controls__label-color               : var(--site__color-light);

    --controls__button-font               : 700 1.6rem/1.2 var(--ff-regular);
    --controls__button-color              : var(--site__color-light);
    --controls__button-background-color   : var(--site__color-button-back);
    --controls__button-border-radius      : 3px;
}

/** ********************************************* **/
/** 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;
}

/** ********************************************* **/
/** LABELS                                        **/
/** ********************************************* **/

.label-text {
    color             : var(--controls__label-color);
    font-size         : 1rem;
    text-align        : justify;
}

.label-text span:first-child {
    text-transform    : var(--controls__case);
}

.alert {
    display           : block;
    font-size         : 0.9em;
    font-weight       : var(--fw-bold);
    line-height       : 1.2;
    color             : var(--site__color-alert);
    background-color  : transparent;
/*  text-shadow       : 0 0 2px var(--site__color-button-back); */
}

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

.promo-button {
    border-radius     : var(--controls__button-border-radius); /* 9999px; */
}

button,
.button-container a, 
.aspbutton,
.promo-button {
    font              : var(--controls__button-font);
    text-transform    : var(--controls__case);
    text-decoration   : none;
    color             : var(--controls__button-color);
    background-color  : var(--controls__button-background-color);
    padding           : 0.8rem 1.8rem;
    outline           : none;
    border            : none;

    &:hover {
        color            : var(--controls__button-background-color);
        background-color : var(--controls__button-color);
    }

}

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

.textbox,
.combobox {
    font              : var(--controls__font);
    width             : 100%;
    height            : 3rem;
    outline           : transparent;
    border            : transparent;
    border-radius     : var(--controls__border-radius);
    padding-left      : 1.5rem;
    color             : var(--controls__color);
    background-color  : var(--controls__background-color);

    box-shadow        : inset 1px 1px 2px 2px var(--site__color-accent);

    &::selection {
        color            : var(--site__color-light);
        background-color : var(--site__color-accent);
        opacity          : 1;
    }
    &::placeholder {
        color            : var(--controls__color);
        text-transform   : var(--controls__case);
        opacity          : var(--controls__placeholder-opacity);
        font             : var(--controls__placeholder-font);
    }
}

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

.textbox:not(:placeholder-shown),
.combobox:not(:placeholder-shown) {
    font-weight       : 700;
}

.textbox:disabled,
.combobox:disabled {
    font              : var(--controls__placeholder-font);
    background-color  : var(--controls__disabled-background-color);
    opacity           : 1;
}

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

select:-webkit-autofill,
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__background-color) var(--controls__arrowdown) no-repeat right;
    background-size         : var(--controls__arrow-size);
    background-position     : calc(100% - 0.5em) 50%;
    
    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 a {
    color: var(--controls__color);
    text-decoration: none;
}*/

.combobox:valid {
    font                    : var(--controls__font);
/*    font-weight             : 700;*/
}
.combobox:invalid {
    font                    : var(--controls__placeholder-font);
/*    font-weight             : 400;*/
    color                   : var(--controls__color);
}

.combobox:active, 
.combobox:focus {
    color                   : var(--controls__color);
    background              : var(--controls__background-color) var(--controls__arrowup) no-repeat right;
    background-size         : var(--controls__arrow-size);
    background-position     : calc(100% - 0.5em) 50%;
}

.combobox option {
    font                    : var(--controls__dropdown-font);
    font-weight             : 400;
    color                   : var(--controls__color);
    background-color        : var(--controls__background-color);
    line-height             : 2;
    height                  : 2.0rem;
    padding                 : 1rem 0;
}

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

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

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

.radio,
.checkbox {
    --_color-on               : var(--site__color-accent);
    --_color-off              : var(--controls__background-color);

    -webkit-appearance        : none;
    -moz-appearance           : none;
    appearance                : none;
    display                   : inline-block;
    position                  : relative;
    height                    : 1.6rem;
    min-width                 : 1.6rem;
    cursor                    : pointer;
    outline                   : transparent;

    color                     : var(--_color-on);
    background-color          : var(--_color-off); 
    border                    : var(--controls__border);
    border-radius             : var(--controls__border-radius);
}

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

.checkbox:checked::before {
    position                  : relative;
    font                      : bold 16px sans-serif;
    left                      : 0.02em;
    top                       : -0.25em;
    content                   : '\02714'; /* '\02143'; '\02713'; */ 
}

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

.radio {
    border-radius             : 100svh;
}
.radio:hover { 
    border-color              : var(--_color-on);  
    background-color          : var(--_color-off);
}
.radio:checked { 
    border-color              : var(--_color-off); 
    background-color          : var(--_color-on); 
}
.radio:checked:hover {
    border-color              : var(--_color-on);
    background-color          : var(--_color-on);
}

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

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : var(--site__color-dark);
    background-color          : var(--controls__background-color);
    text-align                : center;
    font-size                 : inherit;
    padding                   : 1rem;
    border-radius             : var(--controls__border-radius);
    box-shadow                : inset 0 0 4px 0 var(--site__color-hilite);
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : var(--controls__case);
    font                      : var(--controls__placeholder-font);
    line-height               : 1;
    outline                   : transparent;
    padding                   : 1rem;
/*  border                    : 2px dashed var(--controls__background-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 bottom;
    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__background-color);
    margin                    : auto !important;
}

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

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : 400;
    line-height               : 1.8;
    color                     : var(--controls__color);
    background-color          : var(--controls__background-color);
    border-end-start-radius   : var(--controls__border-radius);
    border-end-end-radius     : var(--controls__border-radius);

    padding-block-start       : 1rem;
}

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

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