*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    list-style:none;
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
body{
    /* STABLE STRUCT text color #336699 */
    /* background: linear-gradient(to right, rgba(9,62,129,0.3), rgba(9,62,129,.8));
    background: linear-gradient(to right, WhiteSmoke, lightgray); */

    background-image: linear-gradient(to bottom, #336699, #1978a7, #008bb1, #009db7, #00aeb9);
    color: #336699;
}
button{
    outline: none !important;
}

header {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    z-index: 1030;
    background-image: linear-gradient(to bottom, #336699, #1978a7, #008bb1, #009db7, #00aeb9);
}

footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background: #0A2472;
    padding:0px 16px;
    border-top:5px solid #e74c3c;
}
footer *{
    color:white;
    font-size: 10px;
}

.Expired {
    background: #ffdddd!important;
}
.new {
    color:black;
}
.new::before {
    background-image: url('../images/icons/new-icon-gif-3.jpg');
    min-height: 100%;
    background-size: 50px auto;
    background-repeat: no-repeat;
    background-position: left bottom;
    display: inline-block;
    height: 30px;
    width: 70px; 
    content:"";
}

.top-nav {
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content:space-between;
    align-items: center;

}

.top-nav .left{
    display:flex;
    align-items: center;
}

.top-nav right{
    right:0;    
}
.top-nav .logo-container {
    width:80px;
    height:50px;
    padding:4px;
    background:white;
}
.top-nav .logo {
    height:100%;
}

.top-nav .search-bar {
    width: 100%;
    padding:0 20px;
}

.top-nav .search-bar input{
    background-image: url("../images/searchicon.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 8px 8px;

    padding:4px 20px 4px 35px;
    display: block;
    border: none;
    border-radius:8px;
    border-bottom: 2px solid #ccc;
    width: 100%;
    outline:none;
}
.top-nav .show{
}

@media screen and (max-width: 992px){
    .navbar-collapse {
        position: fixed;
        background:gray;
        top:50;
        right:0;
    }
}




.top-nav .icon {
  display: none;
}




.top-nav .containerLogo{
    padding:4px;
    height:56px;
    width:92px;
    margin:0px;
    background-color:white;
}
.top-nav .searchbar{
    height:36px;
    width:100%;
    padding:4px 20px 4px 35px;
    border-radius:12px;
    background-image: url("../images/searchicon.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 8px 8px;
}
.top-nav .search-cont{
    max-width:500px;
    padding:8px 8px;
}
.top-nav .search-sub{
    max-width:500px;
    padding:4px 4px;
}




    section{
        margin: 20px;
        /* height: calc(100% - 375px); */
        margin-top: 0;
    }


.form-head {
    color: #191919;
    font-weight: normal;
    font-weight: 400;
    margin: 0;
    text-align: center;
    font-size: 1.8em;
}

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

#frmLogin, #frmSignup {
    background: #d7eeff;
    border-spacing: initial;
    margin: 15px auto;
    word-break: break-word;
    table-layout: auto;
    line-height: 1.8em;
    color: #333;
    border-radius: 10px;
    padding: 30px;
    max-width: 400px;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    padding: 20px 40px 40px 40px;
    border: #acd4f1 1px solid;
}

#frmLogin  .label, #frmSignup .label {
    color: #888888;
}

#frmLogin .field-group, #frmSignup .field-group {
    padding: 15px 10px;
}

.input-field {
    padding: 12px 10px;
    width: 100%;
    border: #A3C3E7 1px solid;
    border-radius: 4px;
    margin-top: 5px
}

input{
    outline:none;
    border:none
}

.btnLogout {
    padding: 5px;
    background-color: RED;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    border: 1px solid;
    font-size: 1.1em;
}


.btnLogin, .btnSignup {
    padding: 13px;
    background-color: #5d9cec;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 25px;
    width: 100%;
    border: #5791da 1px solid;
    font-size: 1.1em;
}
.btnLogin:hover, .btnSignup:hover, .btnLogout:hover {
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btnAssessment{
    font-size: 0.8em;
    cursor: pointer !important;
}
.btnAssessment label{
    cursor: pointer !important;
}
.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;
}

.terms {
    margin-bottom: 5px;
}

.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;
}
a.logout-button {
    color: #09f;
}


/* prepare wrapper element */
.wrapper {
  /*display: inline-block;*/
  position: relative;
}

.wrapper input {
  padding: 12px 20px 12px 20px;
}

/* position the unit to the right of the wrapper */
.wrapper::before {
  position: absolute;
  top: calc(50% - 0.5em);
  left: .5em;
  transition: all .05s ease-in-out;
}

/* move unit more to the left on hover or focus within
   for arrow buttons will appear to the right of number inputs */
.wrapper:hover::before,
.wrapper:focus-within::before {
  left: 0.7em;
}


/* set the unit abbreviation for each unit class */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.dollar::before{
    content: '$';
}
.percent::after {
  content: '%';
}

.align-container{
    position: relative;
}
.align-mid-left {
  margin: 0;
  position: absolute;
  top: 50%;
  left:0px;
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);
}
.align-mid-right {
  margin: 0;
  position: absolute;
  top: 50%;
  right:4px;
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);
}
.align-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, 0px);
  transform: translate(-50%, -0px);
}
.align-mid-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}