@charset "windows-1252";

html {
    background: linear-gradient(#3f4079, #ffa500) no-repeat center center fixed;
    background-size: cover;
}

@media screen and (min-width:1920px) {
    .login-block {
        position: relative;
        top: 10rem;
    }
}

@media (max-width: 1125px) {
    #globo {
        min-width: 300px;
        max-width: 300px;
        margin-left: -60px !important;
    }
}
@media (max-width: 991px) {
    #globo {
        min-width: 300px;
        max-width: 300px;
        margin-left: -140px !important;
    }
}
@media (max-width: 767px) {
    #globo {
        min-width: 300px;
        max-width: 300px;
        margin-left: -20px !important;
    }
}

.login-block {
    float: left;
    width: 100%;
    padding: 50px 0;
}

.banner-sec {
    background-size: cover;
    /*min-height: 500px;*/

    border-radius: 0 10px 10px 0;
    padding: 0;
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(48%, rgba(247, 247, 247, 1)), color-stop(51%, rgba(245, 245, 245, 1)), color-stop(71%, rgba(235, 235, 235, 1)), color-stop(100%, rgba(201, 201, 201, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c9c9c9', GradientType=1);
}

.container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 15px 20px 0px rgba(0, 0, 0, 0.1);
}

.carousel-inner {
    border-radius: 0 10px 10px 0;
}

.carousel-caption {
    text-align: left;
    left: 5%;
}

.login-sec {
    padding: 50px 30px;
    position: relative;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(48%, rgba(247, 247, 247, 1)), color-stop(51%, rgba(245, 245, 245, 1)), color-stop(71%, rgba(235, 235, 235, 1)), color-stop(100%, rgba(201, 201, 201, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 48%, rgba(245, 245, 245, 1) 51%, rgba(235, 235, 235, 1) 71%, rgba(201, 201, 201, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c9c9c9', GradientType=1);
}

.login-sec .copy-text {
    position: absolute;
    width: 80%;
    bottom: 20px;
    font-size: 13px;
    text-align: center;
}

.login-sec .copy-text i {
    color: #FEB58A;
}

.login-sec .copy-text a {
    color: #E36262;
}

.login-sec h2 {
    margin-bottom: 30px;
    font-weight: 800;
    font-size: 30px;
    color: #ffa500;
}

.login-sec h2:after {
    content: " ";
    width: 100px;
    height: 5px;
    background: #3FB968;
    display: block;
    margin-top: 20px;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto
}

.btn-login {
    background: #ffa500;
    color: #fff;
    font-weight: 600;
}

.banner-text {
    width: 70%;
    position: absolute;
    bottom: 40px;
    padding-left: 20px;
}

.banner-text h2 {
    color: #fff;
    font-weight: 600;
}

.banner-text h2:after {
    content: " ";
    width: 100px;
    height: 5px;
    background: #FFF;
    display: block;
    margin-top: 20px;
    border-radius: 3px;
}

.banner-text p {
    color: #fff;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 30px;
    width: 30px;
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 50%, 50%;
    border-radius: 50%;
    border: 1px solid black;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #ffa500;
    border: 1px solid black;
}

.loading {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.loading .div {
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px
}

.top-left-loading {
    animation: tl 7.5s ease infinite
}

.top-right-loading {
    animation: tr 7.5s ease infinite
}

.bottom-left-loading {
    animation: bl 7.5s ease infinite
}

.bottom-right-loading {
    animation: br 7.5s ease infinite
}

.loading .div:before, .loading .div:after {
    display: block;
    position: absolute;
    content: ""
}

.loading .div:before {
    width: 50px;
    height: 50px
}

.top-left-loading:before {
    background: #fbbc05;
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0
}

.top-right-loading:before {
    background: #ea4335;
    top: 0;
    right: 0;
    border-radius: 0 100% 0 0
}

.bottom-left-loading:before {
    background: #34a853;
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 100%
}

.bottom-right-loading:before {
    background: #4285f4;
    bottom: 0;
    right: 0;
    border-radius: 0 0 100% 0
}

.loading .div:after {
    background: white;
    width: 25px;
    height: 25px;
    z-index: 1
}

.top-left-loading:after {
    top: 25px;
    left: 25px;
    border-radius: 100% 0 0 0
}

.top-right-loading:after {
    top: 25px;
    right: 25px;
    border-radius: 0 100% 0 0
}

.bottom-left-loading:after {
    bottom: 25px;
    left: 25px;
    border-radius: 0 0 0 100%
}

.bottom-right-loading:after {
    bottom: 25px;
    right: 25px;
    border-radius: 0 0 100% 0
}
@keyframes tl {
    0%, 96%, 100% {
        transform: rotate(0deg)
    }
    12% {
        transform: rotate(-45deg)
    }
    24% {
        transform: rotate(-90deg)
    }
    36% {
        transform: rotate(-135deg)
    }
    48% {
        left: 50px;
        transform: rotate(-180deg)
    }
    60% {
        left: 125px;
        opacity: 1;
        transform: rotate(-135deg)
    }
    61%, 95% {
        opacity: 0
    }
}


@keyframes tr {
    0% {
        transform: rotate(0deg)
    }
    12% {
        transform: rotate(-45deg)
    }
    24% {
        transform: rotate(-90deg)
    }
    36% {
        transform: rotate(-135deg)
    }
    48% {
        transform: rotate(-180deg)
    }
    60% {
        transform: rotate(-225deg)
    }
    72% {
        transform: rotate(-270deg)
    }
    84% {
        transform: rotate(-315deg)
    }
    96%, 100% {
        transform: rotate(-360deg)
    }
}


@keyframes bl {
    0%, 100% {
        transform: rotate(0deg)
    }
    12% {
        transform: rotate(-45deg)
    }
    24% {
        left: 50px;
        transform: rotate(-90deg)
    }
    36% {
        left: 125px;
        opacity: 1;
        transform: rotate(-45deg)
    }
    37%, 83% {
        opacity: 0
    }
    84% {
        left: -25px;
        opacity: 1;
        transform: rotate(-45deg)
    }
    96% {
        left: 50px;
        transform: rotate(0deg)
    }
}


@keyframes br {
    0%, 96%, 100% {
        transform: rotate(0deg)
    }
    12% {
        left: 125px;
        opacity: 1;
        transform: rotate(45deg)
    }
    13%, 59% {
        opacity: 0
    }
    60% {
        left: -25px;
        opacity: 1;
        transform: rotate(45deg)
    }
    72% {
        left: 50px;
        transform: rotate(90deg)
    }
    84% {
        transform: rotate(45deg)
    }
}


.div {
    display: block;
    position: absolute
}

.button1 {
    width: 316px;
    background-color: white;
    border: none;
    margin: 0;
    padding: 4px 0 4px 0;
    cursor: pointer;
}

.button1:nth-child( odd) {
    background-color: #009de0;
}

.button1:hover {
    background-color: #89b817;
}

.select {
    -webkit-appearance: listbox;
    cursor: pointer;
    display: inline-block;
    width: 320px;
    border: 1px solid #566783;
    vertical-align: top;
}

.select__element > p, span {
    display: inline-block;
}

.select__element > p {
    padding-right: 5px;
}

.selected__element-current {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    padding: 3px 0 3px 0px;
}

.selected__element-current:hover {
    border: 1px solid #03A9F4;
    box-shadow: 0px 1px 5px black;
}

.selected__element-current.open-blue {
    border: 1px solid #03A9F4;
}

.button-row {
    display: none;
}

.button-row.open-blue {
    display: block;
    border: 1px solid #03A9F4;
}

div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
}

div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
}

.div2 {
    border: 2px solid #566783;
    background: rgba(226, 226, 226, 1);
    background: -moz-linear-gradient(-45deg, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226, 226, 226, 1)), color-stop(50%, rgba(219, 219, 219, 1)), color-stop(51%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(254, 254, 254, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
    background: linear-gradient(135deg, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1);
    height: 116px;
    width: 319px;
    padding: 5px;
    position: relative;
    border-radius: 1.25rem;
    top: 1.5rem;
}

.signo {
    max-width: 20%;
    position: absolute;
    left: 16.4em;
    /* bottom: 4rem; */

    top: 78px;
}

h6 {
    text-align: justify;
}

.fa-angle-down {
    position: relative;
    right: 12px;
    top: 4px;
}
@media screen and (max-width:1199px) {
    .select {
        width: 265px;
    }
    .button1 {
        width: 263px;
    }
    .button-row {
        width: 265px;
    }
    .div2 {
        display: table-cell;;
    }
    .signo {
        left: 13.2em;
        display: block;
    }
}

@media screen and (max-width:991px) {
    .select {
        width: 181px;
    }
    .button1 {
        width: 177.5px;
    }
    .button-row {
        width: 180.5px;
    }
    .div2 {
        display: table-cell;
        font-size: 2px;
    }
    h6 {
        font-size: 11px;
    }
    .signo {
        /* left: 14.2em; */

        left: 8.8rem;
        position: relative;
        display: block;
        top: -1rem;
    }
}

@media screen and (max-width:767px) {
    .select {
        width: 320px;
    }
    .button1 {
        width: 316.5px;
    }
    .button-row {
        width: 318.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 5rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 138.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

@media screen and (max-width:567px) and (min-width:561px) {
    .select {
        width: 320px;
    }
    .button1 {
        width: 316.5px;
    }
    .button-row {
        width: 318.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 5rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 138.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

@media screen and (max-width:560px) {
    .select {
        width: 320px;
    }
    .button1 {
        width: 316.5px;
    }
    .button-row {
        width: 318.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 5rem;
    }
}

@media screen and (max-width:490px) {
    .select {
        width: 320px;
    }
    .button1 {
        width: 316.5px;
    }
    .button-row {
        width: 318.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 3rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 138.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

@media screen and (max-width:392px) {
    .select {
        width: 285px;
    }
    .button1 {
        width: 281.5px;
    }
    .button-row {
        width: 285.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 0rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 137.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

@media screen and (max-width:393px) {
    .select {
        width: 285px;
    }
    .button1 {
        width: 281.5px;
    }
    .button-row {
        width: 285.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 0rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 137.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

@media screen and (max-width:360px) {
    .select {
        width: 285px;
    }
    .button1 {
        width: 281.5px;
    }
    .button-row {
        width: 285.5px;
    }
    .div2 {
        position: relative;
        margin: 0px;
        left: 0rem;
    }
    .signo {
        /* left: 14.2em; */

        left: 133.2em;
        bottom: 2rem;
        max-width: 12%;
        display: block;
        top: -14px;
    }
}

.fa-exclamation-triangle {
    font-size: 1.4rem;
    color: orange;
}

#rol {
    border-top-left-radius: 50px 20px;
    border-bottom-left-radius: 50px 20px;
}

#user {
    border-top-left-radius: 50px 20px;
    border-bottom-left-radius: 50px 20px;
}