
#loginBase {
    font-size: 12pt;
    width: 400px;
    padding: 50px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    background-color: #aec;
    border-radius: 20px;
}

#hospitalPopupArea {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#loginMessageArea {
    width: 230px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

#patientIdArea {
    font-size: 13pt;
}

#contents {
    background-color: #eff; /* 淡青色 */
}

#contentArea {
    padding: 5px;
}

#messageShelterArea {
    padding-left: 10px;
    font-size: 10pt;
    color: #00f;
}

.groupEditorPanel {
    margin: 0 0 10px 5px;
    padding: 10px 5px 20px 5px;
    border: thin solid #aaa;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 1px #aaa;
    background-color: #ffd;
}

TABLE#calendarTable {
    border: thin solid #ddd;
    border-radius: 10px;
    color: #bbb;
    font-family: Arial, Helvetica;
    font-size: 9pt;
    margin-bottom: 2px;
}
.dateTip {
    text-align: right;
    padding: 0px 1px;
}

.greenDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    border-radius: 10px;
    background-color: #cfe;
    color: #555;
    box-shadow: 1px 1px 5px 1px #aaa;
}
.greenDateTip:hover {
    background: #00f;
    color: #ff0;
}

.yellowDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #ffa;
    color: #777;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #888;
}
.yellowDateTip:hover {
    background: #00f;
    color: #ff0;
}

.orangeDateTip {
    text-align: center;
    font-size: 9pt;
    font-weight: bold;
    margin-right: 5px;
    background-color: #ffa;
    color: #000;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #888;
}
.orangeDateTip:hover {
    background: #00f;
    color: #ff0;
}

.pinkDateTip {
    text-align: center;
    font-size: 9pt;
    margin-right: 5px;
    background-color: #fcc;
    color: #000;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 1px #555;
}
.pinkDateTip:hover {
    background: #00f;
    color: #ff0;
}

.versionLabel {
    padding: 4px 10px;
    color: #aaa;
    font-size: 10pt;
}

.loginDIV {
    width: 330px;
    margin-left: auto;
    margin-right: auto;
}

.labelDiv {
    display: inline;
    float: left;
    width: 90px;
}

.postItTagGreen {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    padding: 5px 30px 5px 10px;
    background: -webkit-linear-gradient(left, #2b8, #b7f8e7);
    color: #fff;
    border: 2px solid #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    left: -5px;
}
.postItTagGreen:hover {
    background: -webkit-linear-gradient(left, #ddf, #fff);
    color: #888;
}
.postItTagBlue {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    padding: 5px 30px 5px 10px;
    background: -webkit-linear-gradient(left, #55f, #eef);
    color: #fff;
    border: 2px solid #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    left: -5px;
}
.postItTagBlue:hover {
    background: -webkit-linear-gradient(left, #ddf, #fff);
    color: #888;
}
.postItTagYellow {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    padding: 5px 30px 5px 10px;
    background: -webkit-linear-gradient(left, #ff0, #ffe);
    color: #bbf;
    border-top: 2px solid #eee;
    border-left: 2px solid #bbb;
    border-bottom: 2px solid #ddd;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    left: -5px;
}
.postItTagYellow:hover {
    background: -webkit-linear-gradient(left, #ddf, #fff);
    color: #888;
}
.postItTagRed {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    padding: 5px 30px 5px 10px;
    background: -webkit-linear-gradient(left, #f55, #fee);
    color: #fff;
    border: 2px solid #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    left: -5px;
}
.postItTagRed:hover {
    background: -webkit-linear-gradient(left, #ddf, #fff);
    color: #888;
}

.postItDotGreen {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    background-color: #aec;
    color: #aec;
    border-radius: 10px;
}
.postItDotBlue {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    background-color: #aaf;
    color: #aaf;
    border-radius: 10px;
}
.postItDotRed {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    background-color: #f88;
    color: #f88;
    border-radius: 10px;
}
.postItDotYellow {
    display: inline;
    text-decoration: none;
    font-size: 9pt;
    background-color: #ff0;
    color: #ff0;
    border-radius: 10px;
}

.page { /* インアクティブなページ */
    background-color: #eff; /* contents と同じ淡青色 */
    color: #aaa;
    padding: 10px 15px;
}
.currentPage { /* アクティブなページのフレーム */
    background-color: #fff;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 5px;
    border-radius: 5px;
    box-shadow: -1px 1px 8px 5px #ddd;
    padding: 40px 15px;
}

.dateLabel { /* 受診日ラベル */
    float: left;
    display: inline;
    width: 160px;
    position: relative;
    top: 4px;
    font-size: 11pt;
    font-family: arial, Helvetica;
}

.pageHeadLine {
    /* 受診日ヘッドライン */
    min-height: 1px; /* for clearfix */
    padding-bottom: 2px;
    padding-left: 5px;
}
.pageHeadLine:after {
    content: ".";  /* 新しい要素を作る */
    display: block;  /* ブロックレベル要素に */
    clear: both;
    height: 0;
    visibility: hidden;
}
.pageHeadLine:hover {
    background-color: #ddf;
    border-radius: 8px;
}

.nameLabel {
    padding-left: 5px;
    font-size: 14pt;
    font-family: arial, Helvetica;
}
.kanaLabel {
    padding-left: 5px;
    font-size: 10pt;
    font-family: times, arial, Helvetica;
}
.ageLabel {
    padding-left: 5px;
    font-size: 10pt;
    font-family: times, arial, Helvetica;
}

#waitingListArea {
    background-color: #77f;
    border: thin solid #44f;
}
.controlBarArea {
    background-color: #ffd;
    font-size: 9pt;
    padding: 5px 0;
}
.bookingTable {
	border-collapse: collapse;
    font-family: arial, Helvetica;
	width: 100%;
    background: #77f;
    color: #000;
    font-size: 9pt;
}
.bookingTitle {
    background: #44f;
    color: #fff;
    text-align: center;
}
.bookingTitle2 {
    background: #44f;
    color: #fff;
    text-align: center;
    border-radius:0;
}
.bookingTitle2:hover {
    background: #aaf;
    color: #00f;
    border-radius:10px;
}
.bookingColumn {
    color: #fff;
}
.bookingActor {
    color: #fff;
    padding-left: 5px;
}
.bookingActor:hover {
    background-color: #00f;
    color: #fff;
    border-radius: 10px;
}
.bookingYellowActor {
    display: inline;
    padding: 0px 10px;
    text-align: center;
    background: #ff0;
    color: #000;
    border-radius: 10px;
}
.bookingYellowActor:hover {
    background-color: #00f;
    color: #fff;
}

.reserved-patient-tab {
    margin-left: 3px;
    padding: 2px 5px;
    background: #fdd;
    border: thin solid #ccc;
    border-radius: 10px;
    font-size: 9pt;
}
.reserved-patient-tab:hover {
    background: #00f;
    color: #ff0;
}

.logTable {
    font-family: arial, Helvetica;
	width: 100%;
    background: #888;
    color: #000;
    border: thin solid #555;
    font-size: 9pt;
}

.logRow:hover {
    background: #00f;
    color: #ff0;
}

.cellEditorPanel {
    border: thin solid #ccc;
    border-radius: 10px;
    background-color: #ffd;
    padding: 5px;
    box-shadow: 2px 2px 10px 1px #aaa;
}

.cellLabel { /* CELL のラベル */
    width: 60px;
    padding: 2px 5px;
    font-size: 9pt;
    color: #555;
    vertical-align: top;
    border-radius: 10px;
}
.cellLabel:hover {
    background-color: #cfd;
}
.cellValue { /* CELL の値 */
    color: #000;
    font-weight: normal;
}
.pastCellValue { /* CELL の値：過去 */
    color: #888;
    font-weight: lighter;
    /*
    color: rgba(0,0,0,0.7);
    opacity: 0.7;
     */
}

.nonReservedTime {
    color: #fff;
    padding: 0px 5px;
}
.reservedTime {
    color: #fff;
    padding: 0px 5px;
    border-radius: 10px;
}
.reservedTime:hover {
    background-color: #00f;
    color: #fff;
}

.accepted {
    display: inline;
    padding: 0px 5px;
    background: #ff0;
    color: #000;
    border-radius: 10px;
}
.accepted:hover {
    color: #f00;
    background-color: #00f;
    color: #fff;
}
.finished {
    display: inline;
    color: #fff;
    padding: 0px 5px;
    border-radius: 10px;
}
.finished:hover {
    background-color: #00f;
    color: #fff;
}
.reserved {
    background: #fee;
    color: #000;
    padding: 0px 5px;
    border: 1px solid #aaa;
    border-radius: 10px;
}
.reserved:hover {
    background-color: #00f;
    color: #fff;
}

.patient-tab {
    margin-left: 3px;
    padding: 2px 5px;
    background: #eee;
    border: thin solid #eee;
    border-radius: 10px;
    font-size: 9pt;
}
.patient-tab:hover {
    background: #00f;
    color: #ff0;
}
.waiting-patient-tab {
    margin-left: 3px;
    padding: 2px 5px;
    background: #ffa;
    border: thin solid #ccc;
    border-radius: 10px;
    font-size: 9pt;
}
.waiting-patient-tab:hover {
    background: #00f;
    color: #ff0;
}
.reserved-patient-tab {
    margin-left: 3px;
    padding: 2px 5px;
    background: #fdd;
    border: thin solid #ccc;
    border-radius: 10px;
    font-size: 9pt;
}
.reserved-patient-tab:hover {
    background: #00f;
    color: #ff0;
}
.outArrowArea {
    background: #aaf;
    border-radius: 10px;
    padding: 2px 5px;
    margin-left: 10px;
    position: relative;
    bottom: 3px;
}
.outArrowArea:hover {
    padding: 5px 6px;
}

.grayArea {
    background-color: #eee;
}

.editorArea {
    background-color: #fff;
}
.editorBar {
    min-height: 1px; /* clearfix */
    background-color: #ffc;
}
.editorBar:after {
    content: ".";  /* 新しい要素を作る */
    display: block;  /* ブロックレベル要素に */
    clear: both;
    height: 0;
    visibility: hidden;
}
.editorValue {
    margin: 5px;
}
.subEditorArea {
    border: thin solid #ccc;
    background-color: #ffe;
    padding: 2px 10px;
}
.subEditorValue {
    margin: 0;
    font-size: 9pt;
    background-color: #fff;
    border: thin solid #ddd;
}

.color-chip {
    display: inline;
    font-size: 9pt;
    margin-left: 5px;
    padding: 0 10px;
}
.color-chip:hover {
    -webkit-box-shadow: 2px 2px 10px #333;
}

/* 添付画像を拡大 */
@-webkit-keyframes hoverSpread { /* === image transforme === */
    0% {-webkit-transform:scale(1);opacity: 0.7;}
    100% {-webkit-transform:scale(8.0);opacity: 1;}
}
.imageClass {
    -webkit-box-shadow: 2px 2px 10px #333;
}
.imageClass:hover {
    -webkit-animation-name: hoverSpread;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 0% 0%; /* 左上を原点に拡大 */
    -webkit-transform: scale(8.0);
    -webkit-box-shadow: 0 0 10px #333;
    opacity: 1;
    z-index: 20;
}

.add-disease:hover {
    border-radius: 8px;
    background-color: #ccc;
}
.add-new-item:hover {
    border-radius: 8px;
    background-color: #e6dda7;
}

/* 地図を開くエレメント */
.showMapElement {
    font-size: 13px;
}
.showMapElement:hover {
    padding: 5px 10px; 
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px 8px #ccc;
}

/* カレンダー */

#calendarArea {
    vertical-align: top;
    background-color: #eff;
}

.calYearMonthLabel {
    color: #bbb;
    padding: 1px 10px;
    font-size: 10pt;
	font-family: arial, Helvetica;
}
.calYearMonthLabel:hover {
    background-color: #89abe3;
    color: #fff;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.calendarTab {
    margin-left: 2px;
    padding: 0 8px;
    font-size: 9pt;
    border-radius: 10px;
    opacity: 0;
}
.calendarTab:hover {
    color: #fff;
    background-color: #89abe3;
    opacity: 1.0;
}

.popupMenuBar {
    padding         : 0 5px 10px 5px;
    font-family     : arial, Helvetica;
    color           : #333;
    border-left     : thin solid #aaa;
    border-right    : 3px solid #bbb;
    background: -webkit-linear-gradient(top, #bfd, #fff);
}
.popupMenuBar:after {
    /* clearfix */
    content: ".";  /* 新しい要素を作る */
    display: block;  /* ブロックレベル要素に */
    clear: both;
    height: 0;
    visibility: hidden;
}

