/* sidebar header with login box  */
.sidebar_header {
	display: flex; align-items: center; justify-content: space-between; padding-right: 5px;
}

.sidebar_header  > h1 {	
	margin: 0; font-size: 1.5em; white-space: nowrap;
}





.login_box {
  visibility: hidden;
  display: none;
  margin: 0;
  padding: 0;
  color: black;
  border: white solid 1px;
  border-radius: 10px;
  position: relative;
  font-size: 0.9em;     
  line-height: 1.3em;  
}
.login_content {

  padding: 25px 6px 6px 9px;
  border-radius: 4px;
  color: white;
  font-weight: normal;
}

.login_close {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 0.8em;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  color:white;
}

.login_close:hover { background-color: white; color:black;}
.login_button {
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 4px 8px;
  font-size: 0.9em;
}



.login_icon {
    width: 36px;
    height: 36px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-left: 10px;
    cursor: pointer;
}

.login_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


.login_img.login_black {  display: none;}
.login_icon:hover .login_black {  display: block;}
.login_frame:hover .login_black {  display: block;}




/* cookie box */
.cookie_overlay  {z-index:199; position:absolute; margin:0; height:100%; width:100%; background-color: white; opacity:0.8; }
.cookie_frame {z-index:200; position:absolute; margin:0; height:100%; width:100%; padding:20px; }
.cookie_box {z-index:200; background-color:#eee; margin-top:150px;  border:darkblue solid 4px; border-radius:15px;display: inline-block; padding:20px;}
.cookie_button {background-color: darkblue;color:white; }







.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rotate-button img {
    height: 30px;
    width: 30px;
    display: block;
	
}

.order_arrow {
	margin:10px;
	display: inline-block;
	background-color:blue;
	border-radius:20px;
	width:30px;
	height:30px;
	cursor:pointer;
	color:lavender;
	font-weight:bold;
	font-size:1.5em;
	font-style:normal;
}
.order_arrow:hover {
	background-color:darkgreen;
}




.text_published  {margin-left:0.5em; color:darkviolet;}

.information {
	padding:5px; background-color:darkblue; color:white; border-radius:5px;
}
.warning {
	padding:5px; background-color:darkred; color:yellow; border-radius:5px;
}
.confirmation{
	padding:5px; background-color:darkgreen; color:white; border-radius:5px;
}

.link {cursor:pointer; color:blue;}
.link_blue {cursor:pointer; color:blue;}
.link_white {cursor:pointer; color:white;}

.link:hover {text-decoration:underline;}
.link_blue:hover {text-decoration:underline;}
.link_white:hover {text-decoration:underline;}

.inactive {color:white; font-weight:bold; background-color:darkred;  padding-bottom:0.2em;  padding-top:0.2em; padding-left:0.4em;  padding-right:0.4em; float:right; margin-right: 2em; border-radius:12px;}






.table_list {  padding:1em; }
.table_form { border: solid 1px blue;  padding:1em; }
.list_content_frame { border: solid 1px blue;  padding:1em; }
.table_list > div {text-align:left;  display: inline-block; }

.checkboxframe {
	padding: 0.6em;
	min-width:150px; 
	border-radius: 3px;
	width:100%;
	background-color: white;
}
.checkboxframe  hr {background-color:black;  border: 0; clear:both; display:block;  width: 100%;  height: 1px;}


input[type=checkbox] {margin-top:0.0em}
input[type=list]{
	padding: 0.5em;
	min-width:150px; 
	width:100%;
	border-radius: 3px;
	background-color: white;
}
input[type=text], input[type=password], input[type=datetime-local], input[type=date], input[type=number], select {
	padding: 0.5em;
	min-width:150px; 
	border-radius: 3px;
	width:100%;
	background-color:white;
}
textarea {
	padding: 0.5em;
	border-radius: 3px;
	width:100%;
	height:150px;
	background-color: white;	
	resize: vertical;
}
input::file-selector-button , input[type=button], input[type=submit], input[type=reset]{   
	font-weight: bold;
    padding: 0.3em;
    border: thin solid grey;
    border-radius: 5px;
	min-width:200px; 
	vertical-align:center;
	cursor:pointer;
}




/* Upload Image button */
.upload-container {
	display: flex;
	align-items: center;
	justify-content: center; 
	width: 600px;
	cursor: pointer;
	position: relative;
	padding: 10px;
	gap: 10px;
}
.upload-icon-wrapper {
	position: relative;
	width: 30px;
	height: 30px;
}
.upload-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	transition: opacity 0.0s ease;
}
.blue-icon {
	z-index: 1;
	opacity: 1;
}
.black-icon {
	opacity: 0;
}
.upload-container:hover .blue-icon {
	opacity: 0;
}
.upload-container:hover .black-icon {
	opacity: 1;
}
.upload-container:hover .link {
	text-decoration: underline;
	color:black;
}

.coordinates-map-result {height: 400px; width:100%; margin-top: 10px; border:2px solid green;}
.coordinates-map {height: 400px; width:100%;  margin-top: 10px; border:2px solid green;}
.coordinates-container {    display: flex;  flex-wrap: wrap;   gap: 2em; background-color:white; padding:10px;}
.coordinates-group {display: flex;    align-items: center;  gap: 2em;    flex: 1;   min-width: 320px;}
.coordinates-group label {
    width: 50px; 
    flex-shrink: 0; 
    text-align: right;
}
.coordinates-group input[type="number"] {
    flex: 1; 
    min-width: 250px; 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
}



.included_thumbnail {
border: solid darkgreen 3px;
background-color:lightgreen;
}
.included_image {
border: solid darkgreen 3px;
background-color:lightgreen;
}
.not_included_image{
 border: solid darkred 3px; 
 background-color:red;
}
.not_included_thumbnail{
 border: solid darkred 3px; 
 background-color:red;
}
 .image_box_background:hover {background-color:rgba(0,0,255,0.5); color:white;  }