/****************************************************************
LOGIN PAGE
****************************************************************/
body {
    font-family: 'bpreplayregular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 100%;
    background: #ecf0f1;
}

.clearfix {
    clear: both;
}
form {

    float: right;
}
html {
}

body, html {
    width: 100%;
    
    height: 100%;
    overflow: hidden;
}

.login-page {
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
}



.wrapper-center {
    display: table-cell;
    vertical-align: middle;
}
/* Enable box model on resets */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*  Notifications  */
.notification {
    position: fixed;
    width: 100%;
    z-index: 99999;
    background: #fff;
}

.error-notification p, .success-notification p, .warning-notification p {
    padding: 22px 0px 22px 60px;
    font-size: 16px;
}

/* Error Message */
.error-notification {
    background: url(../Images/Icons/icon-error-message.png) no-repeat;
    -webkit-box-shadow: 0 8px 4px -8px #000;
    -moz-box-shadow: 0 8px 4px -8px #000;
    box-shadow: 0 8px 4px -8px #000;
}

    .error-notification p {
        color: #E64C3C;
    }

/* Success Message */
.success-notification {
    background: url(../Images/Icons/icon-success-message.png) no-repeat;
    -webkit-box-shadow: 0 8px 4px -8px #000;
    -moz-box-shadow: 0 8px 4px -8px #000;
    box-shadow: 0 8px 4px -8px #000;
}

    .success-notification p {
        color: #27ae60;
    }

/* Warning Message */
.warning-notification {
    background: url(../Images/Icons/icon-warning-message.png) no-repeat;
    -webkit-box-shadow: 0 8px 4px -8px #000;
    -moz-box-shadow: 0 8px 4px -8px #000;
    box-shadow: 0 8px 4px -8px #000;
}

    .warning-notification p {
        color: #F29C1F;
    }


/* Input validation Message */
.field-validation-error {
    color: #fff;
    font-size: 12px;
    background: url(../Images/Icons/icon-warning@2x.png) no-repeat left center;
    background-size: 18px 18px;
    padding-left: 20px;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px dashed #fff !important;
}

.validation-summary-errors {
    color: #fff;
}

.validation-summary-valid {
    display: none;
}

.login-wrapper-input {
    margin-bottom: 10px;
}

.login-wrapper h4 {
    color:#fff;
    font-size: 12px;
    margin-bottom: 10px;
    text-transform: uppercase;
    
}

.subject {
    margin: 0px 0px 20px 0px;
}

    .subject h1 {
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: 'bpreplayregular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
        line-height: 30px;
        font-weight: 700;
        font-style: normal;
    }


.login-wrapper p {
    color: #fff;
}


::-webkit-input-placeholder { /* WebKit browsers */
    color: #787878;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #787878;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #787878;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #787878;
}


.input-username {
    background: #fff url(../Images/Icons/icon-user@2x.png) no-repeat 8px 12px;
    z-index: 99999;
    position: absolute;
    background-size: 20px 20px;
}

.input-password {
    background: #fff url(../Images/Icons/icon-lock@2x.png) no-repeat 8px 12px;
    z-index: 99999;
    background-size: 20px 20px;
    position: absolute;
}

.input-username,
.input-password {
    border: 1px solid #fff;
    outline: 0;
    width: 100%;
    padding: 12px 12px 12px 34px;
    font-size: 14px;
    outline: 0;
    -webkit-box-shadow: inset 0 10px 10px -10px #787878;
    -moz-box-shadow: inset 0 10px 10px -10px #787878;
    box-shadow: inset 0 10px 10px -10px #787878;
    position: relative;
    margin-bottom: 4px;
    border-radius: 2px;
    color: #787878;
}

    .input-username:hover, .input-username:focus,
    .input-password:hover, .input-password:focus {
        border: 1px solid #fff;
    }

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px white inset;
}


.btn {
    border: 0px;
    outline: 0;
     font-size: 14px;
    padding: 12px 12px;
    border-radius: 2px;
    cursor: pointer;
}

.btn-sign-in {
    color: #fff;
    background: #19934d url(../Images/Icons/icon-sign-in@2x.png) no-repeat 8px 12px;
    background-size: 20px 20px;
    padding-left: 40px;
}

.btn-forgot {
    color: #fff;
    background: #19934d;
}

.input-submit:hover {
    background: #fff url(../Images/Icons/icon-check.png) no-repeat 14px 14px;
    background-size: 20px 20px;
}


/* SIGN IN Form CSS
-----------------------------------------------------------*/
.panel-forgot {
    display: none;
      width: 360px;
       float: right;   
}

.forgot-open, .forgot-back {
    padding-top: 14px;
}


.panel-sign-in a, .panel-forgot a {
    color: #fff;
    font-size: 14px;
}

.panel-sign-in {
     float: right;   
    width: 360px;
}

.panel-logo {
    position: absolute;
    width: 249px;
    top: -50px;
    height: 249px;
    left: -15px;
    background: url('../Images/Icons/icon-connect-coaches-portal.png') no-repeat 0px 0px;
    background-size: 249px 249px;
}

/****************************************************************
    MEDIA QUERY RESPONSIVE CSS
****************************************************************/

.splash-page {
     display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #27ae60;
    position: relative;
    z-index:99999;
    
}
.splash-page h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
      text-align: center;
    margin-top: 10px;
}
 .splash-wrapper {
     margin: 0 auto;    
    }

.splash-logo {
    background: url('../Images/Icons/icon-connect-coaches-portal.png') no-repeat 0px 0px;
    background-size: 346px 346px;
    height: 346px;
    width: 346px;
    margin: 0 auto;
    display: block;
}
.splash-page:hover {
    cursor: pointer
}


/* Large Display */
@media (min-width: 1200px) {
    .login-wrapper {
        width: 600px;
        min-height: 210px;
        position: relative;
        margin: 0 auto;
        background: #27ae60;
        border: 1px solid #16a085;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 4px 2px -2px #c2c2c2;
    }
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) {
     .login-wrapper {
         width: 600px;
         min-height: 210px;
            position: relative;
        margin: 0 auto;
        background: #27ae60;
        border: 1px solid #16a085;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 4px 2px -2px #c2c2c2;
          position: relative;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {
      .login-wrapper {
         width: 600px;
        margin: 0 auto;
        position: relative;
        background: #27ae60;
        border: 1px solid #16a085;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 4px 2px -2px #c2c2c2;
          position: relative;
    }
}

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
     .login-wrapper {
         width: 320px;
        margin: 0 auto;
           position: relative;
        background: #27ae60;
        border: 1px solid #16a085;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 4px 2px -2px #c2c2c2;
          position: relative;
    }
   .panel-logo {
       display: none;
position: absolute;
width: 140px;
top: -220px;
height: 205px;
left: 110px;
background-size: 140px 205px;
}

     .panel-sign-in, .panel-forgot {
      float: inherit !important;
         width: 290px;
     }
     form {
           float: left !important;
       
     }

  

}

/* Smartphones */
@media (max-width: 480px) {
     .login-wrapper {
         width: 320px;
        margin: 0 auto;
        background: #27ae60;
        border: 1px solid #16a085;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 4px 2px -2px #c2c2c2;
          position: relative;
    }
.panel-logo {
    display: none;
position: absolute;
width: 120px;
top: -192px;
height: 176px;
left: 115px;
background-size: 120px 176px;
}
     .panel-sign-in, .panel-forgot {
      float: inherit !important;
         width: 290px;
     }
     form {
           float: left !important;
       
     }



}