@charset "utf-8"; 

.kronos-outer {display: inline-block; position: relative;}
.kronos-outer  * {box-sizing: border-box;}

.kronos-outer .kronos-input {box-sizing: border-box; height: 30px; padding: 5px 10px; border: 1px solid #ccc;}
.kronos-outer .kronos-input:focus, .kronos-outer .kronos-input:hover {border-color: #666;}

.kronos-outer.open .kronos-viewer {top: auto; left: auto; z-index: 10;}
.kronos-outer.visible .kronos-viewer {position: relative; top: auto; left: auto;}

.kronos-viewer {overflow: hidden; position: absolute; top: -9999em; left: -9999em; width: 300px; background: #fff; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); transition: height 0.3s;}

.kronos-month-layer {overflow: hidden; position: absolute; top: 48px; left: 0; z-index: 10; width: 100%; height: 0; background: #ffffff; transform: scale(1.2); opacity: 0; transition: transform 500ms, opacity 500ms;}
.kronos-month-layer.kronos-visible {height: calc(100% - 48px); padding: 5%; transform: scale(1); opacity: 1;}
.kronos-month-layer button {width: 30%; height: 20%; margin: 0 5% 5% 0; border: 1px solid #f7f7f7; border-radius: 5px; background: #f7f7f7; font-size: 12px; color: #000; vertical-align: middle; text-align: center; cursor: pointer;}
.kronos-month-layer button:nth-child(3n) {margin-right: 0;}
.kronos-month-layer button:hover {border-color: #000000;}
.kronos-month-layer button.kronos-active {border-color: #000000; background: #000000; color: #ffffff;}

.kronos-year-layer {overflow: hidden; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 0; background: #ffffff; transform: scale(1.2); opacity: 0; transition: transform 500ms, opacity 500ms;}
.kronos-year-layer.kronos-visible {height: 100%; transform: scale(1); opacity: 1;}
.kronos-year-layer .kronos-year-body {position: absolute; top: 48px; right: 0; bottom: 0; left: 0; padding: 10% 5%;}
.kronos-year-layer .kronos-year-body button {width: 30%; height: 30%; margin: 0 5% 5% 0; border: 1px solid #f7f7f7; border-radius: 5px; background: #f7f7f7; font-size: 12px; color: #000; vertical-align: middle; text-align: center; cursor: pointer;}
.kronos-year-layer .kronos-year-body button:nth-child(3n) {margin-right: 0;}
.kronos-year-layer .kronos-year-body button:hover {border-color: #000000;}
.kronos-year-layer .kronos-year-body button.kronos-active {border-color: #000000; background: #000000; color: #ffffff;}

.kronos-date-layer {position: relative;}

.kronos-inner {position: absolute; width: 100%; vertical-align: top;}

.kronos-trigger {width: 30px; height: 30px; border: none; background: url(images/ico-calendar.gif) center center no-repeat; text-indent: -9999em; vertical-align: top; cursor: pointer;}

.kronos-head {overflow: hidden; position: relative; padding: 12px;}
.kronos-head .kronos-title {text-align: center; line-height: 24px;}
.kronos-head .kronos-title button {border: none; background: none; cursor: pointer;}
.kronos-head .kronos-title button:hover {border: none;}
.kronos-head .kronos-title .kronos-title-year {display: inline-block;}
.kronos-head .kronos-title .kronos-title-month {display: inline-block; margin: 0 0 0 5px;}

.kronos-head select {height: 24px; padding: 0 5px; border: 1px solid #ccc; border-radius: 3px; background-position: right 5px center;}
.kronos-head select:focus {border-color: #666;}

.kronos-head .kronos-select-year {width: 80px; margin: 0 5px 0 0;}
.kronos-head .kronos-select-month {width: 50px; margin: 0 5px;}

.kronos-head > button {position: absolute; top: 12px; width: 24px; height: 24px; border: none; border-radius: 3px; text-indent: -9999em; cursor: pointer;}
.kronos-head > button:focus, .kronos-head button:hover {border: 1px solid #ddd;}

.kronos-head .kronos-prev-month {left: 36px; background: url(../images/prev-month.png) center center no-repeat;}
.kronos-head .kronos-next-month {right: 36px; background: url(../images/next-month.png) center center no-repeat;}
.kronos-head .kronos-prev-year {left: 12px; background: url(../images/prev-year.png) center center no-repeat;}
.kronos-head .kronos-next-year {right: 12px; background: url(../images/next-year.png) center center no-repeat;}
.kronos-head .kronos-today {position: relative; top: auto; width: auto; height: auto; margin: 10px 0 0; font-size: 12px; text-indent: 0; background: none; border: none;}
.kronos-head .kronos-today:focus, .kronos-head .kronos-today:hover {border: none;}

.kronos-body table {width: 100%; border-spacing: 0; table-layout: fixed;}

.kronos-body table thead tr th {height: 30px; font-size: 13px;}

.kronos-body table tbody tr td {border: 1px solid #fff;}
.kronos-body table tbody tr td button {display: block; box-sizing: border-box; width: 100%; height: 40px; border: 1px solid #f7f7f7; border-radius: 5px; background: #f7f7f7; font-size: 12px; color: #000; vertical-align: middle; text-align: center; cursor: pointer;}
.kronos-body table tbody tr td.sunday button {color: #f00;}
.kronos-body table tbody tr td.satday button {color: #00f;}
.kronos-body table tbody tr td.holiday button {color: #f00;}
.kronos-body table tbody tr td.period button {border-color: #f9a9bb; background: #f9a9bb; color: #fff;}
.kronos-body table tbody tr td.selected button {border-color: #323e87; background: #323e87; color: #fff;}
.kronos-body table tbody tr td.disabled button {border-color: #f7f7f7 !important; background: #ccc; color: #eee !important; cursor: default;}
.kronos-body table tbody tr td.today button {background: #000; color: #fff;}
.kronos-body table tbody tr td button:focus, .kronos-outer .kronos-viewer .kronos-inner .kronos-body table tbody tr td button:hover {border-color: #000 !important;}