/* Template: adapter
   Author: Brite Solutions
   Created: Sep 2021
   Description: ...
*/

/*****************************************
Table Of Contents:

01. General Styles
02. Login/Reset/Logout Page
03. Modal

******************************************/
/****************************/
/*    01. General Styles    */
/****************************/
html, body {
    height: 100%;
    font-family: 'Noto Sans JP',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size:  1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #162E4D;
    background-color: #f8f8f8;
}
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
label:focus,
.form-control:focus
{   
    outline: none !important;
    box-shadow: none !important;
    background: #EFFAFF 0% 0% no-repeat padding-box;
}
button:focus,
button:active,
button:hover,
.btn:active,
.btn.active
{
    outline: none !important;
    box-shadow: none !important;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #575757;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #575757;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #575757;
}
/************************************/
/*      01. Login/Reset/Logout      */
/************************************/
/*Login Page*/
.login-page {
    min-height: 100vh; /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    padding: 47px 0 42px; /* height of your footer */
    width: 100%;
}
.form-signin-reset {
    width: 100%;
    max-width: 335px;
    margin: auto;
}
.img-logo-login {
    max-width: 53.8%;
    margin-bottom:1.125rem;
}
.label-show-hide-password {
    color: #575757;
}
.form-signin-reset .form-label {
    font-size: .688rem;
    margin-bottom: .438rem;
}
.form-signin-reset .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: .75rem;
    font-size: .688rem;
}

.form-signin-reset .form-control:focus {
    z-index: 2;
}
.form-signin-reset .form-check {
    padding-top: .188rem;
}
.form-btn {
    padding: 3rem 0 1.5rem 0;
}
.btn-signin-reset {
    color: #fff;
    background-color: #162E4D;
    border-color: #162E4D;
    font-weight: 500;
    border-radius: 73px;
    width: 300px;
    padding: .5625rem .75rem;
    font-size: .938rem;
}
.btn-signin-reset:hover {
    color: #fff;
    background-color: #11233c;
    border-color: #11233c;
}
.forget-password-link {
    color: #575757;
    padding-top: 10px;
    font-size: .688rem;
}
/*footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}*/
footer .nav li a{
    font-size: .563rem;
    line-height: 1;
    color: #0D2F50;
    text-decoration: none;
    padding: 0 .25rem;
    border-left: 1px solid #0D2F50;
}
footer .nav li:first-child a {
    border-left: 0;
}
.copyright {
    font-size: .5rem;
    line-height: 1;
    color: #0D2F50;
    margin: .938rem 0 .188rem;
}
.copyright a {
    color: #0D2F50;
}

.login-page {
    padding: 147px 0 45px; /* height of your footer */
}
.form-signin-reset .form-label {
    font-size:  0.875rem;
    margin-bottom: 6px;
}
.form-signin-reset .form-control {
    font-size:  0.9375rem;
    padding: 0.6875rem 1.125rem !important;
}

.form-signin-reset .invalid-feedback {
    font-size: .625rem;
    /*display: inherit !important;*/
    /*visibility: hidden;*/
}

.form-btn {
    padding: 74px 0 43.6px 0;
}
.btn-signin-reset {
    font-size: 1.0625rem;
    padding: .652rem .75rem;
}
.forget-password-link {
    padding-top: 12.7px;
    font-size:  12px;
}
footer .nav li a{
    font-size: .625rem;
}
.copyright {
    font-size: .5rem;
    margin: 13px 0;
}

/*Reset Page*/
.confirm-reset-page {
    overflow: hidden;
    display: block;
    padding: 0;
    max-width: 335px;
    margin: auto;
}
.reset-title {
    font-size: 1.125rem;
    padding:   111px 0 17px;
    border-bottom: 1px solid #bdbec0;
}
.notice {
    font-size: .875rem;
    margin: 31px 0 23px 0;
}
.form-btn-confirm {
    /*position: absolute;*/
    margin-top: 295px;
    width: 100%;
}
.btn-reset-cancel {
    color: #fff;
    background-color: #A8A8A8;
    border-color: #A8A8A8;
}
.btn-reset-cancel:hover {
    color: #fff;
    background-color: #a6a6a6;
    border-color: #a6a6a6;
}

/*Logout Page*/
.logout-page {
    min-height: 100vh;
    overflow: hidden;
    display: block;
    position: relative;
    padding: 47px 0 200px;
    width: 89%;
    max-width: 1000px;
    margin: auto;
}
.logout-page .form-btn {
    padding: 0 0 5rem 0;
}

#icon-help-change-password {
    width: 16px;
    position: absolute;
    /*top: -1px;*/
    right: -25px;
}
#div-help-icon {
    position: relative;
    display: inline-block;
}
/************************/
/*    03. Modal Help    */
/************************/
.modal-backdrop {
    background-color: rgba(87, 85, 84, .95);
}
.modal-backdrop.show {
    opacity: 1;
}
.modal-notify .modal-dialog,
.modal-notify .modal-content {
    height: 100%;
    margin: 0 auto;
}
.modal-notify .modal-body {
    padding-bottom: 141px;
    padding-top: 10px;
}
.modal-notify .modal-header {
    border-bottom: 0;
}
.modal-notify .close {
    color: #fff;
    opacity: 1;
    font-size: 1.8rem;
    position: absolute;
    right: 60px;
    top: 58px;
}
.modal-notify .modal-content {
    background-color: transparent ;
}
.modal-notify .icon-q {
    height: 53px;
}
.modal-notify .icon-q img {
    width: 32px;
}
.modal-notify .icon-q-2 {
    height: 214px;
}
.modal-notify .question img {
    width: 80px;
    margin-top: 155.3px;
}
.modal-dialog {
    width: 600px !important;
    max-width: 600px !important;
}
.modal-body {
    padding: 0 !important;
}
.modal-notify .icon-q-3 {
    height: 70px;
    padding-top: 2rem;
}
.modal-notify .icon-q-3 img {
    width: 45px;
}
.modal-notify .text-tip {
    font-size: 1.125rem;
    font-weight: 500;
    padding-top: 2.938rem;
}
.modal-notify .text-tip-2 {
    font-size: 1.125rem;
    font-weight: 400;
    padding-top: 2.5rem;
}
.modal-notify .text-tip .text-tip-2 {
    padding-top: 0;
}
.modal-notify .help-btn-wrapper {
    position: absolute;
    width: 100%;
    bottom: 120px;
    left: 0;
}
.modal-notify .btn-help,
.modal-notify .btn-help-outline {
    width: 300px;
    border: 1px solid #fff;
    border-radius: 10px;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #fff;
    background-color: transparent;
    text-align: center;
    margin: 0 auto;
    padding: 0.652rem .75rem;
}
.modal-notify .btn-help {
    background-color: #fff;
    color: #4B4B4B;
}
.modal-notify ul.modal-list {
    padding-left: 1.25rem;
    list-style-type: "・ ";
}
.modal-notify .text-tip-3 ul {
    list-style-type: "※　";
    padding: 0 0 0  0.875rem;
}
.modal-notify .text-tip-3 {
    font-size: .625rem;
    padding: 0  0.875rem  0.875rem;
}
#modal-image .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
#modal-image .close {
    font-size: 1.063rem;
}
#modal-image .modal-body {
    padding: 0 !important;
}
img.preview-in-modal {
    margin-top: -10px;
}
#modal-image #image-loading{
    z-index: 1000; 
    display:none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*Tunglt*/
.mt30 {
    margin-top:30px;
}

.btn-logout-confirm {
    margin-top: 217px;
}
.pd36 {
    padding-top: 36px !important;
}

.modal-455 .modal-body {
    width: 455px;
    margin: 0 auto;
}