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

/* ================  人流予測  ====================  */

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

　　　　画面右上部のレイヤー群表示

kt-map-menu-right-top-container
人流表示時のポジション調整

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

.kt-map-menu-right-top-container.kt-map-jinryu-yosoku{
    top:57px;
 /* top:68px;*/
}



@media (max-width: 1750px) {/*1660px*/
	/*
	.kt-map-menu-right-top-container {		
		width: calc(100% - 650px);
	}*/
    
    .kt-map-menu-right-top-container.kt-map-jinryu-yosoku{
        /*border: 3px solid #f00;*/
        width: calc(100% - 180px);
    }

}

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

　　　　画面左上部の時間表示

.kt-map-menu-left-top-container
内の　.kt-header-day-timm-status　を
人流表示時のポジション調整

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

.kt-header-day-timm-status.kt-map-jinryu-yosoku{
    margin-top: -10px!important;
    width: 120px;
    background-color: rgba(206,0,0,.7);
}

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

ヘッダー部更新ボタン

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

.btn-light.btn-round-white{
    border-radius: 15px 15px;
    
    background-color: rgba(255,255,255,1);
    border-color:  rgba(255,255,255,1);
}

.btn-light.btn-round-white:focus{
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, .15);
}

.btn-light.btn-round-white:hover{
    background-color: rgba(255,255,255,.7);
    border-color:  rgba(255,255,255,.7);
}



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

人流ポップアップ

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

.kt-map-popup-jinryu-yosoku{
    width: 340px;
}

.kt-map-popup-jinryu-yosoku .ktkn-popover-header:before {
    background-color: #002063;
}

.kt-map-popup-jinryu-yosoku .ktkn-popover-header:after {

        content: url(../img/pict-jinryu-yosoku.svg);

        display: block;

        position: absolute;

        width: 10px;

        height: 10px;

        left: 6px;

        top: 5px

}

.kt-map-popup-jinryu-yosoku .kt-number{
    font-size: 24px;
    font-weight: bold;
}


.kt-table-jinryu-yosoku-graph{
    width: 100%;
}

.kt-table-jinryu-yosoku-graph td:nth-child(3){
    width: 51%;
}

.kt-table-jinryu-yosoku-graph .jinryu-yosoku-graph-bar{
    height: 24px;
    width: 20px;
    background-color: rgba(165, 255, 118, 0.5);
    border: 1px solid #b0b0b0;
}

/* グラフカラー */

.kt-table-jinryu-yosoku-graph .bar-graph-6400{
    background-color: rgba(255, 28, 28, 0.4);
    
}

.kt-table-jinryu-yosoku-graph .bar-graph-3200{
    background-color: rgba(255, 171, 28, 0.5);
}

.kt-table-jinryu-yosoku-graph .bar-graph-1600{
    background-color: rgba(255, 255, 28, 0.5);
    
}

.kt-table-jinryu-yosoku-graph .bar-graph-800{
    background-color: rgba(165, 255, 118, 0.5);
}



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

停電情報

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

.kt-map-popup-teiden-3,
.kt-map-popup-teiden-2,
.kt-map-popup-teiden-1,
.kt-map-popup-teiden-0{
    width: 340px;
}

.kt-map-popup-teiden-3 .ktkn-popover-header:before {
    background-color: #FF3333;
}/*red*/
.kt-map-popup-teiden-2 .ktkn-popover-header:before {
    background-color: #FC903E;
}/*orange*/
.kt-map-popup-teiden-1 .ktkn-popover-header:before {
    background-color: #FDD43B;
}/*yellow*/
.kt-map-popup-teiden-0 .ktkn-popover-header:before {
    background-color: #CCCCCC;
}/*Gray*/



.kt-map-popup-teiden-0 .ktkn-popover-header:after,
.kt-map-popup-teiden-1 .ktkn-popover-header:after,
.kt-map-popup-teiden-2 .ktkn-popover-header:after,
.kt-map-popup-teiden-3 .ktkn-popover-header:after {

        content: url(../img/pict-teiden.svg);

        display: block;

        position: absolute;

        width: 10px;

        height: 10px;

        left: 10px;

        top: 9px

}

.kt-map-popup-teiden-3 .ktkn-popover-body,
.kt-map-popup-teiden-2 .ktkn-popover-body,
.kt-map-popup-teiden-1 .ktkn-popover-body,
.kt-map-popup-teiden-0 .ktkn-popover-body{
    max-height: 240px;
    overflow-y: auto;
}




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

    タグ

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

/*
.kt-map-keisoku-box, .kt-map-seach-box, .kt-card-map-ctrl-usage-guide, .kt-card-map-ctrl-layer-select, .kt-card-map-ctrl-basemap-select {
  float: right;
  margin-left: 10px;
}*/

/*    background-color: rgba(0, 32, 99, 1);*/
/*background-color: rgba(0, 32, 99, .85);*/


@media (max-width: 1750px) {/*1660px*/
	
	.kt-map-menu-right-top-container {		
		width: calc(100% - 670px);/*calc(100% - 650px);*/
    }
    
        @media (max-width: 1610px) {

                .kt-map-menu-right-top-container {
                    width: calc(100% - 460px);
                }
        }
    
}



.kt-map-tag-box { /**/
  float: right;
  margin-left: 10px;
    
    max-width: 8.3rem;
    height: 38px;
    background-color: rgba(0, 32, 99, .85);
}

.kt-map-tag-box .btn {
    height: 38px;
    color: #fff!important;
    position: relative;
    padding-left: 40px;
    
 /* padding: 1px;
  height: 22px;
  width: 22px;
  margin: 7px 6px 0 0;*/
}


.kt-map-tag-box .btn::before{
    content: "";
    display: block;
    height: 37px;
    width: 38px;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgba(0, 32, 99, 1);
    background-image: url("../img/pict-menu-tag.svg");
    background-repeat: no-repeat;
    background-position: center center;
    
}

.kt-map-dis-box { /**/
  float: right;
  margin-left: 10px;
    
    max-width: 8.3rem;
    height: 38px;
    background-color: rgba(0, 32, 99, .85);
}

.kt-map-dis-box .btn {
    height: 38px;
    color: #fff!important;
    position: relative;
    padding-left: 40px;
}


.kt-map-dis-box .btn::before{
    content: "";
    display: block;
    height: 37px;
    width: 38px;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgba(0, 32, 99, 1);
    background-image: url("../img/pict-menu-dis-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    
}

.kt-map-keisoku-box { 
    margin-bottom: 8px;
}



.kt-map-popup-tag-3,
.kt-map-popup-tag-2,
.kt-map-popup-tag-1,
.kt-map-popup-tag-4{
    width: 340px;
}



.kt-map-popup-tag-1 .ktkn-popover-header:before,
.kt-map-popup-tag-2 .ktkn-popover-header:before,
.kt-map-popup-tag-3 .ktkn-popover-header:before,
.kt-map-popup-tag-4 .ktkn-popover-header:before {
    background-color: #585858;
}

.kt-map-popup-tag-4 .ktkn-popover-header:after,
.kt-map-popup-tag-1 .ktkn-popover-header:after,
.kt-map-popup-tag-2 .ktkn-popover-header:after,
.kt-map-popup-tag-3 .ktkn-popover-header:after {

        content: "";/*url(../img/pict-mappin-tag-orange.svg);*/

        display: block;

        position: absolute;

        width: 24px;

        height: 24px;

        left: 6px;

        top: 5px;
    
    background-image: url("../img/pict-mappin-tag-red.svg");
    
    background-size:contain;
    background-position: center center;

}

.kt-map-popup-tag-3 .ktkn-popover-header:after {
    background-image: url("../img/pict-mappin-tag-orange.svg");
}
/*pict-mappin-tag-orange.svg*/


.kt-map-popup-tag-2 .ktkn-popover-header:after {
    background-image: url("../img/pict-mappin-tag-yellow.svg");
}
/*pict-mappin-tag-yellow.svg*/



.kt-map-popup-tag-1 .ktkn-popover-header:after {
    background-image: url("../img/pict-mappin-tag-blue.svg");
}
/*pict-mappin-tag-blue.svg*/






.kt-map-popup-tag-3 .ktkn-popover-body,
.kt-map-popup-tag-2 .ktkn-popover-body,
.kt-map-popup-tag-1 .ktkn-popover-body,
.kt-map-popup-tag-4 .ktkn-popover-body{
    max-height: 240px;
    overflow-y: auto;
}


.kt-tag-label{
    background-color: rgba(227,227,227,.7);
    white-space: nowrap;
    position: absolute;
    display: block;
    padding: 2px;
    font-size: 14px;
}



/*
.kt-map-keisoku-box {
  max-width: 8.3rem;
  background-color: #001f60;
	padding-bottom: 1px;
}

.kt-map-keisoku-box .btn {
  padding: 1px;
  height: 22px;
  width: 22px;
  margin: 7px 6px 0 0;
}
*/