@import "common.css";
@import "header.css";
@import "footer.css";

/* Membership/Membership upgrade Application */
body {
    background: #F1F3F4;
}

.memershipForm {
    padding-top   : 9.6rem;
    padding-bottom: 11rem;
    max-width     : 132rem;
    width         : 100%;
    margin        : auto;
}

.formTitle {
    font-family  : Roboto Condensed;
    font-style   : normal;
    font-weight  : bold;
    font-size    : 4rem;
    line-height  : 4.7rem;
    color        : #361063;
    margin-bottom: 3.9rem;
}

.formWrapper {
    max-width : 132rem;
    width     : 100%;
    margin    : auto;
    padding   : 4.6rem;
    background: #FFFFFF;
}

.sc_color_title {
    font-weight   : bold;
    display       : block;
    padding-bottom: 1.5rem;
    margin-bottom : 5rem;
}

.sc_color_title::before {
    height: 1px;
}

.groupFrom {
    padding-bottom: 7.1rem;
    position      : relative;
}

.groupFrom2 {
    padding-bottom: 4.1rem;
}

.form-label {
    font-weight  : normal;
    font-size    : 2.2rem;
    line-height  : 2.6rem;
    color        : #323232;
    margin-bottom: 1.5rem;
}

.form-label span {
    color: #FF0000;
}

.form-control {
    padding      : 1.6rem 2.4rem;
    font-weight  : normal;
    font-size    : 2.2rem;
    line-height  : 2.6rem;
    color        : #979797;
    border       : none;
    border-radius: 0;
    background   : #F1F3F4;
}

.form-select {
    padding            : 1.6rem 2.4rem;
    font-weight        : normal;
    font-size          : 2.2rem;
    line-height        : 2.6rem;
    color              : #979797;
    border             : none;
    background-color   : #F1F3F4;
    background-position: right 1.8rem center;
    border-radius      : 0;
}

.form-select:focus {
    box-shadow: none;
}

.form-control:focus {
    background: #F1F3F4;
    color     : #979797;
}

.bp {
    padding-bottom: 3.9rem;
    margin-top    : 0;
}

.subFtitle {
    font-weight: 600;
    font-size  : 2.8rem;
    line-height: 3.3rem;
    color      : #323232;

    margin-bottom: 2.9rem;
}

.addEmplyBtn {
    font-weight     : 500;
    font-size       : 2rem;
    line-height     : 2.3rem;
    color           : #BB9760;
    background-color: transparent;
    border          : none;
    margin-bottom   : 8rem;
}
.addEmplyBtn.delete {
    margin-bottom   : 2rem;
} 

.textAreaMsg {
    text-align : end;
    display    : block;
    font-weight: normal;
    font-size  : 1.8rem;
    line-height: 2.1rem;
    color      : #979797;
    margin-top : .9rem;
}

.form-control[type="file"] {
    padding-left       : 7rem;
    background-image   : url('../images/attach_file_black_24dp\ 1.svg');
    background-repeat  : no-repeat;
    background-position: left 2.3rem center;
    background-size    : 3.3rem 3.3rem;
    padding            : 3.3rem 3.3rem 3.3rem 7.5rem;
}


.form-control[type="file"]::file-selector-button {
    display: none;
}

.fileTick {
    width : 3rem;
    height: 2.8rem;
}

.form-check-label {
    font-weight: bold;
    font-size  : 2.2rem;
    line-height: 3.2rem;
    color      : #BB9760;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
}

.form-check-input {
    height      : 2.9rem;
    width       : 2.9rem;
    margin-right: 1.9rem;
    margin-top  : 0;
    border      : 2px solid #361063;
}

.form-check-input:focus {
    box-shadow: none;
    border    : 2px solid #b3a8c0;
}

.form-check-input:checked {
    background-color: #361063;
    border          : 2px solid #b3a8c0;

}

.memershipForm .btn_box button {
    border    : 0;
    background: transparent;
    color     : var(--white);
}

.file_label {
    font-style      : italic;
    font-weight     : normal;
    font-size       : 1.6rem;
    line-height     : 1.9rem;
    color           : #717171;
    margin-top      : .9rem;
    /* margin-bottom: 3rem; */
}

.file_label span {
    color: #FF0000;
}

/* .activeInput {
    background-color: #361063;
    color           : white;
} */

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .formTitle {
        font-size  : 30px;
        line-height: 35px;
    }

    .form-label {
        font-size: 18px;
    }

    .form-control {
        font-size: 16px;
    }

    .formWrapper {
        padding: 24px;
    }
}