@charset "utf-8";

#sidebar-left.col-sm-2 {
    max-width: 100px;
}

.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}

.m-0 {
    margin: 0 !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.ml-10 {
    margin-left: 10px !important;
}
.ml-15 {
    margin-left: 15px !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.p-0 {
    padding: 0 !important;
}

.d-none {
    display: none !important;
}
.flex {
    display: flex !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.form-group .form-control, .form-group .input-group {
    margin-bottom: 0 !important;
}
.form-group .container-fluid > div {
    margin-bottom: 5px !important;
    min-height: 35px;
}

@media (min-width: 1200px) {
  .d-lg-none { display: none !important; }
  .d-lg-show { display: block !important; }
  .d-md-show, .d-sm-show, .d-xs-show, .d-show,
            { display: none !important; }
  .d-md-none, .d-sm-none, .d-xs-none, .d-none,
            { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.99999px) {
  .d-md-none { display: none !important; }
  .d-md-show { display: block !important; }
  .d-lg-show, .d-sm-show, .d-xs-show, .d-show,
            { display: none !important; }
  .d-lg-none, .d-sm-none, .d-xs-none, .d-none,
            { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.99999px) {
  .d-sm-none { display: none !important; }
  .d-sm-show { display: block !important; }
  .d-lg-show, .d-md-show, .d-xs-show, .d-show,
            { display: none !important; }
  .d-lg-none, .d-md-none, .d-xs-none, .d-none,
            { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.99999px) {
  .d-xs-none { display: none !important; }
  .d-xs-show { display: block !important; }
  .d-lg-show, .d-md-show, .d-sm-show, .d-show,
            { display: none !important; }
  .d-lg-none, .d-md-none, .d-sm-none, .d-none,
            { display: none !important; }
}
@media (max-width: 575.99999px) {
  .d-none { display: none !important; }
  .d-show { display: block !important; }
  .d-lg-show, .d-md-show, .d-sm-show, .d-xs-show,
            { display: none !important; }
  .d-lg-none, .d-md-none, .d-sm-none, .d-xs-none,
            { display: none !important; }
}

.hal2-ex .course_names .course_name {
    font-weight: bold;
    padding: 0.3em;
    background-color: #f5d3d3;
}

.hal2-ex .course_names .option_course {
    background-color: #eee;
    margin-bottom: 5px;
    padding: 0.5em;
    padding-right: 0em;
}

.hal2-ex .course_names {
    /* margin-bottom: 0px; */
}

.hal2-ex .course_names .option_course_months {
    text-indent: 1em;
}

.hal2-ex .option-course-area {
    padding: 5px;
}
/* これがCSS4じゃないときかないのでJSで対応 */
.hal2-ex .option-course-area > div > div.checkbox:has(> label > input[type="checkbox"]) ~ div.opc-months-selector-wrap {
    display: none;
}

/* これがCSS4じゃないときかないのでJSで対応 */
.hal2-ex .option-course-area > div > div.checkbox:has(> label > input[type="checkbox"]:checked) ~ div.opc-months-selector-wrap {
    display: block;
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap,
.hal2-ex .confirm-option-course-months-wrap {
    background-color: #ccc;
}

 /* === ボタンを表示するエリア ============================== */
.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea {
  display        : inline-block;
  margin         : auto;                /* 中央寄せ           */
  min-height     : 30px;
  max-height     : 30px;
}
 
 /* === チェックボックス ==================================== */
.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox {
    padding-left: 0px;
}
.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox > input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}
 
 /* === チェックボックスのラベル（標準） ==================== */
.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox > label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  text-align     : center;              /* 文字位置は中央     */
  border         : 2px solid #ccc;      /* 枠線(一旦四方向)   */
  border-radius  : 3px;                 /* 角丸               */
  min-width      : 40px;
  max-width      : 50px;
  height         : 21px;                /* ボタンの高さ       */
  font-size      : 12px;                /* 文字サイズ         */
  line-height    : 21px;                /* 太字               */
  font-weight    : bold;                /* 太字               */
  background     : #eee;                /* 背景色             */
  box-shadow     : 3px 3px 3px #888;    /* 影付け             */
  transition     : .3s;                 /* ゆっくり変化       */
  cursor         : pointer;
  min-height     : 24px;
}
 
 /* === ON側のチェックボックスのラベル（ONのとき） ========== */
.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox > label span:after{
  color          : #aaa;
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox > input[type="checkbox"]:checked + label {
  background    : #4682b4;
  color         : #ffffff;
  border-radius  : 3px;                 /* 角丸               */
  box-shadow    : 3px 3px 0 0 #888;
  min-height    : 24px;
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > .input.checkbox > input[type="checkbox"]:checked + label span:after {
  color          : #fff;                /* 文字色             */
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > input[type="button"].likeToggleButton {
  background     : #ccc;                /* 背景色             */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  border         : 2px solid #ccc;      /* 枠線(一旦四方向)   */
  font-size      : 10px;                /* 文字サイズ         */
  width          : 42px;                /* ボタンの横幅       */
  height         : 21px;                /* ボタンの高さ       */
  box-shadow     : 3px 3px 3px #888;    /* 影付け             */
  font-weight    : bold;                /* 太字               */
  cursor         : pointer;
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonArea > input[type="button"].likeToggleButton:focus {
  outline: none;
  background    : #4682b4;
  color: #fff;
}

.hal2-ex .option-course-area > div > .opc-months-selector-wrap > .opc-months-selector > .togglebuttonAreaCation {
    display: none;
    background-color: yellow;
    color: red;
    padding: 3px;
    font-weight: bold;
}

.hal2-ex .confirm-option-course-months-wrap span{
    display        : inline-block;               /* ボックス要素に変更 */
    box-sizing     : border-box;          /* 枠線を含んだサイズ */
    text-align     : center;              /* 文字位置は中央     */
    border         : 2px solid #ccc;      /* 枠線(一旦四方向)   */
    border-radius  : 3px;                 /* 角丸               */
    min-width      : 40px;
    man-width      : 50px;
    height         : 21px;                /* ボタンの高さ       */
    font-size      : 12px;                /* 文字サイズ         */
    line-height    : 21px;                /* 太字               */
    font-weight    : bold;                /* 太字               */
    background     : #4682b4;                /* 背景色             */
    box-shadow     : 3px 3px 3px #888;    /* 影付け             */
    color          : white;
}

.hal2-ex .option-course-area {
    padding: 0.5em;
    background-color: #eee;
    border: 0px solid white;
}

.hal2-ex .option-course-area .option-course-name {
    font-weight: bold;
}




.hal2-ex .box-header {
    min-height: 3em;
}

.hal2-ex .box-header .box-name {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: initial !important;
}

.hal2-ex .box-content .has-feedback .form-control-feedback {
    top: 5px;
}

.hal2-ex .box-content .btn-warning {
    background-color: #FFB15B;
}

.hal2-ex .box-content .form-group .container-fluid {
    min-height: 1.8em;
}

.hal2-ex .box-content .form-group .container-fluid .control-label {
    text-align: left;
    font-size: 1em;
    line-height: 2.5em;
    background-color: #fff1f1;
    border-left: 5px solid #fda9a9;
    width: 100%;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 35px;
}

.hal2-ex .box-content .form-group .container-fluid .control-value {
    font-size: 1;
    padding: 0.3em;
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    height: 100%;
    word-break: break-all;
    margin-bottom: 0px;
    min-height: 35px;
}


.hal2-ex .box-content .form-group .form-control,
.hal2-ex .box-content .form-group .select2-container ul.select2-choices {
    min-height: 35px;
    font-size: 1em;
    color: #000000;
}
.hal2-ex .box-content .form-group .select2-container ul.select2-choices li.select2-search-choice > div {
    font-size: 0.9em;
}

.select2-container-multi .select2-choices .select2-search-field input {
    display: flex;
    align-items: center;
    min-height: 1.7em;
    border-radius: 0px;
}

.hal2-ex .box-content .form-group > label {
    align-items: center;
    display: flex;
    padding-right: 0;
}

.hal2-ex .box-content .form-group > div {
    padding-left: 0;
    padding-right: 0;
}

.hal2-ex .box-content .account-type-divider {
  margin: 8px 0;
  border: 0;
  border-top: 2px solid #ddd;
  height: 1px;
}

.hal2-ex .box-content .form-group.container-fluid > div {
    padding-left: 15px;
    padding-right: 15px;
}

.devoops-modal-bottom button,
.hal2-ex .box-content .btn {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    border-radius: 0px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:none;
}

.hal2-ex .box-content .btn span {
    text-overflow: ellipsis;
    overflow: hidden;
}

.hal2-ex .box-content .btn-square-pop:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.hal2-ex textarea.form-control.form-error,
.hal2-ex input.form-control.form-error,
.file-input-error{
    border: 1px solid red;
    /* box-shadow: 0 0 3px 1px red; */
    background-color: #ffe6e6;
}

.hal2-ex div.error-message {
    color: #f54a4a;
    font-size: 0.9em;
    padding: 0.5em;
    /* background-color: #f54a4a; */
    margin: 2px;
}

.hal2-ex #courses_area div.course_amount div.checkbox {
    min-height: 1em;
}

.hal2-ex .input.select.labeledselect {
    white-space: nowrap;
    /* width: 50%; */
    display: inline-block;
    align-items: center;
    padding-right: 1.5em;
}

.checkbox-container > div.checkbox {
    display: inline-block;
}

.control-value.form-error {
    background-color: #ffe6e6 !important;
    border: 1px solid red !important;
}
input[disabled] + i.fa.fa-circle-o {
    color: #aaa;
}
select.ui-datepicker-year {
    color: #000;
}

#ui-datepicker-div.ui-widget-content {
    color: #f8f8f8 !important;
    background-color: #eae8e8 !important;
}


#ui-datepicker-div.ui-widget-content a.ui-state-default {
    background-color: #286090;
    color: #fff;
}

#ui-datepicker-div .ui-widget-header {
    background-color: #fff;
    color: #000;
    border-bottom: 3px solid #f8f8f8;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 10pt;
    margin-right: 5px;
}

#ui-datepicker-div.ui-widget-content a.ui-state-default {
    min-width: 3em;
    line-height: 3em;
}

#ui-datepicker-div.ui-widget-content a.ui-state-default.ui-priority-secondary {
    background-color: #fff;
    color: #000;
}

.ui-datepicker .ui-datepicker-prev span {
    background-image: url(/plugins/jquery-ui/images/ui-icons_222222_256x240.png) !important;
    background-position: -80px -192px !important;
}
.ui-datepicker .ui-datepicker-next span {
    background-image: url(/plugins/jquery-ui/images/ui-icons_222222_256x240.png) !important;
    background-position: -48px -192px !important;
}

label.control-label.required:after {
    content: '必須';
    color: white;
    background-color: #f16f6f;
    padding: 0.3em;
    /* margin-left: 0.5em; */
    /* white-space: nowrap; */
    border: 0px solid red;
    border-radius: 3px;
    font-size: 0.7em;
    position: absolute;
    right: 2em;
    top: 0.5em;
    line-height: 1.8em;
}


.input.text.percent-field-wrap input,
.input.text.percent-field-wrap .control-value {
    width: calc(100% - 2em);
    padding-right: 0;
    margin-right: 0;
}

.input.text.percent-field-wrap:after {
    content: '%';
    position: absolute;
    top: 0.5em;
    right: 1.5em;
}

ul.select2-choices {
    overflow: auto !important;
}

li.select2-search-field input[type="text"] {
    width: 100% !important;
}

a.paginate_button, 
a.paginate_active {
    display: inline-block;
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border: 1px solid #ccc;
    margin-left: 0.1em;
    margin-right: 0.1em;
    cursor: pointer;
}

a.paginate_active {
    background-color: #4d93ca;
    color: #fff;
}

a.paginate_button:hover, 
a.paginate_active:hover {
    background-color: #94d0ff;
    text-decoraton: none;
}

.home-info{
    max-height: 7em;
    overflow-y: hidden;
}

.expanded  > .home-info {
    max-height: 500px;
    overflow-y: scroll;
}