/* 現行 Admin/Syllabuses/edit.ctp の画面内スタイルをそのまま切り出したもの */
    .bg-app-blue {
        background-color: #004b96;
    }
    .row.w-100 {
        max-width: 100% !important;
    }
    .content-wrapper, .page-content {
        position: relative;
    }
    .page-content.content {
        padding: 0 0.5rem;
    }
    .syllabuse-page-new {}
    .syllabuse-page-new .title-page {
        margin-bottom: 20px;
    }
    .syllabuse-page-new .title-form {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .syllabuse-page-new .nav-link {
        color: #000;
    }
    .syl-tabs .nav-link.active {
        background: #F1F5F9;
        border-color: #dee2e6 #dee2e6 #dee2e6;
    }

    .syl-tab-content {
        padding-top: 20px;
        /*fix css have been overwrite*/
        width: 100%;
        background: transparent;
        padding-left: 0;
        padding-bottom: 0;
        padding-right: 0;
    }
    .syl-accordion {
        margin-right: 35px;
        font-size: 0.85rem;
    }
    .syl-accordion .card {
        margin-bottom: 0;
    }
    .btn-acc {
        width: 100%;
        border: none;
        background-color: #fff;
        position: relative;
        font-size: 16px;
        text-align: left;
        padding: 0 15px 0 0;
    }
    .btn-acc:focus {
        outline: none;
    }
    .btn-acc i {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .sec-heading {
        margin: 0 0 15px 0;
    }
    .sec-heading a {
        color: #000;
        margin-left: 20px;
    }
    .sec-heading a:hover {
        color: #004b96;
    }
    .section-list {}
    .section-list dl {
        margin: 0;
    }
    .section-list dt, .section-list dd {
        font-weight: normal;
        margin: 0 0 15px 0;
    }
    .section-list dd {
        padding: 0 0 0 30px;
        cursor: pointer;
    }
    .section-list dd:hover, .section-list dd.active {
        color: #004b96;
    }
    .frm-btn {
        font-family: 'Source Sans Pro', sans-serif;
        text-decoration: none;
        color: #004b96;
        font-size: 0.72rem;
        font-weight: bold;
        letter-spacing: 1px;
        display: inline-block;
        text-align: center;
        border: solid 1px #004b96;
        border-radius: 20px;
        background-color: #fff;
        padding: 5px 14px;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        cursor: pointer;
    }
    .frm-btn.active, .frm-btn:hover {
        color: #fff;
        background-color: #004b96;
    }
    .frm-heading {
        display: flex;
        align-items: center;
    }
    .frm-heading span {
        font-size: 18px;
        font-weight: 700;
    }
    .frm-heading .frm-btn {
        margin-left: auto;
    }
    .form-input label {
        font-size: 18px;
    }
    .form-input input, .form-input textarea {
        border-radius: 0;
    }
    .htl-radio {}
    .htl-radio label {
        font-weight: normal !important;
    }
    .htl-radio .custom-control {
        padding-left: 0px;
    }
    .htl-radio .custom-control-label{
        padding-left: 30px
    }
    .htl-radio .custom-radio .custom-control-label::before {
        left: 0;
        background: #fff;
        border-color: #000;
        box-shadow: none;
        width: 20px;
        height: 20px;
    }
    .htl-radio .custom-control-input:checked~.custom-control-label::after {
        left: 5px;
        background: #004b96;
        border-color: #004b96;
        box-shadow: none;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-top: 5px;
    }
    .label-upload {
        color: #B4B4B4;
        font-weight: normal !important;
    }
    .upload-progress {
        align-items: center;
    }
    .upload-progress .progress{
        border-radius: 10px;
        background-color: #fff;
    }
    .trigger-upload-input {}
    .trigger-upload-input input {
        display: none;
    }
    .show-name-file {
        display: none;
        text-decoration: underline;
        color: #B4B4B4;
        margin-bottom: 15px;
    }
    .show-error-file {
        display: none;
        font-size: 14px;
        color: #ff0000;
        margin-top: 5px;
    }
    .up-row {
        margin-bottom: 20px;
    }
    .submit-row {
        margin-top: 40px;
    }
    .frm-save-publish {
        margin-left: 60px;
    }
    .frm-layout.close {
        display: none;
    }
    .custom-input-p input.form-control{
        height: calc(1.9rem + 2px);
        padding: 0rem .75rem;
    }
    .custom-input-p{

    }
    .course-uploadfile-box.close {
        display: none;
    }
    input.error, textarea.error {
        border-color: #dc3545;
    }
    .required-icon {
        color: #dc3545;
        margin-left: 5px;
    }
    label.error {
        color: #dc3545;
        font-size: 14px;
    }
    @media screen and (max-width: 1686px) {
        .form-input label {
            font-size: 16px;
        }
    }

    @media screen and (max-width: 1366px) {
        .form-input label {
            max-width: 100%;
            font-size: 16px;
            flex: 100%;
        }
        .col-sm-10 {
            max-width: 100%;
            flex: 100%;
        }
        .trigger-upload-input .frm-btn {
            /*padding: 5px 10px;*/
            /*font-size: 16px;*/
        }
        .trigger-upload-input {
            margin-bottom: 10px;
        }
    }

    @media screen and (max-width: 1180px) {
        .frm-heading {
            display: block;
        }
    }

    @media screen and (max-width: 1024px) {
        .form-input label {

        }
        .btn-acc {
            padding-right: 15px;
        }
        .sec-heading span {
            display: block;
        }
        .sec-heading a {
            margin-left: 0;
        }
    }