html, body { height: 100%; }
body { color: #1b2c37; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 15px; }
h1, h2, h3, h4, h5 { margin: 0 0 40px; color: #777; }

a { color: #2987FF; text-decoration: none !important; }
    a.gray { color: #777; }
        a.gray:hover { color: #2987FF; }

.message-error { position: relative; border-radius: 3px; min-height: 48px; font-size: 18px; font-weight: 300; line-height: 1.33; padding: 15px 20px; margin-bottom: 40px; color: red; background: #fff1ef; border: 1px solid #fd7360; }
    .message-error i { font-size: 20px; color: #fd7360; padding-right: 5px; padding-top: 2px; }
    .message-error ul { list-style: none; padding: 0; margin-top: 10px; padding-left: 0; }

.field-validation-error { color: red; padding-top: 2px; display: inline-block }

.navbar { padding: 0 16px; background-color: #101418; height: 56px; margin: 0; }
.navbar-inverse .navbar-brand { color: #fff; font-weight: bold; font-size: 20px; }
.content { margin-top: 56px; height: 100%; display: table; width: 100%; }
    .content > .row { height: 100%; display: table-row; }
        .content > .row > [class*="col-"] { float: none; float: none; display: table-cell; }

.main-content { overflow-y: auto; }

.form-control { font-size: 18px; font-weight: 300; background-color: #fff; background-image: none; border: 1px solid #d6d8db; box-shadow: none; color: #313e49; height: 48px; padding: 0 16px; }
    .form-control:focus { box-shadow: 0 0 5px #2987FF; }

.form-group { margin-bottom: 20px; }

#togglePassword { font-weight: 600; font-size: 15px; }
    #togglePassword:hover { cursor: pointer; }

.input-group-addon { background: #f4f4f5; color: #49565f; font-size: 16px; }
    .input-group-addon i { width: 25px; }
.btn-primary { color: #fff; background-color: #29a7de; border: none; border-radius: 3px; font-weight: 500; font-size: 18px; height: 48px; min-width: 120px; }

.side-content { position: relative; border-bottom: 1px solid #49565f; padding: 0; height: 100%; display: table-cell; overflow: hidden; }
.side-bg { background: #101418; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; background-size: cover; background-position: 0 0; background: url(../images/login-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }


.form-group label { color: #777; font-size: 15px; font-weight: 600; }
.text-copyright { opacity: 0.6; font-size: 13px; margin-top: 100px; }

.btn-primary { color: #ffffff; background-color: #2987FF; border-color: #2987FF; }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #2378E8; border-color: #2987FF; }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary { background-image: none; }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active { background-color: #2987FF; border-color: #2987FF; }

    .btn-primary .badge { color: #2987FF; background-color: #ffffff; }


.btn-light { color: #212529; background-color: #dee2e6; border-color: #dee2e6; }

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active,
    .btn-light.active,
    .open .dropdown-toggle.btn-light { color: #212529; background-color: #dee2e6; border-color: #dee2e6; }

    .btn-light:active,
    .btn-light.active,
    .open .dropdown-toggle.btn-light { background-image: none; }

    .btn-light.disabled,
    .btn-light[disabled],
    fieldset[disabled] .btn-light,
    .btn-light.disabled:hover,
    .btn-light[disabled]:hover,
    fieldset[disabled] .btn-light:hover,
    .btn-light.disabled:focus,
    .btn-light[disabled]:focus,
    fieldset[disabled] .btn-light:focus,
    .btn-light.disabled:active,
    .btn-light[disabled]:active,
    fieldset[disabled] .btn-light:active,
    .btn-light.disabled.active,
    .btn-light[disabled].active,
    fieldset[disabled] .btn-light.active { background-color: #dee2e6; border-color: #dee2e6; }


.hr { margin-top: 5px; margin-right: -10px; }

.env { }
    .env:hover, .env:active { text-decoration: none; }
        .env:hover .well { border: solid 2px #F46321; text-decoration: none; }
    .env .well { border: solid 2px #2987FF; background-color: #fff; width: 170px; height: 170px; margin-right: 10px; margin-bottom: 20px; }
    .env * { color: #777; }
    .env .well span { color: #777; }
    .env:hover .fa { color: #F46321; }
    .env .fa { color: #2987FF; font-size: 48px; }
    .env h3 { font-size: 18px; margin-bottom: 10px; }
    .env .desc { font-size: 13px; }

.tooltip-inner { background-color: #2987FF; max-width: 400px; opacity: 1 !important; }
.fa { pointer-events: none; }
.round-button-circle {
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

    .round-button-circle:hover {
        background: #dee2e6;
    }

/* Dot animations */
.dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #2987FF;
    color: #2987FF;
    -webkit-animation: dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
    animation: dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}

    .dot-floating::before, .dot-floating::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-floating::before {
        left: -12px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #2987FF;
        color: #2987FF;
        -webkit-animation: dot-floating-before 3s infinite ease-in-out;
        animation: dot-floating-before 3s infinite ease-in-out;
    }

    .dot-floating::after {
        left: -24px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #2987FF;
        color: #2987FF;
        -webkit-animation: dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1);
        animation: dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1);
    }

@-webkit-keyframes dot-floating {
    0% {
        left: calc(-50% - 5px);
    }

    75% {
        left: calc(50% + 105px);
    }

    100% {
        left: calc(50% + 105px);
    }
}

@keyframes dot-floating {
    0% {
        left: calc(-50% - 5px);
    }

    75% {
        left: calc(50% + 105px);
    }

    100% {
        left: calc(50% + 105px);
    }
}

@-webkit-keyframes dot-floating-before {
    0% {
        left: -50px;
    }

    50% {
        left: -12px;
    }

    75% {
        left: -50px;
    }

    100% {
        left: -50px;
    }
}

@keyframes dot-floating-before {
    0% {
        left: -50px;
    }

    50% {
        left: -12px;
    }

    75% {
        left: -50px;
    }

    100% {
        left: -50px;
    }
}

@-webkit-keyframes dot-floating-after {
    0% {
        left: -100px;
    }

    50% {
        left: -24px;
    }

    75% {
        left: -100px;
    }

    100% {
        left: -100px;
    }
}

@keyframes dot-floating-after {
    0% {
        left: -100px;
    }

    50% {
        left: -24px;
    }

    75% {
        left: -100px;
    }

    100% {
        left: -100px;
    }
}

/* loading */

.loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 6px 0;
    overflow: hidden;
    height: .6em;
    margin: .19em;
}

/*
    Tabs
*/
.tab {
    display: none;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}