/**
 * 01/28/2016
 * This pen is years old, and watching at the code after all
 * those years made me fall from my chair, so I:
 * - changed all IDs to classes
 * - converted all units to pixels and em units
 * - changed all global elements to classes or children of
 *   .login
 * - cleaned the syntax to be more consistent
 * - added a lot of spaces that I so hard tried to avoid
 *   a few years ago
 *   (because it's cool to not use them)
 * - and probably something else that I can't remember anymore
 *
 * I sticked to the same philosophy, meaning:
 * - the design is almost the same
 * - only pure HTML and CSS
 * - no frameworks, preprocessors or resets
 */

.noBk{
    background: none;
}

body {
    font-family: 'Nunito';
    background-color: #A1D8E0;
}

.login {
    width: 400px;
    margin: 16px auto;
    font-size: 16px;
    background-color: #5D92AB;
}

/* Reset top and bottom margins from certain elements */
.login p {
    margin-top: 0;
    margin-bottom: 0;
}

/* The triangle form is achieved by a CSS hack */
.login-triangle {
    width: 0;
    margin-right: auto;
    margin-left: auto;
    border: 12px solid transparent;
    border-bottom-color: #A1D8E0;
}

.panelGridCenter {
    margin: 0 auto;
}


.login-header {
    background: #A1D8E0;
    padding: 20px;
    font-size: 1.4em;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.login-container {

    background: #A1D8E0;
    padding: 12px;
    vertical-align: top;

}

.login-container-new {
    background: #5db860;
    margin: 9% auto 4% auto;
    position: relative;
}

/* Every row inside .login-container is defined with p tags */
.login p {
    padding: 12px;
}

.login input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    padding: 16px;
    outline: 0;
    font-family: inherit;
    font-size: 0.95em;
}

.login input[type="email"],
.login input[type="password"] {
    background: #fff;
    border-color: #bbb;
    color: #555;
}

/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
    border-color: #888;
}

.login input[type="submit"] {
    background: #5db860;
    border-color: transparent;
    color: #fff;
    cursor: pointer;
}

.login input[type="submit"]:hover {
    background: #8fd16a;
}

/* Buttons' focus effect */
.login input[type="submit"]:focus {
    border-color: #8fd16a;
}


.header-form {

    background: #5db860;
    border-color: transparent;
    cursor: pointer;
    height:200px;
    width: 100%;
    text-align: center;
    color: #fff;
    margin-right: 0;
    margin-left: 0;
    top:0;

}

.head img {
    position: relative;
    top: 15%;
    left: 20%;
}

.login-button-old , .login-button-mobile-old {
    width: 45px;
    height: 45px;
    display: block;
    margin: 0 auto -15px auto;
    background: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    -moz-border-radius: 100%;
    border: 1px solid #5db860;
    color: #5db860;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 7px #fff;
    transition: 0.2s ease-out;

    &:hover, &:focus{
        background: #8fd16a;
        color: #fff;
        outline: 0;
    }
}

.login-button-pg {

    background: #5D92AB;
    border-radius: 5pt;
    -webkit-border-radius: 5pt;
    -o-border-radius: 5pt;
    -moz-border-radius: 5pt;

}

.login-button-mobile{
    width: 100%;
    background: #5D92AB;
    border-color: transparent;
    cursor: pointer;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5pt;
    -webkit-border-radius: 5pt;
    -o-border-radius: 5pt;
    -moz-border-radius: 5pt;
}

/*.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

.headerTopFragPage {

    width: 100%;
    height: 45px;
    left: 0%; 
    top: 0%; 
    position: absolute;

}

.login-image{
    z-index: -1;
    width: 50%; 
    height: 50%; 
    margin: 0;
}

.footerLogin{
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
}

.panelLoginDiv{
    margin: 0; 
    width: 100%; 
    text-align: center;
}

.headerPanelLogin .ui-widget-header{
    background: #5D92AB;
    color: #ffffff;
    font: bold;
    font-size: 1.5em;
    border-top-left-radius: 5pt 5pt;
    border-top-right-radius: 5pt 5pt;
    border-bottom-left-radius: 0pt 0pt;
    border-bottom-right-radius: 0pt 0pt;
    -webkit-border-bottom-left-radius: 0pt 0pt;
    -webkit-border-bottom-right-radius: 0pt 0pt;
    -webkit-border-top-left-radius: 5pt 5pt;
    -webkit-border-top-right-radius: 5pt 5pt;
    -o-border-radius: 5%;
    -moz-border-radius-bottomleft: 0pt 0pt;
    -moz-border-radius-bottomright: 0pt 0pt;
    -moz-border-top-left-radius: 5pt 5pt;
    -moz-border-top-right-radius: 5pt 5pt;
}

.ui-datatable.ui-widget-header {
    background-color: #5D92AB;
    background: #5D92AB;
}

.ui-dialog-titlebar.ui-widget-header{
    background-color: #5D92AB;
    background: #5D92AB;
    color: #ffffff;
    font-size: 1.4em;
    border-top-left-radius: 5pt 5pt;
    border-top-right-radius: 5pt 5pt;
    border-bottom-left-radius: 0pt 0pt;
    border-bottom-right-radius: 0pt 0pt;
    -webkit-border-bottom-left-radius: 0pt 0pt;
    -webkit-border-bottom-right-radius: 0pt 0pt;
    -webkit-border-top-left-radius: 5pt 5pt;
    -webkit-border-top-right-radius: 5pt 5pt;
    -o-border-radius: 5%;
    -moz-border-radius-bottomleft: 0pt 0pt;
    -moz-border-radius-bottomright: 0pt 0pt;
    -moz-border-top-left-radius: 5pt 5pt;
    -moz-border-top-right-radius: 5pt 5pt;
}

.loginButton .ui-button.ui-widget.ui-state-default{
    font: bold;
    font-size: 1.5em;
    width: 99%; 
    height: 40px;
    border-color: #5D92AB;
    background: #5D92AB;
    color: #FFFFFF;
}

.loginButton .ui-button.ui-widget.ui-state-hover{
    cursor: pointer;
}

.loginEntry.ui-inputfield.ui-state-default{
    width: 98%; 
    height: 20px;
    border-color: #5D92AB;
    background: #FFFFFF;
    color: #5D92AB;
    font-size: 1.2em;
}

.selMenu .ui-widget-content{
    border-color: #5D92AB;
    background: #FFFFFF;
    color: #5D92AB;
}

.selMenu .ui-selectmenu-list .ui-widget-content{
    border-color: #A1D8E0;
    background: #FFFFFF;
    color: #A1D8E0;
}

.selMenu .ui-selectmenu-list .ui-state-hover{
    border-color: #A1D8E0;
    background: #A1D8E0;
    color: #FFFFFF;
}

.buttonChat .ui-button.ui-widget.ui-state-default{
    font: bold;
    width: 99%;
    border-color: #5D92AB;
    background: #5D92AB;
    color: #FFFFFF;
}

.buttonChat .ui-button.ui-widget.ui-state-hover{
    cursor: pointer;
}

.ice-sub-mon > .ice-sub-mon-mid.idle > .ice-sub-mon-img {
    color: #5D92AB;
}
.ice-sub-mon > .ice-sub-mon-mid.idle > .ice-sub-mon-txt {
    color: #5D92AB;
    font-size: 14px;
    float: left;
}

.ice-sub-mon > .ice-sub-mon-mid.active > .ice-sub-mon-txt {
    font-size: 16px;
    font-weight: bold;
    float: left;
    color: #5D92AB;
}

.warnMessageHeMa{
    color: #FF0000;
    font-size: 16px;
}

.fedeMsgInfo {
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin-left: -40px;
    width:auto;
    border:none;
    opacity:1;
    cursor:default;
    color:#fff;
    background: #1b8102;
    -webkit-border-radius:5pt;
    -moz-border-radius:5pt;
    border-radius: 5pt
}
.fedeMsgWarn {
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin-left: -40px;
    width:auto;
    border:none;
    opacity:1;
    cursor:default;
    color:#000;
    background: #ffa600;
    -webkit-border-radius:5pt;
    -moz-border-radius:5pt;
    border-radius: 5pt
}
.fedeMsgError {
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin-left: -40px;
    width:auto;
    border:none;
    opacity:1;
    cursor:default;
    color:#fff;
    background:#b81900;
    -webkit-border-radius:5pt;
    -moz-border-radius:5pt;
    border-radius: 5pt
}
.fedeMsgFatal {
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin-left: -40px;
    width:auto;
    border:none;
    opacity:1;
    cursor:default;
    color:#fff;
    background: #b81900;
    -webkit-border-radius:5pt;
    -moz-border-radius:5pt;
    border-radius:5pt
}

#resetPasswordButton,
#resetPasswordButton * {
    color : red;
    background-color : white;
    font-family: Arial,sans-serif;
    font-size: 13px;
    border: 0px;
}

#resetPasswordButton {
    height: 20px;
    float: left;
}

.resetPassword_message {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: black;
}

.resetPassword_message_important {
    text-decoration: underline;
    font-weight: bold;
}

.resetPassword_email {
    font-family: Arial,sans-serif;
    font-style: italic;
    font-size: 13px;
    color: black;
}