body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  color: black;
  }

.page_container {
   margin-left: 20px;
  /*font-family: "Playfair Display";*/
   
  font-size: 12pt;
}

.guests_scroll {
border: none;
padding: 5px;
 
width:800px;
height: 600px;
overflow: scroll;
}


.transactions_report_dates_scroll {
border: none;
position:relative; left:175px;
padding: 5px;
 
width:900px;
height: 300px;
overflow: scroll;
}

.sales_report_dates_scroll {
border: none;
position:relative; left:175px;
padding: 5px;
 
width:800px;
height: 300px;
overflow: scroll;
}
a.tooltip {
   position: relative;
   text-decoration: none;
   color: black;
}

a.tooltip span {
   display: none;
}

a.tooltip:hover span {
   position: absolute;
   top: 40px;
   font-size: 10px;
   left: 0px;
   display: block;
   width: 250px;
   color: black;
   background-color: #FFFF40;
   border: 1px solid black;
   padding: 5px;
}
 
.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
{ font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #000; 
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 299px;}

.form_settings select
{ width: 310px;}

.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}
.button-success,
.button-error,
.button-warning,
.button-secondary,
.button-yellow,
.button-gray,
.button-clear,
.button-pending,
.button-paid,
.button-deposit,
.button-closed,
.button-cancelled,
.button-refuned {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65);
    /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60);
    /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20);
    /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221);
    /* this is a light blue */
}
.button-yellow {
    background: rgb(249, 231, 159);
    color:black;
  
}
.button-gray {
    background: #AFADAD ;
    color:black;
  
}
.button-clear {
 
    color:black;
  
}
.button-pending {
    background: #ea8005;
    color:black;
}

.button-paid {
    background: #aad376;
    color:black;
}
.button-deposit {
    background: #23bba7;
    color:black;
}
.button-closed {
    background: #55007c;
    color:white;
}
.button-cancelled {
    background: #bb2144;
    color:black;
}
.button-refunded {
    background: #55007c;
    color:black;
}
 

.calendar_container {
  margin-left: 10px;
  color:black;
  background-color: #B8ECF8;

}

.calendar_list {
  margin-left: 20px;
}

 

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}

.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  /*top:50%;
  transform:translateY(-50%);
  */
  top: -40px;
  
  /* move to right */
  /*left:100%;*/
  left: -10px;
  margin-left:5px; /* and add a small left margin */

  
  /* basic styles */
  width:250px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
  font-size: 9pt;

  display:none; /* hide by default */
}

.tooltip:hover:before {
  display:block;
}


.calendar_green_button {
  background-color: #006400; /* Dark Green */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:50px;
}



.calendar_red_button {
  background-color: #ff0000; /* Dark Green */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:50px;
}

.active_red_button {
  background-color: #ff0000; /* red */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:55px;
}

.active_green_button {
  background-color: #006400; /* Dark Green */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:55px;
}
.tiny_red_button {
  background-color: #ff0000; /* red */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:25px;
}

.tiny_green_button {
  background-color: #006400; /* Dark Green */
  border: none;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 1px;
  cursor: pointer;
  -webkit-border-radius: 4;  -moz-border-radius: 4;  border-radius: 4px;
  width:25px;
}