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

/* ------------------------------ Client Forms ------------------------------ */
/* ----- Basic Forms ----- */
.client_basicForm1{
    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; */
}
.client_basicForm1_entryBin{
    display: flex;
    flex-direction: column;

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

    width: 100%;

    margin: 10px 0;
    padding: 0;

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

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

.client_basicForm1 select{
    font-size: 16px;
    width: fit-content;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.client_basicForm1 textarea{

    font-size: 16px;
    width: 40vw;
    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;
}


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

    
    width: 100%;
    height: fit-content;

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

    /* border: 1px solid red; */
}
.client_basicForm2{
    text-align: left;
}
.client_basicForm2_entryBin{
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    width: 100%;

    margin: 10px 0;
    padding: 0;

    /* border: 1px solid blue; */
}
.client_basicForm2_label{
    font-size: 16px;
    width: fit-content;
    max-width: 300px;
    text-align: right;

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


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

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

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

    /* background-color: white; */
}
.client_LargeForm1_FieldBin{
    display: flex;
    flex-direction: column;

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

    padding: 20px;
    margin: 0;
    margin-bottom: 40px;

    border: 1px solid lightgray;
}
.client_LargeForm1_entryBin{
    display: flex;
    flex-direction: column;

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

    width: 100%;

    margin: 10px 0;
    padding: 0;

}

.client_LargeForm1_entryBinFlex{
    display: flex;
    /* flex-direction: column; */

    justify-content: space-between;
    align-items: start;


    width: 100%;

    margin: 10px 0;
    padding: 0;

}
.client_LargeForm1_entryBinSmall{
    display: flex;
    flex-direction: column;

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

    width: calc(50% - 20px);

    margin: 10px 0;
    padding: 0;

}
.client_LargeForm1_label{
    font-size: 16px;
    text-align: left;

    width: 100%;

    margin: 0;

}
.client_LargeForm1_labelSmall{
    font-size: 16px;
    width: 45%;
    text-align: left;
}



/* ---------- Widget styles ---------- */

/* ----- Generic Input ----- */
.client_form_input_style1 {
    font-size: 16px;
    width: calc(300px - 12px - 2px);
    padding: 6px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    border: 1px solid white;
    /* border-bottom: 2px solid var(--primary); */
    border-bottom: 2px solid black;
    /* border-radius: 5px; */

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

/* ----- TextInput ----- */
.client_form_textinput_full1 {
    font-size: 18px;
    width: calc(100% - 10px);
    padding: 5px 4px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


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

    transition: 0.2s ease-in-out;
}
.client_form_textinput_full1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.client_form_textinput_small1{
    font-size: 18px;
    width: calc(50% - 20px);
    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;
}
.client_form_textinput_small1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}
.client_form_textinput_mini1{
    font-size: 18px;
    width: 250px;
    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;
}
.client_form_textinput_mini1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}

/* ----- TextArea ----- */
.client_form_textarea_full1{
    font-size: 18px;
    width: calc(100% - 10px); min-width: calc(100% - 10px); max-width: calc(100% - 10px);
    min-height: calc(150px - 12px); height: calc(150px - 12px); max-height: 300px;
    
    padding: 5px 4px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


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

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

/* ----- NumberInput ----- */
.client_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;
}
.client_form_numberinput_mini1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}

/* ----- Select ----- */
.client_form_select_fit1{
    font-size: 18px;
    width: fit-content; min-width: 200px;
    padding: 2px 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;
}
.client_form_select_fit1:focus{
    outline: none;
    background-color: #fbfbfb;
    border: 1px solid var(--secondary);
}








.color_picker{
    width: 30px; max-width: 30px;
    height: 30px; max-height: 30px;
}
.color_picker:hover{
    cursor: pointer;
}



.standardTextInputField{
    font-size: 18px;

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

    padding: 10px;
    margin: 2px 0;

    border: 1px solid var(--secondary);
}
.standardTextInputField:focus{
    outline: none;
    background-color: whitesmoke;
}



/* Code Lookup Form */
.simpleForm{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.simpleForm label{
    width: fit-content;
}
.simpleForm span input{
    width: 350px;
    font-size: 18px;
    padding: 2px 4px;
}

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

/* -------------------- Registration Form -------------------- */
.registrationForm{
    display: flex;
    /* display: none; */
    flex-direction: column;
    align-items: start;
    justify-content: center;
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    width: 80%;

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


    background-color: white;
    /* border: 1px solid red; */
}


.registrationForm .formContent{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    width: fit-content;
    height: fit-content;
    /* border: 1px solid blue; */
}
.registrationForm .formEntry{
    display: flex;
    margin: 10px 0;
    /* padding: 2px; */
    width: fit-content;
    /* border: 1px solid blue; */
}
.registrationForm .formEntry label{
    display: inline-block;
    text-align: right;
    font-size: 16px;

    width: 125px;

    /* margin: 0 20px 0 0; */
    margin: 0;
    padding: 0 20px 0 0;

    /* border: 1px solid green; */
}
.registrationForm .formEntry input{
    display: inline-block;
    font-size: 14px;
    width: 300px;

    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border: 1px solid red; */
}
.registrationForm textarea{
    font-size: 14px;

    width: 40vw;
    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;
}
.registrationForm #id_bio:focus{
    outline: none;
    border: 1px solid var(--primary_dark);
    background-color: white;
}

/* ----- Authentication Views ----- */
.authForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    height: fit-content;

    padding: 10px;

    /* border: 2px solid red; */
    border-radius: 5px;
}
.authForm .formEntry{
    display: flex;
    width: 450px;
    margin: 10px 0;
}
.authForm .formEntry label{
    display: inline-block;
    width: 150px;
    text-align: right;
}
/* .authForm #id_username,
.authForm #id_password,
.authForm #id_confirm_password,
.authForm #id_name,
.authForm #id_email{
    width: 225px;
    margin: 0 0 0 15px;
} */
.authForm input{
    width: 225px;
    margin: 0 0 0 15px;
}
#registerRedirect,
#loginRedirect{
    margin: 10px 0;
}


.settingsContainerDisplay{
    display: flex;
    flex-direction: column;
    width: inherit;
    height: 525px;
    align-items: center;
    /* border: 1px solid green; */

    overflow-y: scroll;
    
}
.accountSettingsForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: large;

    width: 600px;

    padding: 10px;
    margin: 10px 0 50px;

    border: 1px solid lightgray;
    border-radius: 5px;
    box-shadow: 5px 5px 5px -5px black;
}
.accountSettingsForm .formEntry{
    display: flex;
    flex-direction: column;

    width: 550px;

    margin: 5px 0;
    /* border: 2px solid green; */
}
.accountSettingsForm .formEntry input{
    width: 100%;
    font-size: large;
    border-radius: 5px;
    border: 1px solid darkgray;
}

.accountSettingsForm .formEntry textarea{
    font-size: medium;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    width: 100%; max-width: 100%; min-width: 90%;
    min-height: 150px; max-height: 250px;

    border-radius: 5px;
    border: 1px solid darkgray;
}



.ck-editor__editable_inline:not(.ck-comment__input *) {
    height: 300px;
    overflow-y: auto;
}


.rich_text_editor{
    min-height: 500px; height: 500px;

    border: 1px solid green;
}