html {
    height: 100%;
}

body {
    background-color: #F5F5F5;
    height: 100%;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

a {
    color: #FFFFFF;
    text-decoration: underline;
}

.root {
    height: 100%;
}

.root-container {
    height: 100%;
}

.logo-wrapper {
    height: 100%;
}

    .logo-wrapper > .row {
        height: 100%;
    }

        .logo-wrapper > .row > div {
            text-align: center;
        }

    .logo-wrapper img {
        max-width: 360px;
        margin: 0 auto;
    }

.logo {
}

.login-wrapper {
    height: 100%;
    background-color: #F05922;
}

.login-form {
}

    .login-form label {
        color: #FFFFFF;
        text-transform: uppercase;
        font: normal normal 300 15px/18px Roboto;
        opacity: 0.5;
    }

    .login-form input {
        background-color: transparent !important;
        -webkit-text-fill-color: white;
        border: none;
        border-bottom: 1px solid #FFFFFF;
        border-radius: 0;
        padding: 6px 0;
        outline: none;
    }

        .login-form input:-webkit-autofill,
        .login-form input:-webkit-autofill:hover,
        .login-form input:-webkit-autofill:focus,
        .login-form textarea:-webkit-autofill,
        .login-form textarea:-webkit-autofill:hover,
        .login-form textarea:-webkit-autofill:focus,
        .login-form select:-webkit-autofill,
        .login-form select:-webkit-autofill:hover,
        .login-form select:-webkit-autofill:focus {
            background-color: transparent !important;
            -webkit-text-fill-color: white;
            transition: background-color 5000s ease-in-out 0s;
        }

    .login-form .btn-submit {
        margin-top: 34px;
        width: 100%;
        background-color: transparent;
        border: 3px solid #FFFFFF;
        border-radius: 32px;
        height: 64px;
        font-family: "Roboto Black", "Helvetica", "Arial", sans-serif;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: bold;
        background-image: linear-gradient(to right, #FFFFFF 50%, #F05922 50%);
        background-size: 200% 100%;
        background-position: right bottom;
        transition: all .5s ease-out;
    }

        .login-form .btn-submit:hover {
            color: #F05922;
            background-position: left bottom;
        }

    .login-form .btn-login-with-google {
        color: #000000;
        border: none;
        margin-top: 24px;
        width: 100%;
        background-color: #FFFFFF;
        border-radius: 32px;
        height: 64px;
        font: normal normal bold 13px/15px Roboto;
        text-transform: uppercase;
    }

        .login-form .btn-login-with-google img {
            width: 32px;
            margin-right: 16px;
        }

.lost-password {
    margin-top: 32px;
    text-transform: uppercase;
    color: #FFFFFF;
    font: normal normal 300 13px/15px Roboto;
}

.text-or {
    width: 150px;
    color: #FFFFFF;
    font: normal normal 300 13px/15px Roboto;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #FFFFFF;
    line-height: 0.1em;
    margin: 47px auto 10px;
}

    .text-or span {
        padding: 0 15px;
        background-color: #F05922;
    }

.dot {
    position: absolute;
    right: 30px;
    top: 30px
}

    .dot img {
        max-width: 125px;
    }

.description {
    font: normal normal bold 28px/41px Oswald;
    color: #FFFFFF;
}

.index-container a {
    color: #212529;
    text-decoration: none;
}

.index-container {
    /*padding-top: 50px;*/
    background: #F2F3F8 0% 0% no-repeat padding-box;
}

    .index-container h1 {
        font: normal normal bold 48px/71px Oswald;
        letter-spacing: 0;
        color: #201E1E;
        margin: 50px auto 100px;
        text-align: center;
    }

    .index-container .app {
        background-color: #FFFFFF;
        width: 250px;
        height: 250px;
        margin: 25px;
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        position: relative;
    }

        .index-container .app i.icon {
            transition: all .3s ease-out;
        }

        .index-container .app i.icon-ag {
            background: url("../images/svg/AG.svg");
            width: 55px;
            height: 42.667px;
        }

        .index-container .app i.icon-los {
            background: url("../images/svg/LOS.svg");
            width: 78.896px;
            height: 42.921px;
        }

        .index-container .app i.icon-lms {
            background: url("../images/svg/LOS.svg");
            width: 78.896px;
            height: 42.921px;
        }

        .index-container .app i.icon-erp {
            background: url("../images/svg/ERP.svg");
            width: 78.39px;
            height: 42.92px;
        }

        .index-container .app i.icon-doc {
            background: url("../images/svg/Doc.svg");
            width: 78.39px;
            height: 42.92px;
        }

        .index-container .app:hover i.icon-ag {
            background: url("../images/svg/AG_hover.svg");
        }

        .index-container .app:hover i.icon-los {
            background: url("../images/svg/LOS_hover.svg");
        }

        .index-container .app:hover i.icon-lms {
            background: url("../images/svg/LOS_hover.svg");
        }

        .index-container .app:hover i.icon-erp {
            background: url("../images/svg/ERP_hover.svg");
        }

        .index-container .app:hover i.icon-doc {
            background: url("../images/svg/Doc-hover.svg");
        }

        .index-container .app:hover img {
            color: #FFFFFF;
        }

        .index-container .app h2 {
            font-weight: bold;
        }

        .index-container .app:hover {
            background-color: #F05922;
        }

        .index-container .app:hover {
            color: #FFFFFF;
        }

        .index-container .app .site-name {
            height: 25px;
            overflow: hidden;
            margin-top: auto;
        }

        .index-container .app h3,
        .index-container .app h4 {
            font: normal normal bold 20px/30px Oswald;
            letter-spacing: 0px;
            color: #2D2D2D;
            text-transform: uppercase;
            transition: all .3s ease-out;
        }

        .index-container .app h4 {
            opacity: 0;
        }

        .index-container .app:hover h3 {
            transform: translateY(-15px);
            opacity: 0;
        }

        .index-container .app:hover h4 {
            transform: translateY(-38px);
            opacity: 1;
        }

    .index-container .dot img {
        max-width: 60px;
    }

@media (max-width: 768px) {
    .logo-wrapper {
        padding: 20px 0;
    }
}

@media (max-width: 1024px) {
    .dot {
        display: none;
    }
}