@charset "UTF-8";

/* BIZ UDゴシックフォントを定義 */
@font-face {
	font-family: 'BIZ UDGothic';
	src: url('../font/BIZUDGothic-Regular.ttf') format('truetype');
	/* フォントファイルのパスを指定 */
}

html {
	width: 100%;
	height: 100%;
}

:root {
	--main-color: #a63c47;
	--complementary-color: #2c3e50;
	--background-color: #ecf0f1;
	--accent-color: #34495e;
	--light-main-color: #c25560;
	--medium-color: #7f8c8d;
	--light-color: #bdc3c7;
	--warning-color: #e74c3c;
		/* ボタンや文字に使用する */
		--yellow-color: #BF8F00;
		--btn-yellow-color: #BF8F00;
		--btn-yellow-hover-color: #9C7A00;
		--btn-yellow-disabled-color: #E0C080;
		--blue-color: #4472C4;
		--btn-blue-color: #D9E1F2;
		--btn-blue-hover-color: #B0C4DE;
		--btn-blue-disabled-color: #F0F4FA;
		--btn-red-color: #FFC5C5;
		--btn-red-hover-color: #FF9999;
		--btn-red-disabled-color: #FFE5E5;
		--green-color:#588470;
		--bg-yellow-color: #FFF2CC;
		--bg-red-color: #FCE4D6;
		--bg-green-color: #E2EFDA;
		--btn-border-color:#A6A6A6;
		--table-header-color: #D9E1F2;
		--orange-color: #FF9933;
		--btn-gray-color:#e9ecef ;
		--btn-gray-hover-color:#ced4da;
		--btn-gray-disabled-color:#d6d8db;
		--btn-green-color:#C4EFAA;
		--btn-green-hover-color:#A2DB8F;
		--btn-green-disabled-color:#E2F7CF;
}

body {
	background-color: var(--background-color);
	color: var(--complementary-color);
	display: flex;
    flex-direction: column;
	height: 100%;
	padding: 0 !important; 
	overflow: hidden; 
}
.navbar {
	background-color: var(--main-color);
}
.navbar-brand, .nav-link {
	color: var(--background-color) !important;
}
/* .btn-primary {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}
.btn-primary:hover {
	background-color: var(--complementary-color);
	border-color: var(--complementary-color);
} */
.form-label {
	color: var(--accent-color);
}
.card {
	border-color: var(--light-main-color);
}
.card-header {
	background-color: var(--light-main-color);
	color: var(--background-color);
}
.map {
    position: unset !important;
    /* height: unset !important; */
}
.bg-custom {
	background-color: #A63C47;
}

.bg-button-entry {
    background-color: #BF9000;
	color: white;
}
.bg-button-entry:hover {
    background-color: #BF9000;
	color: white;
}
.bg-button-entry:focus {
    background-color: #BF9000;
    color: white;
}
.bg-button-back {
    background-color: #DEEBF7;
	color: black;
}

.bg-check-alert {
	background-color: #F4B183;
}
.bg-check-alert:checked {
	background-color: #F4B183;
}

.bg-check-normal {
	background-color: #BFBFBF;
}
.bg-check-normal:checked {
	background-color: #BFBFBF;
}
.btn-group .btn-normal {
	background-color: #28a745;
	border-color: #28a745;
	color: white;
}
.btn-group .btn-normal:hover, .btn-group .btn-normal:focus {
	background-color: #218838;
	border-color: #1e7e34;
}
.btn-group .btn-disaster,
.btn-active {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}
.btn-group .btn-disaster:hover, .btn-group .btn-disaster:focus,
.btn-active:hover, .btn-active:focus {
	background-color: #c82333;
	border-color: #bd2130;
}

.table th{
	text-align: center;
	background-color: var(--table-header-color);
}
.btn-yellow {
	background-color: var(--btn-yellow-color);
	font-weight: bold;
	white-space: nowrap; 
	color: white; 
	border: solid 1px var(--btn-border-color);
}
.btn-yellow:hover {
	background-color: var(--btn-yellow-hover-color);
	cursor: pointer;
}
.btn-yellow:disabled,
.btn-yellow.disabled {
	background-color: var(--btn-yellow-disabled-color);
	cursor: not-allowed;
	opacity: 0.65; 
}
.navbar-text {
	color: #ffffff;
}
.btn-blue {
	background-color: var(--btn-blue-color);
	font-weight: bold;
	white-space: nowrap;
	color: black; 
	border: solid 1px var(--btn-border-color);
}
.btn-blue:hover {
	background-color: var(--btn-blue-hover-color);
	cursor: pointer;
}
.btn-blue:disabled,
.btn-blue.disabled {
	background-color: var(--btn-blue-disabled-color);
	cursor: not-allowed;
	opacity: 0.65;
}
.btn-red {
	background-color: var(--btn-red-color);
	font-weight: bold;
	white-space: nowrap;
	/* color: red; */
	border: solid 1px red;
}
.btn-red:hover {
	background-color: var(--btn-red-hover-color);
	cursor: pointer;
}
.btn-red:disabled,
.btn-red.disabled {
	background-color: var(--btn-red-disabled-color);
	cursor: not-allowed;
	opacity: 0.65;
}
.font-red{
	color: red;
}
.font-green{
	color: var(--green-color);
}
.font-yellow{
	color: var(--yellow-color);
}
.font-blue{
	color: var(--blue-color);
}
.font-orange{
	color: var(--orange-color);
}
.font-white{
	color: white !important;
}

.bg-red{
	background-color: var(--bg-red-color) !important;
}
.bg-red td{
	background-color: var(--bg-red-color) !important;
}
.bg-green {
	background-color: var(--bg-green-color) !important;
}
.bg-green td{
	background-color: var(--bg-green-color) !important;
}
.bg-yellow{
	background-color: var(--bg-yellow-color) !important;
}
.bg-yellow td{
	background-color: var(--bg-yellow-color) !important;
}
.bg-all-green{
	background-color: var(--green-color) !important;
}
.custom-nav-tabs .nav-link{
	color: black !important;
	background-color: #D9E1F2;
	border: gray solid 1px;
}
.custom-nav-tabs .nav-link.active{
	color: white !important;
	font-weight: bold;
	background-color: #c25560;
	border: gray solid 1px;
}

.select-saigai{
	font-weight: bold;
}

.select-heijo{
	color: #a1b91d !important;;
}
.select-heijo option{
	color: #a1b91d !important;;
}

.select-training{
	color: #6d9dc9 !important;;
}
.select-training option{
	color: #6d9dc9 !important;;
}

.select-ijo{
	color: red !important;
}
.select-ijo option{
	color: red !important;
}

.bg-saigai{
	background-color: var(--warning-color) !important;
}
.bg-hukkyu{
	background-color: #fca596 !important;
}


.bg-teiki{
	background-color: #B4C7E7 !important;
}
.bg-tuho{
	background-color: #FBE5D6 !important;
}
.bg-ijo{
	background-color: #E2EFDA !important;
}
.bg-today {
	background-color: var(--bg-green-color) !important;
}

.jokyo-red {
	color: red;
}

.jokyo-blue {
	color: blue;
}
.bg-lightgray {
	background-color: #D9D9D9;
}

.modal-dialog{
	max-width: 90%; 
}

input[readonly], 
textarea[readonly] {
    background-color: #e9ecef; 
    cursor:default; 
}

input[readonly]:focus, 
textarea[readonly]:focus {
    background-color: #e9ecef;
    outline: none; 
    border-color: #ced4da; 
}

select.readonly {
    background-color: #e9ecef; 
    pointer-events: none; 
    cursor: default; 
    border: 1px solid #ced4da; 
}

select.readonly:focus {
    background-color: #e9ecef; 
    outline: none; 
    border-color: #ced4da; 
}

input[type="radio"][readonly] + label,
input[type="checkbox"][readonly] + label {
    background-color: #e9ecef; 
    cursor: default; 
    pointer-events: none; 
    border-color: #ced4da;
}

input[type="radio"][readonly]:checked + label,
input[type="checkbox"][readonly]:checked + label {
    background-color: #d6d8db; 
}
/* UtWindowで使用 */
.spinner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(122, 122, 122, 0.3);
	z-index: 9000;
	pointer-events: none;
}
.spinner-border-appearance {
	width: 8rem;
	height: 8rem;
	border-width: 1em;
}		

.dropdown{
	color: var(--light-color) !important;
}
.offcanvas {
	background-color: var(--accent-color);
}
.offcanvas-header {
	background-color: var(--main-color);
	color: var(--light-color);
}
.offcanvas .nav-link {
	color: var(--light-color) !important;
}
.offcanvas .nav-link:hover, .offcanvas .nav-link:focus {
	background-color: var(--light-main-color);
}
.offcanvas .nav-link.active {
	background-color: var(--main-color);
	color: var(--background-color) !important;
}
/* 共通フレーム用定義 */
#comMapPanel {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 500;
	overflow: hidden;
}
#comMap {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1000px;
	height: 1000px;
	z-index: 0;
}
#comBlind {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1000px;
	height: 1000px;
	z-index: 200;
	background-color: var(--background-color);
}        

#comBody {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	flex-direction: column;

}
  
  #comMain {
	flex-grow: 1; 
	overflow: auto; 
  }
  .btn-gray {
    background-color: var(--btn-gray-color); 
	font-weight: bold;
	white-space: nowrap;
    color: black; 
	border: solid 1px var(--btn-border-color);
}


.btn-gray:hover {
    background-color: var(--btn-gray-hover-color); 
	cursor: pointer;
	border: solid 1px var(--btn-border-color);

}
.btn-gray:disabled {
	background-color: var(--btn-gray-disabled-color);
	cursor: not-allowed;
	opacity: 0.65;
	border: solid 1px var(--btn-border-color);

}
.sticky_table {
	/* 縦スクロール時に固定する */
	position: -webkit-sticky;
	position: sticky;
	top: -1px;
	/* tbody内のセルより手前に表示する */
	z-index: 1;
}		
.dropdown
{
	border-color: var(--light-color) !important;
	color: var(--light-color);
}
.btn-green {
    background-color: var(--btn-green-color); 
	font-weight: bold;
	white-space: nowrap;
    color: black; 
	border: solid 1px var(--btn-border-color);
}
 
.btn-green:hover {
	background-color: var(--btn-green-hover-color); 
	cursor: pointer;
	border: solid 1px var(--btn-border-color);
}
.btn-green:disabled {
	background-color: var(--btn-green-disabled-color); 
	cursor: not-allowed;
	opacity: 0.65;
	border: solid 1px var(--btn-border-color);
}
.sonic-map-div {
	display: flex;
	flex-direction: column;
	/* background-color: var(--light-color); */
	margin-bottom: 1rem;
}  
.sonic-map {
	flex: 1;
}
.chart-contents {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.chart-container {
	flex: 1;
	position: relative;
	width: 100%;
	height: 100%;
}
.table {
	border-color: #ced4da;
}
.img-div {
	width: 100%;
	border: 1px solid #ccc;
}  
.img-fit {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.sticky_01,
.sticky_02{
	position: sticky;
	top: -1px;
	left: -1px;
	&:before{
		content: "";
		position: absolute;
		top: -1px;
		left: -1px;
		width: 100%;
		height: 100%;
	}
}
.sticky_01{
	z-index: 2;
}
.sticky_02{
	z-index: 1;
}
.sticky_table_next {
	/* 縦スクロール時に固定する */
	position: -webkit-sticky;
	position: sticky;
	top: 28px;
	/* tbody内のセルより手前に表示する */
	z-index: 1;
}

.div-spinner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(122, 122, 122, 0.3);
	z-index: 8000;
	pointer-events: none;
}
.div-spinner-border-appearance {
	width: 2rem;
	height: 2rem;
	border-width: 1em;
}		
.alert-message {
	color: var(--warning-color);
	font-weight: bold;
}