
/* ------------------------------ Form Control ------------------------------ */

/* ----- Initialize input types ----- */
/* input[type=checkbox] {
	visibility: hidden;
} */


.basicForm1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: fit-content; max-width: calc(1000px - 120px); min-width: calc(600px - 120px);
    height: fit-content;

    margin: 20px 10px;
    padding: 40px 60px;

    /* border: 1px solid red; */
}
.basicForm1_entryBin{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;

    width: 100%;

    margin: 5px 0 10px;
    padding: 0;

    /* border: 1px solid blue; */
}
.basicForm1_label{
    font-size: 16px;
    width: 100%;
    text-align: left;
    margin-bottom: 5px;

    /* border: 1px solid green; */
}
.basic_form1_largeLabel{
    font-size: 16px;
    width: 300px;
    text-align: right;
    margin-right: 10px;
}



.basicForm2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    
    width: 300px;
    height: fit-content;

    margin: 10px auto;
    padding: 20px 50px;

    /* border: 1px solid red; */
}
.basicForm2_entryBin{
    display: flex;
    flex-direction: column;

    /* justify-content: center; */
    align-items: start;

    width: 100%;

    margin: 10px 0;
    padding: 0;

    /* border: 1px solid blue; */
}
.basicForm2_label{
    font-size: 16px;
    width: 300px;
    text-align: left;

    /* margin-bottom: 5px; */

    /* margin-right: 10px; */
    /* border: 1px solid green; */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

.basicForm3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: fit-content; max-width: calc(600px - 80px); min-width: calc(600px - 80px);
    height: fit-content;

    margin: 10px;
    padding: 20px 40px;

    /* border: 1px solid red; */
}
.basicForm3_entryBin{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;

    width: calc(100%);

    margin: 10px 0;
    padding: 0;

    /* border: 1px solid blue; */
}
.basicForm3_label{
    font-size: 16px;
    width: 100%;
    text-align: left;

    /* border: 1px solid green; */
}


/* ----- Large Forms ----- */
.largeForm1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: calc(100% - 120px);
    max-width: calc(1000px - 80px);
    height: fit-content;

    margin: 10px 0px;
    padding: 20px 40px;
}
.largeForm1_FieldBin{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: calc(100% - 10px);

    margin: 0;
    padding: 10px 5px;

    /* background-color: var(--secondary_lite); */
    /* background-color: whitesmoke; */

}
.largeForm1_FieldBin_Padded{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: calc(100% - 40px);

    margin: 0;
    padding: 20px;

    /* background-color: var(--secondary_lite); */
    /* background-color: whitesmoke; */

}
.largeForm1_entryBin{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: calc(100% - 10px);

    margin: 0;
    padding: 2px 5px;

    /* background-color: var(--secondary_lite); */
    /* background-color: whitesmoke; */

    /* border: 1px solid blue; */
}
.largeForm1_label{
    font-size: 16px;
    width: 300px;
    text-align: left;

    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px 0;

    /* background-color: whitesmoke; */

    /* border: 1px solid green; */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

.largeForm1_entryBin_Alt{
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: nowrap;

    width: calc(100% - 10px);

    margin: 5px 0;
    padding: 5px;

}
.largeForm1_label_Alt {
    font-size: 16px;
    width: 300px;
    text-align: left;

    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px 0;



}




.largeForm1_input {
    font-size: 16px;
    width: 400px;
    padding: 2px 4px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.largeForm1_select{
    font-size: 16px;
    width: fit-content;
    padding: 2px 4px;
    /* width: calc(fit-content + 100px); */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.largeForm1_textarea{

    font-size: 16px;
    width: calc(600px - 12px);
    min-height: 250px; max-height: 250px;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    padding: 5px;

    border: 1px solid #555;
    border-radius: 5px;
}


/* ----- Full Page Forms ----- */
.fullPageForm1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: calc(100% - 40px);
    height: fit-content;

    margin: 10px 0px;
    padding: 20px;
}

.fullPage_input1{
    font-size: 18px;
    width: calc(100% - 10px);
    padding: 2px 4px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* ----- Special labels ----- */
.checkoutFormLabel{
    width: 150px;
    margin-right: 10px;
    /* border: 1px solid red; */
}
.hr_checkout{
    width: 100%;
    margin: 20px 0;
    color: gray;
}

@media only screen and (max-width: 600px){
    .checkoutFormLabel{
        font-size: 14px;
    }

    .hr_checkout{
        margin: 10px 0;
    }
}

/* ---------- Inline Forms ---------- */
.inlineForm{
    width: 100%;
}


/* ----- Add-ons for more form control flexiblity ----- */
.entryBin_fitWidth{
    width: fit-content;
}
.entryBin_halfWidth{
    width: calc(45%);
}
.entryBin_flexRow{
    display: flex;
    flex-direction: row;
}
.formFlexWrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}



/* -------------------- SECTION: Form Widget styles -------------------- */

/* ----- Generic Input ----- */
.form_input_style1 {
    font-size: 18px;
    width: calc(400px - 10px - 2px);
    padding: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 0.1em;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 5px 5px;
    border-bottom: 2px solid white;
    /* border-radius: 5px; */

    transition: 0.2s ease-in-out;
}
.form_input_style1:focus{
    outline: none;
    /* border: 1px solid lightgray; */
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid var(--secondary);
    background-color: whitesmoke;
    /* background-color: #FEFEFE; */
}

/* ---------- TextInput ---------- */
.form_textinput_full1 {
    font-size: 14px;
    letter-spacing: 0.05rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
    width: calc(100% - 10px - 2px);
    
    padding: 8px 5px;
    margin: 4px 0 0;

    border: 1px solid gray;
    /* border: 1px solid rgb(175, 175, 175); */
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_textinput_full1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.form_textinput_small1{
    font-size: 18px;
    letter-spacing: 0.05em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    width: calc(50% - 10px);

    padding: 10px 5px;
    margin: 0;

    border: 1px solid gray;
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_textinput_small1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.form_textinput_mini1{
    font-size: 18px;
    letter-spacing: 0.05em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    width: calc(250px - 10px - 2px);

    padding: 10px 5px;
    margin: 0;

    border: 1px solid gray;
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_textinput_mini1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.form_textinput_full2{
    font-size: 18px;
    letter-spacing: 0.05em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;    

    width: calc(100% - 16px - 2px);

    padding: 10px 8px;
    margin: 0;
    
    border: 1px solid gray;
    /* border: 1px solid rgb(175, 175, 175); */
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_textinput_full2:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}


/* ----- TextArea ----- */
.form_textarea_full1{
    font-size: 14px;
    letter-spacing: 0.05em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    width: calc(100% - 10px - 2px); min-width: calc(100% - 10px - 2px); max-width: calc(100% - 10px - 2px);
    min-height: calc(150px - 12px); height: calc(150px - 12px); max-height: 300px;
    
    padding: 10px 5px;
    margin: 0;

    border: 1px solid gray;
    /* border: 1px solid rgb(175, 175, 175); */
    border-radius: 2px;

    /* transition: 0.05s ease-in-out; */
}
.form_textarea_full1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}

/* ----- NumberInput ----- */
.form_numberinput_mini1{
    font-size: 18px;
    width: 100px;
    padding: 5px 4px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    border: 1px solid gray;
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_numberinput_mini1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}

/* ----- Select ----- */
.form_select_default{
    font-size: 14px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    width: calc(250px - 10px);

    padding: 5px;
    margin: 0;

    border: 1px solid gray;
    border-radius: 5px;

    transition: 0.2s ease-in-out;
}
.form_select_default:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.form_select_fit1{
    font-size: 18px;
    width: fit-content; min-width: calc(200px - 10px);
    padding: 10px 5px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    border: 1px solid gray;
    border-radius: 2px;

    transition: 0.2s ease-in-out;
}
.form_select_fit1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}

@media only screen and (max-width: 600px) {
    .form_select_default{
        font-size: 12px;
        width: calc(100% - 10px);
        margin-top: 10px;
    }
}



/* ---------- Widget Styles ---------- */


/* ----- Color Picker ----- */
.color_picker{
    width: 30px; max-width: 30px;
    height: 30px; max-height: 30px;
}
.color_picker:hover{
    cursor: pointer;
}


/* ----- "Show password" checkbox ----- */
/* .passwordCheckboxBin{
    border: 1px solid red;
} */
.passwordCheckboxBin input{

    width: 15px;
    height: 15px;
    margin-right: 5px;
}


/* ----- Text Input ----- */

.standardTextInputField{
    font-size: 18px;

    width: 80%; max-width: 500px;
    height: 20px;

    padding: 10px;
    margin: 2px 0;

    border: 1px solid gray;
    /* border: 2px solid var(--secondary); */
    border-radius: 2px;

    transition: 0.1s ease-in-out;
}
.standardTextInputField:focus{
    outline: none;

    margin: 1px 0;

    background-color: whitesmoke;

    border: 2px solid var(--secondary_dark);

    /* box-shadow: 0 0 10px -4px var(--primary); */
}





/* Create Site Profile Form */
#siteProfileFormBin{
    display: none;
}
.binOpen{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#userProfileFormBin{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid red; */
}



