.file_style2 {
    display: flex;
    align-items: center;
    width: calc(100% - 30px);
    margin-top: 10px;
    padding-left:  20px;
}

.file_style2 .input_field {
    display: none;
}

.file_style2 .INP_FILE_ {
    width: 100%;
    height: 200px;
    border-radius: 0 12px;
    overflow: hidden;
}

.file_style2 .INP_FILE_ .INP_FILE_BTN {
    width: 100%;
    height: 200px;
    background-image: url("../assets/users/user_default.png");
    background-color: transparent;
    background-size: contain;
    background-position: left;
}

.file_style2 .INP_FILE_ .INP_FILE_BTN.changed {
    
}

.form.form_style2 div.input.input_file {
    height: unset;
    background-color: #f6f8fa;
}

.form.form_style2 div.input.input_file p.input_name {
    align-items: flex-start;
    height: unset;
    background-color: var(--scheme-34);
    color: var(--scheme-2);
    padding: 4px 12px;
    border-radius: 100px;
    left: 12px;
    top: 12px;
}

.form.form_style2 div.input.input_file.active p.input_name {
    height: unset;
    color: var(--scheme-2);
    padding: 4px 12px;
    top: 0;
}

.select_style2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* position: absolute; */
    /* z-index: 1000; */
}

.select_style2 select {
    display: none !important;
}

.select_style2 .SELECT_ {
    display: flex;
    width: calc(100% - 30px);
    position: relative;
    align-items: center;
    cursor: pointer;
    padding-right: 5px;
}

.select_style2 .SELECTED_EL {
    font-size: 100%;
    padding: 8px 11px !important;
    width: calc(100% - 20px);
    color: var(--scheme-6);
    line-height: 19px;
}

.select_style2 .OPTIONS_ {
    width: calc(100% + 34px);
    padding: 0px;
    position: absolute;
    left: -2px;
    top: calc(100% + 2px);
    opacity: 0;
    transform: scale(0);
    display: flex;
    flex-direction: column;
    background-color: var(--scheme-ef);
    /* border: 2px solid var(--scheme-34); */
    line-height: 25px;
    max-height: 141px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 0 5px var(--scheme-6);
}

.select_style2 .SELECT_::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    clip-path: polygon(0% 25%, 10% 25%, 50% 45%, 90% 25%, 100% 25%, 50% 75%);
    background-color: var(--scheme-34);
    transform-origin: center;
    transition-duration: 0.4s;
}

.select_style2 .SELECT_.OPENED_::after {
    content: "";
    transform: rotateX(180deg) rotateY(180deg);
}

.select_style2 .SELECTED_EL.DISABLED_EL {
    color: var(--scheme-78);
    font-weight: bolder;
    margin-left: 10px;
    font-size: 90%;
    opacity: 0;
}

.select_style2 .OPTION_ {
    width: 100%;
    padding: 6px 16px;
    color: var(--scheme-34);
}

.select_style2 .OPTION_:hover {
    background-color: var(--scheme-df);
}


.select_style2 .SELECT_.OPENED_ .OPTIONS_ {
    display: flex;
    transform: scale(1);
    opacity: 1;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 10000;
    width: calc(100% + 5px);
    margin-top: 2px;
}


.form.form_style2 {
    box-shadow: none;
    border-radius: 0;
    width: 750px;
}

.form.form_style2 div.input {
    border: 2px solid var(--scheme-34);
    color: var(--scheme-6);
    border-radius: 0;
    margin-top: 20px;
    height: 43px;
}

.form.form_style2 .input_field {
    font-size: 100%;
    width: 90%;
    color: var(--scheme-6);
    opacity: 0;
}

.form.form_style2 .input.active .input_field {
    opacity: 1;
}

.form.form_style2 div.input p.input_name {
    position: absolute;
    padding: 0;
    background-color: var(--scheme-2);
    left: 20px;
    color: var(--scheme-78);
    height: 90%;
    display: flex;
    align-items: center;
    font-weight: bold;
    top: 5%;
    font-size: 100%;
    min-width: max-content;
    transform: translate(0%, 0%);
    z-index: 1;
    cursor: text;
}

.form.form_style2 div.input.active p.input_name {
    height: 10px;
    transform: translate(0%, -50%);
    left: 20px;
    color: var(--scheme-34);
    font-size: 100%;
    padding: 0 8px;
}

.form.form_style2 div.input.active {
    border-radius: 0 12px;
}


.form.form_style2 button.submit_btn {
    width: 100%;
    padding: 12px 0;
    background-color: var(--scheme-34);
    color: var(--scheme-2);
    border-radius: 0;
}

.form.form_style2 button.submit_btn:hover {
    background-color: var(--scheme-6);
    color: var(--scheme-2);
    border-radius: 0 12px;
}

.form.form_style2 button.submit_btn:disabled {
    background-color: var(--scheme-78);
    cursor: default;
}

.form.form_style2 button.submit_btn:disabled:hover {
    border-radius: 0;
}

.form.form_style2 h2 {
    color: var(--scheme-6);
}

.form.form_style2 div.input.required.required_active::after,
.form.form_style2 div.input.required.done::after {
    display: none;
}

.form.form_style2 div.input.required.required_active::before,
.form.form_style2 div.input.required.done::before {
    content: "";
    font-size: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8px;
    width: 8px;
    background-color: #ff3333;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(40% 0, 60% 0, 50% 50%, 80% 10%, 90% 20%, 50% 50%, 100% 40%, 100% 60%, 50% 50%, 90% 80%, 80% 90%, 50% 50%, 60% 100%, 40% 100%, 50% 50%, 20% 90%, 10% 80%, 50% 50%, 0 60%, 0 40%, 50% 50%, 10% 20%, 20% 10%, 50% 50%);
}

.form.form_style2 div.input_group,
div.input_group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form.form_style2 div.input_group .input,
div.input_group .input {
    width: 100%;
    margin-left: 20px;
}

.form.form_style2 div.input_group .input_multiple,
div.input_group .input_multiple {
    width: 100%;
    margin-left: 10px;
}

.form.form_style2 div.input_group .input_group,
div.input_group .input_group {
    width: 100%;
    margin-left: 20px;
}

.form.form_style2 div.input_group .input:first-of-type,
div.input_group .input:first-of-type {
    margin-left: 0px !important;
}

.form.form_style2 .input .input_field::placeholder {
    color: transparent;
}

.form.form_style2 .input.active .input_field::placeholder {
    color: var(--scheme-78);
    font-weight: bolder;
    padding-left: 12px;
    transition-duration: 0.4s;
}

.form.form_style2 .input_multiple {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    justify-content: center;
}

.form.form_style2 .input_multiple div.input {
    border-radius: 0;
    width: 100%;
    border-left: none;
    margin-left: 0;
}


.form.form_style2 .input_multiple div.country_code {
    width: 136px !important;
}

.form.form_style2 .input_multiple .input:first-of-type {
    width: 100%;
    border-left: 2px solid var(--scheme-34);
}

.form.form_style2 .form_info_panel {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.form.form_style2 .form_info_panel_cont {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: var(--scheme-ef);
    z-index: 1;
    box-shadow: 0 0 10px var(--scheme-6);
    padding: 12px 16px;
    transform: scale(0);
    opacity: 0;
    font-style: italic;
}

.form.form_style2 .form_info_panel .info_icon {
    width: 16px;
    height: 16px;
    position: absolute;
    right: -8px;
    top: -10px;
    z-index: 2;
    background-color: var(--scheme-34);
    color: var(--scheme-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 1px 0 0;
    border-radius: 50%;
    font-size: 80%;
}



.form.form_style2 .form_info_panel:hover {
    z-index: 2;
}

.form.form_style2 .form_info_panel:hover .form_info_panel_cont {
    transform: scale(1);
    opacity: 1;
}


.form.form_style2.form-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
}


.form.form_style2.form-row .submit_btn {
    width: 200px;
    margin: 20px 0 0 20px;
}

.form i {
    font-family: FontAwesome !important;
}

div.form.form_style2 div.input div.input_before_cont .input_field {
    width: 100%;
    padding: 6px 0;
}

.form div.input div.input_before_cont .input_before {
    min-width: max-content;
    padding: 0 12px;
}

.form {
    flex-wrap: wrap !important;
}

.form .d2 {
    width: calc(50% - 10px) !important;
}

.form .d3 {
    width: calc(33% - 10px) !important;
}

.form .d4 {
    width: calc(25% - 10px) !important;
}

.form .d5 {
    width: calc(20% - 10px) !important;
}

/* ====== Default Form ====== */

div.form {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 32px;
    background-color: var(--scheme-2);
    border-radius: 0 24px;
    box-shadow: 0 0 10px 0px #000000;
    /* width: 350px; */
    max-width: 100%;
}

div.form div.input {
    position: relative;
    border: 3.5px double var(--scheme-1);
    border-radius: 0 12px;
    padding-top: 4px;
    width: min-content;
    margin-top: 24px;
    width: 100%;
}

div.form div.input input,
div.form div.input textarea {
    background-color: transparent;
    padding: 6px 12px;
    width: 100%;
}

div.form div.input p.input_name {
    color: var(--scheme-1);
    position: absolute;
    padding: 0 8px;
    background-color: var(--scheme-2);
    left: 0%;
    font-weight: bold;
    top: 0;
    font-size: 100%;
    min-width: max-content;
    transform: translate(0%, -100%);
}

div.form div.input.active p.input_name {
    transform: translate(0%, -50%);
    left: 0%;
    font-size: 90%;
}

div.form h2 {
    color: var(--scheme-34);
    text-align: center;
    margin-bottom: 16px;
}

div.form button.submit_btn {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--scheme-4);
    color: var(--scheme-2);
}

div.form button.submit_btn:hover {
    background-color: var(--scheme-3);
}


div.form .btns {
    margin-top: 8px;
}

div.form .other_btn {
    background-color: transparent;
    color: var(--scheme-1);
    padding: 8px 12px;
}

div.form .checkbox_container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0;
}


div.form .checkbox_container label {
    margin-left: 8px;
}


div.form div.input.required.required_active::before {
    content: "*";
    font-size: 120%;
    color: #ff3333;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

div.form div.input.required.done:before {
    content: "*";
    font-size: 120%;
    color: #ff3333;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

div.form button.submit_btn:disabled {
    background-color: var(--scheme-7);
}

div.form p.note {
    font-size: 90%;
    color: #333333;
    font-weight: bolder;
    margin: 12px 0;
}

div.form div.input textarea {
    padding: 12px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 89%;
    resize: none;
    border-radius: 0 8px;
    width: 100%;
}

div.form div.input select {
    width: 100%;
    padding: 6px 12px;
    background-color: transparent;
}


div.form div.input div.input_before_cont {
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
    opacity: 0;
}

div.form div.input.active div.input_before_cont {
    opacity: 1;
}

/* =============================================================================================================================================================================== */

form.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 32px;
    background-color: var(--scheme-2);
    border-radius: 0 24px;
    box-shadow: 0 0 10px 0px #000000;
    width: 350px;
    max-width: 100%;
}

form.form div.input {
    position: relative;
    border: 3.5px double var(--scheme-1);
    border-radius: 0 12px;
    padding-top: 4px;
    width: min-content;
    margin-top: 24px;
    width: 100%;
}

form.form div.input input {
    background-color: transparent;
    padding: 6px 12px;
    width: 100%;
}

form.form div.input p.input_name {
    position: absolute;
    padding: 0 8px;
    background-color: var(--scheme-2);
    left: 0%;
    font-weight: bold;
    top: 0;
    font-size: 100%;
    min-width: max-content;
    transform: translate(0%, -100%);
}

form.form div.input.active p.input_name {
    transform: translate(0%, -50%);
    left: 0%;
    font-size: 90%;
}

form.form h2 {
    color: var(--scheme-8);
    text-align: center;
    margin-bottom: 16px;
}

form.form input.submit_btn {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--scheme-4);
    color: var(--scheme-2);
}

form.form input.submit_btn:hover {
    background-color: var(--scheme-3);
}


form.form .btns {
    margin-top: 8px;
}

form.form .other_btn {
    background-color: transparent;
    color: var(--scheme-1);
    padding: 8px 12px;
}

form.form .checkbox_container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0;
}


form.form .checkbox_container label {
    margin-left: 8px;
}


form.form div.input.required.required_active::before {
    content: "*";
    font-size: 120%;
    color: #ff3333;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

form.form input.submit_btn:disabled {
    background-color: var(--scheme-7);
}

form.form p.note {
    font-size: 90%;
    color: #333333;
    font-weight: bolder;
    margin: 12px 0;
}

form.form div.input textarea {
    padding: 12px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 89%;
    resize: none;
    border-radius: 0 8px;
    width: 100%;
}

form.form div.input select {
    width: 100%;
    padding: 6px 12px;
    background-color: transparent;
}

*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    transition: background-color 0s ease-in-out 172800s;
    -webkit-text-fill-color: var(--scheme-6);
}

/* ================== Form Style 3 ================== */











/*\ checkbox style \*/

.checkbox_style2 input {
    display: none !important;
}

.checkbox_style2 input:checked+label {
    background-color: var(--scheme-34) !important;
    color: var(--scheme-2) !important;
}

.checkbox_style2 label {
    cursor: pointer;
    display: flex;
    padding: 12px 16px;
    background-color: var(--scheme-ef);
    color: var(--scheme-34);
    font-weight: bolder;
    margin: 2px;
    border: solid var(--scheme-78);
    border-width: 0 2px;
    border-radius: 100000px;
}