﻿body {
    font-family: sans-serif;
    position: relative;
}

#loginLink {
    color: white;
}

.in-page {
    min-height: 520px;
}

.main {
    position: relative;
}

a {
    color: #1b5a7c;
}

    a:hover, a:focus {
        color: #1b5a7c;
    }

.btn-cyan {
    background-color: #1b5a7c;
    color: #fff;
}

    .btn-cyan:hover {
        color: #fff;
        opacity: 0.9;
    }

.form-control:focus {
    border-color: #1b5a7c;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(24, 204, 162, 0.6);
    outline: 0 none;
}

.min-height {
    min-height: 380px;
}

.login-screen {
    background-image: url(../Content/assets/img/backgrounds/header-bg-image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    position: fixed;
    top: 0;
    bottom: 0px;
    right: 0;
    left: 0;
}

    .login-screen:before {
        content: "";
        background: rgba(0,0,0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.login-center {
    text-align: left;
}

.login {
    color: #fff;
    text-align: center;
    padding: 20px 30px;
}

    .login .login-form {
        text-align: left;
    }

    .login label {
        color: #fff;
    }

    .login .span-UID-heading {
        font-size: 30px;
    }

.login-form .input-group .form-control {
    background: none;
    height: 44px;
    color: #ddd;
}

.login-form .input-group .input-group-addon {
    background: none;
}

    .login-form .input-group .input-group-addon .glyphicon {
        color: #1b5a7c;
    }

.login-form .input-group .form-control::-moz-placeholder {
    color: #fff;
    opacity: 0.3;
}

.login .sign-btn {
    text-align: center;
}

    .login .sign-btn input.btn {
        background: #1b5a7c;
        border-color: #1b5a7c;
        color: #fff;
        width: 200px;
    }

    .login .sign-btn a {
        text-decoration: none;
    }

.login .lblCheckBox {
    float: left;
}

.login .forgot {
    float: right;
    margin-bottom: 30px;
    color: white;
    display: inline-block;
}

.signin_form h4 {
    margin-bottom: 30px;
}

.main-footer {
    position: fixed;
    bottom: 0;
    background: white;
    width: 100%;
    padding: 2px 20px 2px 20px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
}

.ctrl-standard typ-subhed fx-bubbleDown {
    background-color: transparent !important;
}
/* alternate colors */
/* corner values for bubble up and down */
body::before {
    display: none;
}

.typ-subhed {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0;
}
/* lets create a container and put it in the middle */
.container {
    height: 100%;
    margin: auto;
}

.row-xGrid.iso-standard .fx-bubbleDown {
    background-color: transparent;
    padding: 10px;
    margin-top: 20px;
}

.fx-bubbleDown.btn1,
.fx-bubbleDown.btn2 {
    width: 48%;
}

.fx-bubbleDown.btn1 {
    margin-right: 2%;
}

.fx-bubbleDown.btn3,
.fx-bubbleDown.btn4 {
    width: 100%;
}

.div-outer-UIDPlate {
    display: block;
    background-color: rgba(0,0,0,.3);
    border: 1px solid black;
    padding: 10px;
}

    .div-outer-UIDPlate:hover {
        border-color: white;
    }

        .div-outer-UIDPlate:hover .div-inner-UIDPlate {
            border-color: white;
        }

        .div-outer-UIDPlate:hover span {
            color: white !important;
        }

.div-inner-UIDPlate {
    display: block;
    color: white;
    border: 1px solid black;
    padding: 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .div-inner-UIDPlate:before {
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        top: -9px;
        left: -9px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }

    .div-inner-UIDPlate:after {
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        top: -9px;
        right: -9px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }

    .div-inner-UIDPlate span:before {
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        bottom: -9px;
        left: -9px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }

    .div-inner-UIDPlate span:after {
        content: "";
        display: block;
        background: #fff;
        position: absolute;
        bottom: -9px;
        right: -9px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }

.div-outer-UIDPlate .spanUIDPlate {
    font-size: 70px;
}

.div-outer-UIDPlate .spanMCL {
    font-size: 15px;
}

.ctrl-standard.fx-bubbleDown {
    color: white;
    border-color: white;
}

    .ctrl-standard.fx-bubbleDown a {
        color: white !important;
        text-decoration: none;
    }

    .ctrl-standard.fx-bubbleDown::after {
        bottom: auto;
        border-radius: 0 0 $right-val2 $left-val2/0 0 $right-val1 $left-val1;
        background: rgba(0,0,0,.3);
    }

    .ctrl-standard.fx-bubbleDown.is-reversed::after {
        height: 300%;
    }

    .ctrl-standard.fx-bubbleDown:hover {
        border-color: black !important;
    }

    .ctrl-standard.fx-bubbleDown.is-reversed:hover {
        background-color: rgba(0,0,0,.3);
    }

        .ctrl-standard.fx-bubbleDown.is-reversed:hover::after {
            height: 0;
        }

[class*="ctrl-"] {
    padding: 50px 10px;
    border-radius: 2px;
    border: 1px solid #231f20;
}

    [class*="ctrl-"][class*="fx-"]:hover,
    [class*="ctrl-"][class*="fx-"].active {
        color: #231f20;
    }

    [class*="ctrl-"][class*="fx-"].is-reversed {
        color: #231f20;
    }

[class*="fx-"],
[class*="fx-"]:hover {
    transition: color 0.5s ease-in-out;
}

    [class*="fx-"]:not(.fx-dyna) {
        position: relative;
        z-index: 1;
        transition-delay: 0.2s !important;
        overflow: hidden;
    }

        [class*="fx-"]:not(.fx-dyna)::after,
        [class*="fx-"]:not(.fx-dyna)::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
        }

[class*="fx-bubble"]::after {
    transition: height 0.5s ease-in-out;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
}

[class*="fx-bubble"]:hover::after,
[class*="fx-bubble"].active::after {
    transition: height 0.5s ease-in-out;
    height: 300%;
}

[class*="fx-bubble"]:disabled:hover::after {
    height: 0;
}

@media (min-width: 768px) and (max-width: 1900px) {
    .main-login {
        margin-top: 5%;
    }
}

@media (min-width: 768px) and (max-width: 1900px) {
    .div-forgot {
        padding-bottom: 10%;
    }

    .login {
        width: 95%;
    }
}

@media (max-width: 1024px) {
    .login {
        margin: 0px;
        padding: 0px 0px 20px 0px;
    }

        .login .span-UID-heading {
            font-size: 25px;
        }

    .div-outer-UIDPlate .spanUIDPlate {
        font-size: 40px;
    }

    .div-outer-UIDPlate .spanMCL {
        font-size: 10px;
    }

    .div-inner-UIDPlate {
        padding: 10px;
    }

    .typ-subhed {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .main-footer {
        position: relative;
        margin-top: 20px;
    }
}
