html, body {
  overflow: hidden; /* don't do scrollbars */
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 12pt;
  height: 100%;
}

#popupDialog {
  position: fixed;
  z-index: 11;  /*Infront of new button*/
  width: 300px;
  background-color: white;
  border: 1px solid #dddddd;
  box-shadow: 10px 10px 5px grey;
  text-align:center;
}

#calCont {
  height: 80%;
}

#notifText {
  color: white;
  margin:7px;
}

.notification {
  position: fixed;
  overflow: hidden;
  z-index: 15;
  top:0;
  right:0;
  width:300px;
  height:0px;
  transition: 1s;
  background-color:#101010;
  display: flex;
    align-items: center;
}

.slider {
  overflow: hidden;
  z-index:5;
  position: fixed;
  top:0;
  left: 0;
  right:0;
  bottom: 100%;
  transition: bottom 1s;
  background-color:white;
  text-align:center;
  border-style: none none solid none;   /* Border style for top, right, bottom, left*/
}

.editBtn {
  height: 40px;
  width: 40px;
  background-color:#56A3C7;
  line-height: 45px;
  position: absolute;
  left: 15px;
  top:5px;
  font-size: 1.5em;
}
.editBtn:hover { background-color:#86BCD7;}

.saveBtn {
  position: absolute;
  top: 30px;
  left: 90px;
  height: 50px;
  width: 50px;
  background-color:  #28b463 ;
  line-height: 63px;
  font-size: 1.5em;
}
.saveBtn:hover { background-color:#58d68d; }


.backBtn {
  position: absolute;
  top: 30px;
  left: 20px;
  height: 50px;
  width: 50px;
  background-color:grey;
  line-height: 52px;
  font-size: 2em;
}

.backBtn:hover { background-color:#A0A0A0; }

.newBtn {
  height: 70px;
  width: 70px;
  background-color:#DB4437;
  line-height: 70px;
  position: fixed;
  z-index:10;
  bottom: 0px;
  right:30px;
  font-size: 2em;
}

.newBtn:hover { color:white; }

.roundBtn {
  border-radius:50%; 
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 5px 5px 10px grey;
  transition: background-color 0.3s, color 0.3s;
}

.closeBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
}

.closeBtn:hover { background-color: #86BCD7; }

.deleteBtn { 
  width:300px;
  height:40px;
  background-color:#FF284E;
  border-color: #F4B3BF;
  color:#FBE3E8;
  border-radius: 7px;
}

.restoreBtn { 
  width:300px;
  height:40px;
  background-color:#239B56;
  border-color: #196F3D;
  color:#FBFBFB;
  border-radius: 7px;
}

.controlsTable{
  position: fixed;
  z-index:4;  /* Just behind sliding drawer.*/
  bottom: 30px;
  right:130px;

}

.controlsTable td{
  padding: 0px 10px;
}

.analyticsBackBtn{
  position: fixed;
  top: 0px;
  left:20px;
}

.gotoDate{
font-size: 12pt;
}

.hoverMenu-content label:hover {background-color: #ddd;}
.hoverMenu:hover .hoverMenu-content {display: block;}		/*show the menu when the button is hovered, and add a hover colour to all items */
.hoverMenu:hover .hoverButton {background-color: #D1D1D1;}

.hoverMenu-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 200px;
    z-index: 4;
}

.roomMenu{ bottom:60px; right:290px;}
.dataMenu{ bottom:60px; right:406px;}


.hoverMenu-content label {
	border-radius: 5px;
	border: 2px solid black;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Colours in the room selection list */
.roomWarwick { background: #3498DB; }      /*Blue   52,152,219*/
.hoverMenu-content .roomWarwick:hover {background: #21618C;}
.roomStafford { background: #45B39D; }     /*Green  69,179,157*/
.hoverMenu-content .roomStafford:hover {background: #138D75;}
.roomTechnology { background-color: #E74C3C; } /*Red   231, 76, 60*/
.hoverMenu-content .roomTechnology:hover {background-color: #B03A2E;}
.roomMeeting { background-color: #F1C40F; } /*Yellow*/
.hoverMenu-content .roomMeeting:hover {background-color: #B7950B;}
.roomActivity { background-color: #B66CFF; } /*Purple*/
.hoverMenu-content .roomActivity:hover {background-color: #8000FF;}


/* All the possible combinations for barber colours to show room useage */

.roomW {background: #3498DB;}
.roomWS {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px);}
.roomWT {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px);}
.roomWM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #F1C40F 15px, #F1C40F 30px);}
.roomWST {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px);}
.roomWSM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #F1C40F 30px, #F1C40F 45px);}
.roomWTM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px);}
.roomWSTM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #F1C40F 45px, #F1C40F 60px);}
.roomS {background: #45B39D;}
.roomST {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px);}
.roomSM {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #F1C40F 15px, #F1C40F 30px);}
.roomSTM {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px);}
.roomT {background: #E74C3C;}
.roomTM {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #F1C40F 15px, #F1C40F 30px);}
.roomM {background: #F1C40F;}

.roomA {background: #B66CFF;}
.roomWA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #B66CFF 15px, #B66CFF 30px);}
.roomWSA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWTA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWSTA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWSMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWTMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWSTMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #F1C40F 45px, #F1C40F 60px, #B66CFF 60px, #B66CFF 75px);}
.roomSA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #B66CFF 15px, #B66CFF 30px);}
.roomSTA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #B66CFF 30px, #B66CFF 45px);}
.roomSMA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomSTMA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomTA {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #B66CFF 15px, #B66CFF 30px);}
.roomTMA {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomMA {background:repeating-linear-gradient(45deg, #F1C40F, #F1C40F 15px, #B66CFF 15px, #B66CFF 30px);}

.roomCancelled {background: #808080;}

.editorTable {
  margin: 0 auto;
  width:60%; 
  border-collapse:collapse;
  border:1px solid;
  box-shadow: 10px 10px 5px grey;
}
.editorTable td { border:1px solid;  padding: 15px;}


#dispTime { color:gray; font-size: smaller;}
#dispRepeat {font-size: smaller;}

input, select, .pseudoInput { 
background-color: #F1F1F1;
padding: 10px 10px;   /*For two values, this is top-bottom and left-right */
border: 2px solid black;
border-radius: 5px;
box-sizing: border-box;       /*Daft caveat needed so that sizes include border, margin and padding*/
}

#loginSlider {
	position: fixed;
	left:0;
	top: 0;
	bottom:0;
	right: 100%;
	background-color: rgba(255, 255, 255,0.85);
    vertical-align: middle;
	z-index: 12;
	overflow: hidden;
	transition: right 500ms ease;
}

.loginTable { 
margin-top: 100px;
border: 2px solid black;
border-radius: 10px;
border-spacing: 0;
vertical-align: middle;
}

.loginTable td {
	width: 300px;
	height: 50px;
	text-align: center;
}
.loginTable tr:first-child td{
	border-radius: 8px 8px 0 0;
	background-color: #3A87AD;
}

.loginTable tr:last-child td{
	border-radius: 0 0 8px 8px;
	background-color: white;
}

.loginButton { background-color: lime; cursor: pointer;}

.alignTable {margin: 0 auto; }
.alignTable td { text-align:left; border:none;}

.issueTable {
border: 1px solid black;
}
.issueTable td {
padding: 5px;
border: 1px solid black;
}