/* Styles for form and related elements like inputs */

form, form.sections > div
{    
    display: inline-block;    
    padding: 30px;
    margin: 0 auto 10px auto;
    filter: drop-shadow(0 0 2px #141516);

    --border-color: #515151; /* Color for borders of various form elements  like checkboxes or text inputs */
}

form::before, form.sections > div::before
{
    position: absolute;
    z-index: -1;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #282a2e;
    
    --beveled-corner-size: 20px;
    clip-path: polygon(var(--beveled-corner-size) 0%, calc(100% - var(--beveled-corner-size)) 0%, 100% var(--beveled-corner-size), 100% calc(100% - var(--beveled-corner-size)), calc(100% - var(--beveled-corner-size)) 100%, var(--beveled-corner-size) 100%, 0 calc(100% - var(--beveled-corner-size)), 0% var(--beveled-corner-size));     
    content: '';
}


/* Section class is used for forms which have groups of inputs separated into different sections*/
form.sections, form.sections::before
{    
    background-color: transparent;
    box-shadow: none;
    border: none;    
    clip-path: none;
    filter: none;
    padding: 0;    
}

form.sections > div
{
    display: block;
    margin-bottom: 10px;    
    border-width: 2px;
    
    
}

form label
{    
    display: block;
    text-align: left;
    margin-bottom: 5px;    
}

/* Displays hints for form inputs. Hints are places in a div which is a direct sibling to the input */
form label > div:last-child, .hasHint > div:last-child
{
    z-index: 10;
    display: inline-block;    
    position: absolute;
    background-color: #1d1f21;
    border: 1px solid #3d5c76;
    padding: 5px 10px 5px 10px;    
    margin: 0 10px 10px 0;
    border-radius: 10px;    
    opacity: 0;
    transform: scale(.8);    
    transition: opacity .5s, transform .5s;  
    transition-delay: .5s;  
    font-size: 15px;        
    max-width: 400px;
    width: 400px;
    text-align: left;
}

form label > div:last-child a , .hasHint > div:last-child a
{
    font-size: inherit;        
}

form label:hover > div:last-child, .hasHint:hover > div:last-child
{
    transform: scale(1);
    opacity: 1;        
}
/* END hints */

form > label:last-of-type
{
    margin-bottom: 25px;
}

label > span:first-of-type
{
    display: inline-block;
    min-width: 150px;    
}
label.required > span:first-of-type
{
    font-weight: bold;
}


input[type=button], input[type=submit], button
{
    border: 2px solid  #a86c09;
    background-color:#f6b545;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #a86c09;
    font-weight: bold;
    color: #2c2c2c;
    transition: box-shadow 1s, color 1s, transform 1s;   
    border-radius: 5px;     
}

input[type=button]:hover, input[type=submit]:hover, button:hover
{    
    box-shadow: 0px 0px 15px #f6b545;
    color: #b00000;
    transform: scale(1.1);    
}

input[type=button]:disabled, input[type=submit]:disabled, button:disabled
{
    opacity: .6;
    pointer-events: none;
    border-color: gray;
    background-color: gray;
    box-shadow: none;
}

input[type=text], input[type=password], input[type=number], input[type=date], textarea, select
{
    background-color: #1a1b1d;
    
    border: 1px solid var(--border-color);
    outline: 2px solid transparent;
    color: inherit;
    width: 250px;    
    padding: 2px 5px 2px 5px;
    
    transition: background-color .3s, outline .5s;
}

input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, input[type=date]:hover, textarea:hover, select:hover
{         
    outline: 1px solid var(--border-color);        
}

input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, textarea:focus, select:focus
{    
    background-color: #1e2024;    
    outline: 1px solid #0671b9;        
}

input[type=text]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=date]:disabled, textarea:disabled, select:disabled
{
    opacity: .5;
    border-color: gray;
    pointer-events: none;
    box-shadow: none;
}

input[type=number]
{
    width: 100px;
}

input[type=date]
{
    width: 200px;
}

input[type=checkbox]
{
    background-color: black;
}


/* Custom checkbox */
input[type=checkbox] 
{
    appearance: none;        
    width: 23px;
    height: 20px;
    margin: 0;

    background-color: inherit;
    
    filter: drop-shadow(1px 1px 0px var(--border-color)) drop-shadow(-1px -1px 0px var(--border-color)) drop-shadow(1px -1px 0px var(--border-color)) drop-shadow(-1px 1px 0px var(--border-color));        
}

input[type=checkbox]::before
{        
    content: '';
    z-index: -1;
    display: inline-block;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #1a1b1d;
    

    --beveled-corner-size: 4px;
    clip-path: polygon(var(--beveled-corner-size) 0%, calc(100% - var(--beveled-corner-size)) 0%, 100% var(--beveled-corner-size), 100% calc(100% - var(--beveled-corner-size)), calc(100% - var(--beveled-corner-size)) 100%, var(--beveled-corner-size) 100%, 0 calc(100% - var(--beveled-corner-size)), 0% var(--beveled-corner-size));             
    
}

input[type=checkbox]:checked::after
{
    content: '';
    position: absolute;                
    width: 5px;
    height: 12px;
    border: solid white;
    margin: 2px 0 0 7px;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
}

input[type=checkbox]:hover::after  
{
    
    border-color:  gold;
}

input[type=checkbox]:disabled::after
{
    border-color:  gray;    
}

input[type=checkbox]:disabled
{
    --border-color: gray;
    filter: drop-shadow(1px 1px 0px var(--border-color)) drop-shadow(-1px -1px 0px var(--border-color)) drop-shadow(1px -1px 0px var(--border-color)) drop-shadow(-1px 1px 0px var(--border-color));        
    opacity: 0.4;
    pointer-events: none;
}


/* END Custom checkbox */

/* Custom filter checkbox */

label.filterCheckboxes span:first-child 
{
    line-height: 22px;
}

label.filterCheckbox 
{
    display: inline-block;
    min-width: 0;
    min-height: 0;        
    
}

label.filterCheckbox input
{
    opacity: 0;
    position: absolute;
    right: 5px;
}

label.filterCheckbox > span:last-of-type
{    
    opacity: .5;
    min-width: 30px;
    min-height: 0;        
    height: 22px;    
    border-radius: 5px;    
    background:  no-repeat center;    
    transition: background-color .5s, border-color .5s, box-shadow .5s, opacity .5s;
}

label.filterCheckbox > span:last-of-type img
{         
    width: 22px;
    height: 22px;    
}

label.filterCheckbox:hover > input ~ span
{    
    border-color: #ccb580;
}

label.filterCheckbox input:checked ~ span
{
    
    opacity: 1;
}

label.filterCheckbox input:checked ~ span img, label.filterCheckbox input:checked ~ span span
{
    filter: drop-shadow( 0 0 5px gold );    
}

label.filterCheckbox input:disabled ~ span
{    
    opacity: .7;
    border-color: gray;
}


/* END Custom filter checkbox */

/* Custom radio */
label.radio
{
    position: relative;        
}

label.radio span:first-of-type
{
    display: block;
    text-align: right;
    padding-right: 40px;
}

label.radio input
{
    opacity: 0;
    position: absolute;
    right: 5px;
}

label.radio > span:last-of-type
{    
    position: absolute;
    top: 0;
    right: 0;
    width: 29px;
    height: 29px;    
    border-radius: 20px;
    border: 2px solid #3d5c76;
    background-color: #1a1b1d;
    box-shadow: 0 0 5px #3d5c76;
    transition: background-color .5s, border-color .5s;
}

label.radio:hover > input ~ span
{
    background-color: #1e2024;
    border-color: #ccb580;
}

label.radio input:checked ~ span
{
    box-shadow: 0 0 15px #3d5c76;  
}

label.radio input:disabled ~ span
{    
    opacity: .7;
    border-color: gray;
}

label.radio input:checked ~ span::after
{
    display: block;
}

label.radio > span:last-of-type::after
{
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    display: none;
    width: 11px;
    height: 11px;
    background: white;
    border-radius: 20px;    
}

/* END Custom radio */

/* Custom select */
select
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../images/icons/list-128.png') no-repeat 98% #1a1b1d;
    background-size: 20px 20px;
}

select[multiple]
{
    background-image: none;    
}

form > .captchaWrapper .g-recaptcha
{        
    display: inline-block;
    margin-bottom: 15px;
}

@media only screen and (max-width: 600px)
{
    form label > div:last-child
    {
        width: calc(100% - 10px);
        max-width: 100%;
        pointer-events: none;
        position: absolute;        
        left: 5px;
    }
}