@charset "UTF-8";

html, body {
    height: 100%;
}

input[type=checkbox] {
    display: none;
}

/* グローバルヘッダ */
header.global {
    width: 100%;
    height:40px;
    position: fixed;
    top: 0;
    left: 0;
    background:#FFE4F3;
    z-index:9999;
    padding: 5px 0;
}


/* ロゴ */
header.global h1 {
    display: inline-block;
    height: 100%;
    font-size: 20px;
    line-height: 30px;
    padding-left: 10px;
}

header.global h1 > a{
    color: #333;
}
header.global h1 > a:hover{
    text-decoration: none;
}
header.global h1 img {
    height: 100%;
    margin-right: 5px;
}

header.global div.logout-wrapper {
    display: inline-block;
    float: right;
    height: 30px;
    line-height: 30px;
    margin-right: 20px;
}
header.global div.logout-wrapper > a {
    height: 30px;
    line-height: 30px;
}

.content-wrapper {
}

/* サイドメニュー */
.sidemenu {
    position: fixed;
    top: 0;
    left: 0;
    background:#F288AB;
    width: 250px;
    min-width: 250px;
    padding-top: 40px;
    height: 100%;
    z-index:9998;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.content-wrapper.close .sidemenu {
    width: 14px;
    min-width: 14px;
}
.content-wrapper #content {
    padding: 40px 0 0 250px;
}
.content-wrapper.close #content {
    padding-left: 14px;
}
.sidemenu nav {
    width: 95%;
    background-color: #FFF;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
}
.sidemenu nav li.normal {
    border-top: 1px solid #999;
}
.sidemenu nav li.normal:last-child {
    border-bottom: 1px solid #999;
}
.sidemenu nav li.normal > a {
    display: block;
    padding: 10px 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.sidemenu nav li.active > a,
.sidemenu nav li.normal > a:hover {
    background-color: #3498db;
    color: #FFF;
}
.sidemenu nav li.normal i {
    font-size: .8em;
    margin-right: 5px;
}

.sidemenu .open-close {
    position: absolute;
    top: 40px;
    right: 0;
    height: 100%;
    text-align: center;
    line-height: 100%;
    display: table;
    background-color: #FFEEF2;
    cursor: pointer;
}
.sidemenu .open-close > i {
    display: table-cell;
    vertical-align: middle;
}


/* テーブル内独自パーツ */
.active-switch {
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 1.4rem;
    box-shadow: 0px 0px 2px 1px inset;
    color: #FFF;
    cursor: pointer;
}
.active-switch.active {
    background-color: #1abc9c;
}
.active-switch.deactive {
    background-color: #e74c3c;
}
.active-switch > .handle {
    display: inline-block;
    width: 50%;
    height: 100%;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    background-color: #FFF;
}
.active-switch.active > .handle {
    float: left;
}
.active-switch.deactive > .handle {
    float: right;
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}
.overlay > i {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 50px;
    width: 50px;
    height: 50px;
    animation: loading 5s infinite linear;
}
@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* コンテンツ */
#content {
    width: 100%;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

#content > .body {
}

#content > header{
    position:fixed;
    width:100%;
    z-index:8887;
    height:36px;
    background:#fcfcfc;
    border-bottom:1px solid #bdc3c7;
    padding:0 8px;
}

#content > header nav.breadcrumb,
#content > header nav.local{
    line-height:36px;
    height:36px;
    vertical-align:bottom;
}

#content > header nav.breadcrumb ol li{
    line-height:36px;
}

#content > header .display-table-cell{
    vertical-align:bottom;
}

#content > header nav.local > ul{
    margin:0;
    padding:0;
    list-style:none;
    display:inline-table;
}

#content > header nav.local > ul > li{
    display:table-cell;
    vertical-align:bottom;
}

#content > header nav.local > ul > li:after {
    content: '|';
    display: inline-block;
    text-decoration: none;
    color: #bdc3c7;
    margin: 0 4px;
    position: relative;
}

#content > header nav.local > ul > li:last-of-type:after {
    content: '';
    margin: 0;
}

#content > .body{
    padding:8px;
}

/* ログイン */
#content > .body > form.login > fieldset{
    max-width:400px;
    margin:0 auto;
    padding-bottom:8px;
}

#content > .body > form.login > fieldset > dl{
    display:table;
    width:380px;
    margin-left:auto;
    margin-right:auto;
}

#content > .body > form.login > fieldset > dl > dt,
#content > .body > form.login > fieldset > dl > dd{
    display:table-cell;
    vertical-align:top;
}

#content > .body > form.login > fieldset > dl > dt{
    width:80px;
}

/* 各ページ共通 */
section {
    width: 100%;
}
section header > h3 {
    margin-right: 60px;
}
section header > h3,
section header > div.button-area {
    display: inline-block;
    vertical-align: top;
}
section header > div.note {
    margin-top: 8px;
}

.input-modal {
    display: none;
    position: absolute;
    margin: auto;
    z-index: 10001;
    border: 1px solid #bdc3c7;
    border-radius: 10px;
    background-color: #FFF;
    padding: 20px 30px;
}
.input-modal > .modal-inner {
    position: relative;
}
.input-modal h4 > span {
    font-size: 0.8em;
    margin-left: 10px;
}
.input-modal .input-form > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.input-modal .button-area {
    margin-top: 30px;
    margin-bottom: 0;
    text-align: center;
}
.input-modal .button-area > * {
    width: 120px;
}
.input-modal .button-area > button.cancel {
    margin-right: 30px;
}
.input-modal .input-form .validation-error {
    display: none;
}
.input-modal .input-form .is-error .validation-error {
    display: block;
}
.is-error input {
    background-color: pink;
}

/* ホーム画面 */
body#home-index section.alert-list{
    max-width:48rem;
}

body#home-index section.alert-list > h2{
    font-size:1.8rem;
    line-height:4rem;
    color:#c0392b;
}

body#home-index section.alert-list > ul{
    border:1px solid #bdc3c7;
    list-style:none;
    border-radius:.4rem;
}

body#home-index section.alert-list > ul > li{
    line-height:4rem;
    padding:0 .8rem;
    position:relative;
}

body#home-index section.alert-list > ul > li:hover{
    background:rgba(231, 76, 60, 0.15);
}

body#home-index section.alert-list > ul > li:not(:last-of-type){
    border-bottom:1px solid #bdc3c7;
}

body#home-index section.alert-list > ul > li:after{
    font-family:'WebHostingHub-Glyphs';
    content:'\f488';
    display:inline-block;
    text-decoration:none;
    position:absolute;
    text-align:center;
    font-size:2rem;
    top:0;
    right:.8rem;
    color:#7f8c8d;
}

body#home-index section.alert-list > ul > li > a{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    z-index:2;
    text-decoration:none;
}

body#home-index section.alert-list > ul > li > strong{
    font-size:1.6rem;
    color:#c0392b;
}

/* インデックス */
#content > .body > section.index > nav.tile{
    position:absolute;
    top:50%;
    margin-top:-8rem;
    height:16rem;
}

#content > .body > section.index > nav.tile > ul{
    list-style:none;
    display:inline-table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing:2px;
    margin:-2px;
    width:100%;
    height:16rem;
}

#content > .body > section.index > nav.tile > ul > li{
    display:table-cell;
    text-align:center;
}

#content > .body > section.index > nav.tile > ul > li > a{
    display: block;
    text-align:center;
    border:1px solid #bdc3c7;
    background:#f0f0f0;
    border-radius:.2rem;
    width:16rem;
    height:16rem;
    position: relative;
    color:#666;
    text-decoration:none;
    margin:0 auto;
}

#content > .body > section.index > nav.tile > ul > li > a:active{
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25);
    border-color:#bdc3c7;
}

#content > .body > section.index > nav.tile > ul > li > a > span{
    position:absolute;
    line-height:3.2rem;
    width:14.4rem;
    border:1px solid #bdc3c7;
    border-radius:.2rem;
    background:rgba(255,255,255,0.75);
    bottom:.8rem;
    left:50%;
    margin-left:-7.2rem;
    font-size:1.6rem;
}

#content > .body > section.index > nav.tile > ul > li > a > i.icon{
    position:absolute;
    font-size:80px;
    text-align:center;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

#content > .body > section.index > nav.tile > ul > li > a:before{
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:7.2rem;
    position:absolute;
    text-align:center;
    width:100%;
    height:9.6rem;
    top:1.6rem;
    left:0;
}

#content > .body > section.index > nav.tile > ul > li > a.list:before {
    content: '\f4c2' !important;
}

#content > .body > section.index > nav.tile > ul > li > a.add:before {
    content: '\f0d1' !important;
}

#content > .body > section.index > nav.tile > ul > li > a.import:before {
    content: '\f32e' !important;
}

#content > .body > section.index > nav.tile > ul > li > a.export:before {
    content: '\f32f' !important;
}

/* 一覧 */
#content > .body > section.list table th,
#content > .body > section.list table td {
    height: 3.2rem;
}

#content > .body > section.list table td {
    position:relative;
}

#content > .body > section.list table tr:hover{
   background:rgba(52,152,219,0.125);
}

#content > .body > section.list table tr.rejection,
#content > .body > section.list table tr.over-confirm,
#content > .body > section.list table tr.over-transfer{
    background:rgba(231, 76, 60,0.15);
    color:#c0392b;
}

#content > .body > section.list table tr.approval{
    background:rgba(52, 152, 219,0.15);
    color:#2980b9;
}

#content > .body > section.list table tr.paid{
    background:rgba(46, 204, 113,0.15);
    color:#27ae60;
}

#content > .body > section.list table tr.cancel{
    background:#ecf0f1;
    color:#7f8c8d;
}

#content > .body > section.list table tr.empty-confirm{
    background:rgba(241, 196, 15,0.15);
    color:#f39c12;
}


#content > .body > section.list table th.id,
#content > .body > section.list table td.id {
    width: 8rem;
}

#content > .body > section.list table th.family_name,
#content > .body > section.list table td.family_name,
#content > .body > section.list table th.first_name,
#content > .body > section.list table td.first_name {
    width: 8rem;
}

#content > .body > section.list table th.family_name_kana,
#content > .body > section.list table td.family_name_kana,
#content > .body > section.list table th.first_name_kana,
#content > .body > section.list table td.first_name_kana,
#content > .body > section.list table th.state,
#content > .body > section.list table td.state{
    width: 10rem;
}

#content > .body > section.list table th.datetime,
#content > .body > section.list table td.datetime,
#content > .body > section.list table th.incentive_id,
#content > .body > section.list table td.incentive_id{
    width: 18rem;
}

#content > .body > section.list table th.employee_code,
#content > .body > section.list table td.employee_code,
#content > .body > section.list table th.created_by,
#content > .body > section.list table td.created_by,
#content > .body > section.list table th.updated_by,
#content > .body > section.list table td.updated_by{
    width:12rem;
}

#content > .body > section.list table th.employee_id,
#content > .body > section.list table td.employee_id{
    width:12rem;
}

#content > .body > section.list table th.date,
#content > .body > section.list table td.date,
#content > .body > section.list table th.price,
#content > .body > section.list table td.price{
    width: 14rem;
}

#content > .body > section.list table th.check,
#content > .body > section.list table td.check,
#content > .body > section.list table th.status,
#content > .body > section.list table td.status,
#content > .body > section.list table th.command,
#content > .body > section.list table td.command{
    width:4rem;
    text-align:center;
}

#content > .body > section.list table th.commands,
#content > .body > section.list table td.commands{
    width:20rem;
    text-align:center;
}

#content > .body > section.list table td > p{
    overflow:hidden;
    text-overflow: ellipsis;
}

#content > .body > section.list table th > a{
    position:relative;
    display:block;
    color:#666;
    text-decoration:none;
    font-weight:bold;
}

#content > .body > section.list table td.status i.icon.enabled{
    color:#2ecc71;
}

#content > .body > section.list table td.status i.icon.deleted{
    color:#e74c3c;
}

#content > .body > section.list table td.command i.icon.info-sign,
#content > .body > section.list table td.command i.icon.ok{
    color:#2980b9;
}

#content > .body > section.list table td.command i.icon.edit{
    color:#f39c12;
}

#content > .body > section.list table td.command i.icon.trash,
#content > .body > section.list table td.command i.icon.deletefile,
#content > .body > section.list table td.command i.icon.circledelete{
    color:#e74c3c;
}

#content > .body > section.list table td.command i.icon.undo{
    color:#2ecc71;
}

/* 吹き出し */
#content > .body > section.list table td .balloon-container{
    position:absolute;
    bottom:calc(100% + .4rem);
    left:.4rem;
    z-index:2;
    width:calc(100% - .8rem);
    margin:0 auto;
    display:none;
}

#content > .body > section.list table td:hover .balloon-container{
    display:block;
}

#content > .body > section.list table td .balloon-body{
    position:relative;
    background:rgba(52, 73, 94, 0.9);
    color:#fff;
    border-radius:.4rem;
    padding:.8rem;
    box-shadow:0 0 4px rgba(0,0,0,0.1);
    min-height:8rem;
}

#content > .body > section.list table td .balloon-body:before{
    content:'';
    position:absolute;
    top:100%;
    left:calc(50% - 5px);
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid transparent;
}

#content > .body > section.list table td .balloon-body:after{
    content:'';
    position:absolute;
    top:100%;
    left:calc(50% - 6px);
    width:0;
    height:0;
    border-top:4px solid rgba(52, 73, 94, 0.9);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:4px solid transparent;
}


#content > .body > section.list table td .balloon-container.bottom{
    top:calc(100% + .4rem);
}

#content > .body > section.list table td .balloon-container.bottom > .balloon-body:before{
    top:-8px;
    border-top:5px solid transparent;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid transparent
}

#content > .body > section.list table td .balloon-container.bottom > .balloon-body:after{
    top:-8px;
    border-top:4px solid transparent;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:4px solid rgba(52, 73, 94, 0.9);
}

/* コマンド用モーダル */
.command-modal-container{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.15);
    z-index:99999;
}

.command-modal-container > .command-modal{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background:#fff;
    width:calc(100% - .8rem);
    height:calc(100% - .8rem);
    border-radius:.4rem;
}

/* 詳細 */
#content > .body > section.detail > table{
    table-layout: auto;
}

#content > .body > section.detail > table th,
#content > .body > section.detail > table td{
    padding:4px;
}

#content > .body > section.detail > table th{
    width:240px;
    vertical-align:top;
}

/* 入力・確認 */
#content > .body > section.input table,
#content > .body > section.confirm table{
    table-layout: auto;
}

#content > .body > section.input table th,
#content > .body > section.input table td,
#content > .body > section.confirm table th,
#content > .body > section.confirm table td{
    padding:4px;
    min-height:4rem;
}

#content > .body > section.input table th,
#content > .body > section.confirm table th{
    width:240px;
    vertical-align:top;
}

#content > .body > section.input table th > label{
    display:block;
    position:relative;
}

#content > .body > section.input table th > label.required:before{
    position:absolute;
    right:0;
}

.button.edit{
    background:#f39c12;
    color:#fff !important;
}

.button.edit:before{
    content:'' !important;
    margin:0;
}

.button.delete{
    background:#e74c3c;
    color:#fff !important;
}

.button.delete:before{
    content:'' !important;
    margin:0;
}

.button.undo{
    background:#27ae60;
    color:#fff !important;
}

.button.undo:before{
    content:'' !important;
    margin:0;
}

.button.ok{
    background:#3498db;
    color:#fff !important;
}

input[name="confirm"]{
    background:#3498db;
    color:#fff;

}

input[name="complete"]{
    background:#3498db;
    color:#fff;
}

i.icon > span{
    display:none;
}

/* モーダル */
.veil{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.25);
    /*-webkit-transition: .3s;*/
    /*-moz-transition: .3s;*/
    /*-ms-transition: .3s;*/
    /*-o-transition: .3s;*/
    /*transition: .3s;*/
    opacity:0;
    visibility: hidden;
    cursor:pointer;
    z-index:-2;
}

.veil.fadein{
    opacity:1;
    visibility:visible;
    z-index:10000;
}

.veil.fadeout{
    opacity:0;
    visibility: hidden;
    z-index:-2;
}

.modal{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-60px;
    margin-left:-160px;
    width:320px;
    height:120px;
    background:#fff;
    border-radius:4px;
    border:1px solid #bdc3c7;
    box-shadow:0 0 2px rgba(0,0,0,0.25);
    z-index:10001;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    opacity:0;
    visibility: hidden;
}

.modal.fadein{
    opacity:1;
    visibility:visible;
}

.modal.fadeout{
    opacity:0;
    visibility: hidden;
}

.modal > header{
    font-weight:bold;
    text-align:center;
    border-bottom:1px solid #ecf0f1;
    line-height:32px;
    height:32px;
}

.modal > div.body{
    padding:8px;
    height:78px;
    overflow:auto;
    border-bottom:1px solid #ecf0f1;
}

.modal > footer{
    display:table;
    width:100%;
    table-layout:fixed;
    height:40px;
    line-height:40px;
    vertical-align:top;
}

.modal > footer > div{
    display:table-cell;
    border-left:1px solid #ecf0f1;
    vertical-align:middle;
}

.modal > footer > div:first-of-type{
    border:0;
}

.modal > footer > div > a{
    display:block;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}

.modal > footer > div > a.confirm.yes{
    font-weight:bold;
}

/* ページトップ */
#to-top {
    display: block;
    /*height:24px;*/
    position: fixed;
    bottom: 0;
    right: 0;
}

/* インスタントメッセージ */
.instant-message{
    width:100%;
    line-height:4rem;
    height:4rem;
    padding:0 .8rem;
    position:fixed;
    top:-4rem;
    left:0;
    background:#7f8c8d;
    color:#fff;
    z-index:9998;
}

.instant-message.on{
    -webkit-animation: instant-message 3s linear forwards;
    -moz-animation: instant-message 3s linear forwards;
    -ms-animation: instant-message 3s linear forwards;
    -o-animation: instant-message 3s linear forwards;
    animation: instant-message 3s linear forwards;
}

.instant-message.error{ background:#e74c3c; }
.instant-message.success{ background:#27ae60; }
.instant-message.notice{ background:#3498db; }
.instant-message.warning{ background:#f39c12; }

/* 3秒設定で表示処理.3s, 固定表示2.4s, 非表示処理.3s */
@-webkit-keyframes instant-message {
    0% {-webkit-transform: translateY(0);}
    10% {-webkit-transform: translateY(8rem);}
    90% {-webkit-transform: translateY(8rem);}
    100% {-webkit-transform: translateY(0);}
}
@-moz-keyframes instant-message {
    0% {-moz-transform: translateY(0);}
    10% {-moz-transform: translateY(8rem);}
    90% {-moz-transform: translateY(8rem);}
    100% {-moz-transform: translateY(0);}
}
@-ms-keyframes instant-message {
    0% {-ms-transform: translateY(0);}
    10% {-ms-transform: translateY(8rem);}
    90% {-ms-transform: translateY(8rem);}
    100% {-ms-transform: translateY(0);}
}
@-o-keyframes instant-message {
    0% {-o-transform: translateY(0);}
    10% {-o-transform: translateY(8rem);}
    90% {-o-transform: translateY(8rem);}
    100% {-o-transform: translateY(0);}
}
@keyframes instant-message {
    0% {transform: translateY(0);}
    10% {transform: translateY(8rem);}
    90% {transform: translateY(8rem);}
    100% {transform: translateY(0);}
}

/* フラッシュメッセージ */
.flash-message{
    line-height:4rem;
    padding:0 8px;
    position:fixed;
    top:-4rem;
    left:0;
    width:100%;
    background:transparent;
    color:#fff;
    z-index:9998;
    -webkit-animation: instant-message 3s linear forwards .25s;
    -moz-animation: instant-message 3s linear forwards .25s;
    -ms-animation: instant-message 3s linear forwards .25s;
    -o-animation: instant-message 3s linear forwards .25s;
    animation: instant-message 3s linear forwards .25s;
}

.flash-message.error{ background:#e74c3c; }
.flash-message.success{ background:#27ae60; }
.flash-message.notice{ background:#3498db; }
.flash-message.warning{ background:#f39c12; }

/* エラー */
.validation-error{
    color:#e74c3c;
}

/* メッセージ */
.color-error{
    color:#e74c3c;
}

.color-success{
    color:#27ae60;
}

.color-notice{
    color:#3498db;
}

.color-warning{
    color:#f39c12;
}

.validation-error:before{
    font-family: 'WebHostingHub-Glyphs';
    content: '\f05a';
    font-size: 12px;
    display: inline-block;
    text-decoration: none;
    margin-right:1px;
}

a.list:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f4c2' !important;
}

a.add:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f0d1' !important;
}

a.import:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f32e' !important;
}

a.export:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f32f' !important;
}

a.detail:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f315' !important;
}

a.edit:before {
    font-family:'WebHostingHub-Glyphs';
    display:inline-block;
    text-decoration:none;
    font-size:11px;
    margin-right:2px;
    position:relative;
    content: '\f47c' !important;
}

.width-80px{
    width:80px;
}

.calendar h5{
    text-align:center;
    line-height:3.2rem;
}

.calendar th,
.calendar td{
    text-align:center;
    line-height:2.4rem;
    height:5.2rem;
    width:5.2rem;
}

.calendar th{
    height:2.4rem;
}

.calendar tr > th:first-of-type,
.calendar tr > td:first-of-type,
.calendar td.Holiday{
    background:#fee;
}

.calendar tr > th:last-of-type,
.calendar tr > td:last-of-type{
    background:#eef;
}

.calendar th.Sunday,
.calendar td.Sunday{
    color:#c0392b;
}

.calendar th.Saturday,
.calendar td.Saturday{
    color:#2980b9;
}

.calendar th.Holiday,
.calendar td.Holiday{
    color:#c0392b !important;
}

.calendar td.kind1,
.calendar td.kind2,
.calendar td.kind3{
    color:#c0392b !important;
}

.calendar td.clickable{
    cursor: pointer;
    position:relative;
    background:#fff;
}

.calendar td.clickable.active{
    z-index:10001;
    background:#efe;
}

.calendar td.clickable.modified{
    background:#efe;
    color:#27ae60 !important;
}

.calendar .kind-name{
    font-size:xx-small;
}

.calendar .kind-select{
    position:absolute;
    background:#f0f0f0;
    width:100%;
    top:5.2rem;
    left:0;
    color:#666;
    z-index:-1;
    display:none;
}

.calendar .kind-select > ul{
    border-top:1px solid #bdc3c7;
    list-style:none;
}

.calendar .kind-select > ul > li{
    line-height:3.2rem;
    border-bottom:1px solid #bdc3c7;
    padding:0 .4rem;
    font-size:x-small;
}

.calendar .kind-select > ul > li.selected{
    color:#d35400;
}

.calendar .kind-select > ul > li:hover{
    background:#e67e22;
    color:#fff;
}

.calendar .kind-select.active{
    display:block;
    opacity:1;
    visibility:visible;
    z-index: 10001;
}

.calendar .kind-select.fadeout{
    opacity:0;
    visibility:hidden;
    z-index:-1;
}

.calendar .kind-select > h6{
    line-height:3.2rem;
}

/* .workplace btn */
.workplace{
    display: table;
    border-collapse:collapse;
    table-layout: fixed;
    margin:8px auto;
}

.workplace > .item{
    display: table-cell;
    vertical-align: middle;
    border:0;
}

.workplace > .item > a{
    display:inline-block;
    margin:0;
    height:40px;
    line-height:40px;
    text-align:center;
    padding:0 16px;
    border:2px solid #e67e22;
    background:#fff;
    color:#e67e22;
    transition-duration:.2s;
    text-decoration:none;
    font-weight:bold;
}

.workplace > .item:first-of-type > a{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right:0;
}

.workplace > .item:last-of-type > a{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left:0;
}

.workplace > .item > a:hover,
.workplace > .item > a.active{
    background:#e67e22;
    color:#fff;
}

/** 汎用ボタン */
.button > i.icon{ position: relative; margin-right: .4rem; }
.button.green{ background: #1abc9c; border-color:#16a085; color:#fff !important; }
.button.emerald{ background: #2ecc71; border-color:#27ae60; color:#fff !important; }
.button.blue{ background: #3498db; border-color:#2980b9; color:#fff !important; }
.button.purple{ background: #9b59b6; border-color:#8e44ad; color:#fff !important; }
.button.navy{ background: #34495e; border-color:#2c3e50; color:#fff !important; }
.button.yellow{ background: #f1c40f; border-color:#f39c12; color:#fff !important; }
.button.orange{ background: #e67e22; border-color:#d35400; color:#fff !important; }
.button.red{ background: #e74c3c; border-color:#c0392b; color:#fff !important; }
.button.gray{ background: #ecf0f1; border-color:#bdc3c7; color:#bdc3c7 !important; }
.button.silver{ background: #95a5a6; border-color:#7f8c8d; color:#fff !important; }

/** 汎用タブ */
.tab-container{
    border-bottom:2px solid #bdc3c7;
    padding:0 .4rem;
}

.tab-container > .tabs{
    display:inline-block;
    table-layout:fixed;
    position:relative;
    z-index:2;
    font-size:0;
    white-space: nowrap;
    vertical-align:bottom;
}

.tab-container > .tabs > .item{
    display:inline-block;
    line-height:4rem;
    border:1px solid #ecf0f1;
    border-bottom:0;
    border-radius:.4rem .4rem 0 0;
    position:relative;
    color:#34495e;
    font-size:1.4rem;
    vertical-align:bottom;
}

.tab-container > .tabs > .item:not(:first-of-type){
    margin-left:1px;
}

.tab-container > .tabs > .item.selected{
    background:#bdc3c7;
    color:#fff;
}

.tab-container > .tabs > .item > a{
    text-decoration:none;
    color:#95a5a6;
    display:block;
    width:100%;
    height:100%;
    padding:0 .8rem;
}

.tab-container > .tabs > .item.selected > a{
    color:#fff;
}

.tab-container.center{
    text-align:center;
}

.tab-container.right{
    text-align:right;
}

.tab-container.reverse{
    border-top:2px solid #bdc3c7;
    border-bottom:0;
}

.tab-container.reverse > .tabs > .item{
    border-radius:0 0 .4rem .4rem;
    border:1px solid #ecf0f1;
    border-top:0;
}

.tab-container.green{ border-color:#1abc9c; }
.tab-container.green > .tabs > .item.selected{ background:#1abc9c; }
.tab-container.green > .tabs > .item.selected > a{ color:#fff; }

.tab-container.emerald{ border-color:#2ecc71; }
.tab-container.emerald > .tabs > .item.selected{ background:#2ecc71; }
.tab-container.emerald > .tabs > .item.selected > a{ color:#fff; }

.tab-container.blue{ border-color:#3498db; }
.tab-container.blue > .tabs > .item.selected{ background:#3498db; }
.tab-container.blue > .tabs > .item.selected > a{ color:#fff; }

.tab-container.purple{ border-color:#9b59b6; }
.tab-container.purple > .tabs > .item.selected{ background:#9b59b6; }
.tab-container.purple > .tabs > .item.selected > a{ color:#fff; }

.tab-container.navy{ border-color:#34495e; }
.tab-container.navy > .tabs > .item.selected{ background:#34495e; }
.tab-container.navy > .tabs > .item.selected > a{ color:#fff; }

.tab-container.yellow{ border-color:#f1c40f; }
.tab-container.yellow > .tabs > .item.selected{ background:#f1c40f; }
.tab-container.yellow > .tabs > .item.selected > a{ color:#fff; }

.tab-container.orange{ border-color:#e67e22; }
.tab-container.orange > .tabs > .item.selected{ background:#e67e22; }
.tab-container.orange > .tabs > .item.selected > a{ color:#fff; }

.tab-container.red{ border-color:#e74c3c; }
.tab-container.red > .tabs > .item.selected{ background:#e74c3c; }
.tab-container.red > .tabs > .item.selected > a{ color:#fff; }

.tab-container.gray{ border-color:#bdc3c7; }
.tab-container.gray > .tabs > .item.selected{ background:#bdc3c7; }
.tab-container.gray > .tabs > .item.selected > a{ color:#fff; }

.tab-container.silver{ border-color:#95a5a6; }
.tab-container.silver > .tabs > .item.selected{ background:#95a5a6; }
.tab-container.silver > .tabs > .item.selected > a{ color:#fff; }