/* ==========================================================
   PSICOTIKA - TRAVIAN TOOLKIT
   FORMS
   Version 1.0
========================================================== */


/* ==========================================================
   FORM GROUP
========================================================== */

.formGroup{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}

.formGroup label{

    margin-bottom:8px;

    color:var(--text-soft);

    font-size:14px;

    font-weight:500;

}


/* ==========================================================
   INPUTS
========================================================== */

.input{

    width:100%;

    height:44px;

    padding:0 14px;

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:8px;

    color:white;

    font-size:15px;

    transition:.25s;

}

.input:hover{

    border-color:var(--gold);

}

.input:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 12px rgba(217,166,76,.30);

}


/* ==========================================================
   SELECT
========================================================== */

.select{

    width:100%;

    height:44px;

    padding:0 14px;

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:8px;

    color:white;

    font-size:15px;

    transition:.25s;

    cursor:pointer;

}

.select:hover{

    border-color:var(--gold);

}

.select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 12px rgba(217,166,76,.30);

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.input::placeholder{

    color:#777;

}


/* ==========================================================
   CHECKBOX
========================================================== */

input[type="checkbox"]{

    accent-color:var(--gold);

}


/* ==========================================================
   RADIO
========================================================== */

input[type="radio"]{

    accent-color:var(--gold);

}


/* ==========================================================
   NUMBER INPUT
========================================================== */

input[type="number"]{

    appearance:textfield;

}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{

    appearance:none;

    margin:0;

}


/* ==========================================================
   FIELDSET
========================================================== */

fieldset{

    border:1px solid var(--border);

    border-radius:8px;

    padding:20px;

}

legend{

    color:var(--gold);

    padding:0 10px;

}