body {
	        font-family: Arial;
	        color: #333;
	        font-size: 0.95em;
	        background-color: #D6EFFA;
	}
	

.param {
	display:none;
}

.rhs {
	float: right;
}

#outertable {
	width: 1px;
	max-width: 1px;
	display: inline-block;
}

.detail_button
{
	margin-top: 5px;
	margin-left: 3px;
	margin-right: 3px;
}

.view_detail
{
        border-radius: 4px;
        float: left;
	width: 100%;
	height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
}


#view_detail_A
{
	border: #CCC 1px solid;
	border-radius: 4px;
	padding: 5px;
	line-height: 0.8em;
	float: left;
	font-size: 0.6em;
	overflow: auto;
	width: 320px;
	max-width: 320px;
	height: 770px;
	max-height: 770px;
}

#view_detail_B
{
	border: #CCC 1px solid;
	border-radius: 4px;
	padding: 5px;
	line-height: 0.8em;
	float: left;
	font-size: 0.6em;
	overflow: auto;
	width: 320px;
	max-width: 320px;
	height: 770px;
	max-height: 770px;
}

::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.form-div {
	width: 100% !important;
	overflow-y:scroll;
}

.scroll-div {
	width: 100% !important;
	overflow-x:hidden;
	height: 700px;
	overflow-y:auto;
}

.logo {
	color: #191919;
	margin: 0;
	text-align: center;
	float:right;
	width: 30%;
}

.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

.unblur {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
}

.controlpanel {
	color: #191919;
	font-weight: normal;
	font-weight: 200;
	margin: 0;
	text-align: left;
	font-size: 0.5em;
}

.dateandtime {
	color: gray;
	font-weight: normal;
	font-weight: 200;
	text-align: center;
	margin: 0;
	font-size: 0.6em;
}

.useremail {
	color: darkgray;
	font-weight: normal;
	font-weight: 200;
	text-align: center;
	margin: 0;
	font-size: 0.6em;
}

.error-message {
	padding: 7px 10px;
	background: #fff1f2;
	border: #ffd5da 1px solid;
	color: #d6001c;
	border-radius: 4px;
	margin: 30px 10px 10px 10px;
}

.view-table {
	background-color: #FFFFFF;
	vertical-align: top;
	border-spacing: initial;
	margin: 15px auto;
	margin-top: 2px;
	word-break: break-word;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 4px;
	padding: 10px;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	overflow: none;
}

.save_btn {
	font-family: Arial;
	font-weight: normal;
	border: none;
	color: #ffffff;
	text-align: center;	
	font-size: 0.8em;
	padding: 2px;
	height:2.5vh;
	cursor: pointer;
	padding: 2px 5px 2px;
	margin-left: 2px;
	margin-right: 20px;
	background-color: #009EE3;
	border-radius:4px;
}

.save_btn_anim {
  	height: 24px;
  	border-radius: 4px;
  	border: none;
	font-family: Arial;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	font-size: 0.8em;
	padding: 2px;
	cursor: pointer;
	padding: 2px 5px 2px;
	margin-left: 2px;
	margin-right: 2px;
    	margin-top: 2px;
  	background-color: #009EE3;
  	animation-name: savebutton;
  	animation-duration: 4s;
  	animation-iteration-count: infinite;
}

@keyframes savebutton {
  	0%   {opacity: 1;}
  	33% {opacity: 0.25;}
  	66% {opacity: 1;}
  	100% {opacity: 1;}
}


.cancel_btn {
	font-size:0.8em;
	background-color: #F5F5F5;
	color:#009EE3;
	border-radius:4px;
    	font-family: Arial;
    	font-weight: bold;
    	border-radius: 4px;
    	border: none;
    	color: #009ee3;
    	text-align: center;
    	height:2.5vh;
    	padding: 2px 5px 2px;
    	cursor: pointer;
    	margin-left: 2px;
    	margin-right: 20px;
    	margin-top: 2px;
}


.sdwidget {
	vertical-align: top;
	border-spacing: initial;
	margin: 15px auto;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border: 1px solid;
	border-color: #e5e6e9;
	overflow: hidden;
	position: absolute;
	border-radius: 5px;
}

.sdwidgetnoborder {
        vertical-align: top;
        border-spacing: initial;
        margin: 15px auto;
        table-layout: auto;
        line-height: 1.8em;
        color: #333;
        overflow: hidden;
        position: absolute;
        border-radius: 5px;
}

.sdwidget_edit {
	background: #FFFFFF;
	vertical-align: top;
	border-spacing: initial;
	margin: 15px auto;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	overflow: hidden;
	position: absolute;
	border-radius: 5px;
}

.view-table-popup {
	background-color: #FFFFFF;
	border-spacing: initial;
	margin: 15px auto;
	margin-top: 2px;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 6px;
	padding: 10px;
	border: 1px solid;
	border-color: #415161;
	overflow: hidden;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}


.view-table-popup2 {
	background-color: #FFFFFF;
	vertical-align: top;
	border-spacing: initial;
	margin: 15px auto;
	margin-top: 2px;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 4px;
	padding: 10px;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}

.view-chart {
	width:100%;
	height:100%;
}

.view-detail {
	background: #ffffff;
	vertical-align: top;
	border-spacing: initial;
	margin: 15px auto;
	word-break: break-word;
	table-layout: auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 4px;
	padding: 10px;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	overflow: auto;
}

.homemain {
    margin: 16px;
    font-size: 1.4em;
    vertical-align: center;
    text-align: center;
    border-radius: 5px;
}

.landingmain {
    margin: 16px;
    font-size: 1.4em;
    vertical-align: center;
    text-align: center;
    border-radius: 5px;
}

.metric {
    margin: 16px;
    font-size: 1.4em;
    vertical-align: center;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}


.view-table .label {
	color: #888888;
}

.view-table .field-column {
	padding: 5px 5px;
}

.titlewidget {
	padding: 1vh 0.2vw 0.2vh 0.2vw;
	font-size: 1em;
	border-radius: 4px;
	align:center;
	text-align: center;
	width: 100% !important;
	line-height:1em;
}

.cptitle {
    font-family: Arial;
    font-size: 9px;
    color: #415161;
    text-transform: uppercase;
    padding-top: 5px;
    padding-left: 8px;

}

.widgetcontainer {
	margin-left:1%;
	margin-top:0.5%;
	font-family:Arial;
	font-size:14px;
	color:#415161;
	text-transform:uppercase;
}

.widgettitle {
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	padding-left: 0.5vw;
}

.percentage_green {
	padding: 5px;
	border: #CCC 1px solid;
	font-size: 4em;
	vertical-align: center;
	text-align: center;
	color: green;
	border-radius: 4px;
}

.percentage_red {
	padding: 5px;
	border: #CCC 1px solid;
	font-size: 4em;
	vertical-align: center;
	text-align: center;
	color: red;
	border-radius: 4px;
}

.percentage_blue {
	padding: 5px;
	font-size: 4em;
	vertical-align: center;
	text-align: center;
	color: darkblue;
	border-radius: 5px;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
}

.pctext {
	padding: 5px;
	font-size: 0.3em;
	vertical-align: center;
	text-align: center;
	border-radius: 4px;
	width: 100%;
}

.bluebar {
	width: 30px;
	height: 10px;
	background: rgba(14,97,194,0.75);
}

.redbar {
	width: 30px;
	height: 10px;
	background: #EA352E;
}

.yellowbar {
	width: 30px;
	height: 10px;
	background: #EBC700;
}

.greenbar {
	width: 30px;
	height: 10px;
	background: #40B14B;
}

.whitebar {
	width: 30px;
	height: 10px;
	background: #ffffff;
}

.graybar {
	width: 30px;
	height: 10px;
	background: #757575;
}

.toggle {
	padding: 5px;
	font-size: 0.6em;
	color: darkblue;
	vertical-align: center;
	text-align: center;
}

.baselinetext {
	padding: 5px;
	font-size: 0.24em;
	vertical-align: center;
	text-align: center;
	color: orange;
	border-radius: 4px;
}

.scrolling-input-box {
	padding: 5px;
	border: #CCC 1px solid;
	font-size: 0.7em;
	border-radius: 4px;
	width: 99%;
	overflow-y:auto;
}

.full-input-box {
	padding: 5px;
	width: 99%;
}

.text-input-box {
	padding: 3px;
	border-radius: 4px;
	font-size: 1.0em;
	width: 15%;
}

.newline-text-input-box {
	padding: 3px;
	border-radius: 4px;
	font-size: 1.0em;
	width: 15%;
	clear: both;
}

.purple-text-input-box {
	padding: 3px;
	background-color: #ccc3d6;
	border-radius: 4px;
	font-size: 1.0em;
	line-height: 1.4em;
	width: 15%;
}

.mid-input-box {
	padding: 3px;
	border-radius: 4px;
	font-size: 1.0em;
	width: 48%;
}

.third-input-box {
	padding: 3px;
	border-radius: 4px;
	font-size: 1.0em;
	width: 32%;
}

.search-input-box {
	padding: 5px 10px 5px 10px;
	font-size: 0.7vw;
	border: #ccc 1px solid;
	background-color: #fff;
	border-radius: 4px;
	width: 100%;
}

.search-input-box:active, focus {
	background-color: #fff;
}

input.search-input-box:not(:placeholder-shown) {
    	background-color: #cffad5;
}

.cpsearch-box {
        padding: 5px;
        border: #CCC 1px solid;
        background-color: #F8FCFF;
        font-size: 0.7vw;
        border-radius: 4px;
        outline: none;
        width: 100%;
}


.trialbutton {
	width:20vw;
	text-align:center;
	font-size:1.5em;
	background-color:#37AA34;
	color:#ffffff;
	cursor:pointer;
}

.tbl-wdgt-qsearch-input {
	padding: 5px;
	font-size: 0.9em;
	border: #ccc 1px solid;
	background-color: #eee;
	border-radius: 4px;
	vertical-align: top;
	height: 24px;
    	margin-top: 2px;
}

.tbl-wdgt-qsearch-input:active {
	background-color: #fff;
}

.tbl-wdgt-qsearch-input:focus {
	background-color: #fff;
}

.tbl-wdgt-qsearch-input:hover {
	background-color: #fff;
	border: #999 1px solid;
}






.additional-box {
	padding: 10px;
	font-size: 1.0em;
	width: 100%;
}

.additional-box2 {
	padding: 10px;
	font-size: 1.0em;
	width: 99%;
	height: 65%;
	resize: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}

.additional-box3 {
	padding: 10px;
	font-size: 1.0em;
	width: 99%;
	height: 85%;
	resize: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}

.comments-box {
	padding: 10px;
	font-size: 0.7em;
	width: 100%;
	overflow-y:auto;
}

.small-comments-box {
	float: right;
	padding: 10px;
	font-size: 0.7em;
	width: 30%;
}

.small-text {
	padding: 5px;
	font-size: 0.7em;
	width: 100%;
}

.label-text {
	padding: 5px;
	font-size: 1.0em;
	width: 100%;
}

.cp-date-input-box {
	padding: 3px;
	border: #CCC 1px solid;
	font-size: 0.8em;
	border-radius: 4px;
	width: 60%;
	margin-top: 0.3vh;
	margin-right: 0.3vw;
}

.detail_edit {
        padding: 5px;
        border-color: #aaa;
        border-radius: 4px;
	border-width: thin;
}


.view_dropdown_box {
	padding: 5px;
	border: #CCC 1px solid;
	background-color: #F4FBE5;
	color: #415161;
	font-size: 0.7vw;
	border-radius: 4px;
	outline: none;
	width: 100%;
}

.filter-input-box {
	padding: 5px;
	border: #CCC 1px solid;
	background-color: #F4FBE5;
	color: #415161;
	font-size: 0.7vw;
	border-radius: 4px;
	outline: none;
	width: 100%;
}

.paleblue-input-box {
	padding: 5px;
	border: #CCC 1px solid;
	background-color: #5dbee8;
	color: #ffffff;
	font-size: 0.7vw;
	border-radius: 4px;
	outline: none;
	width: 100%;
}

.name-input-box {
	padding: 13px;
	border: #CCC 1px solid;
	border-radius: 4px;
	width: 99%;
}

.finance-input-box {
	padding: 13px;
	border: #CCC 1px solid;
	border-radius: 4px;
	width: 35%;
}

.wide-input-box {
	padding: 5px;
	width: 75%;
	display: flex;
	justify-content: center;
}

.sbp-short-input-box {
	padding: 3px;
	border: #CCC 1px solid;
	border-radius: 4px;
	font-size: 0.7em;
	width: 20%;
}

.select-box {
	padding: 3px;
	border: #CCC 1px solid;
	border-radius: 4px;
	font-size: 0.7em;
	width: 100% !important;
}

.green-select-box {
	padding: 3px;
	border: #CCC 1px solid;
	border-radius: 4px;
	background-color: #e9f7ed;
	font-size: 0.7em;
	width: 100% !important;
	text-overflow: ellipsis;
}

.clinicinput {
	padding: 13px;
	border: #CCC 1px solid;
	border-radius: 4px;
	width: 99%;
}

.search-button {
	padding: 5px;
	font-size: 0.7em;
}

.backbutton {
	padding: 5px;
	font-size: 0.7em;
}

.reset-button {
	font-family: Arial;
	text-transform: uppercase;
	border-radius: 5px;
	background-color: #009EE3;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 10px;
	padding: 5px;
	width: 96%;
	transition: all 0.5s;
	cursor: pointer;
	margin: 2px;
	margin-top: 1.5vh;
	margin-left: 3px;
	margin-right: 3px;
}

.reset-button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}
.reset-button span:after {
	content: "\21ba";
	position: absolute;
	opacity: 0;
	top: 0;
	right: -15px;
	transition: 0.5s;
}
.reset-button:hover {
	/*background-color: #007ec3;*/
	background-color: #5bc4ba;
	box-shadow:  0 2px 7px 0 rgba(0,0,0,0.24);
}


.reset-button:active {
	background-color: #007ec3;
	transform: translateY(1px);
}

.reset-button:hover span {
	padding-right: 15px;

}

.reset-button:hover span:After {
	opacity:  1;
	right: 0;
}


.tabbeddiv {
	overflow: hidden;
	border: 0px solid #ccc;
	background-color: #ffffff;
	width: 100% !important;
}

.tabbeddiv button {
	background-color: #f1f1f1;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 4px 4px;
	transition: 0.3s;
}

.tabbeddiv button:hover {
	background-color: #ddd;
}

.tabbeddiv button.active {
	background-color: #ccc;
}

.dropbtn   {
  background-color: transparent;
  border-radius: 5px;
  color: #333333;
  padding: 3px;
  margin: 0px;
  min-width: 2vw;
  min-height: 3vh;
  font-size: 3vh;
  font-weight: normal;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  /*margin-top: -20px;*/
  /*vertical-align: super;*/
}

.dropbtn:hover, .dropbtn:active {
  background-color: #FFFFFF;
  /* border: 2px solid #F5F5F5; */
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  text-decoration: none;

}

.dropbtn:focus {
 background-color: #FFFFFF;
     box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}

.hp_db_button {
	margin-top:1vh;
	margin-bottom:1vh;
	border-radius:10px;
	border-color:333;
	padding:1vw;
	border-width:1px;
	width:46vw;
	font-size:0.8vw;
	background-color:#d1e6eb;
}

.hp_db_button:active, .hp_db_button:hover{
	background-color:#e1f6fb;
}

.hp_open_button {
	float:right;
        border-radius:4px;
        border-width:thin;
        font-size:1.0vw;
        color:#111111;
        cursor:pointer;
        background-color:#e1f6fb;
	z-index:2;
}

.hp_open_button:active, .hp_open_button:hover{
        background-color:#009ee3;
        color:#ffffff;
}

.promptbutton {
  	border-radius:4px;
  	border-width:thin;
  	font-size:1.5vw;
  	color:#111111;
  	cursor:pointer;
  	background-color:#d1e6eb;
}

.icon-button {
	font-family: Arial;
	font-weight: normal;
	font-size: 4px;
	border-radius: 5px;
	background-color: #009EE3;
	border: none;
	color: #FFFFFF;
	text-align: center;
	padding: 2px;
 	cursor: pointer;
	margin: 0px;
}

.icon-button:hover {
	background-color: #007ec3;
	box-shadow:  0 2px 7px 0 rgba(0,0,0,0.24);
}

.icon-button:active {
	background-color: 37AA34;
	transform: translateY(1px);
}	

.container_item {
        color:#333;
	font-weight:bold;
        font-size:0.8em;
}

	
.source_item {
	color:#009EE3;
	font-size:0.8em;
}

.source_item:hover {
	background-color: #F4FBE5;
}
	
.secondary-icon-button {
	font-family: Arial;
	font-weight: bold;
	font-size: 15px;
	border-radius: 4px;
	background-color: #F5F5F5;
	border: none;
	color: #009EE3;
	text-align: center;
	padding: 2px;
 	cursor: pointer;
	margin: 0px;
}

.secondary-icon-button:hover {
	  box-shadow:  0 1px 3px 0 rgba(0,0,0,0.24);
}


.secondary-icon-button:active {
		transform: translateY(1px);
}


/*
.material-symbols-outlined:hover, .dropbtn:active {
  background-color: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  text-decoration: none;

}

.material-symbols-outlined:focus {
 background-color: #ffffff;
     box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}
*/

.dropdown {
  position: relative;
  display: inline-block;
  margin-top: -10px;
  z-index: 10000;
}

.dropdown-content {
  right: 0;
  text-align: left;
  display: none;
  position: absolute;
  background-color: #ffffff;
   border-radius: 5px;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
}

.dropdown-content-visible {
  right: 0;
  text-align: left;
  display: block;
  position: absolute;
  background-color: #ffffff;
   border-radius: 5px;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  z-index: 200;
  font-family: Arial;
  font-size: 10pt;
  font-weight: bold;
}


.dropdown-content a {
  color: #667380;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
background-color: #009EE3;
  color: #f5f5f5;
}

#logo_container {
	border-radius: 5px;
}

#sbpblock1, #sbpblock2
{
    float: left;
    width:25%;
}
#sbpblock3
{
    float: right;
    width:25%;
}

.smallformtext {
    padding: 5px;
    font-size: 0.8em;
    vertical-align: center;
    text-align: center;
    color: orange;
    border-radius: 4px;
}

.sbp-short-input-box {
    padding: 3px;
    border: #CCC 1px solid;
    border-radius: 4px;
    font-size: 0.7em;
    width: 100%;
}

#block_container, #block_container_blurb, #block_container_success, #block_container_next, #block_container_failure, #block_container_dob
{
	text-align:left;
	overflow: hidden;
	padding: 10px;
}

#block_candidate_name, #block_interviewer_name, #block_interview_date, #block_jrn, #block_job_title, #block_hrbp, #block_hiring_manager, #block_recruiter_name, #block_interview_panel
{
	text-align:left;
	overflow: hidden;
	padding: 10px;
	display:none;
}

#block_container_pleasewait
{
	color: #191919;
	font-weight: normal;
	font-weight: 400;
	font-size: 1.3em;
	text-align: left;
	width: 100%;
	display: none;
}

#pwmessage
{
	text-align: center;
}

#block2, #block_container_pf
{
	float: right;
	width:48%;
}

#block1, #block_appt1, #block_appt2, #block_sub
{
	float: left;
	width:48%;
}

#sbpblock1, #sbpblock2
{
	float: left;
	width:25%;
}

#sbpblock3
{
	float: right;
	width:25%;
}

.blockleft, .blockmiddle
{
	float: left;
	width:30%;
	padding: 10px;
}

.midblockleft, .midblockmiddle
{
	float: left;
	width:15%;
	padding: 10px;
}

.midblock2left
{
	float: left;
	width:20%;
	padding: 10px;
}

.midblock3left
{
	float: left;
	width:10%;
	padding: 10px;
}

.blockleftmiddle
{
	float: left;
	width:60%;
	padding: 10px;
}

.blockcore
{
	float: left;
	width:65%;
	padding: 10px;
}

.midblockleftmiddle
{
	float: left;
	width:60%;
	padding: 10px;
}

.blockright
{
	float: right;
	width:30%;
	padding: 10px;
}
.midblockright
{
	float: right;
	width:30%;
	padding: 10px;
}

.blockfullborder
{
	float: left;
	width:99%;
	border-radius: 4px;
	border: #ccc3d6 1px solid;
	padding: 10px 5px 20px 5px;
	overflow-y:scroll;
	margin-bottom: 20px;
}

div.cidel2_scroll
{
	width:99%;
	float:left;
	border-radius: 4px;
	border: #ccc3d6 1px solid;
	padding: 10px 5px 20px 5px;
	font-size: 0.7em;
	overflow-y:auto;
	margin-bottom: 20px;
}    

.cidel1_ticketblock
{
	float: left;
	width:99%;
	border-radius: 4px;
	height: 700px;
	padding: 5px 5px 5px 5px;
	overflow-y:scroll;
	margin-bottom: 10px;
}

.submitright {
	float: right;
	padding: 5px;
	background-color: #ccc3d6;
	color: #000000;
	cursor: pointer;
	border-radius: 4px;
	width: 20%;
	border: #5791da 1px solid;
	font-size: 1.0em;
}

.ssloginbutton {
	padding: 5px;
	background-color: blue;
	color: #ffffff;
	cursor: pointer;
	border-radius: 4px;
	border: #5791da 1px solid;
	align-items: center;
	font-size: 1.3em;
}

.blocktext {
	display: inline-table;
}

.submit {
	padding: 13px;
	background-color: #009EE3;
	color: #f5f7fa;
	cursor: pointer;
	border-radius: 4px;
	width: 100%;
	border: none;
	font-size: 1.1em;
}

.done_button {
        padding: 5px;
        background-color: #009EE3;
        color: #ffffff;
	text-align:center;
        cursor: pointer;
        border-radius: 4px;
        width: 10%;
        border: none;
        font-size: 1.0em;
}


.wgt_hdr_txt_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 10px;
    border-radius: 4px;
    /*background-color: #009ee3;*/
    background-color: #37AA34;
    border: none;
    color: #ffffff;
    text-align: center;
    padding: 2px;
    height:24px;
    padding: 2px 5px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 20px;
}



.wgt_hdr_2ry_txt_btn {
    font-family: Arial;
    font-weight: bold;
    font-size: 10px;
    border-radius: 4px;
    background-color: #F5F5F5;
    border: none;
    color: #009ee3;
    text-align: center;
    height:24px;
    padding: 2px 5px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
}

.col_add_active_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    background-color: #009EE3;
    border: 1px;
    color: #FFFFFF;
    text-align: center;
    height: 2.0vh;
    padding: 0.3vh 0.5vw 0.3vh 0.5vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_add_inactive_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    background-color: #ddd;
    border: 1px;
    color: #ffffff;
    text-align: center;
    height:2.0vh;
    padding: 0.3vh 0.5vw 0.3vh 0.5vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_small_btn {
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    letter-spacing: -0.04vw;
    background-color: #009EE3;
    border: 1px;
    color: #FFFFFF;
    text-align: center;
    height: 3.0vh;
    padding: 0.5vh 0.4vw 0.5vh 0.4vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_small_btn_no_update {
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    letter-spacing: -0.04vw;
    background-color: #009EE3;
    border: 1px;
    color: #FFFFFF;
    text-align: center;
    height: 3.0vh;
    padding: 0.5vh 0.4vw 0.5vh 0.4vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.default_sort_btn {
    font-weight: normal;
    font-size: 0.6vw;
    border-radius: 15px;
    background-color: #009EE3;
    border: 1px;
    color: #FFFFFF;
    text-align: center;
    height: 2.0vh;
    padding: 0.2vh 0.4vw 0.2vh 0.4vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_add_active2_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    background-color: #5bc4ba;
    border: 1px;
    color: #FFFFFF;
    text-align: center;
    height: 3.0vh;
    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_add_inactive2_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 0.7vw;
    border-radius: 4px;
    background-color: #bbb;
    border: 1px;
    color: #ffffff;
    text-align: center;
    height:3.0vh;
    padding: 0.5vh 0.5vw 0.5vh 0.5vw;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_att_fetch_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 11px;
    border-radius: 4px;
    background-color: #009ee3;
    border: 1px;
    color: #ffffff;
    text-align: center;
    padding: 2px;
    height:24px;
    padding: 2px 2px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

/*
input[type=checkbox][disabled][checked] {
    filter: invert(100%) hue-rotate(18deg) brightness(5);
}
*/
/*
input[type=checkbox][disabled] {
    filter: invert(100%) hue-rotate(18deg) brightness(5);
}
*/

.col_att_delete_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 11px;
    border-radius: 4px;
    background-color: #d39b9b;
    border: 1px;
    color: #ffffff;
    text-align: center;
    padding: 2px;
    height:24px;
    padding: 2px 2px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_reallydelete_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 11px;
    border-radius: 4px;
    background-color: #d93e3e;
    border: 1px;
    color: #ffffff;
    text-align: center;
    padding: 2px;
    height:24px;
    padding: 2px 5px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}

.col_canceldelete_btn {
    font-family: Arial;
    font-weight: normal;
    font-size: 11px;
    border-radius: 4px;
    background-color: green;
    border: 1px;
    color: #ffffff;
    text-align: center;
    padding: 2px;
    height:24px;
    padding: 2px 5px 2px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
}


#contextMenu {
  	position: absolute;
  	display: none;
}

[type='file']::file-selector-button {
  width: 100%;
}

[type='file'] {
  width: 100%;
  min-width: 10ch;
}

[type='file']::file-selector-button {
  	width: 100%;
	display: block;
	text-align: center;
	font-family: Arial;
  	padding: 6px;
  	background-color: #5bc4ba;
  	color: #333;
  	border: 1px;
	border-color: #333;
  	border-radius: 4px;
  	text-transform: uppercase;
}

.text-circle {
    	display: inline-block;
    	background-color: #ff0000;
    	color: #fff;
    	border-radius: 50%;
    	font-size: 1vw;
    	line-height: 1.5vw; 
    	width: 1.5vw;
    	height: 1.5vw;
	margin-right:1vw;
    	text-align: center;
}

.response-text {
	max-width: 380px;
	font-size: 1.5em;
	text-align: center;
	background: #fff3de;
	padding: 42px;
	border-radius: 3px;
	border: #f5e9d4 1px solid;
	font-family: Arial;
	line-height: 34px;
	margin: 15px auto;
}

.dashboard {
	background: #d2edd5;
	text-align: center;
	margin: 15px auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 4px;
	padding: 30px;
	max-width: 400px;
	border: #c8e0cb 1px solid;
}

.error-info {
	color: #FF0000;
	margin-left: 10px;
}

.name-info {
	color: #FF0000;
	margin-left: 10px;
	width: 150px;
}

a.logout-button {
	color: #09f;
}

#first_appt_time, #second_appt_time
{
	float:right;
	width: 48%;
	display:none;
}

#ctxmenu {
  position: fixed;
  background: #FFFFFF;
  color: #FFFFFF;
  padding:5px;
  font-size: 1vw;
  cursor: pointer;
  border: 1px #333 solid
}

#ctxmenu > p {
  padding: 2 1rem;
  font-size: 0.7vw;
  margin: 0
}

#ctxmenu > p:hover {
  background: #009EE3;
  color: #FFFFFF;
}

#bookingform
{
	display:block;
}

#result
{
	display:none;
}

.ui-datepicker {
	width: 10em; /*what ever width you want*/
}

.blueball {
	height: 10px;
	width: 10px;
	background-color: #0e61c2;
	border-radius: 50%;
	display: inline-block;
}

.redball {
	height: 10px;
	width: 10px;
	background-color: #e53731;
	border-radius: 50%;
	display: inline-block;
}

.yellowball {
	height: 10px;
	width: 10px;
	background-color: #fdec00;
	border-radius: 50%;
	display: inline-block;
}

.greenball {
	height: 10px;
	width: 10px;
	background-color: #3fb24d;
	border-radius: 50%;
	display: inline-block;
}

.greyball {
	height: 10px;
	width: 10px;
	background-color: #757575;
	border-radius: 50%;
	display: inline-block;
}

div.blueTable {
	border: 0px solid #FFFFFF;
	/*background-color: #FFFFFF;*/
	text-align: left;
	border-collapse: collapse;
}

.divTable.blueTable {
	border: 0px solid 1px solid #DDDDDD;
	padding: 3px 2px;
	display:inline-block;
	overflow: auto;
	max-height: 100%;
}

.divTable.blueTable .divTableCell, .divTable.blueTable .divTableCellH, .divTable.blueTable .divTableCellReadOnly, .divTable.blueTable .divTableCellRag, .divTable.blueTable .divTableCellPicklist, .divTable.blueTable .divTableCellTrigger, .divTable.blueTable .divTableCellTarget, .divTable.blueTable .divTableCellCheckbox, .divTable.blueTable .divTableCellDate, .divTable.blueTable .divTableCellMulti, .divTable.blueTable .divTableCellCalendar, .divTable.blueTable .divTableHead, .divTable.blueTable .divTableHeadCalendar {
	border: 1px solid #DDDDDD;
	padding: 3px 2px; 
	line-height: 1.2;
	overflow: hidden;
	font-weight: normal;
	text-overflow: ellipsis;
	vertical-align: middle;
	word-break: break-word;
}

.divTable.blueTable .divTableCellEdit {
	border: 1px solid #DDDDDD;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.divTable.blueTable .divTableBody .divTableCell {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellH {
        font-size: 10px;
        color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellCalendar {
        font-size: 10px;
        color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellEdit {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellReadOnly {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellPicklist {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellTrigger {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellTarget {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellCheckbox {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellRag {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellDate {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableBody .divTableCellMulti {
	font-size: 10px;
	color: #415161;
}

.divTable.blueTable .divTableRow:nth-child(even) {
	background: #D6EFFA;
}

.divTable.blueTable .divTableRow:nth-child(odd) {
	background: #F0FAFF;
}



		.divTable.blueTable .divTableRow:hover {
			filter: brightness(95%);
		}

		.divTableCellEdit:hover {
			filter: brightness(95%);
		}
	

.divTable.blueTable .divTableHeading {
	background: #5aaed3;
	margin-top:10vh;
	position: relative;
}

.divTable.blueTable .divTableHeading .divTableHead {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

.divTable.blueTable .divTableHeading .divTableHeadCalendar {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
	border-left: none;
}

.divTable.blueTable .divTableHeading .divTableHeadCalendar:first-child {
	border-left: none;
}

.blueTable .tableFootStyle {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	background: #D0E4F5;
	background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	border-top: 2px solid #444444;
}

.blueTable .tableFootStyle {
	font-size: 10px;
}

.blueTable .tableFootStyle .links {
	 text-align: right;
}

.blueTable .tableFootStyle .links a{
	display: inline-block;
	background: #1C6EA4;
	color: #FFFFFF;
	padding: 2px 8px;
	border-radius: 5px;
}

.blueTable.outerTableFooter {
	border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
	padding: 3px 5px;
}

.divTable
{ 
	display: table; 
}

.divTableRow { 
	display: table-row; 
}

.divTableRow:hover {
	background-color: #dcebf8;
}

.divTableRow.editing .divTableCell INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellH INPUT
{
        color: blue;
        font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}


.divTableRow.editing .divTableCellCalendar INPUT
{
        color: blue;
        font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellEdit INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellEdit TEXTAREA
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellPicklist INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellTrigger INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellTarget INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellCheckbox INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellDate INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableRow.editing .divTableCellMulti INPUT
{
	color: blue;
	font-family: Arial, Verdana, Helvetica, sans-serif, Arial;
}

.divTableHeading { 
	display: table-header-group;
}

.divTableCell { 
	display: table-cell;
}

.divTableCellH {
        display: table-cell;
}

.divTableCellCalendar {
        display: table-cell;
}

.divTableCellEdit { 
	display: table-cell;
}

.divTableCellReadOnly { 
	display: table-cell;
}

.divTableCellPicklist { 
	display: table-cell;
}

.divTableCellDate { 
	display: table-cell;
}

.divTableCellMulti { 
	display: table-cell;
}

.divTableCellTrigger { 
	display: table-cell;
}

.divTableCellTarget { 
	display: table-cell;
}

.divTableCellCheckbox { 
	display: table-cell;
}

.divTableCellRag { 
	display: table-cell;
}

.divTableHead {
	background: #5AAED3;
	display: table-cell;
	position: sticky;
	top: -4;
	z-index: 2;
}

.divTableHeadCalendar {
	background: #5AAED3;
	display: table-cell;
	position: sticky;
	top: -4;
	z-index: 2;
}

.divTableHead2 {
	background: -moz-linear-gradient(top, #eb5c17cc 0%, #eb5c17cc 66%, #eb5c17cc 100%);
	background: -webkit-linear-gradient(top, #eb5c17cc 0%, #eb5c17cc 66%, #eb5c17cc 100%);
	background: linear-gradient(to bottom, #eb5c17cc 0%, #eb5c17cc 66%, #eb5c17cc 100%);
	display: table-cell;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}

.divTableHeading {
	display: table-header-group;
	position: sticky;
	top: -4;
}

.divTableFoot { 
	display: table-footer-group;
}

.divTableBody {
	display: table-row-group;
}

.hide {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
}

div.detailTable {
	border: 0px solid #FFFFFF;
	background-color: #FFFFFF;
	text-align: left;
	border-collapse: collapse;
}

.divTable.detailTable {
	border: 0px solid #DDDDDD;
	max-width: 100%;
	padding: 3px 2px;
	display:block;
	overflow: none;
}

.divTable.detailTable .divTableCell, .divTable.detailTable .divTableHead {
	border: 1px solid #DDDDDD;
	padding: 3px 2px;
	text-overflow: ellipsis;
}

.divTable.detailTable .divTableCellH, .divTable.detailTable .divTableHead {
        border: 1px solid #DDDDDD;
        padding: 3px 2px;
        text-overflow: ellipsis;
}

.divTable.detailTable .divTableCellCalendar, .divTable.detailTable .divTableHeadCalendar {
        border: 1px solid #DDDDDD;
        padding: 3px 2px;
        text-overflow: ellipsis;
}

.divTable.detailTable .divTableBody .divTableCell {
	font-size: 12px;
	vertical-align: text-top;
	border: none;
	padding: 0vw 0.8vw 0.8vw 0.8vw;
}

.divTable.detailTable .divTableBody .divTableCellH {
        font-size: 12px;
        vertical-align: text-top;
        border: none;
}

.divTable.detailTable .divTableBody .divTableCellCalendar {
        font-size: 12px;
        vertical-align: text-top;
        border: none;
}

.divTable.detailTable .divTableBody .divTableCellEdit {
	font-size: 12px;
	vertical-align: text-top;
	border: none;
}

.divTable.detailTable .divTableBody .divTableCellTitle {
	font-size: 12px;
	font-weight: bold;  
	float: top;
	vertical-align: top;
	border: none;
	padding: 0vw 0.8vw 0.2vw 0.8vw;
}

.divTable.detailTable .divTableBody .divTablePassCell {
	font-size: 12px;
	color: #ffffff;
	background-color: green;
	border: none;
}

.divTable.detailTable .divTableBody .divTableFailCell {
	font-size: 12px;
	color: #ffffff;
	background-color: red;
	border: none;
}

.divTable.detailTable .divTableBody .divTableNoTestCell {
	font-size: 12px;
	color: #ffffff;
	background-color: orange;
	border: none;
}

.divTable.detailTable .divTableBody .divTableAssetCell {
	font-size: 12px;
	color: #ffffff;
	background-color: #5592bb;
	width: 100%;
	white-space:nowrap;
}

.divTable.detailTable .divTableHeading {
	background: #eeeeee;
	background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	border-bottom: 2px solid #444444;
}

.divTable.detailTable .divTableHeading .divTableHead {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border-left: 2px solid #D0E4F5;
	/*resize: horizontal;*/
}

.divTable.detailTable .divTableHeading .divTableHeadCalendar {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border-left: 2px solid #D0E4F5;
	/*resize: horizontal;*/
}

.divTable.detailTable .divTableHeading .divTableHead:first-child {
	border-left: none;
}

.divTable.detailTable .divTableHeading .divTableHeadCalendar:first-child {
	border-left: none;
}

.detailTable .tableFootStyle {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	background: #D0E4F5;
	background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	border-top: 2px solid #444444;
}

.detailTable .tableFootStyle {
	font-size: 10px;
}

.detailTable .tableFootStyle .links {
	 text-align: right;
}

.detailTable .tableFootStyle .links a{
	display: inline-block;
	background: #1C6EA4;
	color: #FFFFFF;
	padding: 2px 8px;
	border-radius: 5px;
}

.detailTable.outerTableFooter {
	border-top: none;
}

.detailTable.outerTableFooter .tableFootStyle {
	padding: 3px 5px;
}

#pwcontainer {
	width: 100px;
	height: 100px;
	position: absolute;
	display: none;
	z-index: 9;
	top: 50%;
	left: 50%;
}

#navi,
#infoi {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#infoi {
	z-index: 10;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

#thistooltip {
	float:left;
}


.tooltip { /* This is the class wrapping the icon  */
  position: relative;
  background-color: transparent;
  display: inline-block;

}

.tooltip .tooltiptext {
  visibility: hidden;
  white-space: nowrap;
  max-width: fit-content;

  background-color: #667380;
  color: #f5f5f5;

  text-align: center;
  font-family: Arial;
  font-size: 13px;

  border-radius: 5px;
  padding: 7px 7px;

  position: absolute;
  height: 18px;
  bottom: -200%; /* bottom of TT is x% below bottom of text */
  right: -5px;
  z-index: 1;

  opacity: 0;
  transition: opacity 1s;

 }
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: -30%;
  right: 5px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent  #667380  transparent ;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
   opacity: 1;
}

.bubblingG {
	text-align: center;
	width:156px;
	height:98px;
	margin: auto;
}

.bubblingG span {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin: 48px auto;
	background: rgb(48,20,204);
	border-radius: 98px;
	-o-border-radius: 98px;
	-ms-border-radius: 98px;
	-webkit-border-radius: 98px;
	-moz-border-radius: 98px;
	animation: bubblingG 1.5s infinite alternate;
	-o-animation: bubblingG 1.5s infinite alternate;
	-ms-animation: bubblingG 1.5s infinite alternate;
	-webkit-animation: bubblingG 1.5s infinite alternate;
	-moz-animation: bubblingG 1.5s infinite alternate;
}

#bubblingG_1 {
	animation-delay: 0s;
	-o-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
}

#bubblingG_2 {
	animation-delay: 0.45s;
	-o-animation-delay: 0.45s;
	-ms-animation-delay: 0.45s;
	-webkit-animation-delay: 0.45s;
	-moz-animation-delay: 0.45s;
}

#bubblingG_3 {
	animation-delay: 0.9s;
	-o-animation-delay: 0.9s;
	-ms-animation-delay: 0.9s;
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
}

@keyframes bubblingG {
	0% {
		width: 20px;
		height: 20px;
		background-color:rgb(34,63,209);
		transform: translateY(0);
	}

	100% {
		width: 46px;
		height: 46px;
		background-color:rgb(255,255,255);
		transform: translateY(-40px);
	}
}

@-o-keyframes bubblingG {
	0% {
		width: 20px;
		height: 20px;
		background-color:rgb(34,63,209);
		-o-transform: translateY(0);
	}

	100% {
		width: 46px;
		height: 46px;
		background-color:rgb(255,255,255);
		-o-transform: translateY(-40px);
	}
}

@-ms-keyframes bubblingG {
	0% {
		width: 20px;
		height: 20px;
		background-color:rgb(34,63,209);
		-ms-transform: translateY(0);
	}

	100% {
		width: 46px;
		height: 46px;
		background-color:rgb(255,255,255);
		-ms-transform: translateY(-40px);
	}
}

@-webkit-keyframes bubblingG {
	0% {
		width: 20px;
		height: 20px;
		background-color:rgb(34,63,209);
		-webkit-transform: translateY(0);
	}

	100% {
		width: 46px;
		height: 46px;
		background-color:rgb(255,255,255);
		-webkit-transform: translateY(-40px);
	}
}

@-moz-keyframes bubblingG {
	0% {
		width: 20px;
		height: 20px;
		background-color:rgb(34,63,209);
		-moz-transform: translateY(0);
	}

	100% {
		width: 46px;
		height: 46px;
		background-color:rgb(255,255,255);
		-moz-transform: translateY(-40px);
	}
}

#pwtext {
  	height:3vh;
  	width:10vw;
	opacity:0.7;
  	position:relative;
	border-radius:5px;
}

#pwtext:before {
  	position:absolute;
  	height:3vh;
	opacity:1;
	font-size:0.7em;
	content: attr(pw-before);
  	top:0;
  	left:0;
  	display:flex;
  	color:white;
  	align-items:center;
  	justify-content:flex-end;
  	padding-left:10px;
  	padding-right:10px;
}

[data-title]:hover:after {
	opacity: 1;
	transition: all 0.1s ease 0.5s;
	visibility: visible;
}
[data-title]:after {
	content: attr(data-title);
	background-color: #00FF00;
	color: #111;
	font-size: 150%;
	position: absolute;
	padding: 1px 5px 2px 5px;
	bottom: -1.6em;
	left: 100%;
	white-space: nowrap;
	box-shadow: 1px 1px 3px #222222;
	opacity: 0;
	border: 1px solid #111111;
	z-index: 99999;
	visibility: hidden;
}
[data-title] {
	position: relative;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 { display: block; font-size: 2.75em; line-height: 2.35em; color: #7291a5; margin-bottom: 12px; font-weight: normal; font-family: 'Oldenburg', 'Trebuchet MS', Arial, sans-serif; text-shadow: 0px 1px 1px #fff; text-align: center; }

p { font-size: 1.2em; font-weight: normal; line-height: 1.35em; color: #343434; margin-bottom: 12px; }

/* page container */
#wrap { display: block; width: 850px; margin: 0 auto; padding-top: 35px; }

/* Style the tab */
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 15px;
  transition: 0.3s;
  font-family: Verdana;
  font-size: 12px;
  color: #415161;
}

/* Change background color of buttons on hover */
.tab button:hover {
    border-bottom: 1px solid #009ee3;
    color: #666666;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #f5f5f5;
  border-bottom: 1px solid #009ee3;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: 0px solid #fff;
  border-bottom: 1px solid #ccc;

}

/* Google Login Button */
.gLoginBtn {
  box-sizing: border-box;
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
}
.gLoginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.gLoginBtn:focus {
  outline: none;
}
.gLoginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
.gLoginBtn--google {
  background: #DD4B39;
}
.gLoginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.gLoginBtn--google:hover,
.gLoginBtn--google:focus {
  background: #E74B37;
}

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: 20vw;
  max-width: 400px;
  min-width: min-content;
  border-color: #8e918f;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.form_container {
  background-color: #ffffff;
  position: relative;
  display: inline-block;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.form_title {
  background-color: #ffffff;
  vertical-align: top;
  font-family: Arial;
  font-weight: normal;
  font-size: 2vh;
  position: relative;
  top: 2.5vh;
  padding-left: 4vw;
  color: #415161;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
}

.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #e3e3e31f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: white;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 8%;
}