@charset "UTF-8";

header, footer {
    background-color: #106cac;
    color: white;
    padding: 5px;
}

header {
    margin-bottom: 10px;
}

footer {
    margin-top: 10px;
}

/* .user-login-title {
  background-color: #e5eaed;
} */

header div.header-top-area {
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
}

header div.header-top-area > div:first-child {
    margin-right: auto;
}

header div.header-top-area div.header-logo {
    font-size: 1.5em;
}

header div.header-top-area div.header-logo a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

header div.header-top-area div.user-control {
    display: flex;
    align-items: center;
}

header div.header-top-area div.user-control .user {
    font-size: 1.2em;
    margin-right: 5px;
}

header div.header-top-area div.user-control .button-logout {
    font-size: 1em;
}

/* メニュー */
.NavMenu ul {
    display: none;
}

.header-menu {
    display: flex;
    justify-content: center;
    padding-left: 0;
    text-align: center;
}

.header-menu li {
    list-style: none;
}

.header-menu li:hover {
    cursor: pointer;
    background-color: #feffb3;
}

.header-menu li a {
    color: #414141;
    width: 200px;
    display: block;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 5px;
    text-decoration: none;
}

.decided {
    border: #cccccc 1px solid;
    background-color: #e2faff;
}

.pre-selected {
    border: #cccccc 1px solid;
    background-color: #e2e2e2;
}

.no-entry {
    border: #cccccc 1px solid;
    background-color: #ffe4dd;
}

.user-selection-result-area > div {
    padding: 5px;
}

.user-selection-result-area > div:nth-child(n+2) {
    margin-left: 5px;
}

.dataTables_length select[name="area-select-table_length"],
.dataTables_length select[name="hospital-select-table_length"] {
    font-size: 1.2em;
    border-radius: 0.3em;
}

.dataTables_filter input[type="search"] {
    font-size: 1.2em;
    border-radius: 0.3em;
    border: #cccccc 1px solid;
}

.entry-button-area > div,
.candidate-button-area > div {
    display: flex;
    justify-content: center;
}

.entry-button,
.candidate-button {
    padding: 5px;
    border: 1px solid #cccccc;
    width: 30%;
    text-align: center;
}

.entry-button:hover,
.candidate-button:hover {
    cursor: pointer;
}

.entry-button:nth-child(n+2),
.candidate-button:nth-child(n+2) {
    margin-left: 2%;
}

.entry-button.term-1 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #009688;
    border-bottom: solid 4px #4F5958;
    border-radius: 5px;
}
.entry-button.term-1:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.entry-button.term-2 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4CAF50;
    border-bottom: solid 4px #4F5958;
    border-radius: 5px;
}
.entry-button.term-2:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}
.entry-button.term-3 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #CDDC39;
    border-bottom: solid 4px #4F5958;
    border-radius: 5px;
}
.entry-button.term-3:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}
.entry-button.term-4 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #FCD821;
    border-bottom: solid 4px #4F5958;
    border-radius: 5px;
}
.entry-button.term-4:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.candidate-button.candidate-1 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4AB7E8;
    border-bottom: solid 4px #62858E;
    border-radius: 5px;
}
.candidate-button.candidate-1:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.candidate-button.candidate-2 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4ADAE8;
    border-bottom: solid 4px #62858E;
    border-radius: 5px;
}
.candidate-button.candidate-2:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.candidate-button.candidate-3 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #A6F2F4;
    border-bottom: solid 4px #62858E;
    border-radius: 5px;
}
.candidate-button.candidate-3:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}
.candidate-button.candidate-4 {
    display: block;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4AB7E8;
    border-bottom: solid 4px #62858E;
    border-radius: 5px;
}
.candidate-button.candidate-4:active {
    margin-bottom: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.column-disabled,
.entry-button.disabled,
.candidate-button.disabled {
    background-color: #cccccc;
}

.entry-form-item-area {
    margin: 1em 0;
    display: flex;
    justify-content: center;
}

.entry-form-item {
    width: 200px;
    padding: 1em;
    border-radius: 5px;
}

.entry-form-item:nth-child(n+2) {
    margin-left: 10px;
}

.entry-form-item:nth-child(1) {
    background-color: #4AB7E8;
}
.entry-form-item:nth-child(2) {
    background-color: #4ADAE8;
}
.entry-form-item:nth-child(3) {
    background-color: #A6F2F4;
}

.non-select.entry-form-item{
    background-color: #eeeeee;
}

.entry-form-item-pharmacy-name,
.entry-form-item-hospital-name
{
    font-weight: bold;
    color: #0F557C;
    font-size: 1.2em;
}

.check-apply-area {
    border: 1px solid #cccccc;
    border-radius: 5px;
    width: 300px;
    margin: 0 auto;
}

.check-apply-area div {
    padding: 5px;
    font-size: 1.2em;
}

.check-apply-area .item1 {
    background-color: #cee1e1;
}

.check-apply-area .item2 {
    background-color: #FFFFFF;
}

.selection-apply-area .button-apply {
    width: 200px;
    padding: 10px 5px;
    border: 1px #CCCCCC solid;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.selection-apply-area .button-apply.disabled {
    background-color: #cccccc;
}

.selection-apply-area .button-apply:nth-child(n+2) {
    margin-left: 10px;
}

.selection-apply-area .button-apply.priority-1,
.selection-apply-area .button-apply.term-1 {
    background-color: #fff2ef;
}

.selection-apply-area .button-apply.priority-2,
.selection-apply-area .button-apply.term-2 {
    background-color: #e2ffb5;
}

.selection-apply-area .button-apply.priority-3,
.selection-apply-area .button-apply.term-3 {
    background-color: #ffe0b1;
}

.selection-apply-area .button-apply.priority-4,
.selection-apply-area .button-apply.term-4 {
    background-color: #c9d3ff;
}

.selection-apply-area .button-apply.priority-1,
.selection-apply-area .button-apply.type-1 {
    background-color: #fff2ef;
}

.selection-apply-area .button-apply.priority-2,
.selection-apply-area .button-apply.type-2 {
    background-color: #e2ffb5;
}

.selection-apply-area .button-apply.priority-3,
.selection-apply-area .button-apply.type-3 {
    background-color: #ffe0b1;
}

.selection-apply-area .button-apply.priority-4,
.selection-apply-area .button-apply.type-4 {
    background-color: #c9d3ff;
}

/* ユーザー編集 */
.user-edit-form {
    width: 80%;
    margin: 0 auto;
}

.user-edit-form .item {
    display: flex;
}

.user-edit-form .item:nth-child(even) {
    background-color: #d6d6d6;
}

.user-edit-form .item:nth-child(odd) {
    background-color: #f1f1f1;
}

.user-edit-form .left {
    text-align: right;
    width: 30%;
    padding: 10px;
}

.user-edit-form .right {
    text-align: left;
    padding: 10px;
}

.user-edit-form input[type=text] {
    width: 200px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #cccecc;
    padding-left: 3px;
}

.user-edit-form input[type=text].long {
    width: 410px;
}

.user-edit-form .textarea-long {
    width: 410px;
    border-radius: 5px;
    border: 1px solid #cccecc;
    padding-left: 3px;
}

/* .login-form-area dl {
    display: flex;
    justify-content: center;
    align-items: center;
} */

.login-form-area dl dd input {
    height: 30px;
    width: 200px;
    font-size: 1em;
    border-radius: 5px;
    padding-left: 5px;
    border: 1px solid #aaa;
}

th.period1 {
    background-color: #009688;
}
th.period2 {
    background-color: #4CAF50;
}
th.period3 {
    background-color: #CDDC39;
}

@media screen and (max-width: 780px) {

    body {
        padding: 5px;
    }

    /* footer {
        margin-top: 10vh;
    } */
    header div.header-top-area div.user-control > div:first-child {
        margin-right: auto;
    }

    .header-menu li {
        width: 100%;
    }

    .header-menu li a {
        width: auto;
    }

    /* メニュー */
    .NavMenu ul {
        display: block;
    }

    header div.header-top-area {
        display: block;
    }

    /*ナビメニューのスタイルを指定*/
    nav.NavMenu {
        position: fixed; /*表示位置を固定*/
        z-index: 2; /*重ね順を変更*/
        top: 0; /*表示位置を指定*/
        left: 0; /*表示位置を指定*/
        background: #fff; /*背景を白にする*/
        color: #000; /*文字色を黒にする*/
        text-align: center; /*テキストを中央揃え*/
        width: 100%; /*全幅表示*/
        transform: translateY(-100%); /*ナビを上に隠す*/
        transition: all 0.6s; /*アニメーションの時間を指定*/
    }

    nav.NavMenu ul {
        background: #ccc; /*背景をグレーにする*/
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    nav.NavMenu ul li {
        font-size: 1.1em;
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px dotted #333;
    }

    nav.NavMenu ul li:last-child {
        padding-bottom: 0;
        border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
    }

    nav.NavMenu ul li a {
        display: block; /*クリックできる領域を広げる*/
        color: #000;
        padding: 1em 0;
    }

    /*トグルボタンが押されたときに付与するクラス*/
    nav.NavMenu.active {
        transform: translateY(0%);
    }

    /*トグルボタンのスタイルを指定*/
    .Toggle {
        display: block;
        position: fixed; /* bodyに対しての絶対位置指定 */
        right: 13px;
        top: 12px;
        width: 42px;
        height: 42px;
        cursor: pointer;
        z-index: 3;
    }

    .Toggle span {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 3px #000;
        -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
        -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
        transition: .35s ease-in-out; /*変化の速度を指定*/
        left: 6px;
    }

    .Toggle span:nth-child(1) {
        top: 9px;
    }

    .Toggle span:nth-child(2) {
        top: 18px;
    }

    .Toggle span:nth-child(3) {
        top: 27px;
    }

    /* 最初のspanをマイナス45度に */
    .Toggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /* 2番目と3番目のspanを45度に */
    .Toggle.active span:nth-child(2),
    .Toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .user-selection-result-area {
        display: block;
    }

    .user-selection-result-area > div:nth-child(n+2) {
        margin-top: 5px;
    }

    .entry-form-item-area {
        display: block;
    }

    .entry-form-item {
        width: 80%;
        margin: 0 auto;
    }

    .entry-form-item:nth-child(n+2) {
        margin: 1.2em auto 0 auto;
    }

    .user-selection-result-area > div:nth-child(n+2) {
        margin-left: 0;
    }

    .entry-button,
    .candidate-button {
        /*width: auto;*/
    }

    /* ユーザー情報編集 */
    .user-edit-form {
        width: 100%;
    }

    .user-edit-form .item {
        display: block;
    }

    .user-edit-form .left {
        text-align: left;
        width: 100%;
        padding: 10px;
    }

    .user-edit-form .right {
        text-align: left;
        width: 100%;
        padding: 10px;
    }

    .user-edit-form .item .right {
        display: block;
    }

    .user-edit-form .item .right .mg-left10 {
        margin-left: 0;
        margin-top: 0.1em;
    }

    .user-edit-form input[type=text] {
        width: 100%;
        height: 3em;
        border-radius: 5px;
        border: 1px solid #cccecc;
        padding-left: 3px;
    }

    .user-edit-form input[type=text].long {
        width: 100%;
    }

}