.logcontent {
    font-family: 'varela-round-v9-latin-regular';
}
.logcontent label{color:#808080;}
    .logcontent a:hover{text-decoration:none;}
    input[type=text] {
        border-bottom: 1px solid #808080 !important;
    }
    input[type=text]:focus {
        outline: none;
    }
    .errData, .chk {
    color: #ff0000;
}
.dontShow{display:none;}
.lcase {
    text-transform: lowercase;
}
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 25%;
}
.btn-gr{
    float:right;
}
h3{color:green;}
/* loader icon css */
.loader {
    margin: auto;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #ff9900;
    border-bottom: 10px solid #ff9900;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}
/* password field instruction box */
/* The message box is shown when the user clicks on the password field */
#Pwdmessage {
    display: none;
    color: #000;
    position: relative;
    padding: 10px;
    margin-top: 3px;
}

    #Pwdmessage p {
        padding: 3px 10px;
        padding-left: 35px;
        font-size: 13px;
    }

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

    .valid:before {
        position: relative;
        left: -35px;
        content: "✔";
    }

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
    color: red;
}

    .invalid:before {
        position: relative;
        left: -35px;
        content: "✖";
    }

/* Add a muted text color and an "x" icon when the requirements not in use */
.dull {
    color: #dedede;
}

    .dull:before {
        position: relative;
        left: -35px;
        content: "✖";
    }
/* End Password msg box */
/* Media Query  for  all devices */
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    .content{
        width:30%;
        float:left;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

    .content {
        width: 35%;
        float: left;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    .content {
        width: 50%;
        float: left;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .content {
        width: 60%;
        float: left;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    .content {
        width: 65%;
        float: left;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    .content {
        width: 80%;
        float: left;
    }
}