@charset "UTF-8";
/* CSS Document */

/* 2024.01.22 */
/* 2024.05.13 */
/* 2024.05.22 */
/* 2024.05.28 */
/* 2024.06.25 */
/* 2024.10.03 */


/*
    Common
    Loading Dialog Window
    Header
        UserMenu
            子メニュー
            会社名・ユーザー名
    Navigatoin
        mainTab
    Contents
        Main Menu
        Sub Menu
        Legend 凡例
        Main Area
        グラフエリア共通
    Table
    Remodal Modify
    Toggle switch
*/

/*
    for top-list.html
    for EQ-situation.html
    for EQ-data.html
    for EQ-pattern.html
    for EQ-error.html
    for EQ-info.html
*/




@import url("./tools.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/* =============================

Common

============================= */
body {
    width: 100%;
    height: 100vh;

        /* 有効描画領域 */
        /* 幅1800px 高さ940px */
        min-width: 1800px;
        min-height: 940px;

    margin: 0;
    padding: 0;

    font-family: 'Noto Sans JP', sans-serif;
}

h1,h2,h3,h4,p,ul,li { margin: 0; padding: 0;}

.flex { display: flex; align-items: center; }

ul li { list-style: none;}

.form-group { margin: 0;}

*:disabled,
*.disabled { cursor: not-allowed!important;}

/* =============================

Loading Dialog Window

============================= */
.remodal.loadingMW {
	background-color: transparent;
	color: #FFF;
}



/* =============================

Header

============================= */
header {
    display: flex;
    position: relative;
    border-bottom: 1px solid #FFF;
    background-color: #F5F7FB;
}

#serviceName {
    width: 560px; height: 69px;
    background-color: #8B92B7;
    background-image: url(../img/panasonic_logo.svg);
    background-repeat: no-repeat;
}

#serviceName p {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    line-height: 69px;
    margin-left: 250px;
}

header > form > .form-group {
    display: flex;
    margin: 0;
    padding: 15px 0 0 0;
}
header > form > .form-group label { margin: 0 15px 0 60px; color: #505064;}
header > form > .form-group > .form-inline > select {
    min-width: 250px;
    max-width: 320px;
}


/* ----------- UserMenu ----------- */
ul#userMenu{
    position: absolute;
    top:20px; right: 30px;
    background-image: url(../img/icon_user.svg);
    background-repeat: no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 30px;
}
ul#userMenu > li {
	position: relative;
}
ul#userMenu > li > a {
	display: block;
	background-position: left top;
	background-repeat: no-repeat;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ----------- 子メニュー ----------- */
ul#userMenu > li > ul {
	display: none;
	font-size:0.8em;
	color: #989dac;
	font-weight:bold;
	position:absolute;
	top:50px; right:0px;
	z-index:9999;
	background-color: #F2F2F2;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
}
ul#userMenu > li > ul:after {
  position: absolute;
  content: "";
  right: 123px;
  top: -18px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: url("../img/header_user-menu_triangle.png") top left no-repeat;
  background-size: 18px 18px;
}
ul#userMenu > li > ul li { margin-bottom: 3px; }
ul#userMenu > li > ul li:last-child { margin-bottom: 0; }
ul#userMenu > li > ul li a {
	line-height: 40px;
	color: #EDEDEF;
	background-color:#9696A2;
	text-decoration:none;
	text-align:left;
	padding: 0px 15px;
	display: block;
}
ul#userMenu > li > ul li a:hover {
	color: #fff;
	background-color:#8B92B7;
}

/* ----------- 会社名・ユーザー名 ----------- */
ul#userMenu > li.user > ul li:first-child {
	min-width: 250px;
	padding: 0 10px 0 35px;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
    color: #505064;
	text-align: left;
	background-image: url(../img/icon_user.svg);
	background-size: 28px 28px; 
	background-position: bottom 3px left;
	background-repeat: no-repeat;
}
ul#userMenu > li.user > ul li span {
	max-width: 32em;
	display: block;
	font-size: 11px;
	font-weight: normal;
	white-space: pre;
	overflow: hidden;
}
ul#userMenu > li.user > ul li span:after { content: "\A"; }




/* =============================

Navigatoin

============================= */
#commonHeader {
    width: 100%;
    height: 75px;
    background-color: #FFF;
    position: relative;
}

#commonHeader h1 {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    bottom: 10px;
    left: 30px;
}
#commonHeader h1 a {
    color: #505064;
}
#commonHeader h1 span {
    font-size: 13px;
    font-weight: normal;
    color: #505064;
}
#commonHeader h1 span::after {
    content: "\A";
    white-space: pre;
}

#commonHeader > p {
    position: absolute;
    bottom: 10px;
    left: 200px;
}

#commonHeader > form {
    position: absolute;
    bottom: 10px;
    right: 30px;
}

#commonHeader > form > .form-group {
    display: flex;
    margin: 0;
}
#commonHeader > form > .form-group label { margin: 0 15px 0 60px;}
#commonHeader > form > .form-group > .form-inline > select {
    max-width: 200px;
}



/* ----------- mainTab ----------- */
#mainTab {
    position: absolute;
    bottom: 0; left: 775px;
    width: auto;
    height: 75px;
}

#mainTab ul {
    width: auto;
    height: 75px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 27px;
    display: flex;
    float: left;
}
#mainTab ul:first-child { margin-right: 10px; }
#mainTab ul.jyuuko { background-image: url(../img/mainTab_bg_jyuuko.png); }
#mainTab ul.kyouyu { background-image: url(../img/mainTab_bg_kyouyu.png); }

#mainTab ul li {
    height: 75px;
    padding: 0 0 0 0px;
    display: flex;
    align-items:flex-end;
}
#mainTab ul li:first-child::before { content: url(../img/mainTab_bg_l.gif); }
#mainTab ul li:last-child {
    background-image: url(../img/mainTab_bg_r.gif);
    background-repeat: no-repeat;
    background-position: top right;
}


#mainTab ul li a {
    width: 180px; height: 30px;
    line-height: 30px;
    margin: 9px 0 0 10px;
    background-color: #DCDCE0;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #9696A2;
    border-radius: 5px 5px 0 0;
}
#mainTab ul li:first-child a { margin-left: 0;}
#mainTab ul li.select a {
    pointer-events: none;
    background-color: #C2C2C9;
    color: #505064;
    height: 40px;
    line-height: 40px;
    margin: 0 0 0 0;
}
#mainTab ul li a:hover {
    height: 40px;
    line-height: 40px;
    margin-top: 0;
}

#propertyInfo {
    position: absolute;
    bottom: 15px; right: 30px;
}




/* =============================

Contents

============================= */
#contents {
    width: 100%;
    height: calc(100% - 145px);
    background-color: #E8EAEC;
}

/* ----------- Main Menu ----------- */
ul.mainMenu {
    background-color:#C2C2C9;
    height: 55px;
}

ul.mainMenu {
    display: flex;
    justify-content: center;
}

ul.mainMenu li {
    height: 40px;
    margin: 15px 5px 0;
}
ul.mainMenu li a {
    background-color: #9696A2;
    padding: 5px 10px;
    color: #EDEDEF;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
}
ul.mainMenu li.select a {
    background-color: #E8EAEC;
    color: #505064;
    font-weight: 500;
}
ul.mainMenu li.select {
    background-image: url(../img/mainMenu_arrow.gif);
    background-repeat: no-repeat;
    background-position: center bottom 1px;
    pointer-events: none;
}
ul.mainMenu li a:hover {
    background-color: #8B92B7;
    color: #FFF;
    text-decoration: none;
}

/* ----------- Sub Menu ----------- */
.subMenu {
    width: 250px;
    height: calc(100% - 55px - 150px);
    padding: 20px 0 0 0;
    margin-right: 20px;
    float: left;
}

.title {
    width: 250px;
    height: 150px;
    background-color: #505064;
    color: #FFF;
    padding: 10px 5px 10px 30px;
    margin-bottom: 20px;
    position: relative;
}

.title > p { font-size: 12px; }
.title > h1 { font-size: 21px; margin: 5px 0; font-weight: bold; }

.now {
    position: absolute;
    left: 30px;
    bottom: 10px;
}
.title > .now > p { font-size: 12px; margin-bottom: 3px; }
.title > .now > h2 {
    font-size: 13px;
    width: 215px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.controller {
    width: 250px;
    height: calc(100% - 20px);
    background-color: #F9FAFA;
    overflow-x: scroll;
}
.controller .chapter {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    font-weight: normal;
    color: #505064;
    background-color: #DCDFE2;
    border-bottom: 1px solid #d1d5d9;
    padding-left: 30px;
    position: relative;
}
.controller form,
.controller .chapter + div {
    font-size: 14px;
    padding: 15px 30px 10px 30px;
}

.controller form select {
    width: 175px;
    margin: 0 0 8px 15px;
}

.chapter .toggleSW {
    position: absolute;
    top: 0px; right: 0;
    color: #989898;
}

ul.legend {
    display: flex;
    flex-wrap: wrap;
}
ul.legend li {
    width: 95px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.legend.noWrap li,
.legend li.noWrap { width: 100%; }

.legend .mark {
    display: block;
    width: 25px; height: 20px;
    border: 1px solid #FFF;
    text-align: center;
    line-height: 13px;
    font-size: 11px;
    color: #808080;
    margin-right: 5px;
}

/* ----------- Legend 凡例 ----------- */

/* 沸き上げ / 設定中 */
.legend .mark.L1,
.conditionTable td.L1 { background-color: #ffe8d1;} 

/* 停止中 / 設定なし */
.legend .mark.L2,
.legend .mark.stop,
.conditionTable td.L2 { background-color: #e5e5e5;} 

/* 20時 / S / PS1 */
.legend .mark.L3,
.conditionTable td.L3 { background-color: #e3e9ec;} 

/* 21時 / M / PS3 */
.legend .mark.L4,
.conditionTable td.L4 { background-color: #e3f3d8;} 

/* 22時 / L / PS2 */
.legend .mark.L5,
.conditionTable td.L5 { background-color: #ffe8d1;} 

/* 23時 / XL / PS4 */
.legend .mark.L6,
.conditionTable td.L6 { background-color: #fad1d2;} 

/* 0時 */
.legend .mark.L7,
.conditionTable td.L7 { background-color: #e7d6c4;} 

/* 1時 */
.legend .mark.L8,
.conditionTable td.L8 { background-color: #e8d3e8;} 

/* 休止中 */
.legend .mark.sleep,
.conditionTable td.sleep { 
    background-image: url(../img/legend_mark_sleep.png);
    background-repeat: no-repeat;
    background-position: center;
    color: #FFF;
}
/* エラー */
.legend .mark.error,
.conditionTable td.error {
    background-image: url(../img/legend_mark_error.png);
    background-repeat: no-repeat;
}

/* グループ番号 */
.legend .mark.gnum { background-color: #e5e5e5;} 

/* 選択中 */
.legend .mark.select { box-shadow: inset 0px 0px 0px 2px #3fa8f4; } 





/* ----------- Main Area ----------- */
.mainArea {
    width: 100%;
    height: calc(100% - 145px);
}

ul.mainMenu + .mainArea {
    width: 100%;
    height: calc(100% - 55px);
}

.subMenu + .mainArea {
    width: calc(100% - 270px);
    height: calc(100% - 55px);
    padding: 20px 20px 0 0;
    float: left;
}





/* ----------- グラフエリア共通 ----------- */
.graphArea {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.graphArea.scroll {
    overflow-x: auto;
    border-top: 1px solid #bac0c6;
}
.graphArea.upper { padding-bottom: 0px;}
.graphArea.lower { height: calc(100vh - 200px - 330px); }
.graphArea.simuWin {
    position: absolute;
    top: 330px;
    width: 835px;
    height: calc(100% - 350px);
}

.graphArea .chapter {
    width: 100%;
    height: 40px;
    color: #8c96a0;
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
}

.graphWindow {
    background-color: #FFF;
    padding: 10px;
}
.graphArea.simuWin .graphWindow { border-radius: 0; height: 100%; }
/* column1 */
.graphArea .graphWindow {
    width: 100%;
    margin: 0;
}
/* column2 */
.graphArea.column2 .graphWindow {
    /* 間隔 10px */
    width: calc((100% - 20px) / 2);
    margin: 0 5px 10px;
}
/* column3 */
.graphArea.column3 .graphWindow {
    /* 間隔 30px */
    width: calc((100% - 90px) / 3);
    margin: 0 15px 30px;
}
/* column4 */
.graphArea.column4 .graphWindow {
    /* 間隔 10px */
    width: calc((100% - 40px) / 4);
    margin: 0 5px 10px;
}
/* column5 */
.graphArea.column5 .graphWindow {
    /* 間隔 6px */
    width: calc((100% - 50px) / 5);
    margin: 0 5px 10px;
}

.graphArea.dashboard {
    position: relative;
    height: 395px;
}


.graphArea.dashboard .graphWindow {
    position: absolute;
    top: 0;
    left: 315px;
    width: calc(100% - 315px);
    height: 100%;
}

.graphArea.dashboard .graphWindow.recently,
.graphArea.dashboard .graphWindow.until,
.graphArea.dashboard .graphWindow.room {
    width: 310px;
    height: 195px;
    background-color: #FFF;
    position: absolute;
    left: 0;
}
.graphArea.dashboard .graphWindow.recently {
    top:0;
    background: url(../img/dashboard_bg_blue.gif) no-repeat center #FFF;
}
.graphArea.dashboard .graphWindow.until {
    top:200px;
    background: url(../img/dashboard_bg_red.gif) no-repeat center #FFF;
}
.graphArea.dashboard .graphWindow.room {
    top:400px;
    height: calc(100% - 400px);
    overflow: scroll;
    display: none;
}
.graphArea.dashboard .graphWindow .weather {
    line-height: 20px;
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    margin-top: 5px;
}

.graphArea.dashboard.room {
    height: calc(100% - 20px);
}

.graphArea.dashboard.room .graphWindow.room { display: block; }

.graphArea.dashboard .graphWindow.recently .graphHeader h4,
.graphArea.dashboard .graphWindow.until .graphHeader h4,
.graphArea.dashboard .graphWindow.room .graphHeader h4 { padding-left: 5px;}



.graphHeader {
    display: flex;
    margin-bottom: 5px;
    height: 25px;
}

.graphHeader h4,
.element h4 {
    width: calc(100% - 65px);
    font-size: 16px;
    line-height: 24px;
    color: #505064;
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.graphHeader h4 span { margin-left: 15px; }
.graphHeader h4 a { color: #5C7780; }

ul.graphTool { 
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
ul.graphTool li { margin-right: 5px; }
ul.graphTool li:last-child { margin-right: 0; }

ul.graphTool li a {
    display: block;
    width: 30px; height: 24px;
    background-position: left -24px;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}
ul.graphTool li p { font-size: 13px;}
ul.graphTool li a.input,
ul.graphTool li a.output { width: 100px; }

ul.graphTool li a:hover { background-position: left 0px; }
ul.graphTool li a.disabled { background-position: left -48px; pointer-events: none; cursor: not-allowed; }

ul.graphTool li a.datatable { background-image: url(../img/btn_graphtool_table.gif); }
ul.graphTool li a.fullscreen { background-image: url(../img/btn_graphtool_fullscreen.gif); }
ul.graphTool li a.input { background-image: url(../img/btn_graphtool_input.gif); }
ul.graphTool li a.output { background-image: url(../img/btn_graphtool_output.gif); }



.highchartsBox { width: 100%; margin: 0; padding: 0; }
.highchartsBox.demoColor { background-color: #EEE; }

.graphArea.low .highchartsBox { height: 150px; }
.graphArea.mid .highchartsBox { height: 250px; }
.graphArea.tall .highchartsBox { height: 500px; }
.graphArea.dashboard .highchartsBox { height: calc(100% - 50px); }


.graphArea.simuWin .simArea {
    width: calc(100% - 200px);
    height: 100%;
    float: left;
}

.graphArea.simuWin .simArea .peakValue {
    display: flex;
    margin-bottom: 11px;
}
.graphArea.simuWin .simArea .peakValue > div {
    width: 300px;
    height: 50px;
    padding: 5px 5px 5px 20px;
    line-height: 1.1em;
    background-color: #F0F1F3;
    margin-left: 15px;
    border-bottom: 2px dotted #4D5791;
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
    background-image: url(../img/icon_arrow_r.png);
    background-size: 14px 14px;
    background-position: center left 3px;
    background-repeat: no-repeat;
    color:#4D4D4D;
}
.graphArea.simuWin .simArea .peakValue > div.current {
    background-color: #ffeaea;
    margin-left: 0px;
    border-color: #F9BDA7;
    background-image: url(../img/icon_star.png);
}
.graphArea.simuWin .simArea .peakValue > div p span {
    font-size: 13px;
}
.graphArea.simuWin .simArea .peakValue > div .value { font-size: 32px;}
.graphArea.simuWin .simArea .peakValue > div .value span { font-size: 13px; margin-left: 5px;}
.graphArea.simuWin .simArea .highchartsBox { height: calc(100% - 90px); }

.graphArea.simuWin .graphHeader h4 { font-size: 14px;}



/* =============================

Table

============================= */
table.simple {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: solid 1px #ccc;
}
table.simple tr { border-bottom: solid 1px #ccc; }
table.simple th.head,
table.simple th.heads { background-color: #f3f4f5; }
table.simple th.heads { border-left: solid 1px #ccc; }
table.simple th.heads[rowspan] { border: none; }

table.simple th,
table.simple td { color: #4D4D4D; padding: 10px; }

table.simple th {
    text-align: center;
    font-weight: normal;
    font-size: 0.9em;
    color: #505064;
}
table.simple td { text-align:left!important; }

table.simple .wHalf { width: 50%!important; }
table.simple .w100 { width: 100px!important; }
table.simple .w200 { width: 200px!important; }
table.simple .w300 { width: 300px!important; }
table.simple .w400 { width: 400px!important; }
table.simple .w500 { width: 500px!important; }




/* =============================

Remodal Modify

============================= */
.remodal {
    padding: 0;
    border-radius: 6px;
}
.remodal.wide { min-width: 1600px; }

.remodal-close_mod {
    position: absolute;
    top: 8px;
    right: 8px;

    display: block;
    overflow: visible;

    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;

    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;

    border: 0;
    outline: 0;
    background: transparent;
    background-image: url(../img/btn_close.gif);
}
.remodal-close_mod:hover,
.remodal-close_mod:focus { opacity: 0.6; outline: none;}


.modalHeader {
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
}
.modalHeader h3 {
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    padding-left: 24px;
    text-align: left;
    color: #505064;
}
.modalBody { padding: 24px; }
.modalBody h2 { font-size: 18px; color: #505064; }
.modalFooter {
    border-top: 1px solid #E5E5E5;
    text-align: right;
    padding: 10px 24px;
    display: flex;
    justify-content:flex-end;
}
.modalFooter.center {
    justify-content:center;
}



/* =============================

Toggle switch

============================= */
.toggleSW {
    display: flex;
    align-items: center;
    width: 110px; height: 29px;
    font-size: 12px;
    line-height: 29px;
}
.toggleSW label { margin: 0; }

/* トグルスイッチ */
input[type="checkbox"].toggleSW { 
    position: absolute;
    opacity: 0;
}

/* Normal Track */
input[type="checkbox"].toggleSW + div {
    vertical-align: middle;
    width: 40px;    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: .4s;
    -webkit-transition-property: background-color, box-shadow;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
    margin: 0 10px;
}

/* Checked Track (Blue) */
input[type="checkbox"].toggleSW:checked + div {
    width: 40px;
    background-position: 0 0;
    background-color: #3b89ec;
    border: 1px solid #0e62cd;
    box-shadow: inset 0 0 0 10px rgba(59,137,259,1);
}

/* Tiny Track */
input[type="checkbox"].mini.toggleSW + div {
    width: 34px;    height: 18px;
}

/* Big Track */
input[type="checkbox"].bigswitch.toggleSW + div {
    width: 50px;    height: 25px;
}

/* Green Track */
input[type="checkbox"].green.toggleSW:checked + div {
    background-color: #00e359;
    border: 1px solid rgba(0, 162, 63,1);
    box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}

/* Normal Knob */
input[type="checkbox"].toggleSW + div > div {
    float: left;
    width: 18px; height: 18px;
    border-radius: inherit;
    background: #ffffff;

    -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: transform, background-color, box-shadow;
    -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -moz-transition-duration: 0.4s;
    -moz-transition-property: transform, background-color;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/* Checked Knob (Blue Style) */
input[type="checkbox"].toggleSW:checked + div > div {
    -webkit-transform: translate3d(20px, 0, 0);
    -moz-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); /* 2020.03.26 */
    background-color: #ffffff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Tiny Knob */
input[type="checkbox"].mini.toggleSW + div > div {
    width: 16px; height: 16px;
    margin-top: 1px;
}


/* Checked Tiny Knob (Blue Style) */
input[type="checkbox"].mini.toggleSW:checked + div > div {
    -webkit-transform: translate3d(16px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}


/* Big Knob */
input[type="checkbox"].bigswitch.toggleSW + div > div {
    width: 23px; height: 23px;
    margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.toggleSW:checked + div > div {
    -webkit-transform: translate3d(25px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Green Knob */
input[type="checkbox"].green.toggleSW:checked + div > div {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
}




















/* =============================

index.html
ログイン画面

============================= */
a.panasonicLink {
    background-image: url(../img/panasonic_logo_blue.svg);
    width: 180px;
    height: 69px;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}
.loginBox {
    width: 620px; height: auto;
    margin: 150px auto 10px;
    padding: 50px 0 50px ;
    background-color: #8b92b7;
    text-align: center;
    opacity: 0.8;
}
.loginBox h2 {
    font-size: 28px;
    color: #FFF;
    margin-bottom: 10px;
}
.loginBox h1 {
    font-size: 36px;
    color: #FFF;
    margin-bottom:30px;
}
.loginBox p {
    color: #FFF;
    font-size: 18px;
}
.loginBox form .cautionText { display: none; }
.loginBox form.was-validated .cautionText {
    display: block;
    color: #d90000;
    text-align: center;
}
.loginForm {
    width: 400px;
    margin: 0 auto;
    text-align: left;
}
.loginForm .form-group {
    margin-bottom: 20px;
}
.loginForm .form-group label {
    margin-bottom: 0;
    color: #FFF;
}
ul.reset {
    width: 560px;
    margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
}
.massage {
    background-color: rgba(256, 256, 256, 0.8);
    width: 85%;
    margin: 30px auto 0;
    padding: 15px;
    border-radius: 5px;
}
.massage h4 {
    font-size: 21px;
    margin-bottom: 15px;
}
.massage.red h4 { color: #d63838; }

.massage > a.link {
    font-size: 18px;
    text-decoration: underline;
    display: block;
    padding-bottom: 15px;
}
.massage p {
    font-size: 16px;
    color: #4D4D4D;
    text-align: left;
}














/* =============================

top-list.html
物件一覧

============================= */
.boxList { padding: 30px 15px; height: 100%; }



.graphArea.boxList .graphWindow {
    position: relative;
    height: 200px;
    color: #4d4d4d;
    border:2px solid #FFF;
}
.graphArea.boxList .graphWindow.btn:hover {
    border:2px solid #8B92B7;
}

.graphArea.boxList .graphWindow .thumb,
.graphArea.boxList .graphWindow > h3,
.graphArea.boxList .graphWindow > p,
.graphArea.boxList .graphWindow > h4,
.graphArea.boxList .graphWindow .eqValue { position: absolute; }

.graphArea.boxList .graphWindow .thumb,
.photoArea .thumb {
    width: 160px; height: 160px;
    background-position: center;
    background-size: cover;
    top: 20px; left: 20px;
}
.graphArea.boxList .graphWindow > h3 {
    font-size: 18px;
    top: 20px; left: 200px;
    color: #000;
}
.graphArea.boxList .graphWindow > p {
    font-size: 14px;
    top: 50px; left: 200px;
    color: #4D4D4D;
    line-height: 1.5em;
}
.graphArea.boxList .graphWindow > h4 {
    font-size: 13px;
    top: 115px; left: 200px;
}



.graphArea.boxList .graphWindow.add {
    border: 1px solid #CBCBCB;
    background-color: #E8EAEC!important;
    text-decoration: none;
    display: block;
    padding: 50px 0 0;
    height: 200px;
    text-align: center;
}
.graphArea.boxList .graphWindow.add:before {
    content: "\f067";
    font-family: fontawesome;
    color: #CBCBCB;
    font-size: 48px;
}
.graphArea.boxList .graphWindow.add:hover {
    background-color: #E2E5E7!important;
}
.graphArea.boxList .graphWindow.add:after {
    content: "\A新規追加";
    white-space: pre;
    color: #CBCBCB;
    font-size: 18px;
}

.graphArea.boxList .graphWindow.add:hover:before,
.graphArea.boxList .graphWindow.add:hover:after {
    color: #a4a3a3!important;
}

.graphArea.boxList .library {
    position: absolute;
    top:100px; left: 200px;
}
.graphArea.boxList .library h4 {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 3px;
}
.library { font-size: 14px;}
.library a { margin-right: 5px; line-height: 1.4em;}
.library a::before {
    content: "\f0f6";
    font-family: fontawesome;
    color: #333;
    font-size: 14px;
    margin-right: 3px;
}

.eqValue {
    display: flex;
    margin-top: 5px;
    bottom: 20px; left: 200px;
}
.eqValue > p {
    text-align: right;
    position: relative;
    font-size: 21px;
    color: #000;
    align-items:baseline;
    width: 168px;
    padding: 5px;
    margin-right: 15px;
    background-color: #EAEBF2;
}
.eqValue > p:last-child { margin-right: 0; }

.eqValue > p > span {
    position: absolute;
    bottom: 10px; left: 5px;
    font-size: 14px;
    color: #5C7780;
}

.eqValue > p > em {
    font-size: 12px;
    font-style:normal;
    color: #5C7780;
}




/* =============================

for EQ-situation.html
エコキュート 状況確認

============================= */
.conditionTable {
    width: 100%;
    height: calc(100% - 20px);
    background-color: #f4f4f6;
    border-collapse: collapse;
}
.conditionTable tr.guide th,
.conditionTable tr th.floor {
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    color: #b2b2b2;
    background-color: #FFF;
}
.conditionTable tr.guide th { height: 10px; }
.conditionTable tr th.floor { width: 25px; }

.conditionTable td {
    font-size: 11px;
    color: #989898;
    text-align: center;
    border: 1px solid #FFF;
}
.conditionTable td:hover {
	background-color: #B8BCD3!important;
}

.conditionTable td.select {
    box-shadow: inset 0px 0px 0px 3px #3fa8f4;
}




/* =============================

for EQ-data.html
エコキュート 実績データ

============================= */
.dashboard .peak { text-align: center; padding-top: 10px; }
.dashboard .peak h3 { font-size: 72px; font-weight: normal;}
.dashboard .peak h3 span { font-size: 21px; margin-left: 10px;}



.graphArea.dashboard.room + .element { display: none; }


.element {
    padding: 10px 10px 0 10px;
    margin-top: 5px;
    background-color: #FFF;
    height: calc(100% - 400px);
}
.element h4 {
    padding-left: 5px;
    margin-bottom: 5px;
}
.element .tableWp {
    height: calc(100% - 30px);
    overflow-x: scroll;
}
.element .tableWp table {
    width: 100%;
    height: 100%;
    text-align: center;
    border-collapse:separate;
    border-spacing: 0;
    border-bottom: none;
}
.element .tableWp table th,
.element .tableWp table td {
    padding: 3px;
    border: solid 1px #FFF;
    line-height: 1.2em;
    color: #4D4D4D;
}
.element .tableWp table thead th {
    background: #F3F4F5;
    font-size: 13px;
    font-weight: normal;
    color: #505064;
    height: 30px;
}
.element .tableWp table thead th.thin {width:70px;}
.element .tableWp table tbody tr {
    height: 40px;
    background-color: #FFF;
}
.element .tableWp table tbody tr:nth-child(even) { background-color: #F9FAFA; }





/* =============================

for EQ-pattern.html
エコキュート 動作パターン設定

============================= */
.mainArea.pattern {
    padding: 20px 20px;
    position: relative;
    display: flex;
}

.patternList {
    width: 440px; height: 300px;
    background-color: #FFF;
    margin-right: 10px;
}
.patternList h4 {
    background-color: #DCDFE2;
    font-size: 13px;
    color: #505064;
    line-height:29px;
    padding-left: 10px;
    border-bottom:1px solid #d1d5d9;
}
.patternList > .listWrap {
    height: 270px;
    overflow-x: scroll;
}

.patternList ul li {
    background-color: #f9fafa;
    height: 40px;
    border-bottom:1px solid #d1d5d9;
    position: relative;
}
.patternList ul li:hover {
    background-color: #F0F1F3;
}
.patternList ul li.current::before {
    position: absolute;
    content: url(../img/icon_star.png);
    top:10px; left: 5px;
}
.patternList ul li.select {
    background-image: url(../img/icon_arrow_r.png);
    background-size: 14px 14px;
    background-position: center right 10px;
    background-repeat: no-repeat;
    background-color: #F0F1F3;
}
.patternList ul li a {
    display: block;
    line-height: 40px;
    padding: 0 30px 0 30px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.patternList ul li a
.patternList ul li a:hover {
    background-image: url(../img/icon_arrow_r.png);
    background-size: 14px 14px;
    background-position: center right 10px;
    background-repeat: no-repeat;
}
.patternList ul li:not(.add) a {
    color: #4D4D4D;
    text-decoration: none;
}
.patternList ul li.add a,
table tr td .add {
    font-size: 14px;
    padding: 0 30px 0 50px;
    background-image: url(../img/icon_add.png);
    background-size: 14px 14px;
    background-position: center left 30px;
    background-repeat: no-repeat;
    text-align: left;
}
.patternList ul li.add a:hover {
    text-decoration: underline;
}





.palette1 {
    width: 395px; height: 300px;
    background-color: #FFF;
    padding: 25px 10px 0 25px;
}

.mainSW {
    background-color:#ffeaea;
    border-radius: 4px;
    padding: 5px;
    height: 33px;
    display: none;
}
.palette1 .mainSW p {
    color:#ff6666;
    font-weight:bold;
    padding-left: 25px;
    line-height: 23px;
}
.mainArea.current .palette1 .mainSW { display: block; }

.mainArea.current .palette2 .edit a { pointer-events: none; color: #CCC; }

.mainSW p,
.inputArea p,
.palette2 > p {
    font-size: 13px;
    color: #505064;
}

.inputArea input[type="text"] { width: 270px; margin-right: 10px;}

.inputArea textarea { resize: none; }

.inputArea .saveBtn button {
    width: calc(50% - 8px)!important;
}




.palette2 {
    width: calc(100% - 840px);
    height: 100%;
    background-color: #FFF;
    padding: 25px 25px 0 25px;
}

.palette2 .graphHeader h4 { font-size: 13px; font-weight: normal;}

.palette2 .tableWp {
    height: calc(100% - 40px);
    overflow-x: scroll;
}

table.makePattern,
table.common {
    width: 100%;
    text-align: center;
    border-collapse:separate;
    border-spacing: 0;
    border-bottom: none;
}

table .sticky {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-top: none;
    border-bottom: none;
    z-index:1;
}
table th.center,
table td.center { text-align: center!important; }
table th.left,
table td.left { text-align: left!important; }
table th.right,
table td.right { text-align: right!important; }

table.makePattern th,
table.makePattern td,
table.common th,
table.common td {
    padding: 10px;
    border: solid 1px #FFF;
    line-height: 1.2em;
}
table.makePattern th,
table.common th {
    background: #F3F4F5;
    font-size: 13px;
    font-weight: normal;
    color: #505064;
}
table.makePattern td,
table.common td { color: #4D4D4D;}
table.makePattern tbody tr { height: 55px; }
table.makePattern tbody tr,
table.common tbody tr,
table.common.noheader tbody tr:nth-child(even) {
    background-color: #FFF;
}
table.makePattern tbody tr:nth-child(even),
table.common tbody tr:nth-child(even),
table.common.noheader tbody tr { background-color: #F9FAFA; }

table.makePattern tr th.thin,
table.common tr th.thin {width:30px;}
table.makePattern tr th.thin span,
table.common tr th.thin span {
    white-space: pre;
    writing-mode: vertical-rl;
    display: inline-block;
}
table.makePattern tbody tr.disabled td,
table.common tbody tr.disabled td { color: #AAA; }
table.makePattern tbody tr.disabled td:first-child,
table.common tbody tr.disabled td:first-child { color: #000; }

table.common.left th,
table.common.left td { text-align: left;}





/* for eq-error.html */
.mainArea.error table.common th.date { width: 160px;}
.mainArea.error table.common th.roomNum { width: 100px;}
.mainArea.error table.common th.errorCode { width: 200px;}
.mainArea.error table.common th.errorTitle { width: 200px;}
.mainArea.error table.common th.memo { width: auto;}
.mainArea.error table.common th.update { width: 120px;}

.mainArea.error table.common th,
.mainArea.error table.common td {
    vertical-align: top;
    font-size: 15px;
    line-height: 1.4em;
}

table.common tbody tr td.memo {
    position: relative;
    padding-right: 40px;
    max-width: 300px;
}
table.common tbody tr td.memo a {
    position: absolute;
    top: 50%; right:10px;
    margin-top: -12px;
}






table.basic {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
}
table.basic th {
    padding: 10px;
    background: #e9faf9;
    border: solid 1px #778ca3;
}
table.basic td {
    padding: 10px;
    border: solid 1px #778ca3;
}




.controller.mini {
    width: 190px;
    height: calc(100% - 30px);
    background-color: #F9FAFA;
    overflow-x: scroll;
    float: left;
    margin-right: 10px;
}
.controller.mini .chapter {
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-weight: normal;
    color: #505064;
    background-color: #F0F1F3;
    border-bottom: 1px solid #d1d5d9;
    padding-left: 10px;
    position: relative;
}
.controller.mini form,
.controller.mini .chapter + div {
    font-size: 14px;
    padding: 10px;
}

.controller.mini form select {
    width: 100%;
    margin: 0 0 10px 0;
}

table.groupEdit select {
    width: 80px;
}
table.groupEdit tr td { vertical-align: middle!important;}



/* =============================

for EQ-error.html
エラー履歴

============================= */
.mainArea.error .tableWp {
    height: 100%;
    overflow-x: scroll;
}
.mainArea.error table.common input {width: 100%;}
.mainArea.error table.common tbody tr td.save a { color: #00ab34;}





/* =============================

for EQ-error.html
エラー履歴

============================= */
.photoArea {
    padding: 5px;
    margin-right: 10px;
    background-color: #F3F5F7;
}
.photoArea .thumb {
    padding: 137px 0 0 137px;
}
.photoArea .thumb:first-child { margin-bottom: 5px;}

.photoArea .thumb a.delete {
    text-decoration: none;
    background-color: #CBCBCB;
    width: 23px; height: 23px;
    line-height: 23px;
    display: block;
}
.photoArea .thumb a.delete:hover {
    background-color: #fb8282;
}

.photoArea .thumb a.delete:before{
    content: "\f1f8";
    font-family: fontawesome;
    color: #808080;
}
.photoArea .thumb a.delete:hover:before {color: #FFF;}

.photoArea .thumb.add {
    border: 1px solid #E5E5E5;
    padding: 0;
}
.photoArea .thumb.add a {
    text-decoration: none;
    display: block;
    padding: 40px 0 0;
    height: 160px;
}
.photoArea .thumb.add a:before{
    content: "\f067";
    font-family: fontawesome;
    color: #E5E5E5;
    font-size: 48px;
}
.photoArea .thumb.add a:hover {
    background-color: #E5E5E5;
}
.photoArea .thumb.add a:hover:after {
    content: "\Aイメージ追加";
    white-space: pre;
    color: #FFF;
    font-size: 18px;

}
.photoArea .thumb.add a:hover:before { color: #FFF;}