body {
    /* font-family: cross-platform-yu-gothic, sans-serif; */
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    color: #494949 !important;
    font-weight: bold;
    background-color: #ffffff;
}
.min-height{
    min-height:calc(100vh - 150px);
}
/* To assign #C4F279 for mouse over */
.left-menu-sidebar .fa{
    width: 30px;
    text-align: center;
}
.btn:first-child:active {
    background:#C4F279;
    color: #494949;
}

th {
    text-align: center !important;
}
.screen_container_wrap {
    /* min-width: 1024px !important; */
    margin: auto;
}
.mr-3 {
    margin-right: 3px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mr-20 {
    margin-right: 20px
}
.pl-0 {
    padding-left: 0px !important;
}
.fontsize-10pt {
    font-size: 10pt;
    font-weight: bold;
}
.fontsize-12pt {
    font-size: 12pt;
    font-weight: bold;
}
.fontsize-14pt {
    font-size: 14pt;
    font-weight: bold;
}
.fontsize-18pt {
    font-size: 18pt;
    font-weight: bold;
}
.fontsize-24pt {
    font-size: 24pt;
    font-weight: bold;
}
/* Login Page */
.bg-green {
    background: #C4F279;
}
.no-border-radius {
    border-radius: 0px !important;
}
.login-btn {
    color: #494949;
    border: none;
    border-radius: 25px;
    padding: 10px 40px;
}
.login-btn:hover {
    background: #C4F279;
    color: #494949;
}
.heading-title {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    border-radius: 0px !important;
}
.heading-title h2 {
    text-align:center;
}
.heading-title h2 img{
    width:50%;
}
.login-form-wrap {
    margin: 0px;
}
.login-form-area{
    width: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
#main-header .heading-title{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-bottom: 0.5pt solid #D5F2A2;
}
#main-header img{
    width:100%;
}
#main-header .user-login-info p {
    margin-bottom: 0px !important;
}
.subtitle{
    margin:5px 0!important;
}
.user-login-info{
    font-size: 12pt;
}
.left-menu-sidebar {
    list-style: none;
    background: #FFF;
    padding: 100px 20px;
    border-right:0.5pt #dadada solid;
}

.left-menu-sidebar li {
    padding-bottom: 10px;
}
.left-menu-sidebar a, #logout-form button {
    color: #494949 !important;
    font-weight: bold;
    text-decoration: none;
}

#logout-form .btn-logout {
    background: none;
    border: none;
    padding: 0px;
}
#main-content-wrap {
    border: none;
}
/* Student Listing */

.student-list-page, .student-detail-bycontact-page {
    padding: 20px;
    border-radius: 1px solid #494949;
}

.student-list-page #unconfirmed, .student-list-page #confirmed {
    border-color: #494949;   
}

.select2-container {
    width: 100% !important;
}

#student_table th, #student_table td {
    font-size: 12pt !important;
}
.contact-write-btn {
    color: #494949;
    background: #D5F2A2 !important;
    border: none;
    border-radius: 25px;
    padding: 5px 10px;
}

.btn:hover,
.template-page-btn:hover,
.template-create-btn:hover,
.student_detail_search_btn:hover{
    background-color:#C4F279 !important;
    color: #494949;
}

.img_upload_btn{
    color: #494949;
    background: #D5F2A2 !important;
    border: none;
    border-radius: 25px;
    padding: 10px 40px;
}

.confirm-btn-wrap {
    padding-right: 0px;
}

.confirm-btn-wrap .form-check-input:checked {
    background-color: #D5F2A2;
    border-color: transparent !important;
    color: #494949;
}
/* Remove background image when the checkbox is checked */
.confirm-btn-wrap .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url(
    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.confirm-btn-wrap .form-check-inline {
    margin-right: 0px !important;
}
#student_table {
    background: #fff !important;
    --bs-table-bg: #fff !important;
}

#student_table a {
    color: #494949 !important;
}
.confirmed td {
    background: #F2F2F2 !important;
}

/* Guardian Contact Form */

.contact_from_guardian {
    border: 3px solid #FFBCA6;
    border-radius: 15px;
    padding: 0;
}
.contact_title_g{
    background-color:#FFBCA6;
    padding:10px;
    border-radius: 10px 10px 0 0;
}
.contact_from_guardian img, .contact_from_school img {
    margin-right: 10px;
}

/* School Contact Form */

.contact_from_school {
    margin-top: 20px;
    border: 3px solid #C4F279;
    border-radius: 15px;
    padding: 0 0 10px 0;
}
.contact_title_s{
    background-color:#C4F279;
    padding:10px;
    border-radius: 10px 10px 0 0;
}
.contact_from_school .form-check-input:checked {
    background-color: #C4F279 !important;
    border-color: #C4F279 !important;
    background-image: none;
}
.student-list-page .custom_input_file{
    display: none;
}
.first_photo_file_name,
.second_photo_file_name,
.third_photo_file_name{
        margin: 6px;
}
.file-delete-btn-area{
    margin-top: 5px;
}
.template_btn_wrap {
    margin-top: 3px;
}
.template_btn_wrap a:hover {
    color: #494949;
}
.school_contact_date_search_btn {
    background-color: #D5F2A2 !important;
    color: #494949;
    padding: 3px 20px;
    border-radius: 20px;
    margin-left: 15px;
}
/* Template Page */

.template-list-page, .template-create-page, .student-detail-page {
    padding: 20px;
}

.template-create-btn, .confirm_alert_btn, .template-list-page .template-page-btn-delete, .template-page-btn-edit {
    background-color: #D5F2A2;
    color: #494949;
    padding: 5px 20px;
    border-radius: 15px;
    border: none;
}

.template-list-page .template-page-btn {
    background-color: #D5F2A2;
    color: #494949;
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
}

.jconfirm-buttons {
    text-align: center !important;
    float:none  !important;
}
.confirm_alert_btn {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding: 10px 25px !important;
    border-radius: 20px !important;
}
.no-underline {
    text-decoration: none;
}
.delete-form {
    margin-top:-7px !important;
}

.jconfirm-box-container .jconfirm-buttons .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent; /* Remove the background color */
    border: none; /* Remove the border */
    padding: 0; /* Remove padding to make it smaller */
    color: #333; /* Text color */
    font-size: 14px; /* Adjust font size as needed */
}
.jconfirm .jconfirm-box.jconfirm-type-green {
    border: 3px solid #D5F2A2 !important;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    padding-top: 20px !important;
    padding-top: 20px !important;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
}
.delete_msg_alert p {
    text-align: left !important;
}
.custom_input_file_label {
    /* width: 100px; */
}
#student_photo_upload_wrap .custom_input_file, #edit_student_photo_upload_wrap .custom_input_file {
    color: transparent;
}

#edit_first_photo_file, #edit_second_photo_file, #edit_third_photo_file {
    width: auto !important;
}

#student_photo_upload_wrap .custom_input_file::file-selector-button,  #edit_student_photo_upload_wrap .custom_input_file::file-selector-button {
    cursor: pointer;
    border: none;
    border-radius: 25px;
    padding: 5px 10px;
}

.edit_photo_delete, #student_photo_upload_wrap .delete-btn {
    background: transparent !important;
    border: none !important;
    color: #494949 !important;
}
#student_photo_upload_wrap .input-group,
#edit_student_photo_upload_wrap .input-group{
    gap: 15px;
}
.input-group-append .school_contact_date_icon, 
.start_date_icon, .end_date_icon {
    height: 100%;
    cursor: pointer;
    border-top-left-radius: 0;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--bs-border-radius);
}
.start_end_date_label {
    padding: 6px 3px 0px 0px;
}

#contact_date, #prevButton, #nextButton, #contact_date_icon, .no_border {
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    text-align: center;
}

#template_table th, #template_table td {
    font-size: 12pt !important;
    border: solid 1px #dadada;
}
/* School Contact Book Preview Modal */

.preview_modal_footer_btn, .template_modal_btn {
    color: #494949;
    background: #D5F2A2;
    border: none;
    border-radius: 25px;
    padding: 5px 7px;
    display: inline-block;
}

#previewModal .modal-header, #previewModal .modal-footer,
#templateListModal .modal-header, #templateListModal .modal-footer {
    border: none !important;
}

#previewModal .modal-body {
    border: 1px solid #D5F2A2;
    margin: 20px;
}

.modal-dialog .modal-content{
    border: 5px solid #D5F2A2;
}

#student_photo_show_wrap_preview img {
    margin-right: 7px;
}

#templateListModal .form-check-input {
    border:2px solid #C4F279 !important;
}

#templateListModal .form-check-input:checked {
    background-color: #C4F279 !important;
    background-image: none;
}

#templateListModal th {
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
}

#templateListModal td {
    font-size: 12pt;
    font-weight: bold;
}
#templateListModal .template_description{
    width: 60%;
}

#previewModal .modal-footer, #templateListModal .modal-footer {
    display: inline-block !important;
}
#previewModal #contact_from_school_append_preview
{
    padding: 20px;
}

.confirm_status .form-check-label {
    cursor: pointer;
}

.custom_pagination .page-item {
    border: none;
    background-color: transparent;
}
.custom_pagination .page-link {
    border: none;
    background-color: transparent;
    color: #494949;
}
.custom_pagination .active .page-link {
    color: #C4F279;
}
/* Student Detail */
.student_detail_search_input, .template_search_input {
    border-radius: 7px !important;
}
.student_detail_search_btn {
   background-color: #D5F2A2;
    color: #494949;
    padding: 5px 15px;
    border-radius: 20px;
    border-color:transparent;
}

#student_detail_form .form-control {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

#student_detail_table th, #student_detail_table td {
    font-size: 12pt;
    font-weight: bold;
    color: #494949;
    border: solid 1px #dadada;
}

#student_detail_table a {
    color: #494949;
}

#search_date_range {
    padding-left: 0px;
    padding-top: 6px;
    padding-right: 0px;
}
/* 連絡帳一覧　閲覧権限エラーメッセージ */
.role_error_message{
    font-size: 16pt;
    text-align: center;
    margin-top: 100px;
}
.alert .close {
    border: none;
    background: transparent;
    font-size: 12pt;
}

.alert-success {
    --bs-alert-bg: #D5F2A2;
    --bs-alert-border-color: #D5F2A2;
    font-size: 14pt;
}
#edit_btn {
    color: #494949;
    background: #D5F2A2;
    border: none;
    border-radius: 25px;
    padding: 6px 20px;
}

#first_photo_old_filename, #second_photo_old_filename, #third_photo_old_filename {
    margin: 5px !important; 
}
/* 家庭からの連絡日付けボタン  確認済み*/
.btn_confirmed{
    border: none;
    font-weight: bold;
    text-decoration: underline;
    background: #F2F2F2;
}
/* 家庭からの連絡日付けボタン  未確認*/
.btn_unconfirmed{
    border: none;
    font-weight: bold;
    text-decoration: underline;
    background-color: #fff;
}
.btn_confirmed:hover,
.btn_unconfirmed:hover{
    cursor: pointer;
}

/* PC非表示部分 */
.sp_block{
    display: none;
}
/* input部品　共通 */
.input_common_parts{
    border: none;
    background-color: #F2F2F2;
}
/* 改行反映 */
.new_line{
    white-space: pre-wrap;
}
/* スクロール */
.txt_scroll{
    overflow-y: auto;
    max-height: 300px;
}
.display_none{
    display: none;
}
.temp_create_btn{
    width:50%;
}
@media (max-width: 1023px) {
    .screen_container_wrap{
        min-width: 1023px!important;
    }
    /**
    *ログイン画面
    */
    .login-form-area{
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    #app .screen_container_wrap{
        min-width: 320px !important;
    }
    #app .screen_container_wrap,
    #app .container,
    #app .col-md-12{
        /* padding: 0 !important; */
    }
    #app .container{
        /* max-width: inherit; */
    }
    #app .login-form-wrap{
        background-color: #fff;
        padding: 30px;
        margin: 0;
    }
    #app .login-btn{
        margin: 0 auto;
        display: block;
        font-size: 10pt;
    }
    #app .login-btn-area{
        margin-top: 40px;
    }
    .login-btn-area .offset-md-4{
        margin-left: 0;
        width: 100%;
    }
    #app .login_label{
        font-size: 10pt;
    }
    .heading-title h2{
        font-size: 21pt;
    }
    /* SP表示部分 */
    .sp_block{
        display: block;
    }
}