@media all {
    * { font-family: Roboto, Arial, Verdana, sans-serif; }
    html, body { height: 100%; margin: 0; }

    .margin-left-10 { padding-left: 10px; }
    .margin-top-30 { margin-top: 30px; }

    /* Bootstrap override */
    .polis-bootstrap .btn.margin-bottom-10 { margin-bottom: 10px; }
    .polis-bootstrap .popover.top { margin-top: 0; }
        .polis-bootstrap .popover.top > .arrow:after { border-top-color: black; }
    /* End Bootstrap override*/

    /* Login page main design */
    .polis-bootstrap .login-page { background-color: #393939; color: #fff; display: flex; height: inherit; }
        .polis-bootstrap .login-page .training-container, .polis-bootstrap .login-page .list-projects li.current { background-color: #1F1F1F; }
        .polis-bootstrap .login-page .float-left { float: left; }
        .polis-bootstrap .login-page .tooltip-help { cursor: pointer; float: right; padding-right: 10px; }
        .polis-bootstrap .login-page .centered-box { font-family: 'Roboto'; padding-top: 10px; }
        .polis-bootstrap .login-page .right { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; flex: 1; }
            .polis-bootstrap .login-page .right .imgBackground { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
            .polis-bootstrap .login-page .right .centered-box { width: 60%; }
                .polis-bootstrap .login-page .right .centered-box .logo img { width: 120px; }
                .polis-bootstrap .login-page .right .centered-box .sub-logo img { width: 250px; }
                .polis-bootstrap .login-page .right .centered-box .publicdata {
                    text-align: center;
                    background-color: #fbfbfb;
                    color: #353535;
                    padding: 15px;
                    margin-bottom: 20px;
                    border: 1px solid transparent;
                    border-radius: 5px;
                    box-shadow: 0px 4px 4px 0px #00000040;
                }
            .polis-bootstrap .login-page .right .disclaimer { bottom: 0; font-size: 10px; font-style: oblique; left: 1%; position: absolute; width: 95%; }
            .polis-bootstrap .login-page .left { align-items: center; display: flex; flex: 0 0 20em; height: 100%; justify-content: center; overflow-y: auto; }
                .polis-bootstrap .login-page .left .centered-box { height: 100%; width: 240px; display: flex; flex-direction: column; justify-content: space-between; }
                    .polis-bootstrap .login-page .left .centered-box .top-section { align-self: flex-start; width: 100% }
                    .polis-bootstrap .login-page .left .centered-box .bottom-section { align-self: flex-end; width: 100%; }
                    .polis-bootstrap .login-page .left .centered-box .action-container { margin-bottom: 50px; }
    .polis-bootstrap .login-page p.main { font-family: 'Roboto'; font-size: 16px; font-style: normal; text-rendering: optimizeLegibility; }
            .polis-bootstrap .login-page p.main a { margin-right: 5px; }
        .polis-bootstrap .login-page .left p.main .learn { font-size: 18px; }
        .polis-bootstrap .login-page .left p.main span.or { font-size: 18px; }
        .polis-bootstrap .login-page p.details { font-family: 'RobotoLight'; font-size: 14px; font-style: normal; font-weight: 200; line-height: 16px; text-rendering: optimizeLegibility; }
        .polis-bootstrap .login-page p.details_link { color: #A5A5A5; margin: 0; }
        .polis-bootstrap .login-page p.details a { color: #fff; }
        .polis-bootstrap .login-page .main-message { background-color: rgba(69,115,210,0.7); position: absolute; top: 30px; padding: 3px 10px; border-radius: 5px; transform: translate(-50%, -50%); left: 50%; width: 465px; }

        /*  -> List of projects */
        .polis-bootstrap .login-page .list-projects { list-style-type: none; margin: 5px 0 15px 0; padding: 0; }
            .polis-bootstrap .login-page .list-projects .img-project { margin: 8px 0; max-height: 65px; }
            .polis-bootstrap .login-page .list-projects li { -ms-border-radius: 5px; border-radius: 5px; padding: 0 15px; display: flex; align-items: center; -o-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }
                .polis-bootstrap .login-page .list-projects li.current .environment-text { padding: 5px 5px; margin-top: 3px; font-size: 10px; -ms-border-radius: 5px; border-radius: 5px; margin-left: 5px; }
                .polis-bootstrap .login-page .list-projects li:not(.current):hover { background-color: #2F2F2F; }
            .polis-bootstrap .login-page .list-projects li a { display: block; width: 100%; height: 100%; text-decoration: none; }
        /*  -> END List of projects */

        /*  -> Public data link */
        .polis-bootstrap .login-page .publicdata-container { text-align: center; padding: 10px 10px; margin-top: 10px; }
        /*  -> Public data link */
    
    /*  -> Providers */
    .polis-bootstrap .login-page #open_protocol_form { width: inherit; min-height: 80px; }
        .polis-bootstrap .login-page .provider-panel .provider { color: #393939; cursor: pointer; margin-bottom: 10px; text-align: left; width: inherit; }
            .polis-bootstrap .login-page .provider-panel .provider:hover div.text { background-color: #FF9933; }
            .polis-bootstrap .login-page .provider-panel .provider div.icon { -ms-border-bottom-left-radius: 5px; -ms-border-top-left-radius: 5px; background: #f2f2f2; border-bottom-left-radius: 5px; border-top-left-radius: 5px; color: #fff; float: left; height: 40px; line-height: 40px; text-align: center; width: 20%; }
            .polis-bootstrap .login-page .provider-panel .provider div.text { -ms-border-radius: 5px; background: #F29A30; color: #fff; border-radius: 5px; font-family: 'Roboto'; font-weight: 400; height: 40px; line-height: 40px; overflow: hidden; text-align: center; }
                .polis-bootstrap .login-page .provider-panel .provider div.text .bold { font-family: 'RobotoBold'; font-size: 16px; }
        .polis-bootstrap .login-page .provider-panel .invertedButton { height: 40px; }
        /*  -> END Providers */

        .polis-bootstrap .login-page .learn-test-panel { width: inherit; text-align: center; margin-bottom: 15px; }
        .polis-bootstrap .login-page .training-container { border-radius: 5px; padding: 10px 15px; margin-bottom: 10px;  width: inherit; }
            .polis-bootstrap .login-page .training-container .training-title { font-size: 18px; color: #fff; padding: 5px 0; }
            .polis-bootstrap .login-page .training-container ul { color: #A5A5A5; font-size: 14px; margin-bottom: 0; padding: 0 0 0 15px; line-height: 22px; }
                .polis-bootstrap .login-page .training-container ul li:not(:last-child) { margin: 0 0 10px 0; }
        .polis-bootstrap .login-page div.icon.padding-3 { padding: 3px; }
    /* End Login page main design */

    /* Spinner on login */
    .sk-three-bounce { display: flex; height: 40px; justify-content: center; }
        .sk-three-bounce .sk-child { margin: auto 3px; -moz-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; -ms-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; -ms-border-radius: 100%; -o-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; background-color: #fff; border-radius: 100%; display: inline-block; height: 12px; width: 12px; }
        .sk-three-bounce .sk-bounce1 { -moz-animation-delay: -0.32s; -ms-animation-delay: -0.32s; -o-animation-delay: -0.32s; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
        .sk-three-bounce .sk-bounce2 { -moz-animation-delay: -0.16s; -ms-animation-delay: -0.16s; -o-animation-delay: -0.16s; -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
    /* End Spinner on login */

    /* Registration form */
    .fa-spin { color: #FFF; }
    .uk-scope .uk-offcanvas-overlay::before { background: #000000; background: rgba(0, 0, 0, .4); }
    .polis-bootstrap .registration-form .uk-offcanvas-bar { background: #fff; color: #000; width: 40%; }
    .polis-bootstrap .registration-form .uk-offcanvas-close { color: #000; float: right; }
        .polis-bootstrap .registration-form .uk-offcanvas-close:hover { color: #FF9933; }
    .polis-bootstrap .registration-form h3 { color: #000; }
    .polis-bootstrap .registration-form h5 { color: #000; font-size: 12px; margin-top: 0; }
    .polis-bootstrap .registration-form .panel { border: none; }
    .polis-bootstrap .registration-form .form-group { margin-bottom: 7px; }
        .polis-bootstrap .registration-form .form-group span.red { color: red; }
    .polis-bootstrap .registration-form .panel-heading { border-bottom: none; color: #aaa; font-family: RobotoMedium; font-size: 16px; padding: 5px 10px; }
    .polis-bootstrap .registration-form .center { text-align: center; }
    .polis-bootstrap .registration-form .btn { font-size: 18px; width: 100%; }
    .polis-bootstrap .registration-form #Azure_Account_Creation a { color: #FF9933; }
    .polis-bootstrap .registration-form .validationMessage { color: red; }
    .polis-bootstrap .registration-form .btn .fa-spin { color: #FFF; }
    .polis-bootstrap .registration-form .alert-danger.registration-error { text-align: left; }
    .polis-bootstrap .btn-group #btn_treeview.btn { border: 1px solid #ccc !important; }
    #geoplace_treeview { margin-top: 0; }
    /* END Registration form */

    /* MAINTENANCE PANEL */
    .polis-bootstrap .login-page .maintenance-panel { font-size: 11px; background-color: #F9F6DD; margin-bottom: 5px; padding: 20px; border-radius: 5px; color: #000; }
    .polis-bootstrap .login-page .maintenance-panel {
        background-image: url("./tools.svg");
        background-repeat: no-repeat;
        background-position-x: 97%;
        background-position-y: 20px;
    }
    .polis-bootstrap .login-page .maintenance-panel .construction-helmet {
        background-image: url("./construction_helmet.svg");
        background-repeat: no-repeat;
        display: inline-block;
        background-position-y: 10px;
        width: 40px;
        height: 40px;
        margin-left: 10px;
     }

    .polis-bootstrap .login-page .maintenance-panel-body { min-height: 50px; max-height: 180px; overflow-y: auto; overflow-x: hidden }
        .polis-bootstrap .login-page .maintenance-panel b a { color: #000 !important }
    .polis-bootstrap .login-page .maintenance-panel .maintenance-panel-title { font-size: 40px; font-weight: bold; margin-left:10px; top:10px; margin-bottom: 3px; }
    .polis-bootstrap .login-page .maintenance-panel .maintenance-panel-message { font-size: 18px; margin-left:10px; margin-bottom: 3px; }


    /* Sonarqube div */
    .polis-bootstrap .login-page .sonarqube-status { right: 10px; position: absolute; top: 5px; z-index: 2; }
    /* Sonarqube div */

    /* Application version div */
    .polis-bootstrap .login-page .application-version { width: inherit; text-align: center; padding-bottom: 5px; padding-top: 10px; }
        .polis-bootstrap .login-page .application-version .text { color: #FF9933; font-size: 12px; }
    /* End Application version div */
}

@media only screen and (min-width: 1600px) {
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 35%; }
}

@media only screen and (min-width: 1224px) and (max-width: 1600px) {
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 50%; }
}

@media only screen and (min-width: 1024px) and (max-width: 1223px) {
    .polis-bootstrap .login-page .provider-panel .provider div.text { font-size: 15px; }
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 65%; }
}

@media only screen and (min-width: 749px) and (max-width: 1023px) {
    .polis-bootstrap .login-page .provider-panel .provider div.text { font-size: 15px; }
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 80%; }
}

@media only screen and (max-width: 800px) {
    .polis-bootstrap .login-page .left { flex: auto; width: 100%; }
    .polis-bootstrap .login-page .right { display: none; }
        .polis-bootstrap .login-page .right .centered-box { display: none; }
        .polis-bootstrap .login-page .right .disclaimer { display: none; }
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 80%; }
    .polis-bootstrap .login-page .sonarqube-status { display: none; }
    .polis-bootstrap .login-page .right .main-message { display: block; }
    .polis-bootstrap .login-page .list-projects { padding-top: 35px; }
    .polis-bootstrap .login-page #open_protocol_form { padding-top: 35px; }
}

@media only screen and (min-width: 801px) {
    .polis-bootstrap .login-page .right .main-message { display: block; }
    .polis-bootstrap .login-page .left .main-message { display: none; }
}

@media only screen and (max-height: 620px) {
    .polis-bootstrap .login-page .learn-test-panel { display: none; }
    .polis-bootstrap .login-page .training-container { display: none; }
}

@media only screen and (max-height: 560px) {
    .polis-bootstrap .login-page .left { flex: auto; width: 100%; }
    .polis-bootstrap .login-page .list-projects li.not-selected { display: none; }
    .polis-bootstrap .login-page .right { display: none; }
        .polis-bootstrap .login-page .right .centered-box { display: none; }
        .polis-bootstrap .login-page .right .disclaimer { display: none; }
    .polis-bootstrap .registration-form .uk-offcanvas-bar { width: 80%; }
    .polis-bootstrap .login-page .sonarqube-status { display: none; }

    .polis-bootstrap .login-page .left .main-message { display: block; }
    .polis-bootstrap .login-page .left .list-projects { padding-top: 45px !important; }
    .polis-bootstrap .login-page .left #open_protocol_form { padding-top: 35px; }
}

@-webkit-keyframes sk-three-bounce {
    0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes sk-three-bounce {
    0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); }
}