.full {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

header {
    color: #F36F1F !important;
}

.left_bottom {
    height: 100%;
    background-color: white;
    padding: 0px;
}


.left_top {
    height: 100%;
    background-color: #F8F8F8;
    border-top-right-radius: 4rem;
    align-content: center;
    margin: 0px;
}


.right_bottom {
    height: 100%;
    background-color: #F8F8F8;
    padding: 0px;
}


.right_top {
    height: 100%;
    background-color: white;
    border-bottom-left-radius: 4rem;
    align-content: center;
    margin: 0px;
}

.logo {
    position: absolute;
    z-index: 1;
    width: 100%;
    margin: 0px;
    padding: 20px;
}

.logo_img {
    
    width: auto;
    height: auto;
    max-width: 100%;
}

.slogan_box {
    margin: 0 11% 8% 17%;
}

.slogan {
    font-size: 4.3rem;
    white-space: pre-line;
    font-weight: 700;
    color: #F36F1F;
    line-height: 4.1rem;
}

.slogan_sub {
    font-size: 1.5rem;
    padding-top: 1.7rem;
    color: #F36F1F;
    font-weight: 400;
}

.login_box {
    padding: 24%;
    width: 100%;
}

.form_header {
    font-size: 2.7rem;
    font-weight: 600;
}

label {
    color: #505050;
    font-size: 1.25rem;
    font-weight: 900;
}


.input {
    width: 100%;
    height: 4rem;
    color: #505050;
    font-size: 1.25rem;
    font-weight: 900;
    padding: 1rem 1.1rem;
    border: 1px solid #C4C4C4;
    border-radius: 0.5rem;
}

input.input-validation-error {
    /*border: 3px solid #DC3545;*/
}

input:focus {
    border: 1px solid #F36F1F;
    outline: none;
}

.login_botton {
    width: 100%;
    height: 4rem;
    color: white;
    background-color: #F36F1F;
    font-size: 1.6rem;
    font-weight: 900;
    align-content: center;
    border: 1px solid #F36F1F;
    border-radius: 0.5rem;
}

.login_botton:hover {
    opacity: 0.7;
}

.validation-summary-errors {
    color: #DC3545;
    font-weight:bold;
    font-size: 1rem !important;
}

#pwd_action_box {
    padding-bottom: 0.5rem;
    margin: 0px;
}

#forgot_pwd {
    color: #22B8BC;
    font-weight: bold;
    font-size: 1rem;
}



/* ----------- ↓↓↓checkbox setting↓↓↓ref:https://www.javatpoint.com/oprweb/test.jsp?filename=CSScheckboxstyle1 ------------*/
.checkbox_container {
    margin: 0px;
    position: relative;
    padding-left: 15px;
    cursor: pointer;
    font-size: 1rem;
}

    /* Hide the default checkbox */
    .checkbox_container input {
        visibility: hidden;
        cursor: pointer;
    }

/* Create a custom checkbox */
.checkbox_mark {
    position: absolute;
    top: 5px;
    left: 6px;
    height: 17px;
    width: 17px;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
}

.checkbox_container:hover input ~ .checkbox_mark {
    background-color: #c4c4c4;
    border-radius: 3px;
}

.checkbox_container input:checked ~ .checkbox_mark {
    background-color: #F36F1F;
    border-radius: 3px;
    border: 1px solid #F36F1F;
}

/* Create the mark/indicator (hidden when not checked) */
.checkbox_mark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the mark when checked */
.checkbox_container input:checked ~ .checkbox_mark:after {
    display: block;
}

/* Style the mark/indicator */
.checkbox_container .checkbox_mark:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
/* ----------- ↑↑↑checkbox setting↑ ------------*/