@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Abel|Roboto+Condensed');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');

:root {
    --main-bg-color: #21598e;
    --main-bg-color-secundary: #e6982b;
    --main-font-family: 'Rubik', sans-serif;
}

body {
    background-color: #93b0cc;
    font-size: 16px;
}

.template-login {
    display: grid;
    grid-template-columns: 25vw 75vw;
}

.personal-template-login {
    grid-template-columns: 100vw 75vw !important;
}
.personal-form-login {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center
}

.template-login .form {
    background: var(--main-bg-color);
    height: 100vh;
}

.logo-parceiro {
    min-width: 202px;
}

.personal-box-form-login {
    width: 37%;
}

.personal-box-form-login-mobile {
    width: 100%;
}

.template-login .form .box-form {
    padding: 0 2rem 2rem;
    background: var(--main-bg-color);
    position: relative;
}

.template-login .form .box-form .arrow-top {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.25rem 1.25rem 0 1.25rem;
    border-color: #ffffff transparent transparent transparent;
    margin: 0 auto
}
.template-login .form .box-form .container-inputs {
    margin: 2.5rem;
}
.template-login .form .box-form .container-inputs .box-input {
    position: relative;
    margin: 2rem 0;
}

.template-login .form .box-form .container-inputs .box-error {
    background: rgba(244, 67, 54, .95);
    color: #ffffff;
    padding: .75rem;
    border-radius: 2px;
    text-align: center;
    font-family: var(--main-font-family);
}

.template-login .form .box-form .container-inputs .box-input input {
    width: 100%;
    padding: 1.25rem 1rem;
    border: none;
    border-radius: 2px;
    font-family: var(--main-font-family);
}
.template-login .form .box-form .container-inputs .box-input .person,
.template-login .form .box-form .container-inputs .box-input .key,
.template-login .form .box-form .container-inputs .box-input .eye {
    position: absolute;
    top: 1rem;
    color: #909090;
}
.template-login .form .box-form .container-inputs .box-input .eye {
    right: 1rem;
}
.template-login .form .box-form .container-inputs .box-input .person,
.template-login .form .box-form .container-inputs .box-input .key {
    left: 1rem;
}

.template-login .form .box-form .container-actions {
    margin: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.template-login .form .box-form .container-actions a {
    color: #ffffff;
    font-family: var(--main-font-family);
}

.template-login .form .box-form .container-actions input[type="submit"] {
    background: var(--main-bg-color-secundary);
    border: none;
    padding: .75rem 2rem;
    border-radius: 2px;
    color: #ffffff;
    font-family: var(--main-font-family);
    font-weight: 400;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: all .2s ease-in;
}
.template-login .form .box-form .container-actions input[type="submit"]:hover {
    background: #fff;
    color: var(--main-bg-color);
}

.template-login .form .logo {
    /*min-height: 250px;*/
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-login .form .logo img {
    margin: 2vw auto;
}

.template-login .form .security {
    padding: 2rem 4.5rem;
    /*overflow-y: auto;*/
    /*height: 50vh;*/
}

.template-login .form .security h4 {
    font-family: var(--main-font-family);
    color: white;
    text-transform: uppercase;
}
.template-login .form .security h4.pt {
    padding-top: 1rem;
}

.template-login .form .security ul li {
    font-family: var(--main-font-family);
    color: white;
}
.template-login .form .security ul li.mt {
    margin: 1rem 0;
}
.template-login .news {
    position: relative;
    overflow: hidden;
}

.template-login .news .content {
    position: absolute;
    bottom: 1rem;
    z-index: 2;
    padding: 2rem 8rem;
    font-family: var(--main-font-family);
    color: #ffffff;
    width: 100%;
}

.template-login .news .content .box-title {
    border-bottom: 1px solid #fff;
    width: 100%;
    padding: 2rem 0;
}
.template-login .news .content .box-title h1 {
    font-family: var(--main-font-family);
    margin-top: 0;
    margin-bottom: 0;
}

.template-login .news .content .box-actions {
    margin: 2rem 0 ;
}

.template-login .news .content .box-actions a {
    background: transparent;
    border: solid 1px #ffffff;
    margin-right: 1rem;
    color: #ffffff;
    padding: 1rem 1.25rem;
    text-transform: uppercase;
}

.template-login .news .content .policy {
    margin-top: 8rem;
    text-align: right;
}
.template-login .news .content .policy a {
    color: white;
}

.template-login .news .background {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.template-login .news .background .film {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.65);
    position: absolute;
}
.template-login .news .background img {
    width: 100%;
    height: 100%;
}

.swiper-pagination.login {
    bottom: 5vh !important;
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    text-align: center;
    opacity: 1;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
}

.swiper-pagination-bullet-active {
    background: #ffffff !important;
}


#imagemFundo {
    /*background-image: url(../images/bgLoginNovo.jpg);*/
    background-repeat: repeat-x;
    background-color: #FFFFFF;
}

#login-win .x-window-mc {
    background: #fff none;
    border: 1px solid #eee;
}

#my-form .x-plain-body {
    background: #f9f9f9 none;
    color: #222;
    padding: 10px 0 0 10px;
    border: solid 0.1em #99BBE8;
}

#login-win .x-window-body {
    background: #FFFFFF none repeat scroll 0%;
    border: 1px solid #99BBE8;
}

.x-window-dlg .ext-sistema-load {
    background: transparent url('../images/search.gif') no-repeat top left;
    height: 46px;
    width: 50px;
}

.loginBox td {
    font-size: 11px;
    color: #676767;
}

.popupBody {
    color: black;
    font-size: 11px;
    line-height: 1.5;
}

.Field150 {
    width: 150px;
}

.FormButton {
    font-size: 11px;
    width: 80px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

.box-alert {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    margin-bottom: 10px;
    width: 400px;
    background: #e69810;
}

.box-alert h3 {
    margin-top: 5px;
    margin-bottom: 0px;
    font-family: 'Roboto', sans-serif;
    color: #21598e;
    font-size: 20px;
}

.box-alert .box-authenticate {
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-submit {
    margin-top:10px;
    width: 300px;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.box-submit a {
    font-family: 'Roboto Condensed';
    color: #005995;
}

.box-submit .btn-submit {
    background: #e6982b;
    color: #fff;
    font-family: 'Roboto Condensed';
    text-transform: uppercase;
    transition: all .5s;
}
.box-submit .btn-submit:hover {
    background: #005995;
    color: #fff;
}

.box-policy {
    margin: 2rem 3rem;
    text-align: left;
}

.box-policy a {
    font-family: 'Roboto Condensed';
    color: #777777;
    font-size: 16px;
}


.box-info-system {
    /* display: flex;
    align-items: baseline; */
    margin-bottom: 10px;
    margin-top: -20px;
}

.box-alert .box-authenticate h3.authenticate {
    display: flex;
    align-items: center;
    margin-top: 0;
}
.box-alert .box-authenticate h3.authenticate i {
    margin-right: 8px;
    color: #32a036;
}

.box-alert .box-authenticate .new {
    border-radius: 2px;
    background: #F44336;
    padding: .25rem 1rem;
    margin-left: 1rem;
    animation: pulse-btn 1s infinite;
}

.box-alert h3 img {
    width: 25px;
}

.box-alert p {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    margin-top: 0px;
    font-size: 12px;
    padding: 10px;
    margin-bottom: 0px;
}

.ajust-box-form {
    margin-top: 12vh;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.panel {
    border: none !important;
    box-shadow: none !important;
}

.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
}
.flex-container.col {
    flex-direction: column;
}

.flex-item {
    padding: 10px 0px;
}

.panel-body ul li strong {
    color: rgba(21, 21, 21, 0.7);
}

.painel-maior {
    border-right: solid 1px #ddd;
}

.painel-menor {
    border-color: #DDD;
    width: 100%;
}

.texto-alerta {
    background-color: #fff;
    border: none;
    margin-top: 25px;
    text-align: left;
    font-size: 19px;
    font-family: 'Roboto', sans-serif;
    color: #a41312;
    font-size: 18px;
}

.flex-caixa {
    border: solid 1px #ddd;
    border-radius: 0.4rem;
}

input[type="text"] {
    /* width: 300px; */
    text-align: center;
    outline: none;
    padding: 6px 30px;
    font-family: 'Roboto Condensed';
}

input[type="password"] {
    /* width: 300px; */
    text-align: center;
    display: inline-block;
    outline: none;
    /* margin-left: 18px; */
    padding: 6px 30px;
}

.panel-info>.panel-heading {
    background-color: transparent !important;
    border: none !important;
}

.container-input {
    margin-bottom: 15px;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.container-input .person,
.container-input .key,
.container-input .eye {
    /* display: none; */
    position: absolute;
    top: 5px;
    color: #909090;
}
.container-input .person,
.container-input .key {
    left: 6px;
}
.container-input .eye {
    right: 6px;
}

@keyframes pulse-btn {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.329);
      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.329);
    }
    70% {
      -moz-box-shadow: 0 0 0 5px rgba(244, 67, 54, 0.329);
      box-shadow: 0 0 0 5px rgba(244, 67, 54, 0.329);
    }
    100% {
      -moz-box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.329);
      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.329);
    }
  }

@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

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

@media only screen and (max-device-width: 800px) {
    .template-login {
        grid-template-columns: 100vw;
    }

    .template-login .form .logo {
        height: 30vh;
        display: flex;
    }
    .template-login .form .logo img {
        margin: auto auto;
    }
    .template-login .form .box-form {
        height: 70vh;
    }
    .template-login .form .box-form .arrow-top {
        margin-bottom: 15vh;
    }
    .template-login .form .box-form .container-inputs .box-input input,
    .template-login .form .box-form .container-actions input[type="submit"] {
        border-radius: 40px !important;
    }
    .template-login .form .box-form .container-actions input[type="submit"] {
        justify-content: center;
    }

    .template-login .form .box-form .container-actions {
        flex-direction: column-reverse;
        align-items: normal;
        text-align: center;
    }

    .template-login .form .box-form .container-actions .restart {
        margin-top: 1rem;
    }

    .box-policy a {
        color: #FFFFFF;
    }
    .box-arrow {
        height: 30px;
    }
    .box-arrow .arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .arrow_box {
        position: relative;
    }
    .arrow_box:after, .arrow_box:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    
    .arrow_box:after {
        border-color: rgba(136,183,213,0);
        border-top-color: #fff;
        border-width: 15px;
        margin-left: -15px;
    }
    .arrow_box:before {
        border-color: rgba(194,225,245,0);
        border-top-color: transparent;
        border-width: 20px;
        margin-left: -20px;
    }

    .panel-title {
        max-width: 315px;
    }
    .flex-item {
        padding: 0px 0px;
    }
    .box-alert h3 {
        font-size: 16px;
    }
    .box-alert p {
        font-size: 13px;
    }
    .box-alert h3 img {
        width: 25px;
    }
    .ajust-box-form {
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* height: 100vh; */
        overflow-y: hidden;
    }
    .box-alert {
        width: 315px !important;
    }
    .panel-info {
        width: 100vw !important;
        border: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    .panel-body {
        padding: 0 !important;
        width: 100%;
        height: 60vh;
        position: relative;
        background-color: #21598e;
        margin-top: 0px !important;
        font-family: "Roboto condensed";
        padding-top: 0px !important;
    }
    .panel-body .content {
        display: flex;
        justify-content: center;
        /* padding: 2rem; */
        flex-direction: column;
        height: calc(100% - 130px);
        align-items: center;
    }
    .panel-body .text-muted {
        margin-left: 8px !important;
    }
    .panel-body .controls {
        padding-left: 0px !important;
        padding-right: 0px !important;
        max-width: 315px;
        width: 315px;
    }
    .panel-body p {
        color: white;
    }
    .panel-body .form-group{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

    }
    .ajust-col-mobile.col-xs-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .container,
    #loginbox {
        padding: 0 !important;
        margin: 0 !important;
    }
    .painel-maior {
        border: none;
    }
    .texto-alerta {
        margin-top: 0px;
    }
    .flex-caixa {
        border: none;
    }
    #imagemFundo {
        /* height: 100vh;
        width: 100vw; */
        /* background-image: url("../img/bg-extranet.png"); */
        /*deixa o background com efeito paralax*/
        /* background-attachment: fixed;
        /* cover é para nunca deixar espaço sem imagem*/
        /* background-size: cover; */
    }
    #imagemFundoGovernanca {
        height: 100vh;
        width: 100vw;
        background-image: url("../img/bg-governanca.jpeg");
        /*deixa o background com efeito paralax*/
        background-attachment: fixed;
        /* cover é para nunca deixar espaço sem imagem*/
        background-size: cover;
    }
    .panel {
        background-color: transparent !important;
        /* height: calc(100vh - 50px); */
        border: none !important;
        margin-bottom: 0px;
    }
    .panel-heading {
        margin-top: 0px !important;
        background-color: transparent !important;
        border: none !important;
        padding: 10px 0px !important;
        background: #fafafa;
        background: -webkit-gradient(left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#fff));
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),to(#fff));
        background: linear-gradient(180deg,#fafafa 0,#fff);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafafa",endColorstr="#ffffff",GradientType=0);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 40vh;
    }

    .box-submit {
        flex-direction: column;
        width: 315px;
    }

    .box-submit a {
        color: #FFFFFF;
    }

    .box-submit .restart {
        margin-top: 10px;
    }

    input {
        border: none !important;
        border-radius: 40px !important;
        box-shadow: none !important;
        font-family: "Roboto condensed" !important;
        color: #909090;
    }
    input[type="submit"] {
        width: 100%;
        text-transform: uppercase;
        background-color: #F4AA16;
        background-image: linear-gradient(141deg, #FFC44E 0%, #F4AA16 51%, #F8A71A 75%);
        padding: 7px;
        font-size: 16px;
        box-shadow: none !important;
        transition: background-image .5s ease-in;
    }
    input[type="submit"]:hover {
        background-image: linear-gradient(141deg, #ffbd38 0%, #eca10a 51%, #e49203 75%);
    }
    input[type="password"] {
        margin-left: 0px;
        ;
    }
    .no-mobile {
        display: none;
    }
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    input:focus:-moz-placeholder {
        color: transparent;
    }
    .container-input {
        max-width: 315px;
        min-width: 315px;
    }
    .container-input .person,
    .container-input .key,
    .container-input .eye {
        position: absolute;
        color: #B0B0B0;
        display: inline-block;
    }
    .container-input .person,
    .container-input .key {
        left: 15px;
        top: 5px;
    }
    .container-input .eye {
        right: 15px;
        top: 5px;
    }
    .container {
        height: 100vh;
    }
}

@media screen and (max-device-width: 320px) {
    /* .ajust-box-form {
        margin-top: 5vh;
    } */
    .painel-maior {
        border: none;
    }
    .texto-alerta {
        margin-top: 0px;
    }
    .flex-caixa {
        border: none;
    }
}