/*
///-------------------------------------------------------///
///-------------------------------------------------------///
///-------------------------------------------------------///
///   Code is privilaged and copyright protected          ///
///              pending application approval             ///
///                   December 2021                       ///
///-------------------------------------------------------///
///-------------------------------------------------------///
///-------------------------------------------------------///
*/




* {
  box-sizing: border-box;
  	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.zoom {
  zoom: 1;
}
input {
  font-size: 1.5vw;
  width: 40%;
}
/* Mark input boxes that gets an error on validation: */
.invalid {
  background-color: #ffdddd;
}

input[type="checkbox"]{
   font-size: 3vw;
   width: 3%;
   text-align: right;
   left: 0;
  
} 

select{
  font-size: 1.5vw;
  width: 40%;

}

select[disabled] { 
  color: black; 
}

      
button {
  background-color: #687864;
  color: #ffffff;
  border: none;
  padding: 0.8vw 1.8vw;
  font-size: 1.6vw ;
  font-family: Raleway;
  cursor: pointer;
  border-radius: 1.2vw;

}

button:hover {
  opacity: 0.8;
}

.buttonpressed{
  background-color: #375271;
  color: #ffffff;
  box-shadow: 0 0.5vw #666;
  transform: translateY(0.4vw);
  border-radius: 1.5vw;
}


.buttondepressed{
 background-color: #5078A4;
  color: #ffffff;
  border: none;
  border-radius: 1.5vw;
  box-shadow: 0 0.9vw #999;
}


.buttondepressedanddisabled{
 background-color: #5078A4;
  color: #ffffff;
  border: none;
  border-radius: 1.5vw;
  box-shadow: 0 0.9vw #999;
  pointer-events: none;
  opacity: 0.4;
}

.buttondepressedandenabled{
 background-color: #5078A4;
  color: #ffffff;
  border: none;
  border-radius: 1.5vw;
  box-shadow: 0 0.9vw #999;
  pointer-events: auto;
  opacity: 1;
}


html {
    /*min-width: 1024px;*/
    /*min-height: 768px;*/
    /*height: 100%;*/
    width:100%;
    position: relative;
  
   
    /*background-image: linear-gradient(to bottom right, #31708E , #314E8E);*/
    background-image: url("/MGS/Images/iStock-1160587990-cover.jpg");
    background-size: cover;

}

body {

margin-top:                        5.0vw;
/*background-image: url("/MGS/Images/iStock-1160587990-cover.jpg");*/


}
fieldset {
  background-color: #8FC1E3;
      position:                        relative;
      height:                             100%;
      width:                              98%;
      margin:                             auto;
      border-radius: 1.2vw 

}


.divContact {
  background-color: #8FC1E3;
      position:                        relative;
      height:                             100%;
      max-width: 400px; /*only px works due to mobile devices*/
      margin:                             auto; 
}
.divContact textarea {
      width:                              100%;
      box-sizing:                         border-box;
      resize: vertical;
      font-size: 1vw ;
      
}
.divContact input[type=email] {
      width: 100%;
      font-size: 1.2vw ;
      
}
legend {
  background-color: #5085A5;
  color: white;
  padding: 0.5vw 1.0vw;
  font-size: 1.5vw ;
  border-radius: 1.2vw;
}

input[type=number]{
  width: 8.0vw;

} 


label {
  font-size: 1.75vw;
  text-align: right;
  width: 40.0vw;
  line-height: 2.6vw;
  margin-bottom: 1.0vw;
  
}

.display th {
font-size: 1.5vw 
}


table, th, td {
         border: 0.1vw solid black;
         text-align:center;
         height: 90%;
          }
   
.button-center{
    text-align:center;

}
.button-right{
text-align: right;
}
.button-left{
text-align: left;
}
.radio-right{
font-size: 1vw;
display: inline-block;
}
.btn-Employees-accept{
text-align: right;
}
.Schedule_Selection_Input
{
padding-left: 20%;
}
.form-group-cbx {
text-align: center;
}
.profile-group-cbx {
display: inline-block;
width: 100%;
text-align: center;
}

.disabledarea {
    pointer-events: none;
    opacity: 0.4;
}

.enablearea {
    pointer-events: auto;
    opacity: 1;
}


.validation_int{
text-align: center;
color: red;
font-size: 1.5vw;
}
.ReviewMonths{
text-align: center;
color: red;
font-size: 1.5vw;
}

.alert {
  margin-top: 0.5vw;
  padding: 1.0vw;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 0.5vw;
  text-align: center;
}


.alert.reset 
    {
    background-color: #ffff66;
    color: black;
    }
.alert.newpass 
{
    background-color: #fb9902;
    color: black;
}


.closebtn {
  margin-left: 1.5vw;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 2vw;
  line-height: 1.8vw;
  cursor: pointer;
  transition: 0.3s;
  
}

.closebtn:hover {
  color: black;
}


.column-1{
width:12%;
font-size: 1vw;

}
.column-2{
width:10%;

}
.column-3{
width:10%;

}
.column-4{
width:10%;

}
.column-5{
width:10%;

}
.column-6{
width:10%;

}
.column-7{
width:10%;

}
.column-8{
width:10%;

}
.column-9{
width:8%;

}
.column-10{
width:10%;

text-align:center;
}

.Keycolumn-1{
width:20%;


}
.Keycolumn-2{
width:50%;


}


.btn-group-months .button {
  background-color: #84CEEB; /* Blue */
  border: 0.1vw solid;
  color: white;
  padding: 1vw 0.75vw 1vw 0.75vw;
  text-align: center;
  /*text-decoration: none;*/
  display: inline-block;
  font-size: 1.2vw;
  cursor: pointer;
  margin: 0.14vw;
  width: 16%;
  height: 15%;
  border-radius: 1.2vw;
}



.btn-group-months .button:hover {
  background-color: #5AB9EA;
}
.RequestSelect{
border-style: dashed;
border-width: 0.25vw;
border-color: #FF00FF;/*magenta*/
}
.CalendarHoliday{
border-style: solid;
border-width: 0.25vw;
border-color: #FF8400;/*orange*/
font-weight : bold;
border-radius: 1vw;
padding: 0.1vw;
}
.CalendarSS{
border-style: solid;
border-width: 0.25vw;
border-color: #00BB27;
font-weight : bold;
border-radius: 1vw;
padding: 0.1vw;
}

.MonthDeleteSelect .button{

 border-style: dashed;
 background-color: red;
  color: white;
  padding: 1vw 0.75vw 1vw 0.75vw;
  text-align: center;
  /*text-decoration: none;*/
  display: inline-block;
  font-size: 1.2vw;
  cursor: pointer;
  margin: 0.14vw;
  width: 16%;
  height: 15%;

}

.center {
  margin: 0;
  position: fixed;
  top: 20%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.TitleAreaContainer{
display: inline-block;
margin-left : 0.5vw;
margin-right : 0.5vw;

}
.TitleAreaIcon {
  margin: 0;
  top: 1%;
  left: 3%;
  float:left;
  width: 33.33%;

  
}
.TitleAreaName {
  float:left;
  width: 33.33%;
  padding: 5px;


}
.TitleAreaName p,b {
display: inline;

}
.TitleAreaName b {
color: #008080;/* teal color */
-webkit-text-stroke: 0.1vw white; /* width and color */
font-size: 3vw ;
}
.TitleAreaName p {
color: white;
-webkit-text-stroke: 0.08vw black; /* width and color */
font-size: 3.2vw ;
}
.TitleAreaNamePrint {
  float:left;
  width: 33.33%;
  padding: 5px;


}
.TitleAreaNamePrint p,b {
display: inline;

}
.TitleAreaNamePrint b {
color: #008080;/* teal color */
-webkit-text-stroke: 0.1vw white; /* width and color */
font-size: 1.5vw ;
}
.TitleAreaNamePrint p {
color: white;
-webkit-text-stroke: 0.08vw black; /* width and color */
font-size: 1.7vw ;
}
.TitleIcon {
  position: relative;
  width: 20%;
  height: 19%;
  border-radius: 1.2vw 

}


.loader {
  position: relative;
  border: 1vw solid #f3f3f3;
  border-radius: 50%;
  border-top: 1vw solid #3498db;
  width: 8vw;
  height: 8vw;
  -webkit-animation: spin 1.5s linear infinite; /* Safari */
  animation: spin 1.5s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body {font-family: Arial;}
/* Full-width input fields */
.container input[type=text], .container input[type=password] {
  width: 100%;
  padding: 1.2vw 2.0vw;
  margin: 0.8vw 0;
  display: inline-block;
  border: 0.1vw solid #ccc;
  box-sizing: border-box;
}
.containerContact input[type=text]{
  width: 100%;
  padding: 0.2vw 0.4vw;
  margin: 0.1vw 0;
  display: inline-block;
  border: 0.1vw solid #ccc;
  box-sizing: border-box;
  font-size: 1.2vw ;
}
.containerContact input[type=button]{
  cursor: pointer;
  border-radius: 1.2vw;
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Set a style for all buttons */
.container button {
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.containerContact button {
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.modal.button:hover {
  opacity: 0.8;
}
/* Set a style for all buttons */
.container3 OKbtn {
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;

}
.container3 cancelbtn {
  width: auto;
  padding: 1.0vw 1.8vw;
  background-color: #f44336;
  color: white;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
}

.container3 input[type=text], .container3 input[type=password] {
  width: 100%;
  padding: 1.2vw 2.0vw;
  margin: 0.8vw 0;
  display: inline-block;
  border: 0.1vw solid #ccc;
  box-sizing: border-box;
  
}

.OKbtn4 {
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  border: none;
  cursor: pointer;
  margin: 1.0vw 2vw 1.0vw 2vw;

}
.OKbtn5 {
  background-color: #4CAF50;
  color: white;
  padding: 5.0vw 1.6vw;
  border: none;
  cursor: pointer;
  margin: 1.0vw 2vw 1.0vw 2vw;
 float: right;
}
.cancelbtn4 {
  width: auto;
  padding: 1.0vw 4.2vw;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
  margin: 1.0vw 2vw 1.0vw 2.7vw;
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 1.0vw 1.8vw;
  background-color: #f44336;
  color: white;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
}
/* Extra styles for the OK button */
.OKbtn {
  width: auto;
  padding: 1.0vw 1.8vw;
  background-color: #4CAF50;
  color: white;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
  float: right;
}
/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 2.4vw 0 1.2vw 0;
  position: relative;
}


.container {
  padding: 1.6vw;
  border-radius: 1.2vw;
}
.containerContact {
  padding: 1.6vw;
}
.container1 {
  padding: 1.6vw;
  border-radius: 1.2vw;
}
.container2 {
  padding: 1.6vw;
  border-radius: 1.2vw;
}
.container3 {
  padding: 1.6vw;
  border-radius: 1.2vw;
}
.container4 {
  padding: 1.6vw;
  border-radius: 1.2vw;
}

.container2 input[type=number] {
  padding: 1.2vw 2.0vw;
  margin: 0.8vw 0;
  border: 0.1vw solid #ccc;
  box-sizing: border-box;
  width: 100%;
}
.container2 button {
  display: inline-block;
  margin: 0.8vw 0;
  text-align: right;
}


span.psw {
  float: right;
  padding-top: 1.6vw;
  font-size: 1.5vw ;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 6.0vw;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 0.1vw solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 1.2vw;
}

/* The Close Button (x) */
.closebx {
  position: absolute;
  right: 2.5vw;
  top: 0;
  color: #000;
  font-size: 3.5vw;
  font-weight: bold;
}

.closebx:hover,
.closebx:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 30.0vw) {
  span.psw {
    overflow: hidden;
    float: right;

  }
  .cancelbtn {
     width: 10%;
  }
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 0.5vw solid #ccc;
  background-color: #f1f1f1;
  margin-left : 0.5vw;
  margin-right : 0.5vw;
  border-radius: 1.2vw 1.2vw 0 0;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #f1f1f1;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1vw 1.2vw;
  transition: 0.3s;
  font-size: 1.5vw;
  
  color: black;
  border-radius: 1.2vw 
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab .active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 1vw 1.2vw;
  border: 0.1vw solid #ccc;
  border-top: none;
  margin-left : 0.5vw;
  margin-right : 0.5vw;
  background-color: #8FC1E3; 
  opacity:0.9;
  border-radius: 0 0 1.2vw 1.2vw;
}

.table_head{
  text-align: center;
  font-size: 1.25vw ;
  width:98%;
  background-color: #D2E6F4;
  
}
.table_head_shifts{
  text-align: left;
  font-size: 0.9vw ;
  width:98%;
  font-weight: bold;
  background-color: #D2E6F4;

}
.table_body{
  text-align: left;
  font-size: 1vw ;
  width: 98%;
  
}

.table_body_shifts{
  text-align: left;
  font-size: 0.8vw ;
  width: 98%;
}
.table_btn{
  text-align: center;
  font-size: 1.2vw ;
  width: 45%;
}
.table_btn_del{
  text-align: center;
  font-size: 1.1vw ;
  width: 45%;
  padding: 0.1vw 0.1vw;
  float: left;
  margin-top: 0.6vw;
  margin-left: 0.5vw;
}
.emp_btn_del{
  text-align: center;
  font-size: 1.1vw ;
  width: 40%;
  padding: 0.1vw 0.1vw;
  float: left;
  margin-top: 0.4vw;
  margin-left: 0.1vw;
}
.ModText{
  text-align: center;
  font-size: 1vw ;
  margin-top: 0.6vw;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  width: 16%;
  float: left;
}
.tab_Control_btn{
  margin-bottom: 1.5vw;
  margin-right: 1.5vw;
  margin-left: 6.5vw;
  background-color: #687864;
  color: #ffffff;
  border: none;
  padding: 0.8vw 1.8vw;
  font-size: 1.8vw ;
  font-family: Raleway;
  cursor: pointer;
  border-radius: 1.2vw;

}
.action_column{
  text-align: center;
  font-size: 1.5vw ;
  width:12%;
  position: relative;
}
.action_column_drag{
  text-align: center;
  font-size: 1.5vw ;
  width:12%;
  position: relative;
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}
.action_column_drag:active {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
  }
.action_column_drag:before {
    content: "\2630";
    position: relative;
    font-size: 2.0vw;
    line-height: 2.2vw;
    float:right;
    color: darkgray;
  }

.actionitems{
  width:100%;
}


.alert {
  margin-top: 0.5vw;
  padding: 1.0vw;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 0.5vw;
  text-align: center;
  font-size: 1.4vw;
}

.alert.success {
    background-color: #4195bc;;
    font-size: 1.5vw;
    border-radius: 1.2vw
}
.alert.schedule {background-color: #8FC1E3;}
.alert.adminselectlocation {background-color: #8FC1E3;}
.alert.shifts {background-color: #8FC1E3;}
.alert.resetpass {background-color: #8FC1E3;}
.alert.selected {
    background-color: #006eff;
    font-size: 1.4vw;
}
.displayName{

  margin-top: 0.5vw;
  margin-left:65%;
  padding: 0.2vw;
  margin-bottom: 0.5vw;
  text-align: center;
  font-size: 1.5vw;
  background-color:#8FC1E3 ;
}
.displayPC{
  margin-top: 0.5vw;
  margin-left:65%;
  padding: 0.2vw;
  margin-bottom: 0.5vw;
  text-align: center;
  font-size: 1.3vw;
  background-color:#8FC1E3 ;
}
.displayPCbtn{
  font-size: 1.4vw;
  background-color:#8FC1E3;
  text-decoration: underline;
  border: none;
  padding: 0.2vw;
  font-family: Raleway;
  cursor: pointer;
  border-radius: 1.2vw;
}

.tablelayout{
  table-layout: fixed;
  width: 99%;
  border-radius: 0.5vw;
}

.arrowup {
  text-align: center;
  font-size: 0.3vw ;
  width: 14%;
  display: block;
  margin-top: 0.4vw;
  margin-left: 0.5vw;

}

.arrowdown {
  text-align: center;
  font-size: 0.3vw ;
  width: 14%;
  display: block;
  margin-left: 0.5vw;

}
#myInputStore {

  width: 25%; /* 25Full-width */
  font-size: 1.4vw; /* Increase font-size */
  padding: 0.6vw 1.0vw 0.6vw 2.0vw; /* Add some padding */
  border: 0.1vw solid #ddd; /* Add a grey border */
}
a:link,
a:visited,
a:hover,
a:active {
	color: #000;
	text-decoration: none;
}
th a,
td a { 
	display: block;
	width: 100%;
}
th a.sort-by { 
	padding-right: 0.3vw;
	position: relative;
}
a.sort-by:before,
a.sort-by:after {
	border: 0.4vw solid transparent;
	content: "";
	display: block;
	height: 0;
	right: 0.5vw;
	top: 50%;
	position: absolute;
	width: 0;
}
a.sort-by:before {
	border-bottom-color: #666;
	margin-top: 0.1vw;
}
a.sort-by:after {
	border-top-color: #666;
	margin-top: 1vw;
}

a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: purple;
}

/* mouse over link */
a:hover {
  color: darkblue;
}

/* selected link */
a:active {
  color: lightblue;
}
.CapsClass {
    color: red;
    font-size: 1vw;
    text-align: center;
}
.NoticeText {
    text-align:center;
    color: red;
    background-color: #8FC1E3;
    border: none;
    font-weight: bold;
}
.NoticeTextBlack {
    text-align:center;
    color: black;
    background-color: #8FC1E3;
    border: none;
    font-weight: bold;
}
.NoticeSectionCenter{
  position: relative;
  left: 28%;
}
.NoticeSectionCenterBlack{
  position: relative;
  left: 10%;
}
.NoticeSectionCenterBlack input {
  width: 80%;
}
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 6vw;    /* Footer height */
}
#footer {
  position: absolute;
  text-align: right;
  color: black;
  bottom: 0;
  width: 100%;
  height: 6vw; 
  margin-right : 0.6vw;
  /* Footer height */
  /* background-color: #4b9bc1;*/
}
#footer p{
    margin-right : 0.5vw;
}
.ShiftNotAvailable {
  color: white;
  background: repeating-linear-gradient(
    45deg,
    #323b6e,
    #323b6e 10px,
    #6c80f5 10px,
    #6c80f5 20px
  );
}
.dropbtn {
  padding: 0.8vw 1.8vw;
  font-size: 1.6vw;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 14vw;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0.5vw;
}

.dropdown-content a {
  color: black;
  padding: 0.4vw 1vw;
  font-size: 1.6vw;
  text-decoration: none;
  display: block;
  text-align:left;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.error {color: #FF0000;
    font-size: 1.6vw;
}
.error1 {color: #FF0000;
    font-size: 1.4vw;
}

.whitelink a{
    color:white;
}
.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
  font-size: 1.6vw;
}
.privacy-section {
  padding: 50px;
  text-align: left;
  background-color: #474e5d;
  color: white;
  font-size: 1.2vw;
}
.LeaderStyleOn{
    border-style: solid double;
    border-color: darkblue;
    background-color: darkblue;
}
input.FormTblCbx {
  width: 1vw;
  height: 1vw;
  vertical-align: 50%;
}
.glass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 0.8vw 1.8vw;
	background-color: #687864;
	background-image: linear-gradient(#687864,#81927d);

	/* text styles */
	text-decoration: none;
	color: #ffffff;
    font-size: 1.6vw ;
    font-family: Raleway;
	font-weight: 100;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    border: none;
    cursor: pointer;
    border-radius: 1.2vw;
}
.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius: 1.2vw;
}

.glass:hover{
	background: linear-gradient(#6d706c,#63805c);
}
.greenglass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 0.8vw 1.8vw;
	background-color: #4CAF50;
	background-image: linear-gradient(#265728,#4CAF50);

	/* text styles */
	text-decoration: none;
	color: #ffffff;
    font-size: 1.6vw ;
    font-family: Raleway;
	font-weight: 100;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    border: none;
    cursor: pointer;
    border-radius: 1.2vw;
}
.greenglass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius: 1.2vw;
}

.greenglass:hover{
	background: linear-gradient(#419c64,#4ec341);
}

.redglass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 0.8vw 1.8vw;
	background-color:  #f44336;
	background-image: linear-gradient(#7a211b,#f44336);

	/* text styles */
	text-decoration: none;
	color: #ffffff;
    font-size: 1.6vw ;
    font-family: Raleway;
	font-weight: 100;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    border: none;
    cursor: pointer;
    border-radius: 1.2vw;
}
.redglass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius: 1.2vw;
}

.redglass:hover{
	background: linear-gradient(#f8877f,#ea1c0d);
}

.switch {
  position: relative;
  display: inline-block;
  width: 7vw;
  height: 2vw;
  margin-bottom:0.2vw;

}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d61b11;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.5vw;
  width: 3.25vw;
  left: 0.25vw;
  bottom: 0.25vw;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  content: "Hidden Week";
  font-size: 0.7vw ;
  text-align: center;
  line-height: 1;
}

input:checked + .slider {
  background-color: #33ab39;
}
input:checked + .slider:before {
  background-color:  #ccc;
  content: "Showing Week";
  font-size: 0.7vw ;
  text-align: center;
  line-height: 1;
}

input:focus + .slider {
  box-shadow: 0 0 1vw #33ab39;
}

input:checked + .slider:before {
  -webkit-transform: translateX(3.25vw);
  -ms-transform: translateX(3.25vw);
  transform: translateX(3.25vw);
}



.ReviewWk {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #33ab39;
  -webkit-transition: .4s;
  transition: .4s;
  
}

.ReviewWk:before {
  position: absolute;
  content: "";
  height: 1.5vw;
  width: 3.25vw;
  left: 0.25vw;
  bottom: 0.25vw;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  content: "Reviewed";
  font-size: 0.7vw ;
  text-align: center;
  line-height: 1;
  
}


input:checked + .ReviewWk {
  background-color: #d61b11;
  
  
}
input:checked + .ReviewWk:before {
  background-color:  #ccc;
  content: "Needs Review";
  font-size: 0.7vw ;
  text-align: center;
  line-height: 1;
  
}

input:focus + .ReviewWk {
  box-shadow: 0 0 1vw #d61b11;
  
}

input:checked + .ReviewWk:before {
  -webkit-transform: translateX(3.25vw);
  -ms-transform: translateX(3.25vw);
  transform: translateX(3.25vw);
  
}




.switch1 {
  position: relative;
  display: inline-block;
  width: 11vw;
  height: 3vw;
  margin-bottom:0.2vw;

}

.switch1 input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider1 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  	background-color: #f2f5f2;
	background-image: linear-gradient(#d1d1d1,#f2f5f2);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider1:before {
  position: absolute;
  content: "";
  height: 2.5vw;
  width: 5.25vw;
  left: 0.25vw;
  bottom: 0.25vw;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  content: "Modify Off";
  font-size: 1.25vw ;
  text-align: center;
  line-height: 1;
}

input:checked + .slider1 {
  	background-color: #9370DB;
	background-image: linear-gradient(#4B0082,#9370DB);
}
input:checked + .slider1:before {
  background-color:  #ccc;
  content: "Modify On";
  font-size: 1.25vw ;
  text-align: center;
  line-height: 1;
}

input:focus + .slider1 {
  box-shadow: 0 0 1vw #9370db;
}

input:checked + .slider1:before {
  -webkit-transform: translateX(5.25vw);
  -ms-transform: translateX(5.25vw);
  transform: translateX(5.25vw);
}






.ModifyScheduleOff{
text-align: center;
color: #9370db;
font-size: 2vw;
visibility:hidden;
display:none;
}
.ModifyScheduleOn{
text-align: center;
color: #9370db;
font-size: 2vw;
visibility:visible;
display:inline-block;
padding-left:20%;
font-weight: bold;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.ValidateEmpNameOff{
text-align: center;
color: red;
font-size: 2vw;
visibility:hidden;
display:none;
}
.ValidateEmpNameOn{
text-align: center;
color: red;
font-size: 2vw;
visibility:visible;
display:inline-block;
padding-left:20%;
font-weight: bold;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.ButtonHeaderWeekTitle{
    width:100%;
    text-align:center;
    font-size: 1.5vw;
    font-family: Raleway;
    cursor: pointer;
    border-radius: 1.2vw;
    background-color: white;
}
.HeaderWeekTitle{
    width:100%;
    text-align:center;
    font-size: 1.5vw;
    font-family: Raleway;
}
.WeekHeader
{
    text-align:center;
    color: darkblue; 
    font-size: 2vw;
    
}
.clHolidayEvents
{
    text-align:center;
    color: black; 
    font-size: 1vw;
    
}

.disabledHeader {
        pointer-events: none;
        color: black; 
      }

.whiteglass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 0.4vw 1.2vw;
	background-color: #f2f5f2;
	background-image: linear-gradient(#d1d1d1,#f2f5f2);

	/* text styles */
	text-decoration: none;
	color: black; 
    font-size: 1.5vw ;

	font-weight: 100;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #FFFFFF;
    border: none;
    cursor: pointer;
    border-radius: 1.2vw;
}
.whiteglass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius: 1.2vw;
}

.whiteglass:hover{
	background: linear-gradient(#f5f5f5,#f6fff5);
}

.purpleglass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 0.4vw 1.2vw;
	background-color: #9370DB;
	background-image: linear-gradient(#4B0082,#9370DB);

	/* text styles */
	text-decoration: none;
	color: white; 
    font-size: 1.5vw ;
    
	font-weight: 100;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    border: none;
    cursor: pointer;
    border-radius: 1.2vw;
}
.purpleglass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius: 1.2vw;
}

.purpleglass:hover{
	background: linear-gradient(#665aad,#CCCCFF);
}

/* The Modal (background) */
.modalTimeOut {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalTimeOut-content {
  background-color: #fefefe;
  margin: auto;
  left: 20%;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
  border-radius: 1.2vw;
}
/* Set a style for all modalTimeOut-content buttons */
.modalTimeOut-content button {
  background-color: #4CAF50;
  color: white;
  padding: 1.0vw 1.6vw;
  margin: 0.8vw 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* The Close Button */
.modalTimeOutclose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalTimeOutclose:hover,
.modalTimeOutclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.WarningTime{
    color:red;
    text-align: center;
}
.Page5Success{
    font-size: 2vw;
    text-align: center;
}
.ExampleHoliday{
border-style: solid;
border-width: 0.25vw;
border-color: #FF8400;/*orange*/
font-weight : bold;
border-radius: 1vw;
padding: 0.1vw; 
width: 7vw;
font-size: 1vw;
text-align: center;
}

.PrintModeOff-Title  
{
    font-size: 1.5vw ;
}
.PrintModeOn-Title   
{
    font-size: 0.9vw ;
}


.PrintModeOff-XSmall  
{
    font-size: 0.7vw ;
}
.PrintModeOn-XSmall   
{
    font-size: 0.2vw ;
}

.PrintModeOff-Small  
{
    font-size: 0.9vw ;
}
.PrintModeOn-Small   
{
    font-size: 0.6vw ;
    height:100%;
}


.PrintModeOff-Reg  
{
    font-size: 1vw ;
}
.PrintModeOn-Reg   
{
    font-size: 0.65vw ;
}


.PrintModeOff-Med  
{
    font-size: 1.1vw ;
}
.PrintModeOn-Med   
{
    font-size: 0.575vw ;
}


.PrintModeOff-XMed  
{
    font-size: 1.15vw ;
}
.PrintModeOn-XMed   
{
    font-size: 0.6vw ;
}


.PrintModeOff-Large  
{
    font-size: 1.2vw ;
}
.PrintModeOn-Large   
{
    font-size: 0.625vw ;
}



.PrintModeOff-XLarge  
{
    font-size: 1.25vw ;
}
.PrintModeOn-XLarge   
{
    font-size: 0.75vw ;
}


.PrintOnSliderBox
{
  width: 3vw;

}

.PrintOnSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d61b11;
  -webkit-transition: .4s;
  transition: .4s;
}
.PrintOnSlider:before
{
position: absolute;
  content: "";
  height: 1.5vw;
  width: 1.5vw;
  left: 0.25vw;
  bottom: 0.25vw;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  content: "Hidden Week";
  font-size: 0.3vw ;
  text-align: center;
  line-height: 1;
}
input:checked + .PrintOnSlider:before {
  background-color:  #ccc;
  content: "Showing Week";
  font-size: 0.3vw ;
  text-align: center;
  line-height: 1;
}
input:checked + .PrintOnSlider:before {
  -webkit-transform: translateX(1.25vw);
  -ms-transform: translateX(1.25vw);
  transform: translateX(1.25vw);
}
input:focus + .PrintOnSlider {
  box-shadow: 0 0 1vw #33ab39;
}
input:checked + .PrintOnSlider {
  background-color: #33ab39;
}

.gg-comment {
    box-sizing: border-box;
    position: relative; /*relative*/
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 1.875vw;/*2.5vw*/
    height: 1.5vw;/*2vw*/
    border: 0.1875vw solid;/*0.25vw*/
    border-bottom: 0;
    box-shadow:
        -0.5625vw 0.75vw 0 -0.5625vw, /*-0.75vw 1vw 0 -0.75vw*/
        0.5625vw 0.75vw  0 -0.5625vw /*0.75vw 1vw  0 -0.75vw*/
}
.gg-comment::after,
.gg-comment::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 0.75vw; /*1vw*/
    /*background: yellow;  the botton tip of message*/
}
.gg-comment::before {
    border: 0.1875vw solid; /*0.25*/
    border-top-color: transparent;
    border-bottom-left-radius: 1.875vw; /*2.5vw*/
    right: 0.375vw; /*0.5*/
    bottom: -0.5625vw; /*-0.75v*/
    height: 0.5625vw /*-0.75v*/
}
.gg-comment::after {
    height: 0.1875vw; /*0.25*/
    background: currentColor;
    box-shadow: 0 0.375vw 0 0; /*0 0.5vw 0 0 */
    left: 0.375vw; /*0.5*/
    top: 0.375vw; /*0.5*/
}
.gg-comment:hover {
  opacity: 0.5;
  cursor:pointer;
}
.commentHeader
{
    width:100%;
    height:100%;
    text-align:center;
    font-size: 1.25vw;
    font-family: Raleway;
}
.commentBody
{
    width:100%;
    height:100%;
    text-align:center;
    font-size: 1vw;
    font-family: Raleway;
}
.commentBox
{
    width:100%;
    text-align:left;
    font-size: 1vw;
    font-family: Raleway;
}

.gg-comment-yellow {
    box-sizing: border-box;
    position: relative; /*relative*/
    display: inline-block;
    transform: scale(var(--ggs,1));
    width: 1.875vw;/*2.5vw*/
    height: 1.5vw;/*2vw*/
    border: 0.1875vw solid;/*0.25vw*/
    border-bottom: 0;
    background: yellow;
    box-shadow:
        -0.5625vw 0.75vw 0 -0.5625vw, /*-0.75vw 1vw 0 -0.75vw*/
        0.5625vw 0.75vw  0 -0.5625vw /*0.75vw 1vw  0 -0.75vw*/
        
}
.gg-comment-yellow::after,
.gg-comment-yellow::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 0.75vw; /*1vw*/
    background: yellow;
}
.gg-comment-yellow::before {
    
    border: 0.1875vw solid; /*0.25*/
    border-top-color: transparent;
    border-bottom-left-radius: 1.875vw; /*2.5vw*/
    right: 0.375vw; /*0.5*/
    bottom: -0.5625vw; /*-0.75v*/
    height: 0.5625vw /*-0.75v*/
}
.gg-comment-yellow::after {
    
    height: 0.1875vw; /*0.25*/
    background: currentColor;
    box-shadow: 0 0.375vw 0 0; /*0 0.5vw 0 0 */
    left: 0.375vw; /*0.5*/
    top: 0.375vw; /*0.5*/
}
.gg-comment-yellow:hover {
  opacity: 0.5;
  cursor:pointer;
}