:root {
  --bg1: rgb(236, 235, 213);
  --bg2: rgb(202, 222, 226);
  --bg3: rgb(255, 255, 255);
 
  --darkbtn: #222;
  --darkbtnhover: #0F0;

  --redbtn: rgb(226, 0, 26);
  --redbtnhover: #222;
  --greenbtn: #0F0;
  --greenbtnhover: rgb(226, 0, 26);
  --yellowbtn: #0FF;
  --yellowbtnhover: rgb(226, 0, 26);
  --bluebtn: #00F;
  --bluebtnhover: rgb(226, 0, 26);
  --menubtncolor:#fff;
  --menubtnbg:#444;
  --menubtnhovercolor:#fff;
  --menubtnhoverbg:rgb(226, 0, 26);

  --bgoccupied:#a0b888;
  --bgunpublished:#f5945c;
  --bgyou:#ffab30;
  --bgyouhover:#ffdd80;
  --bgavailable:#5c903a;
  --bgavailablecolor: #b0d894;
  --bgavailablehover:#6ca04a;
  --logout:#e20019;
  --logouthover:#222;
  --menu:#222;
  --menuhover:#e20019;
  --holiday: #ffc4f8;

  --neutralbg:rgb(202, 222, 226, 0.5 );
  --dangerbg :rgb(226, 0, 26);
  --doitbg   :#5c903a; /*rgb(92, 144, 58,  0.5 );  */
  --lightdoit: #7ca85a;  /*rgb(202, 222, 226);    */
/*  #5c903a;*/
  --neutralbghover:rgb(212, 232, 236);
  --dangerbghover :rgb(236, 0, 56);
  --doitbghover   :#6ca04a;

  --bginactive: #ddd;
  --colorinactive: #aaa;



  --darkgrey: #222;
  --midgrey: #777;
  --lightgrey: #e0e0e0;

  --placeholder: #ccc; /* for input fields */

	font-size: 10px;

}

.tar{
	text-align: right;
}
body {
	font-family: arial, Helvetica, sans-serif;
	width: 100vw;
/*	height:100vh;*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-content: center;
	align-content: center;
	margin: 0;
} 
h1 {
	font-size: 2rem;
  margin: 0.5rem 0;
}

p {
    display: block;
    margin: 0.5rem 0;
}

pre {
	margin: 0;
}
input 
{
    font-size: 2rem;
}


::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--placeholder);
}
::placeholder {
  color: var(--placeholder);
}

.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.clearboth {
	clear: both;
}



.vertical-center {
  position: absolute;
  top: 40%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#content_panel {
	width:95vw;
	min-width: 500px;
	height:100vh;
	position: relative;
}

#content_panel #dialog {
	font-size: 3rem;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable {
		background: var(--lightgrey) !important;
    border: 4px solid var(--darkgrey);
}

.ui-dialog-titlebar.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix  {
		background:var(--darkgrey) !important;
		padding: 0;
 }
.ui-dialog-titlebar-close {
	display: none;
}
.ui-dialog-title {    
		font-size: 2.8rem !important;
    color: var(--lightgrey) !important;
    background: var(--darkgrey) !important;
    border: 4px solid var(--darkgrey);
    margin-bottom: 2rem;
    padding-left: 2rem;
    line-height: 4rem;
 }
#dialog.ui-dialog-content.ui-widget-content {
		font-size: 2.8rem !important;
		padding: 1rem 1rem 0 1rem;
}

.clickable {
    vertical-align: middle;
    text-align: center;
    height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    width: 24%;
    line-height: 3rem;
}
.clickable.noclick {
	min-width:110px;
}
.clickable.menu {
	color: var(--menubtncolor);
	background-color: var(--menubtnbg);
	color: var(--lightgrey);
	width: 100px;
}
.clickable.action {
	color: var(--actionbtncolor);
	width: 100%;
	margin: auto;
	font-size: 1.5rem;
	@media screen and (max-width:800px){
		font-size: 2rem;
	}
	@media screen and (max-width:700px){
		font-size: 1.8rem;
	}
	@media screen and (max-width:600px){
		font-size: 1.6rem;
	}
	@media screen and (max-width:500px){
		font-size: 1.5rem;
	}
}

.vols-tablecell.editbtncell {
	background-color: var(--lightdoit);
}
.clickable.action.editbtn {
	float: left;
	width: 20%;
}
#recordselector {
	float: right;
	width: 75%;
}
.clickable.action.neutralbg {
	background-color: var(--neutralbg);
}
.clickable.action.doitbg {
	background-color: var(--doitbg);
	color: var(--menubtncolor);
	font-weight: 500;
}
.clickable.action.dangerbg {
	background-color: var(--dangerbg);
}
.clickable.action.neutralbg:hover {
	cursor:pointer;
	background-color: var(--neutralbghover);
}
.clickable.action.doitbg:hover {
	cursor:pointer;
	background-color: var(--doitbghover);
}
.clickable.action.dangerbg:hover {
	cursor:pointer;
	background-color: var(--dangerbghover);
}
#editcontainer .clickable.action.inactive, #menubutton.inactive,.clickable.action.doitbg.inactive {
		pointer-events: none;
		background-color: var(--bginactive);
    color: var(--colorinactive);
}
.clickable.menu.narrow{
	width: 100px;
}
.clickable.menu:not(.nouppercase) {
	text-transform: uppercase;
}
.clickable.menu:hover {
	cursor: pointer;
	color: var(--menubtnhovercolor);
	background-color: var(--menubtnhoverbg);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

#menucontainer{
    background: var(--bg1) !important;
    border: 4px solid var(--darkgrey);

    z-index: 2; 
    
	position: absolute;
    left:  calc(102% - 920px);
    top: 0;
    
	height: auto;
    width: 96%;
    max-width: 920px;
    min-width: 350px;

    margin: 0 auto;
    overflow: auto; 


    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
#menucontainer.hide,#screen.hide{
	display: none;
}
#menucontainer.show, #screen.show{
	display: flex;
}
#menucontainer #menucluster0,
#menucontainer #menucluster1,
#menucontainer #menucluster2,
#menucontainer #menucluster3,
#menucontainer #menucluster4{
    width: 100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
}
#mainmenucontainer #backoption , #cfgmenucontainer #backoption{
	background-color: var(--bgavailable);
}
#mainmenucontainer #backoption:hover , #cfgmenucontainer #backoption:hover {
	background-color: var(--logouthover);
}
#menucontainer .clickable.menuoption{
    background-color: #444;
    color: var(--menubtncolor);
    border: 1px solid #444;
    padding: 0.8rem 0.4rem;
    margin: 0.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    min-width: 80px;
    width: 18%;
/*    line-height: 1.3em;*/

    display: flex;
    justify-content: center;
    align-items: center;
/*    height: 200px;*/
/*    border: 3px solid green; */
}
#menucontainer .clickable.menuoption p {
    padding: 0;
    margin: 0;
}
#menucontainer .clickable.menuoption:hover{
	background-color: var(--bgyouhover);
	color: var(--darkgrey);
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 100ms linear;
  cursor : pointer;
}
@media screen and (max-width: 960px)  { 
    #menucontainer{
        left: 10px;
    }
}
@media screen and (max-width: 540px)  { 
    #menucontainer #menucluster0,
    #menucontainer #menucluster1,
    #menucontainer #menucluster2{
        flex-wrap: wrap;
    }
}