/**
 * send_rest_mail.html.twig 用スタイル
 * 作成日: 2024-12-19
 */










/* ログインフォーム用コンテンツラッパー */
#content-wrapper.login-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    text-align: center;
}

/* ログインフォーム用メインコンテンツ */
.login-form-wrapper #maincontent {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* ログインフォーム用ミッドコンテンツ */
.login-form-wrapper .midcontent {
    width: 100%;
    text-align: center;
}

/* ログインフォーム用行 */
.login-form-wrapper .row {
    width: 100%;
    text-align: center;
}

/* ログインフォーム用ボックス */
.login-form-wrapper .wbox.basicArea {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

/* ログインフォーム用ロゴ（中サイズ） */
.login-form-wrapper .logo-middle,
.login-form-wrapper .center-section .logo-middle,
.login-form-wrapper img.logo-middle,
.login-form-wrapper .center-section img.logo-middle,
#content-wrapper.login-form-wrapper .logo-middle,
#content-wrapper.login-form-wrapper .center-section .logo-middle,
#content-wrapper.login-form-wrapper img.logo-middle {
    width: 120px;
    height: 36px;
    max-width: 120px;
    max-height: 36px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    box-sizing: border-box;
}

/* ログインフォーム用中央セクション */
.login-form-wrapper .center-section {
    text-align: center;
    /* margin-bottom: 30px; */
    margin-bottom: 0px;
    padding-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ログインフォーム用タイトル */
.login-form-wrapper .title-full-width {
    display: block;
    text-align: center;
    /* padding-top: 20px; */
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
}

/* ログインフォーム用フォーム */
.login-form-wrapper form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* ログインフォーム用モーダルボディ */
.login-form-wrapper .modal-body {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* ログインフォーム用フォームラベル */
.login-form-wrapper .form-label {
    text-align: center;
    margin-bottom: 5px;
    display: block;
}

/* ログインフォーム用入力フィールド */
.login-form-wrapper .form-input-300,
.login-form-wrapper .form-input-300-no-margin {
    display: block;
    margin: 0 auto 10px auto;
    text-align: left;
    max-width: 300px;
}

/* ログインフォーム用モーダルフッター */
.login-form-wrapper .modal-footer {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* ログインフォーム用ボタン */
.login-form-wrapper #confirmBtn {
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
}

/* モーダルフッター内の送信ボタン（iframe内でも使用） */
.modal-footer #confirmBtn {
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ログインフォーム用リンク */
.login-form-wrapper .modal-footer a {
    /* display: inline-block; */
    margin-top: 10px;
}

/* モーダルフッター（複数ある場合の間隔調整） */
.modal-footer + .modal-footer {
    margin-top: 10px;
}

/* iframe内のモーダルフッターのマージン調整（common_styles.cssのmargin-top: 40pxを上書き） */
body .modal-footer {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

body .modal-footer:first-of-type {
    margin-top: 20px !important;
}

/* モーダルフッターボタンエリア */
.modal-footer-button-area {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 閉じるボタン */
#closeBtn {
    margin-top: 10px;
    margin-bottom: 5px;
    display: inline-block;
}

/* 無効化時のスタイル */
#confirmBtn:disabled,
#closeBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* readonly時の入力欄スタイル（値は送信されるが編集不可） */
#log_adr:read-only,
#log_pass:read-only {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.8;
}

/* 無効化されたリンクのスタイル */
.modal-footer a[style*="pointer-events: none"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    text-decoration: none;
}



.login-form-wrapper .midcontent {
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;
    /* box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); */
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 24px;
    margin-right: 24px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border: 1px solid #e6e8ee;
}



.login-form-wrapper .midcontent .form-col{
    max-width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.login-form-wrapper .midcontent .form-col:not(:last-child){
    margin-bottom: 5px;
}

.login-form-wrapper .midcontent .form-col .form-label{
    text-align: left;
}

.login-form-wrapper .midcontent .form-col .form-label label{
    font-size: 13px;
    font-weight: 700;
}

.login-form-wrapper .midcontent .btn{
    width: 100%;
    max-width: 300px;
}

#err-msg-login.error-text {
    max-width: 300px;
    margin: 0 auto;
    text-align: left;
    padding-top: 0;
}

#err-msg-login.error-text + .form-col {
    padding-top: 10px;
}

.text-login-desc {
    font-size: 14px;
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
    padding-bottom: 20px;
}