/* licenced under EUPL, https://eupl.eu/1.2/nl/*/
/*.flexdetail .outer {*/
/*	margin-left:30px;*/
/*	margin-top:10px;*/
/*	float: left !important;*/
/*}*/

.flexdetail .modal_label {
	float:left;
	background-color: #b6cee6;
	color:#08418c;
	font-size:12px;
	font-weight:700;
	width:90px;
	margin-bottom:3px;
	padding-top:5px;
	padding-left:5px;
}

.flexdetail .veld_label {
  color: #0066cc;
  margin-bottom: 1px;
}

.flexdetail .veld_label.boolean, .flexdetail .boolean_input{
	float:left;
	margin-right: 10px;
}

.flexdetail .modal_veld {
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.flexdetail .modal_data_block {
  width: 630px;
  float: left;
  background-color: #e6e6e6;
  margin-bottom: 3px;
  padding-left: 10px;
  padding-top: 5px;
  overflow: hidden !important;
}

.flexdetail .image_wrapper {
	margin-top:6px;
}

.flexdetail .text_div .veld_label{
	min-height: 15px;
	min-width: 30px;
	margin-top: 10px;
}

.boolean_plus_span {
	margin-left:3px;
	margin-right:10px;
}
/********************************hyperlink********************************/
.hyperlink{
	cursor:pointer;
	text-decoration: underline;
}
/********************************radio************************************/
.radioOptionLine input{
	float:left;
	margin-top:2px;
}
.radioOption{
	margin-left:15px;
	margin-top:2px;
}
/*********************************icons***********************************/
/*****************nieuw flexbox*******************************************/
.detail_modal_icons {
	display: flex;
	flex-direction: row;
	height: 20px;
	gap: 0.1rem; 			/*margin-right weg flexshared.css :216*/
    float: left;
    margin-top: 4px;
    margin-left: 30px;
    width: 300px;
    cursor: pointer;
    /*height:23px;*/
}
/*********************************error message***********************************/
.flexdetail .error_message {
	float:left;
	color:red;
	width:500px;
	text-align:left;
	margin-left:27px;
	margin-top:0px !important;
}
/*******************************flex memo****************************************/
#flex_memo #memo_modal_body {
	margin-left:30px;
}

.memo_buttons {
	float:right;
	margin-right:35px;
}

.memo_buttons button{
	float:right;
	margin-top:5px;
	height: 21px !important;
}

.memo_buttons button.sluit_scherm, .memo_buttons button.opslaan_button{
	margin-right:7px;
}

.CodeMirror-wrap{
	border: 1px solid #ccc;
	//fixme this is for darkmode, but it needs a light color and disabled color, which it does not have now.
	/*background-color: var(--main-codemirror-bg-wrapper-color) !important;
	color: var(--main-txt-black) !important;*/
}

/*.character_counter{*/
/*	width: 100%;*/
/*	height: 15px;*/
/*}*/
/*************************************versie info**************************/
.flexdetail .versie_info {
	margin-right:-50px;
	margin-top:35px;
	margin-bottom:5px;
	height:15px;
	width:200px;
	text-align:right;
}
/**********************************flexballoon**********************************/
#flex_balloon {
	/*width:300px !important;*/
	/*height:80px !important;*/
}

.balloon_wrapper{
	padding:20px;
	/*width:260px;*/
	/*height:40px;*/
}

 #flex_balloon textarea {
	/*width:260px;*/
	/*height:40px;*/
	line-height:20px;
	overflow-y: hidden;
}

.radio_button_area {
	margin-top:5px;
}

.radio_button_area input{
	margin-right:5px;
}

/************************************edit switch (toggle)****************************************/

.edit_switch input[type="checkbox"] {
	display: none;
}

.edit_switch_checkbox {
	visibility: hidden;
}

.edit_switch label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 42px;
	height: 22px;
	background: var(--main-accent-clr);
	border-radius: 20px;
	/*border: 2px solid var(--main-accent-clr);*/
	cursor: pointer;
	padding: 0;
	position: relative;
	user-select: none;
	box-sizing: border-box;
}

/*slider ball */
.edit_switch .edit-switch-slider {
	position: absolute;
	top: 50%;
	left: -3px;
	width: 25px;
	height: 25px;
	background: white;
	border: 1px solid var(--main-accent-clr);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: left 0.4s ease,
	opacity 0.4s ease,
	transform 0.4s ease;
	pointer-events: none;
	z-index: 10;
	will-change: left, transform;
	background-clip: padding-box;
}

/*slider ball moves right when checked */
.edit_switch input:checked + label .edit-switch-slider {
	left: calc(100% - 23px);
}

.edit_switch label .receiver.icon {
	width: 19px;
	height: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
			opacity 0.2s,
			fill 0.2s,
			transform 0.2s;
	fill:  var(--main-accent-clr);
	z-index: 11;
}

.edit_switch label .switch_off {
	margin-right: 1px;
}

.edit_switch label .switch_on svg,
.edit_switch label .switch_off svg {
	transform: scale(1);
	transition: transform 0.2s ease, fill 0.2s ease;
}

/*unchecked */
.edit_switch input:not(:checked) + label {
	background-color: var(--main-tile-clr);
}

.edit_switch input:not(:checked) + label .switch_on svg {
	margin: 0 0 0 1px;
	transform: scale(1);
}

.edit_switch input:not(:checked) + label .switch_off svg {
	opacity: 0.8;
	margin: 0 0 0 1px;
	fill: transparent;
	transform: scale(0.80);
}

/*checked*/
.edit_switch input:checked + label .switch_on svg {
	opacity: 0.8;
	margin: 0 0 0 3px;;
	fill: transparent;
	transform: scale(0.80);
}

.edit_switch input:checked + label .switch_off svg {
	margin: 0 0 0 1px;
	transform: scale(1);
}

/*disabled*/
.edit_switch input:disabled + label {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	background-color: #e6e6e6;
}

.edit_switch input:disabled + label svg {
	fill: #b0b0b0 !important;
	transform: scale(0.95) !important;
	opacity: 0.7;
}

.edit_switch input:disabled + label .edit-switch-slider {
	border: 1px solid #b0b0b0 !important;
}

.edit-switch-slider {
	display: none; /*default hidden, show with js*/
}