input[type=text],input[type=password]{
border:none;
border-bottom-color : #C0C0C0;
border-bottom-style : solid;
border-bottom-width : 0.1vh;
height:4vh;
font-size:1vw;
width:100%;
color:#808080;
background-color:transparent;
margin-top:0;
margin-bottom:0;
box-shadow:0px 0px 0px 0px;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
}

body {                  
    width: 100%;
    height: 100%;    
    background-color: white;
    overflow: hidden;
}
html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}
html,
body,
* {
	box-sizing: border-box;
}
label{
font-size:1.1vw;
color:#B0B0B0;
/*font-weight:600;*/
}
a {
    color:#B0B0B0;
    font-size:1vw;
}
select {
    /*width: 12em;*/
    width: 100%;    
    /*height: 2%;*/    
    cursor:pointer;
    color:#808080;
    /*font-size:16px;*/
    font-size:1.1vw;
    /*margin-top:0.5em;*/
    /*margin-left:1em;*/    
    border:none;
    border-color : #808080;
    background-color:transparent;
    font-weight:600;
    margin-top:3vh;    
    /*background-color:#0c3451;*/
}
    select::-ms-expand {
        width: 10px;
        height: 10px;
        border: none;
        /*color:white;*/
        background-color: transparent;
    }
.dbdrpdwn {    
    text-decoration:none;
    /*font-size:16px;*/
     font-size: 1.5vw;
}
.signinbox {
    padding: 0.5vh;
    /*height: 25px;*/
    /*position: relative;*/
    /*left: 0;*/
    /*outline: none;*/
    /*border: 1px solid #cdcdcd;*/
    border:none;
    background-color:#0c3451;
    color:white;
    border-bottom:solid 1px white; /*rgba(0,0,0,.15);*/.imglogowidth
    /*background-color: white;*/
    /*font-size: small;*/
    font-size: 1vw;
    margin-right: 1vw;
    /*font-family: Open Sans;*/
    /*height:50%;*/
    /*border-radius: 0.15%;*/
}
.margnrt1 {
    margin-right: 1vw;
}
.margntp1 {
    margin-top: 2vh;
}

button {
    background-color: #D8D8D8;
    border: none; /*solid 1px #000000;*/
    /*border-radius: 2px;*/
    color: black;
    position: relative;
    /*height: 32px;*/
    height: 4vh;
    /*margin-top:0.1vw;*/
    /*padding: 0.5vw;*/
    /*min-width: 70px;*/
    /*padding: 0 16px;*/
    display: inline-block;
    /*font-size: 14px;*/
    /*font-family: Roboto;
    font-size: 0.8vw;*/
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    overflow: hidden;
    /*margin-top: 0.5vh;*/
    margin-right: 1vh;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    border-radius: 15px;
    min-width: 4vw !important;
    padding-left: 10px;
    padding-right: 10px;
}
.hrmnybtn {
    background-color: #f78f1e; /*#0c3451;*/ /*maroon;*/
    border: none;
    color: white;
    margin-right: 0vh;
    text-transform: lowercase;
    /*font-weight:bold;*/
}
button.hrmnybtn::first-letter,
button.hrmnybtn::first-line {
    text-transform: uppercase;
}


button:first-letter, button:first-line {
    text-transform: capitalize !important;
}

.signinmaindiv {
    width: 100%;
    height:100%;            
    background-color:#FFFFFF;
    box-shadow:1px 1px 1px 2px rgba(0,0,0,0.2);
}
.signinheader {  
    display:table;  
    background-color: #0c3451;          
    width:100%;       
    height: 6vh;
    padding-left:0.5vh;
    padding-right:0.5vh;    
    box-shadow:0px 0px 10px 3px rgba(0,0,0,0.2); 
}
.signinbg {
    background-color:lightgrey;            
    margin:0;       
}
.signincontent {
    /*display: inline-flex;*/
    /*position:fixed;*/
    /*width: 100%;*/
    height: 90vh;
    width:100%;    
    /*margin-left:1%;*/
    /*margin-top: .2%;*/
    background-color: white;    
}
.height3 {
    height: 2%;
}
.height48 {
    height: 48%;
}
.height50 {
    height: 45%;
}
.height20 {
    height: 20vh;
}
.height15 {
    height: 15vh;
}
.height52 {
    height: 52%;
}
.xlargefontclass {    
    font-size:x-large;    
}

/* START OF STYLES FOR PROGRESS BAR */
.progressbarbody {
	width: 100vw;
	height: 100vh;
	background-color: rgba(255,255,255,.5);
	z-index: 10000;
	position: fixed;
	top:0px;
}

.progressbarstyle {
	/*width: 2.5rem;*/
	/*width: 75px;
	height: 75px;*/
    /*comment below two lines for progressbar stretched other logos*/
	/*width: 5.5vw;
	height: 11.5vh;*/
    height:100%;
	position: fixed; /*it can be fixed too*/
	left: 0;
	right: 0;
	/*top: 0;
	bottom: 0;*/
	margin: auto;
	/*this to solve "the content will not be cut when the window is smaller than the content": */
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
}

/* New Styles */
.subDivProgress {	
	/*width: 60px;
	height: 5px;*/
	width: 4vw;
	height: 0.6vh;
	background-color: #0c3451; /*#D0D0D0;*/
	position: relative;
	animation-timing-function: ease-in;
	animation: progressbar 2s infinite;
	animation-direction: normal;  
}
/* Standard syntax */
@keyframes progressbar {
	0%   {left:0px; top:0px;}
	100%  {left:90%; top:0px;}
}
.mainDivProgress {
	/*margin-top: 10%;*/
	position:fixed;
	top: 57.5vh;
	left: 30vw;
	width: 40vw;
	background-color: #D0D0D0; /*#f0f5f5; ;*/
}
/* END OF STYLES FOR PROGRESS BAR */

/*.divrightheader {        
    float: right;
    display: inline-flex;    
}*/
/*.rblfbkg {
    background-color: lightgrey;
    padding: 1vw;
}*/
/*.textcenteralign {
    text-align: center;
}*/

/*.paddinglft12 {      
    display: inline-flex;
    width: 100%;
}*/
.paddinglft6 {
    padding-left: 6%;
}
.greycolorfont {
    color: #A0A0A0;
}
.ltgreycolorfont {
    color: #d8d8d8;
}
.whitecolorfont {
    color: #FFFFFF;
}
.blackcolorfont {
    color: #000000;
}
.margintop3 {
    margin-top: 3%;
    margin-left:5vh;
}
.margintop1 {
    margin-top: 0.5%;
}
.paddingtop15 {
    padding-top: 15%;
}
.margintop6 {
    margin-top: 6%;
}
.margnlft2 {
    margin-left: 2%;
}
.lstloginmargin {
    margin-left: 0.2vw;
}
.divImglogo {
    padding: 0.5vw 0.5vw 0.5vw 0vw;
    float: left;
}
.imglogowidth {    
    width: 1.5vw;
}
.lbldesc {    
     font-size: 1.1vw;
    font-weight: bold;
}
.lbltitle {
    font-size: 3vw;
    font-weight: bold;
}
.titlefont {
    color: #0c3451;    
}
/*.divtitle {
    text-align: center;    
    margin-top: 3vh;    
    margin-left: 14vw;
    width: 50vw;    
    display: inline-flex;
}*/
/*.divsubtitle {
    background-color: #0c3451;            
    padding: 1vw;
}*/
/*.lblwlcme {    
    font-size: 1.5vw;
    font-weight: bold;
}*/
.divmaindesc {
    width: 100%;
    text-align: center;
    padding-top: 2%;
}
.lblmaindesc {
    font-weight: bold;
    font-size: 1vw;
        color: #fff5f8  !important;
    font-style: italic;
}

.statscountwidth {
    width: 30%;
}

.statsnamewidth {
    width: 70%;
}
.lblstats {       
     font-size: 0.9vw;
     font-weight:400;
        color: lightgrey !important;
}
.divContent {
    /*left: 5vw;
    top: 20vh;
    width: 25vw;*/
    /*position: absolute;*/
}

.divStatistics {
  /*  left: 5vw;
    top: 20vh;
    width: 1vw;*/
    /*position: absolute;*/
}
#divcontent {
 /*   display: inline-block;
    position: absolute;    
    left:0.5vw;      */
    /*color: #f1f1f1;    */
    padding: 1vw;
}

#divStatistics {
    /*display: inline-block;
    position: absolute;    
    left:0.5vw; 
    width: 20vw;*/
    /*color: #f1f1f1;    */
    padding: 1vw;
}

#divStats {
    top: 2vh;
}

.divTextBlock {
    padding-top: 2vh;
}

.heightwidth100 {
    width: 100%;
    height: 100%;
}

.divDivTime {

}
.divTime {
    font-size: 4.5vw;
    /*color: #FFFFFF;*/
    font-weight: 200;
    text-align: center;
}
.divDivDay {

}
.divDay {
    /*color: #FFFFFF;*/
    font-size: 2vw;
    font-weight: 200;
    text-align: center;
}

.divDivAppName {

}
.divAppName {
    /*color: #FFFFFF;*/
    font-size: 3vw;
     font-weight: bold;
    font-weight: 200;
    font-family: 'Segoe UI Lucid';
  
}

.fullheight {
    height: 100%;
}
.clientlogowidth {
    width: 15vw;
    height:15vh;
}
/*.licensemsg {
    display: inline-flex;
    margin-left: 30%;
    width: 20vw;
}*/

/*.progressbarlocation {
    margin-top: 30%;
    margin-left: 35%;
}*/

.eventsfntsize {
    font-size: 0.8vw;
}
.divRememberMe {
    margin-top: 0.4vh;
    /*margin-left: 0.2vw;*/
}
.margntpsigninbtn {
    margin-top: 0.5vh;
}
.iptRememberwidth {
    width: 0.8vw;
}
.divForgotPwd {
    margin-top: 1vh;
}
.licenseagree{
    font-size: 1.2vw;
    font-family: Open Sans;
}
.licensepara{
    font-size: 1vw;
    font-family: Open Sans;
}
.licensesubtext{
    font-size: 1.1vw;
    font-family: Open Sans;
}

.d-menu {
    text-align: left;
    background: #ffffff;
    list-style: none inside none;
    position: absolute;
    bottom: -9vh;
    border-radius: 15px;
    height: 80%;
    text-transform: uppercase;
    right: 25vw;
    cursor: pointer;
    padding: 0vw;
    width: 18vw;
    border-collapse: separate;
    display: none;
    z-index: 100000;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

/*#ListEle {
    padding: 1vh 2vh 1vh 2vh;    
    border-bottom: solid 0.1vh #f0f0f0;
    color: #303030;    
    font-size: 0.8vw;
    font-weight: 600;
}

#ListEle:hover {
    background-color:#E8E8E8;
}*/


.circle {
  height: 1.6vh;
  width: 1.6vh;
  background-color: #ee7600;
  border-radius: 50%;
  margin-top: 0.8vh;
}
.heightwidth1vw {
    height: 1vw;
    width: 1vw;
}
.imgDivContent {
    position: absolute;
    top: 3vh;
}
.imgDivStatistics {
    position: absolute;
    top: 3vh;
}

.w3-animate-fading {
    animation: fading 5s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.divSignInPanelClass {
    left: 57vw;
    border-radius: 2vh;
    top: 15vh;
    width: 28vw;
    height: 70vh;
    position: fixed;
    opacity:0.8;
    z-index: 10000;
    background-color: #FFFFFF;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    padding-bottom: 0.3vw;
}
.divDivSignInPanelClass {
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.divTopSignInPanel {
    width: 100%;
    height: 18%;
    text-align: center;
    padding: 0vw 1vw 0vw 1vw;
    border-bottom: solid 0.1vh #F0F0F0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    align-self: center;
    /* width: 119px; */
    vertical-align: middle;
}
.imageHarmonyLogo {
    /*width: 3vw;*/
    display: none;
}
.labelHamrony {
    margin-left: 1vh;
    font-size: 16px;
    font-weight: 700;
    color: #0A557F;
    text-transform:uppercase;
}
.divBuildCopyrightLabel {
    padding: 0vw 0vw 0vw 1vw;
    display: flex !important;
    width: 55%;
    /* margin-left: 1vw; */
    justify-content: center;
    flex-direction: column;
    text-align: right;
    align-items: flex-start;
    /* border-left: 0.5px solid lightgrey; */
    align-content: center;
    align-self: center;
}
.buildCopyrightLabel {
    font-size: 0.8vw;
 /*   font-weight: 400;    
    font-style: italic;*/
}

.divTopInputSignInPanel {
    width: 100%;
    height: 35%;
    /*margin-top: 2vh;*/
    padding: 0vw 2.5vw;
    position: relative;
}

.divLabelWelcome {
    width: 100%;
    text-align: center;
    display: none;
}
.labelWelcome {
    font-size: 1.5vw;
    font-weight: 400;
    color: #808080;
}
.divDivUserNameEntry {
    width: 100%;
    margin-top: 1.5vh;
}
#txtLoginName {
    margin-top: 1.5vh;
    height: 5vh;
    text-align: center;
    border: 1px solid lightgrey;
}
#txtPassword {
    height: 5vh;
    text-align: center;
    border: 1px solid lightgrey;
}
.divInputUserNameEntry {
}
.inputTextLoginName {
    font-size: 1.3vw !important;
}
.divUserNameDisplay {
    width: 100%;
    text-align: center;
    margin-top: 1.5vh;
}
.labelUserName {
    font-size: 1.7vw;
    color: #ee7600;
    font-weight: 400;
}
.divLabelNotificationCount {
    margin-left: 1vh;
}
.labelNotificationsCount {
    font-size: 0.8vw;
}
.labelLastLogin {
    font-size: 0.8vw;    
}
.labelLastLoginColor {
    font-size: 0.8vw;
    color: #ee7600;
}
.divPassword {
    width: 100%;
    margin-top: 4vh;
}
.divInputPassword {
}
.inputTextPassword {
    font-size: 1.3vw !important;
}
.divBottomButtonsSignInPanel {
    width: 100%;
    height: 12%;
    padding: 0 0.5vw 0 0.5vw;
    border-bottom: solid 0.1vh #F0F0F0;
    margin-top: 3vh;
}
.divDivLoginBtn {
    width: 28%;
    float: right;
    margin-right: 2vw;
}
.divLoginBtn {
}
.divRememberMeLabel {
    width: 30%;
    float: left;
    margin-left: 0.5vw;
    margin-top: 1vh;
    text-align: right;
}
.rememberMeLabel {
    font-size: 0.8vw;
    color: #808080;
    /*font-weight: 600;*/
    margin-left: 2vw;
}
.divChangeUserLabel {
    width: 32%;
    float: left;
    margin-top: 1vh;
    text-align: right;
}
.changeUserLabel {
    font-size: 0.8vw;
    color: #808080;
    font-weight: 200;
    /*margin-left: 2vw;*/
}
.divBottomImagesSignInPanel {
    width: 100%;
    height: 20%; 
    margin-top: 2vh;
    display: flex;
}
.divBottomImageLeftSignInPanel {
    width: 53%; /*42%;*/
    /*width: 75%;
    height: 100%;*/
    /* float: left; */
    /*position: relative;
    left: 4vw !important;*/
    /* display: flex;
    align-items: center;
    text-align: center;*/
    /* width: 96%; */
    /* height: 10%; */
    /*justify-content: space-around;*/
    /* float: left; */
    align-items: center;
    border-right: 0.5px dotted lightgrey;
    /* display: flex; */
    /* align-content: space-around; */
    padding-right: 1vw;
    text-align: center;
}

#dbNamesList {
    overflow: scroll;
    outline: none;
    display: block;
    position: absolute;
    height: 36vh;
    padding: 1vh;
}

.divBottomImageTopLeftSignInPanel {
    width: 50%;
    /*height: 100%;*/
    float: left;
    display: flex;
}
.divLicensedToLabel {
    text-align: center;
    margin-bottom: 1vh;
    /*width: 30%;*/
    margin-left: 2vw;
    font-style: italic;
}
.licensedToLabel {
    font-size: 0.9vw;
    color: #205edd;
    /* border: 1px solid lightgrey; */
    /* padding: 0.5vh; */
    border-radius: 15px;
}
.divClientImage {
    width: 100%;
    /*padding-left: 5vh;*/
    height: 80%;
    justify-content: center;
}
.divBottomImageRightSignInPanel {
    width: 50%;
    height: 100%;
    padding-right: 5vh;
    margin-left: 3.6vh;
    float: right;
}
.divHarmonyImageRightSignInPanel {
    width: 80%;
}
.divBottomSignInPanel {
    width: 50vw;
    margin-top: 5vh;
    position: fixed;
    height: 5vh;
    border-radius: 6px;
    align-content: center;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    left: 25vw;
    border: 0.5px solid lightgrey;
    bottom: 1vh;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    background-color: rgba(255, 255, 255, 0.9);
}
.divDivBottomSignInPanel {
    width: 100%;
    display: inline-flex;
}
.divCopyrightLabel {
    width: 79%;
    padding-left: 2vh;
}
.copyrightLabel {
    font-size: 0.9vw;
    color: #808080;
}
.divHelpaTag {
    width: 8%;
}
.helpaTag {
    /*border: 1px solid grey;*/
    text-decoration: none;
    padding: 1vh;
    border-radius: 12px;
}
.divTermsaTag {
    width: 13%;
    text-align: left;
}
.termsaTag {
    /*font-size: 0.7vw;*/
    text-decoration: none;
    /*border: 1px solid grey;*/
    padding: 1vh;
    border-radius: 12px;
}

.justifyCenterRowFlex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.loginImgChange {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
/*#divSignInPanel {
    content: "";
    background-image: url(../Images/G4-LOGO-256X256.png);
    background-repeat:no-repeat;    
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}*/
input:hover {
    box-shadow: 0 0 0 0;
}

@font-face {
    font-family: Algerian;
    src: url(fonts/ALGER.woff);
}
@font-face {
    font-family: 'Lucid';
    src: url(fonts/LBRITE.woff);
}
@font-face {
    font-family: 'Segoe UI Light';
    src: url(fonts/segoe-ui-webfont.woff);
}
@font-face {
    font-family: Calibri;
    src: url(fonts/calibri.woff);
}

.CalibriFont {
    font-family: Calibri;
}

button:hover {
box-shadow:0 1px 2px 0 rgba(255,255,255,.3), 0 1px 3px 1px rgba(255,255,255,.3);
}

.imageHarmonyLogoUnison {
    width: 9vw;
}

.timePanel {
    /*color: palevioletred;*/
}

.panelChild {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.panelParent {
    width: 25vw;
    height: 50vh;
    position: absolute;
    border-radius: 15px;
    top: 25vh;
    display: flex;
    padding: 1vw;
    left: 16vw;
    /*background: rgba(0, 0, 0, 0.5);*/
    flex-direction: column;
    color: lightgrey !important;
    /*border: 1px solid #9c9595;*/ /*rgb(55, 55, 55);*/
    box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.1);
}

.panelParent2 {
    width: 25vw;
    /*height: 58vh;*/
    min-height: 58vh;
    height:auto;
    position: absolute;
    border-radius: 15px;
    top: 25vh;
    display: flex;
    padding: 1vw;
    padding-top: 0.5vw;
    left: 59vw !important;
    background: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    /*color: lightgrey !important;*/
    border: 1px solid rgb(55, 55, 55);
}
.loginBackgroundDiv {
    background-color: rgb(25, 160, 175);
    /*background-image: linear-gradient( 140deg, rgb(54, 36, 31) 0%, rgb(121, 56, 100) 50%, rgb(142, 156, 34) 75%);*/
    /*background-image: linear-gradient( 140deg, rgb(84 60 54) 0%, rgb(121, 56, 100) 50%, rgb(145 178 222) 75%);*/
    background-image: linear-gradient(140deg, rgb(52 99 191) 0%, rgb(56 102 121) 50%, rgb(145 178 222) 75%);
}

.dividerLine {
    height: 70%;
    width: 0.5px;
    position: absolute;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    left: 50vw;
    opacity: 0.5;
    background: #948f8f;
    top: 15%;
}

.loginBackground {
    filter: blur(5px) brightness(0.5);
    width: 102%;
    height: 102%;
    left: -1%;
    top: -1%;
    position: fixed;

    /*display: none;*/
}

.bannerPanel {
    border-bottom: 1px solid #9c9595; /*#545050;*/
}

#imgclientRightlogo {
    width: 114px;
    height: 41px;
}
#divRightLogo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dotDisplay {
    margin-top: 1vh;
    justify-content: center;
    margin-bottom: 1vh;
    text-align: center;
    align-items: center;
    align-content: center;
}

.dbOk {
    /*    background: url(../Images/thumbsupGreen.png) left no-repeat;
    background-size: 1vw 1vw;*/
    text-align: center;
    /* background: url(../Images/thumbsdownred.png) left no-repeat; */
    background-size: 1vw 1vw;
    font-size: large;
    padding-right: 1vh;
    color: green;
}

.dbNotOk {
    /*    background: url(../Images/thumbsdownred.png) left no-repeat;
    background-size: 1vw 1vw;*/
    text-align: center;
    /* background: url(../Images/thumbsdownred.png) left no-repeat; */
    background-size: 1vw 1vw;
    padding-right: 1vh;
    font-size: large;
    color: red;
}

.signinbutton {
    position: relative;
    /* padding: 8px 16px; */
    background: #009579;
    border: none;
    outline: none;
    /* border-radius: 2px; */
    cursor: pointer;
}

    .signinbutton:active {
        background: #007a63;
    }

.button__text {
    /*font: bold 20px "Quicksand", san-serif;*/
    color: #ffffff;
    transition: all 0.2s;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

#dbImage {
    object-fit: scale-down;
}