@charset "utf-8";

html, body{
    height: 100%;
}

body{
    overflow-x: hidden;
    overflow-y: overlay;
}


/*=======================================================*/
/*======================= main ==========================*/
/*=======================================================*/

#topbar{
    background-color: #4d4d4d;
    height: 41px;
    border-bottom: 1px solid black;
    display: table;
}

#screen{
    background-color: #A9A9A9;
    height: calc(100% - 122px);
    border-bottom: 1px solid black;
    position: relative;
}

#footer{
	box-sizing: border-box;
	position: absolute;
    background-color: grey;
    height: 81px;
    width: 100%;
    bottom: 0px;    
}

/*=======================================================*/
/*====================== topbar =========================*/
/*=======================================================*/

#menu {
	display: table-cell;
	box-sizing: border-box;
	border-right: 1px solid black;
	width: 0%;
	padding: 0px 5px;
	vertical-align: middle;
	//background: orange;
	z-index: 10000;
}

#switch {
    display: none;
    box-sizing: border-box;
    border-right: 1px solid black;
    vertical-align: middle;
}

#config_switch{
	cursor:pointer;
    border-style: none;
    object-fit: contain;
    width:  38px;
    height: 38px;
    background-image: url(img/refresh.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#config_switch.extra       { background-color: #f57900; }
#config_switch.extra:hover { background-color: #c26000; }
#config_switch.home        { background-color: #28A745; }
#config_switch.home:hover  { background-color: #218838; }



#groups {
    display: table-cell;
    width: 100%;
    //background-color: grey;
    //background: green;
}


#info {
    display: table-cell;
    box-sizing: border-box;
    border-left: 1px solid black;
    width: 0%;
    padding: 0px 5px;
    text-align: center;
    vertical-align: top;
    font-size: 85%;
}

#time {
	color: white;
	font-weight: 600;
    height: 50%;
    white-space: nowrap;
    width: 140px;
    cursor: pointer;
}

.past_date {
	background-color: #f57900;
}

#usr {	
	color: white;
	font-weight: 600;
	height: 50%;
}

/* Adjsut bootstrap styles */
.btn-menu {
    border-radius: 0px;
}

.dropdown-menu {
    border-radius: 0px;
    margin: 0
}

.dropdown-item:hover {
    background-color: #C0C0C0;
}

/*=======================================================*/
/*====================== grid ===========================*/
/*=======================================================*/


/** cell items order*/
.cellmenu-header { z-index: 990; }

/** map overlay everything... */
.ui-resizable-handle{ z-index: 1000; }


.cell_title_wrap{
	z-index: 1;
	display: flex;
	position: absolute;
	width: 100%;
    //top: 0px;
    //left: 0px;
    overflow: hidden;
}

.cell_title{
	z-index: 1;
    color: grey;    
    font-size: 100%;
    width: fit-content;
    white-space: pre;
}


.cell_img {
	height: 100%;
	width: 100%; 
	object-fit: contain;
	//background: orange;
}

.cell_map {
	//z-index: 50;
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    //background: green;
}

.cell_iframe {
    position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 99%;
	//background: red;
}

.cell_free {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    //background: purple;
}

.hide_cell_layer {
    display: none;
}

/** textarea */
.free_textarea{
	width: 100%;
    height: 100%;
}

.bottom-btn {
	position: absolute;
	bottom: 2px;
	left: 2px;
}

/** opnelayer zoom control*/
.ol-zoom {
	top: auto;
    bottom: .5em;
    left: .5em;
}



/*=======================================================*/
/*======================= grid menu =====================*/
/*=======================================================*/

#gridmenu {
    position: relative;
    top: 41px;
    background: #696969; 
    height: calc(100% - 122px);
    color: #fff;
    padding: 10px;

}
 
.handle-container{
    top: 0px;
    //bottom: 85%;
    left: -5px;
    height: 100%;
    position: absolute;
    cursor: pointer;
}
 
.handle{
    background: url("img/config_black.png") center no-repeat; 
    background-size: contain; 
    background-color: #696969;
    width:  5px;
    height: 100%;
}

.handle-container .handle{
    visibility: hidden;
}

.handle-container:hover .handle{
    visibility: visible;
}

.handle-container .handle-visible{
    visibility: visible;
}

.select-gridmenu {
    width: 50%;
    display: inline;
}







/*=======================================================*/
/*==================== leyend ===========================*/
/*=======================================================*/


.leyend-header {
	z-index: 2; /** Above cell_title*/
    position:absolute; 
    background: transparent; 
    padding: 2px;
    right: 0px; 
    top: 0px; 
    box-sizing: border-box;
}


.leyend-icon {
    background: url("img/legend_icon.png") center no-repeat;
    background-size:cover; 
    width: 40px;
    height: 40px; 
    cursor:pointer;
    visibility: hidden;
}


.leyend-expand {
	position: absolute;
	background: white;
	right: 0px;
    visibility: collapse;
    white-space: pre;
}


.leyend-header:hover .leyend-icon   {visibility: visible;}
.leyend-header:hover .leyend-expand {visibility: visible;}


/*=======================================================*/
/*==================== footer ===========================*/
/*=======================================================*/

/*==================== controls ===========================*/
#footer_content {
	width: 100%;
    height: 100%;
    display: table;
    //max-height: 100px;
    //padding-top: 1px;
}



/*==================== control menu button (right) =====================*/
#controlmenu {
	box-sizing: border-box;
	position: absolute;
    bottom: 0px;
    right: 0px;   
    height: 100%;
    width: 20px;
}

.handle-controlmenu{
    background: url("img/config_icon.png") center no-repeat; 
    background-size: contain; 
    background-color: black;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

#controlmenu:hover .handle-controlmenu{
    visibility: visible;
}


/*=======================================================*/
/*====================== large img ======================*/
/*=======================================================*/

#tdd {
    display: block;
}

#largeImgDiv {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	z-index: 1000;
	background: rgba(1,1,1,0.2);
	/** this 3 are for tdd */
    display: flex;
    align-items: center;
    justify-content: center;
}

#largeImg {
    height: 100%; 
    width: 100%;
    object-fit: contain; 
    z-index: 1000;
}

/*=======================================================*/
/*====================== catalogs  ======================*/
/*=======================================================*/




/*=======================================================*/
/*========================= map  ========================*/
/*=======================================================*/

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 5px;
  /*padding-top: 15px;*/
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 310px;
  /*max-width: 350px;*/
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
#popup-content {
	font-size: 80%;
}

#point_table {
	white-space: nowrap;
	width: 300px; 
	table-layout:fixed;
	overflow: hidden;
}

#point_table td {
    white-space: nowrap;
    width: 70px; 
    overflow: hidden;
    border: 1px solid black;
}

#point_table th  {
	border: 1px solid black;
}


/* Reduce OpenStreetMap attribution link in the bottom right corner */ 
.ol-attribution{
    font-size: 50%;
}

/*=======================================================*/
/*========================= cataplogo ===================*/
/*=======================================================*/

#cataplogo {
	overflow-y: hidden;
} 

#cataplogo iframe{
    width:  100%;
    height: 100%;
} 

.details{
    padding: .1rem .5rem;
}

.ui-dialog { z-index: 10001 !important ;}
/*.ui-front  { z-index: 10000 !important; }*/

/*=======================================================*/
/*========================= spinner =====================*/
/*=======================================================*/ 
  
#spinner{   
    position: fixed;
    top: 0;
    z-index: 10000;
    left: 50%;
    top: 50%;
    width:  30px;
    height: 30px;
    display: none;
    background: white; /*rgba(0,0,0,0.6);*/
}


/* .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}
.is-hide{
    display:none;
}   */

/*=======================================================*/
/*======================= text cell =====================*/
/*=======================================================*/ 


.save-textarea {
    opacity: 0.2;
}

.save-textarea:hover {
    opacity: 1.0;
}