body {
  margin: 0px;
}
/*
.card {
	margin: 10px;
}
.card-header button {
	border: none;
	background: transparent;
	font-size: 1.5em;
}

.w2ui-grid-records {
  overflow-x: scroll;
}



*/
.card-content {
	padding: 8px;
	padding: 0;
}
.ui-datepicker {
	border: 1px solid #333;
	border-radius: 0px;
	background: #fff;
}
.ui-datepicker .ui-datepicker-header {
	border: none;
	border-radius: 0px;
	margin-top: -0.2em;
	margin-left: -0.2em;
	margin-right: -0.2em;
}
.ui-datepicker-header span {
	color: #fff;
}
.ui-datepicker-header .ui-state-hover {
	border: none;
	background: transparent;
}
.ui-datepicker td a {
	border: 1px solid transparent !important;
}
.ui-datepicker td a:not(.ui-state-active) {
	background: transparent;
}
.ui-datepicker td a:not(.ui-state-active):hover {
	background: #e6ffe6;
}
.ui-state-disabled .ui-state-default {
	border: 1px solid transparent !important;
}

.data_chart {
	width:100%;
	height:100%;
	box-sizing:border-box;
	background: #ffffff;
}

.imabe_body {
	position: relative;
	width: 100%;
	height: calc(100% - 5px);
//	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 5px;
}

.image_label {
	position: absolute;
}

.ion-icon {
	font-size: 1.5rem;
	margin-top: -3px;
}

.button .ion-icon {
	font-size: 1.2rem;
	margin-top: -5px;
}

.grid_toolbar, .grid_search {
	width:100%;
	padding: 4px;
	display: flex;
	flex-wrap: wrap;
}

input[type="file"] {
  display: none;
}

.ui.form .form_body {
	max-height: calc(100vh - 120px);
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 5px;
	padding: 5px;
	padding-bottom: 100px;
}


.ui.form .form_button .button {
	width: 150px;
	max-width: 40%;
}

.ui.form .form_button .button:first-child {
	margin-right: 3em;
}
.ui.sidebar .menu .item {
	margin-left: 1em;
}

#box_filter input[type="text"], #box_filter input[type="number"]{
	min-width:8em;
}

.single_segments {
	width: calc(100% - 20px); 
	margin: 10px auto; 
}

.single_segments .ui.form {
	margin: 10px 10px; 
}

.full_grid {
	width:100%;
	min-height: 350px;
}
.button_area>.negative{
	margin-left: 15px;
}
.w2ui-reset.w2ui-grid {
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

#popup_main .w2ui-col-header {
    font-size:22px;
}

.ui.dimmer {
	max-width: 100vw;
	max-height: 100vh;
}

.ui.dimmer.modals {
	z-index: 1200;
}

.view_panel .ui.compact.button {
	box-shadow:none !important;
}

.label_box {
	height:calc(100% - 20px);
	text-align: right;
	display:flex;
	align-items: baseline;
	margin-top: 15px;
}

.ui.modal.edit_modal {
	position:fixed;
	width:100%;
	height:100%;
	z-index: 10;
	top:0;
	left:0;
	display: none;
}
.ui.modal.edit_modal .content{
	width: calc(100% - 10px);
	max-width: 1200px;
}
.ui.modal.popup_area {
	position:fixed;
	width:100%;
	height:100%;
	z-index: 110;
	top:0;
	left:0;
	display: none;
}
.ui.modal.popup_area .content{
	width: calc(100% - 10px);
	max-width: 1200px;
}

.edit_modal h4.ui.header {
	padding-left: 10px;
	border-left: solid 6px #2185d0;
}

.table_page {
	display:flex;
	justify-content: center;
	margin-top: 6px;
}
.view_panel {
	margin:3px;
	padding-right:4px;
	overflow:hidden;
}

@media screen and (max-width: 699px) {
	.search_bar {
		width: 200px;
	}
	.grid_toolbar .ui.button.icon .button_text {
		display: none;
	}
	.grid_toolbar .ui.button.icon  {
		min-width: 3em;
		max-height: 3em;
		margin-right: 20px;
	}
	.button_area {
		margin-top: 5px;
		display: flex;
		flex-direction: row;
	}
	.grid_toolbar {
		height:90px;
		flex-direction: column;
	}
	.grid_toolbar .search_bar,.grid_toolbar .search_bar > div {
		width: 100%;
	}
	.grid_toolbar .search_bar input[type="text"] {
		width: calc(100% - 4em);
	}
	.full_grid {
		height: calc(100% - 90px);
	}
	#base {
		margin-top: 50px;
		margin-left:2px;
		margin-right:2px;
		height: calc(100vh - 50px);
		width: calc(100vw - 5px);
	}
	#container_base {
		width: calc(100% - 10px);

	}
	.view_edit {
	//	display: none;
	}
	.view_container {
		padding: 2px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		min-height: 100px;
		margin-bottom: 5px;
		width: 100%;
	}
	.view_panel {
		overflow: auto;
		resize: vertical;
		max-width: 100%;
		min-width: 100%;
	}
	.edit_modal {
		padding-top: 50px;
		height: calc(100% - 50px);
	}
}
@media screen and (min-width: 700px) {
	.search_bar {
		width: 200px;
	}
	.grid_toolbar {
		/* height:50px; */
		flex-direction: row;
	}
	.button_area {
		margin-left: 20px;
	}
	.button_text {
		margin-left: 10px;
	}
	.full_grid {
		height: calc(100% - 50px);
	}
	.ui.form .form_body>.field, .ui.form #ctrl_config>.field {
		margin-left: 1em;
	}
	.ui.form .form_body>.fields, .ui.form #ctrl_config>.fields {
		margin-left: 0.5em;
	}
	.ui.form .form_body>.area {
		margin-left: 1em;
	}

	#mobile_menu {
		display: none;
	}
	#base {
		margin-left:5px;
		height: calc(100vh);
	}
	.pusher {
		width: calc(100vw - 255px);
	}
	.view_panel {
		overflow: auto;
		resize: both;
	}

	.view_container {
		padding: 5px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		min-height: 100px;
		margin-bottom: 10px;
		min-width: 100%;
	}
	.view_container.active {
		background: #ccc;
	}
}
@media screen and (max-width: 1049px) {
	.grid_toolbar .ui.button.icon .button_text {
		display: none;
	}
	.search_bar {
		width: 150px;
	}
}
@media screen and (max-width: 849px) {
	.grid_toolbar .ui.button.icon .button_text {
		display: none;
	}
	.search_bar {
		width: 110px;
	}
}
@media screen and (max-width: 699px) {
	.search_bar {
		width: 100%;
	}
}

.search_bar .ui.input {
	max-width: calc(100% - 20px);
}

#base {
	height: calc(100vh);
	overflow-y: scroll;
	box-sizing: border-box;
	padding: 0px;
}
#edit_form {
	padding-bottom: 100px; 
	overflow-y:scroll;
}
#base {
	padding-right:5px;
}
/* .pusher{
	background: #106eb4;
} */
.ui.modal.inverted {
  background: #666;
}
.ui.modal.inverted .content {
  background: #1b1c1d;
  margin: 10px;
  width: calc(100% - 40px);
}
.ui.inverted.form input:not([type]), .ui.inverted.form input[type=date], .ui.inverted.form input[type=datetime-local], .ui.inverted.form input[type=email], .ui.inverted.form input[type=file], .ui.inverted.form input[type=number], .ui.inverted.form input[type=password], .ui.inverted.form input[type=search], .ui.inverted.form input[type=tel], .ui.inverted.form input[type=text], .ui.inverted.form input[type=time], .ui.inverted.form input[type=url],
.ui.form .field>.selection.dropdown, .ui.inverted.form select  {
  background: #ddd !important;
}

#grid_search {
  background: #ddd !important;
}
.ui.form .field.error .input, .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .fields.error .field label {
    color: hotpink;
}