:root{
	--primary: #e83e8c;
  --secondary: #e65252;
}

*:not(i){
  	font-family: 'Kiwi Maru', serif !important;
}
.table{
	margin: 0 auto;
}
.controls-above-table .form-control{
	padding: 0.25rem 0.75rem;
}
.clock{
	color: white;
	text-align: left;
    width: 180px;
}
.form-check-label{
	cursor: pointer;
}
.form-check{
	padding-top: 10px;
}
.element-box{
    animation-name: none !important;
    animation-duration: inherit;
}
.top-menu-nav{
	background-color: #fff;
    -webkit-box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
    box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
    padding: 0px 20px 0px 0px;
    border-radius: 6px;
}
.nav-actions .btn{
	margin-top: 13px;
}
.os-tabs-controls.os-tabs-complex .nav-item.nav-actions a{
	font-size: 1rem;
}

.tab-label .fas {
	font-size: 16px;
}
.top-bar .fancy-selector-w{
	padding: 10px;
}
.top-bar .fancy-selector-w .btn-danger, .top-bar .fancy-selector-w .btn-danger:hover{
	background-color: grey;
	border-color: #636c72;
	box-shadow: none;
}
.content-i{
	min-height: 800px;
}
.os-tabs-controls.os-tabs-complex .nav-item .nav-link{
	color: #495057;
	opacity: 1;
}
.nav-link.active i{
	font-weight: bold;
}
.table.table-padded thead tr th{
	font-size: 1rem;
	color: #3E4B5B;
	font-weight: bold;
}
.alarm-list .check-icon{
	color: limegreen;
	font-size: 1.1rem;
	font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 32px;
}
.select2-container .select2-selection--single{
	min-height: 35px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 32px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-width: 2px;
    border-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-selected=true]{
	background: var(--primary);
}
.select2-container{
	min-width: 200px;
}
body .daterangepicker{
	min-width: inherit;
	padding: 0 0 0.5rem 0;
}
body .daterangepicker th.next, body .daterangepicker th.prev{
	text-align: center;
}
.onboarding-modal .onboarding-content.with-gradient{
	padding: 50px 50px 0;
}
.onboarding-modal .onboarding-content .onboarding-text{
	margin-bottom: 10px;
}
.onboarding-modal .onboarding-content h4{
	margin-bottom: 0;
}
.controls-below-table {
    border-top: 1px solid #aaa;
    padding-top: 15px;
    margin-top: 3rem;
}
.table th {
    font-size: 1rem !important;;
    font-weight: bold !important;
    text-transform: inherit !important;
   }
.daily-report .table th {
    background: lemonchiffon;
}
.btn-search {
    border-radius: 20px;
    background: #f0f0f0;
		height: 34px;
}
.daily-report td, .daily-report th{
	text-align: center;
	vertical-align: middle !important;
	padding: 0 1rem;
}
.th-left.highlight{
	background: rgba(255,228,196, 0.5) !important;
}
td.highlight{
	background: rgba(94, 130, 152, 0.05);
}
.table.table-padded tbody td{
	padding: 0.5rem 1rem;
}
.fw-bold{
	font-weight: bold;
}
.daily-report .edit-cell:hover{
	outline: 2px solid black;
}
select.form-control:not([size]):not([multiple]){
	height: inherit;
}
.btn-panel{
	justify-content: flex-end;
	display: flex;
}
.th-left{
	background: aliceblue;
	font-weight: bold;
}
.status-green, .status-blue, .status-darkred, .status-grey, .status-red {
	padding: 0.1rem 0.7rem;
	border-radius: 5px;
	color: white;
	padding: 2px 10px 5px 10px;
	font-size: 12px;
}
.status-green{
	background: limegreen;
}
.status-blue{
	background: #046fdf;
}
.status-darkred{
	background: darkred;
}
.status-grey{
	background: grey;
}
.status-red{
	background: #e83e8c;
}
.sub-table tr:not(:last-child) td, .sub-table tr:not(:last-child) th {
    border-bottom: 1px solid rgba(83, 101, 140, 0.33);
    border-top: 0;
}
.sub-table th{
	font-weight: initial !important;
	color: var(--primary);
}
.os-tabs-controls.os-tabs-complex .nav-item .nav-link {
	padding: 15px 20px;	
}
.green {
	color: limegreen;
	font-weight: bold;
}
.red {
	color: red;
	font-weight: bold;
}
.layout {
    transform-origin: left top;
    margin: 0 auto;
    outline: 1px solid #aaa;
    position: relative;
}
.map-edit-panel{
	padding: 2rem;
}
.fold .os-icon {
    position: absolute;
    right: 0px;
    top: -27px;
    cursor: pointer;
    font-weight: bold;
}
.fold {
    position: relative;
}
fieldset {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.fold legend {
    width: 90%;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.mandatory {
    color: red;
}
.map-edit-panel .device, .map-edit-panel .point, .map-edit-panel .remark{
    cursor: move;
}

.device, .point, .remark{
    z-index: 2;
    position: absolute;
    font-weight: bold;
}

.select-mark {
    background: #fff;
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid #aaa;
    border-radius: 50%;
    display: none;
    z-index: 100;
}
.remark{
	width: 270px;
    padding: 10px;
    position: absolute;
    border: 1px solid #aaa;
    display: flex;
    margin-bottom: 0px;
    z-index: 2;
}
.remark .title{
	position: absolute;
    top: -12px;
    background: #fff;
    padding: 0 10px 0 5px;
    border-radius: 5px;
}
.device-panel{
	text-align: center;
	width: 150px;
	background: white;
	padding: 0;
}
.device, .remark{
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
    box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
}
.remark .device-panel{
	width: 60%;
    margin-right: 5%;
    text-align: center;
}
.remark .right{
	width: 35%;
	text-align: center;
}
.device .device-name{
	font-size: larger;
}
.device .device-name.has-adjusting{
	line-height: 20px !important;
}
.device-panel .device-name, .device-panel .measure-date{
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-left: 1px solid #aaa;
}
.device-panel .bottom{
	display: flex;
	text-align: center;
}
.device-panel .bottom .hourly{
	width: 50%;
	border: 1px solid #aaa;
	color: #9966ff;
}
.device-panel .bottom .ten-minute{
	width: 50%;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
	color: #ff6384;
}
.remark .note{
	text-align: left;
	font-size: 0.8rem;
}
.remark .no-rain, .remark .has-rain, .remark .warning, .remark .danger{
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}
.remark .danger, .device-panel .danger{
	border-bottom: 1px solid #aaa;
	background: red;
	color: white;
}
.remark .danger, .device-panel .danger .adjusting-text{
	color: white;
}
.remark .warning, .device-panel .warning{
	background: yellow;
}
.remark .has-rain, .device-panel .has-rain{
	background: cyan;
}
.element-wrapper .element-header:after{
	width: 120px;
}
#line_svg{
	position: absolute;
	z-index: 1;
}
#map_layout_image{
	position: absolute;
	z-index: 0;
}
.adjusting-text{
	font-size: 0.9rem;
	color: var(--primary);
}
#edit_param{
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 75px;
    z-index: 10;
    align-items: center;
    display: none;
}
#edit_param .fa-pen {
    font-size: 0.6rem;
    margin-right: 4px;
}
.btn .fa-pen{
	font-size: 0.8rem;
}
.form-group label{
	font-weight: bold;
}
.form-check .form-check-label{
	font-weight: initial !important;
}
.icon{
	margin-bottom: 5px;
}
.colored{
	color: var(--primary);
}
.badge{
	font-size: 0.9rem;
}
.view-map-panel .map-layout{
	margin: 0 auto;
}
.view-map-panel .device{
	cursor: pointer;
	-webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.view-map-panel .device:hover{
	-webkit-transform: translateY(-5px) scale(1.02);
    transform: translateY(-5px) scale(1.02);
    -webkit-box-shadow: 0px 5px 12px rgb(126 142 177 / 20%);
    box-shadow: 0px 5px 12px rgb(126 142 177 / 20%);
}
.table-detail td{
	color: var(--primary);
    font-size: 1.1rem;
}
.table-detail th{
	border-top: none;
}
.table-detail td, .table-detail th{
	text-align: center;
	padding: 0.1rem;
}
.sub-table{
	margin: 0 auto;
}
.modal-xl{
	max-width: 1280px !important;
}
.chart-title{
	font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}
.chart-adjusting{
	color: red;
}
.col-form-label{
	display: flex;
  /* align-items: center; */
}
.chart-title .device-name{
	color: var(--primary);
}
.os-tabs-controls{
	margin-bottom: 1rem;
}
.rainfall-list-tr:hover{
	outline: 2px solid var(--primary);
}
.rainfall-list-tr.selected{
	background: #e2efff;
	color: #2A4E7F;
}
.rainfall-list-tr{
	cursor: pointer;
}
.os-tabs-controls.os-tabs-complex .nav-item .nav-link.active .tab-label {
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--primary);
}
#alarm_count{
	font-weight: bold;
	vertical-align: super;
	background: red;
	color: white;
	border-radius: 50%;
    padding: 2px 6px 4px 6px;
}
.chart-remark{
	text-align: left;
    font-size: 0.9rem;
    margin-bottom: 30px;
    color: #999;
}

.login-logo {
	color: var(--primary);
	margin-top: 40px;
	font-weight: bold;
}
.logged-user-i .logged-user-avatar-info{
	display: flex;
	color: white;
}

.logged-user-i .logged-user-avatar-info .logged-user-info-w{
	margin-left: 15px;
}
.logged-user-i .logged-user-avatar-info .logged-user-role{
	color: white;
}
.top-bar .logged-user-w .logged-user-menu ul li a{
	min-width: 180px;
}
.error-404-area h1 {
	font-size: 70px;
	color: var(--primary);
}
.error-404-area {
	max-width: 60%;
	margin: 5% auto;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.error-404-area h2{
	margin-top: 20px;
	margin-bottom: 40px;
}
#drop_file_area, #drop_sound_file_area {
	height: 40px;
	border: 2px dashed #ccc;
	line-height: 35px;
	text-align: center;
	margin-bottom: 15px;
	box-shadow: 0 0.15rem 1rem 0 rgb(58 59 69 / 15%) !important;
	cursor: pointer;
}
.form-file {
	width: 100%;
}
#event_image_area, #alert_sound_rea{
	margin-bottom: 10px;
}
#event_image_area img, #alert_image_area img{
	height: 100px;
	border: 1px solid #aaa;
}
#alert_image_area .item, #alert_sound_area .item{
	position: relative;
}
#alert_image_area .item .delete-image, #alert_sound_area .item .delete-sound,
#icon_image_area .delete-image{
	position: absolute;
	bottom: 10px;
	margin-left: 10px;
}
#icon_image_area{
	position: relative;
}
.img-select2 {
	width: 18px;
	vertical-align: text-bottom;
}
.icon-list{
	overflow-y: auto;
	max-height: 300px;
}
.user-list{
	overflow-y: auto;
	max-height: 680px;
}
.icon-tr{
	cursor: pointer;
}
.info-window .left{
	width: 140px;
}
.info-window .title{
	color: var(--pink);
	font-size: large;
	margin-bottom: 10px;
	text-align: center;
}
.info-window .item{
	display: flex;
	margin-bottom: 10px;
}
.gm-style .gm-style-iw-c{
	-webkit-box-shadow: 0 2px 40px 0 rgb(43 132 210 / 41%);
	box-shadow: 0 2px 40px 0 rgb(43 132 210 / 41%);
}
.info-window .footer{
	justify-content: space-between;
  display: flex;
	border-top: 1px solid #ddd;
  padding-top: 5px;
}
.info-window .description{
	margin-top: 10px;
}
.no-event-id{
	position: absolute;
	text-align: center;
	z-index: 1;
}
#icon_image_img{
	height: 100px;
	border: 1px solid #ddd;
	margin-bottom: 5px;
}
.direction svg {
  height: 220px;
  width: 220px;
	border: 1px solid #ddd;
}
.direction svg .line {
  fill: transparent;
  stroke: var(--primary);
}
.direction svg text{
	font-size: 10px;
	font-weight: bold;
}
.direction svg .fill{
	fill: transparent;
}
.direction svg .fill.selected{
	fill: blue;
	opacity: 0.1;
}
.direction .svg2 path{
  fill: transparent;
	stroke: var(--primary);
}
img.charging{
	width: 18px;
	margin-left: 10px;
}