/*

210724, converting all px to vw
1vw = 19.2px
1px = 0.052vw
5px = 0.26vw
10px = 0.52vw
15px = 0.78vw
18px = 0.94vw
40px = 2.08vw


*/

/*******************************Calendar Colums *********************************/
div#column{
    float: left;
    width: 50%;
}
div#columnMobile{
    float: left;
    width: 100%;
}
div#columnMobile div.Mobile{
    height: 1vw;;
}
div#rowForColumns{
    margin-left: 3%;
}

div#rowLogIn{
    top: 0px;
    /* left: 10%; removed 210801 */
    /* width: 100%;  Changed 210801 */
    width: 97%;
    /* height: 40px */
    height: 2.08vw;
    margin-left: 3%;
    margin-bottom: 0.26vw;
}
div#rowLogIn div.box{	
    top: 0px;
    left: 7%;
    position: relative;
    width: 100%; 
    /* height: 40px */
    height: 2.08vw;   
 
}
div#rowLogIn div.boxForButton{	
    top: 0px;
    left: 0%;
    position: relative;
    width: auto;
    display: inline-block;
    /* height: 40px */
    height: 2.08vw;    
    /* padding-right: 5px; */
    padding-right: 0.26vw;
}
div#rowLogInFaq{
    top: 0px;
    left: 10%;
    width: 100%;
    height: auto;
    margin-left: 3%;
}


/*******************************Calendar Button *********************************/
a.myButtonWhite { /* Changed to vw 210724 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1vw;
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;
  
  color: #F5F5F5;
}
a.myButtonMobileWhite { /* Added 210731 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1.6vw;
  
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;
  
  color: #F5F5F5;
}
a.myButtonRed { /* Changed to vw 210724 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1vw;
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;
  
  color: red;
}
a.myButtonMobileRed { /* Added 210731 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1.6vw;
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;
  
  color: red;
}
a.myButtonGreen { /* Changed to vw 210724 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1vw;
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;

  color: limegreen;

}
a.myButtonMobileGreen { /* Added 210731 */
  width: fit-content;
  padding: 0.52vw;
  display: inline-block;
  font-size: 1.6vw;
  text-align: center;
  text-decoration: none;
  background: #787878;
  border: none;
  border-radius: 0.26vw; 
  margin-bottom: 0.52vw;

  color: limegreen;

}
a.myButtonRed:hover, a.myButtonGreen:hover, a.myButtonMobileRed:hover, a.myButtonMobileGreen:hover {
  color: white;
}

a.myBtnStack {
/*
  width:100;
  padding: 5px;
  font-size: 15px;
  color: white;
  //background: #5F9EA0;
  background: #787878;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;  
  
  //background-color: orange;
  //color: white;
  text-decoration: none;
  //display: inline-block;
  //padding: 6px 12px;
  //margin-bottom: 0;
  //font-size: 15px;
  // font-weight: normal;
  //line-height: 1.428571429;
  //text-align: center;
  //white-space: nowrap;
  //vertical-align: middle;
  cursor: pointer;
  //border: 1px solid transparent;
  //border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  */
}

a.myBtnStack:hover {
  background-color: GREEN;
}

a.bodyTextLinkFaq {
  color: #6699cc;
  font-weight: bold;
  text-decoration: none;
}
a.bodyTextLinkFaqTop {
  font-size: 1.0vw;
  color: #6699cc;
  font-weight: bold;
  text-decoration: none;
}
a.bodyTextLinkFaq:hover
{
  color: #cc0000;
  font-weight: bold;
}





/*******************************Calendar Top Navigation*********************************/
div#calendar{
  /* margin:0px auto; */
  padding:0px;
  width: 92%;
  font-family:Helvetica, "Times New Roman", Times, serif;
}

div#calendar div.box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height: 2.08vw;
    background-color: #787878; 
	/* next line is new! ,changed 210724*/
    border-radius: 0px 0px 0px 0px;	
}
div#calendar div.boxFaq{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:2.08vw;
    background-color: #6699cc; 
	  /* next line is new! */
    border-radius: 0px 0px 0px 0px;	
}
div#calendar div.header{
    line-height:2.08vw;  
    vertical-align:middle;
    position:absolute;
    left:2%;
    top:0px;
    /*width:582px; */
    width:96%;
    height:2.08vw;   
    text-align:center;
}


 
div#calendar div.header a.prev, div#calendar div.header a.next{ 
    position:absolute;
    top:0px;   
    height: 0.89vw;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
    font-size: 1.1vw; /* added 210724 */
}
 
div#calendar div.header span.title{
    color:#FFF;
    /* font-size: 18px; // Changed to 1.1vw 210724 */
    font-size:1.1vw;
}
 
 
div#calendar div.header a.prev{
    left:0px;
}
 
div#calendar div.header a.next{
    right:0px;
}
 

 
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{
    border:0.052vw solid #787878 ;
    border-top:none;
}
 
 
 
div#calendar ul.label{ /* changed 210723 */
    width: 96%; 
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:0px;
    margin-left: 2%;
}
div#calendar ul.labelTime, ul.labelTimeNew{
    width: 100%;
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:0px;
    margin-left: 1%;
}

div#calendar ul.labelTimeMobile{
    width: 100%;
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:0px;
    margin-left: 1%;
}
/*div#calendar ul.labelTimeMobile{
    width: 99%;
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:0px;
    margin-left: 1%;
}
*/
 
div#calendar ul.label li{
    margin:0px;
    padding:0px;
    margin-right:1%; /* Changed to %  210723; */
    /* margin-right:5px; */
    float:left;
    list-style-type:none;
    width:11%;  /* Changed from 11,75%  210723; */
    height:2.08vw;
    line-height:2.08vw;
    vertical-align:middle;
    text-align:center;
    color:#000;
    /* font-size: 15px; // Changed to 1vw 210723 */
    font-size: 0.78vw;
    background-color: transparent;
}

div#calendar ul.labelTime li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;  
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.04vw;
    line-height:1.3vw;
    vertical-align:middle;
    text-align:center;
    color:#000;
    /* font-size: 15px; // Changed to 0.78vw 210724 */
    font-size: 0.78vw;
    background-color: transparent;
} 
div#calendar ul.labelTimeNew li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;  
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.04vw;
    line-height:1.3vw;
    vertical-align:middle;
    text-align:center;
    color:#000;
    /* font-size: 15px; // Changed to 0.78vw 210724 */
    font-size: 0.78vw;
    background-color: transparent;
}

div#calendar ul.labelTimeMobile li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;  
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.04vw;
    line-height:1.3vw;
    vertical-align:middle;
    text-align:center;
    color:#000;
    /* font-size: 15px; // Changed to 0.78vw 210724 */
    font-size: 0.78vw;
    background-color: transparent;
}
/*
div#calendar ul.labelTimeMobile li{
    margin:0px;
    padding:0px;
    margin-right:0.25%;  
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.04vw;
    line-height:1.3vw;
    vertical-align:middle;
    text-align:center;
    color:#000;
    /* font-size: 15px; // Changed to 0.78vw 210724 */
  /*  font-size: 0.78vw;
    background-color: transparent; */
}
*/
div#calendar ul.labelTime:nth-child(2){
  height:1.3vw;
  line-height:0px;
  margin-top:0px;
}
div#calendar ul.labelTimeNew:nth-child(2){
  height:1.3vw;
  line-height:0px;
  margin-top:0px;
}
div#calendar ul.labelTimeMobile:nth-child(2){
  height:1.3vw;
  line-height:0px;
  margin-top:0px;
}


div#calendar ul.labelTime li:first-child{
  width: 22%;
}
div#calendar ul.labelTimeNew li:first-child{
  width: 11%;
}
div#calendar ul.labelTimeMobile li:first-child{
  width: 11%;
}
div#calendar ul.labelTimeMobile li:last-child{
  width: 11%;
}
/*div#calendar ul.labelTimeMobile li:first-child{
  width: 14%;
} */


 /*===========================
   <ul class="dates">
   ===========================*/
div#calendar ul.dates{
    float:left;
    margin: 0px;
    padding: 0px;
    width: 96%; /* added 210723 */
    /* margin-left: 5px; // changed to % 210723 */
    margin-left: 2%;
    margin-bottom: 0.26vw;
}
 
/** overall width = width+padding-right**/
 /*===========================
   <ul class="dates"><li>
   ===========================*/
div#calendar ul.dates li{
    margin:0px;
    padding:0px;
    /*margin-right:5px; // Changed to %  210723 */
    margin-right:1%;
    margin-top: 0.26vw;
    line-height:4.17vw;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: 11%;  /* Changed from 11,75%  210723 */
    height:4.17vw;
    /* font-size:25px;  /* Changed 210723 */
    font-size:1.3vw;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}

/*===========================
   <ul class="time">
  ===========================*/
div#calendar ul.time, ul.timeNew{
    width: 100%;
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 1%;
    margin-bottom: 0.26vw;
}
div#calendar ul.timeMobile{
    width: 100%;
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 1%;
    margin-bottom: 0.26vw;
}
 
/*===========================
   <ul class="time"><li>
  ===========================*/
/** overall width = width+padding-right**/
div#calendar ul.time li, ul.timeNew li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;
    margin-top: 0.1vw;
    line-height:1.3vw;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.3vw;
    font-size:0.78vw;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}
div#calendar ul.timeMobile li{
    margin:0px;
    padding:0px;
    margin-right:0.25%;
    margin-top: 0.1vw;
    line-height:1.3vw;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: 10%;
    height:1.3vw;
    font-size:0.78vw;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}

div#calendar ul.time li:first-child{
    width: 22%;
}
div#calendar ul.timeNew li:first-child, ul.timeNew li:nth-child(9){
    width: 11%;
}
/*div#calendar ul.timeNew li:nth-child(9){
    width: 11%;
}*/

div#calendar ul.timeMobile li:first-child{
    width: 11%;
}
div#calendar ul.timeMobile li:last-child{
    width: 11%;
}
/*div#calendar ul.timeMobile li:first-child{
    width: 14%;
} */
div#calendar ul.time li.occupied{
    background-color: #FF0000;
}
div#calendar ul.timeMobile li.occupied{
    background-color: #FF0000;
 }
div#calendar ul.time li.occupied a:hover {
      //color: pink;
      //text-decoration:underline;
      //border: 1px solid #999;
      //border-radius: 5px;
      
    //display:inline-block;
    //position:relative;
    //border-bottom:1px dotted #666;
    //text-align:left;
      
 }
 div#calendar ul.timeMobile li.occupied a:hover {   
 }
div#calendar ul.time li.myOwnOccupied{
    background-color: #228B22; /* (forest)green */
 }
div#calendar ul.timeMobile li.myOwnOccupied{
    background-color: #228B22; /* (forest)green */
 }
/*=======================================
   <ul class="time"><li class="occupied">
  =======================================*/
div#calendar ul.time li.occupied{
    background-color: #FF0000;
 }
div#calendar ul.timeMobile li.occupied{
    background-color: #FF0000;
 } 
div#calendar ul.time li.info{
    background-color: #AAA 
}
div#calendar ul.timeMobile li.info{
    background-color: #AAA 
}
/*===========================
   <ul class="member">
  ===========================*/
div#calendar ul.member{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 0.26vw;
    margin-bottom: 0.26vw;
    width: 100%;
}
/*===========================
   <ul class="member"><li>
  ===========================*/
/** overall width = width+padding-right**/
div#calendar ul.member li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;
    margin-top: 0.1vw;
    line-height:1.3vw;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: 47%;
    height:1.3vw;
    font-size:0.78vw;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}
div#calendar ul.member li:first-child{
    width: 50%;
}
div#calendar ul.memberAlt1 li{
    margin:0px;
    padding:0px;
    margin-right:0.26vw;
    margin-top: 0.1vw;
    line-height:1.3vw;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: 30%;
    height:1.3vw;
    font-size:0.78vw;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}
/*div#calendar ul.memberAlt1 li:first-child{
    width: 5%;
}*/


div#calendar button, button a, .button {
  padding: 0.52vw;
  font-size: 0.78vw;
  color: white;
  //background: #5F9EA0;
  background: #787878;
  border: none;
  border-radius: 0.26vw;
}
/*
div#calendar ul.time li:first-child{
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 2px;
    line-height:25px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:140px;
    height:25px;
    font-size:15px;
    background-color: #AAD;
    color:#000;
    text-align:center; 
}*/
 
:focus{
    outline:none;
}
 
div.clear{
    clear:both;
}