@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
    }
    
    body {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #7f79a0;
        margin-top: 15px;
        background: #4C3C94 url(../img/jadkas.jpg) no-repeat center fixed;
        background-size: cover;
        height: 100%
    }
    
     ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }
    
     ::-webkit-scrollbar-thumb {
        background: #8E80D5
    }
    
     ::-webkit-scrollbar-track {
        background: #344154;
    }
    /*display*/
    
    .d-block {
        display: block!important
    }
    
    .d-inline-block {
        display: inline-block!important
    }
    
    .d-none {
        display: none!important
    }
    
    .d-table {
        display: table!important
    }
    
    .d-flex {
        display: flex!important
    }
    /*float*/
    
    .float-left {
        float: left!important
    }
    
    .float-right {
        float: right!important
    }
    
    .float-none {
        float: none!important
    }
    /*text*/
    
    .text-center {
        text-align: center!important
    }
    
    .text-left {
        text-align: left!important
    }
    
    .text-right {
        text-align: right!important
    }
    
    .text-justify {
        text-align: justify!important
    }
    
    .text-uppercase {
        text-transform: uppercase!important
    }
    
    .text-end {
        justify-content: flex-end!important
    }
    /*padding*/
    
    .p-5 {
        padding: 3rem!important
    }
    
    .p-4 {
        padding: 2rem!important
    }
    
    .p-3 {
        padding: 1rem!important
    }
    
    .p-2 {
        padding: .9rem!important
    }
    
    .p-1 {
        padding: .6rem!important
    }
    
    .p-0 {
        padding: 0!important
    }
    /*padding- y*/
    
    .pt-5,
    .py-5 {
        padding-top: 3rem!important
    }
    
    .pb-5,
    .py-5 {
        padding-bottom: 3rem!important
    }
    
    .pt-4,
    .py-4 {
        padding-top: 2rem!important
    }
    
    .pb-4,
    .py-4 {
        padding-bottom: 2rem!important
    }
    
    .pt-3,
    .py-3 {
        padding-top: 1rem!important
    }
    
    .pb-3,
    .py-3 {
        padding-bottom: 1rem!important
    }
    
    .pt-2,
    .py-2 {
        padding-top: .9rem!important
    }
    
    .pb-2,
    .py-2 {
        padding-bottom: .9rem!important
    }
    
    .pt-1,
    .py-1 {
        padding-top: .6rem!important
    }
    
    .pb-1,
    .py-1 {
        padding-bottom: .6rem!important
    }
    
    .pt-0,
    .py-0 {
        padding-top: 0!important
    }
    
    .pb-0,
    .py-0 {
        padding-bottom: 0!important
    }
    /*padding- x*/
    
    .pl-5,
    .px-5 {
        padding-left: 3rem!important
    }
    
    .pr-5,
    .px-5 {
        padding-right: 3rem!important
    }
    
    .pl-4,
    .px-4 {
        padding-left: 2rem!important
    }
    
    .pr-4,
    .px-4 {
        padding-right: 2rem!important
    }
    
    .pl-3,
    .px-3 {
        padding-left: 1rem!important
    }
    
    .pr-3,
    .px-3 {
        padding-right: 1rem!important
    }
    
    .pl-2,
    .px-2 {
        padding-left: .9rem!important
    }
    
    .pr-2,
    .px-2 {
        padding-right: .9rem!important
    }
    
    .pl-1,
    .px-1 {
        padding-left: .6rem!important
    }
    
    .pr-1,
    .px-1 {
        padding-right: .6rem!important
    }
    
    .pl-0,
    .px-0 {
        padding-left: 0!important
    }
    
    .pr-0,
    .px-0 {
        padding-right: 0!important
    }
    /*margin- y*/
    
    .mt-5,
    .my-5 {
        margin-top: 3rem!important
    }
    
    .mb-5,
    .my-5 {
        margin-bottom: 3rem!important
    }
    
    .mt-4,
    .my-4 {
        margin-top: 2rem!important
    }
    
    .mb-4,
    .my-4 {
        margin-bottom: 2rem!important
    }
    
    .mt-3,
    .my-3 {
        margin-top: 1rem!important
    }
    
    .mb-3,
    .my-3 {
        margin-bottom: 1rem!important
    }
    
    .mt-2,
    .my-2 {
        margin-top: .9rem!important
    }
    
    .mb-2,
    .my-2 {
        margin-bottom: .9rem!important
    }
    
    .mt-1,
    .my-1 {
        margin-top: .6rem!important
    }
    
    .mb-1,
    .my-1 {
        margin-bottom: .6rem!important
    }
    
    .mt-0,
    .my-0 {
        margin-top: 0!important
    }
    
    .mb-0,
    .my-0 {
        margin-bottom: 0!important
    }
    /*margin- x*/
    
    .ml-5,
    .mx-5 {
        margin-left: 3rem!important
    }
    
    .mr-5,
    .mx-5 {
        margin-right: 3rem!important
    }
    
    .ml-4,
    .mx-4 {
        margin-left: 2rem!important
    }
    
    .mr-4,
    .mx-4 {
        margin-right: 2rem!important
    }
    
    .ml-3,
    .mx-3 {
        margin-left: 1rem!important
    }
    
    .mr-3,
    .mx-3 {
        margin-right: 1rem!important
    }
    
    .ml-2,
    .mx-2 {
        margin-left: .9rem!important
    }
    
    .mr-2,
    .mx-2 {
        margin-right: .9rem!important
    }
    
    .ml-1,
    .mx-1 {
        margin-left: .6rem!important
    }
    
    .mr-1,
    .mx-1 {
        margin-right: .6rem!important
    }
    
    .ml-0,
    .mx-0 {
        margin-left: 0!important
    }
    
    .mr-0,
    .mx-0 {
        margin-right: 0!important
    }
    
    .m-auto {
        margin: 0 auto!important
    }
    /*border*/
    
    .border-left {
        border-left: solid 1px #aaa8a838!important
    }
    
    .border-right {
        border-right: solid 1px #aaa8a838!important
    }
    
    .border-top {
        border-top: solid 1px #aaa8a838!important
    }
    
    .border-bottom {
        border-bottom: solid 1px #aaa8a838!important
    }
    
    .border {
        border: solid 1px #aaa8a838!important
    }
    
    .border-0 {
        border: 0!important
    }
    
    .border-bottom-0 {
        border-bottom: 0!important
    }
    /*fonts h*/
    
    .h1 {
        font-size: 3.1rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .h2 {
        font-size: 2.5rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .h3 {
        font-size: 1.8rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .h4 {
        font-size: 1.5rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .h5 {
        font-size: 1.1rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .h6 {
        font-size: .9rem!important;
        margin-bottom: 20px;
        display: block;
    }
    
    .grande-font {
        font-size: 4rem!important
    }
    
    .medio-font {
        font-size: 3rem!important
    }
    
    .pequeno-font {
        font-size: 2rem!important
    }
    
    .minimo-font {
        font-size: 1.2rem!important
    }
    /*links*/
    
    .link-azul {
        color: #3aa6ea!important;
        text-decoration: none
    }
    
    .link-azul:hover {
        color: #57abe0!important;
        text-decoration: underline
    }
    
    .link-vermelho {
        color: #ff7373!important;
        text-decoration: none
    }
    
    .link-vermelho:hover {
        color: #fb9090!important;
        text-decoration: underline
    }
    
    .link-verde {
        color: #00d9a3!important;
        text-decoration: none
    }
    
    .link-verde:hover {
        color: #59e4c2!important;
        text-decoration: underline
    }
    
    .link-roxo {
        color: #4968d1!important;
        text-decoration: none
    }
    
    .link-roxo:hover {
        color: #8ba2ef!important;
        text-decoration: underline
    }
    /*links*/
    
    .text-branco {
        color: #ffffff!important;
    }
    
    .text-azul {
        color: #3aa6ea!important;
    }
    
    .text-vermelho {
        color: #ff7373!important;
    }
    
    .text-verde {
        color: #00d9a3!important;
    }
    
    .text-roxo {
        color: #4968d1!important;
    }
    /*position*/
    
    .position-relative {
        position: relative!important;
    }
    
    .position-absolute {
        position: absolute!important;
    }
    
    .position-inherit {
        position: inherit!important;
    }
    
    .position-normal {
        position: normal!important;
    }
    
    .position-fixed {
        position: fixed!important;
    }
    /*border-radius*/
    
    .radius-circulo {
        border-radius: 50%!important;
        overflow: hidden!important;
    }
    
    .radius-4 {
        border-radius: 4px!important;
    }
    
    .radius-radius-ty {
        border-radius: 0 .5rem .5rem 0!important;
    }
    
    .opaco {
        opacity: .8;
    }
    /*largura*/
    
    .width-100 {
        width: 100%!important
    }
    
    .width-50 {
        width: 50%!important
    }
    
    .width-30 {
        width: 30%!important
    }
    
    .width-10 {
        width: 10%!important
    }
    /*botoes*/
    
    .btn {
        display: block;
        padding: 10px 20px;
        border-radius: 50px;
        border: solid 1px #8E80D5;
        color: #fff;
        background: #8E80D5;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        transition: all .4s;
        font-size: .9rem;
    }
    
    .btn:hover {
        box-shadow: 0 0 11px 0 #bd85f5;
        transition: all .2s;
        cursor: pointer;
    }
    
    .btn.btn-azul {
        border: solid 1px #3aa6ea;
        background: #3aa6ea;
        color: #FFF!important
    }
    
    .btn.btn-amarelo {
        border: solid 1px #e8f791;
        background: #e8f791;
        color: #000!important
    }
    
    .btn.btn-vermelho {
        border: solid 1px #ff7373;
        background: #ff7373;
    }
    
    .btn.btn-roxo {
        border: solid 1px #ad93fe;
        background: #ad93fe;
    }
    
    .btn.btn-verde {
        border: solid 1px #00B2B2!important;
        background: #00B2B2!important
    }
    
    .btn.btn-laranja {
        border: solid 1px #fbbb45;
        background: #fbbb45;
    }
    /*btn outline*/
    
    .btn-outline {
        border: solid 1px #8E80D5;
        background: none!important;
        color: #8E80D5!important;
    }
    
    .btn-outline-verde {
        border: solid 1px #00d9a3;
        background: none!important;
        color: #00d9a3!important;
    }
    
    .btn-outline-roxo {
        border: solid 1px #7892ea;
        background: none!important;
        color: #7892ea!important;
    }
    
    .btn-outline-amarelo {
        border: solid 1px #e8f791;
        background: none!important;
        color: #e8f791!important;
    }
    
    .btn-outline-vermelho {
        border: solid 1px #ff7373;
        background: none!important;
        color: #ff7373!important;
    }
    
    .btn-nulo {
        background: #8b91a9!important;
        border-color: #777e98!important;
        color: #ced2e4;
        cursor: no-drop;
    }
    
    .btn-nulo:hover {
        cursor: no-drop;
    }
    /*login*/
    
    .login {
        background: #4C3C94 url(../img/back-login.png) no-repeat center fixed;
        background-size: cover;
    }
    
    .base-login {
        background-color: #ffffffab;
        border-radius: 5px;
        padding: 60px 40px 40px 40px;
        margin-top: 100px;
        box-shadow: 0 0 15px 0 #344154;
    }
    
    .base-login h2 {
        display: block;
        text-align: center;
        color: #6456a9;
    }
    
    .base-login label {
        display: block;
        color: #9a9a9a;
        padding-top: 1rem;
        padding-bottom: 3px;
    }
    
    .base-login input[type=text],
    .base-login input[type=password] {
        border: solid 1px #dedede;
        color: #8e8e8e;
        background: #f3f4f5;
        padding: .9rem;
        max-width: 100%;
        width: 100%;
        border-radius: 4px;
        display: block
    }
    
    .mostraCampo.base-login {
        background: #fff;
        position: absolute;
        top: 0;
        margin-top: 0;
        margin-left: 0;
        bottom: 0;
        left: 15px;
        right: 15px;
        display: none
    }
    
    .mostraCampo.base-login small {
        display: block;
        text-align: center;
        color: #839096;
        margin-bottom: 30px;
    }
    
    .mostraCampo.base-login .senha.fechar {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    
    .mostraCampo.base-login .senha.fechar:hover {
        color: red
    }
    /*conteudo*/
    
    .conteudo {
        max-width: 100%;
        width: 900px;
        margin: 0 auto;
    }
    
    .caixa {
        width: 100%;
        float: left;
        background: #ffffffcf;
        box-shadow: 0 0 20px 0 #213841;
        min-height: calc(100vh - 34px);
        border-radius: 3px;
        position: relative;
    }
    
    .topo {
        width: 100%;
        background: #7765CB;
        float: left;
        border-radius: 3px 3px 0 0;
    }
    
    .topo .logo {
        float: left;
        color: #FFF;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.3rem;
        padding: 8px 20px;
    }
    
    .topo .logo p {
        padding-top: .4rem
    }
    
    .topo .logo span {
        color: #FF99FF;
    }
    
    .topo .menutopo {
        float: right;
        margin-right: 0px;
    }
    
    .topo .menutopo li {
        display: inline-block;
        border-bottom: solid 19px transparent;
        position: relative;
        transition: all .5s linear;
        border-left: solid 1px #b09ff678;
        border-top: solid 19px transparent;
    }
    
    .topo .menutopo li:last-child {
        border-right: 0;
    }
    
    .topo .menutopo li:hover {
        background: #ab47ea;
    }
    
    .topo .menutopo li a {
        display: block;
        color: #fff;
        padding: 0 15px;
        background: none;
        text-decoration: none;
    }
    /*divisor*/
    
    .divisor {
        width: 100%;
        float: left;
        max-width: 100%;
        padding: 1.5rem;
        display: block;
        background: #ffffff57;
        border-bottom: 0;
        border-right: solid 1px #B2ABCE;
    }
    
    .divisor .titulo {
        width: 100%;
        float: left;
        max-width: 100%;
        padding: 1.5rem;
        display: block;
        background: #ffffff57;
        border-bottom: 0;
        border-right: solid 1px #B2ABCE;
    }
    
    .divisor .cx {
        width: 100%;
        float: left;
        border-radius: 5px;
        padding: 1rem;
        margin-bottom: 1rem;
        background: linear-gradient(-45deg, #877cb4, #B2ABCE);
        border: solid 1px #73699e;
    }
    
    .divisor .cx.destaque {
        background: linear-gradient(-45deg, #b978fa, #d0c8f1);
        border-color: #9b55bdbd;
    }
    
    .divisor .cx .h5 {
        color: #FFF;
        text-transform: uppercase;
    }
    
    .divisor .cx .text-label {
        color: #4f466b;
        text-transform: uppercase;
    }
    
    .formulario {
        background: linear-gradient(-45deg, #b978fa, #8d83b8);
        border-radius: 5px;
        padding-bottom: 1.1rem;
        margin-bottom: 1.1rem;
    }
    
    .formulario .text-label {
        color: #fff;
        margin-top: 0;
    }
    
    .form-campo {
        width: 100%;
        max-width: 100%;
        display: block;
        border: solid 1px #ddd;
        color: #4c5761;
        border-radius: 4px;
        transition: all .2s;
        padding: 10px;
        background: #eee;
    }
    
    .text-label {
        display: block;
        padding-bottom: .7rem;
        margin-top: .6rem;
        font-size: .9rem;
        color: #6a636d;
    }
    
    .titulo {
        display: block;
        text-align: left;
        text-transform: uppercase;
        color: #7664CA;
        padding: 0 10px;
        font-size: 1.2rem;
    }
    /*base-lista*/
    
    .base-lista {
        width: 100%;
        float: left;
        padding: 2rem 1.5rem;
    }
    
    .tabela-responsiva {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .tabela-responsiva table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        background-color: transparent;
    }
    
    .tabela-responsiva table td,
    .tabela-responsiva table th {
        font-size: .89rem;
    }
    
    .tabela-responsiva table th {
        background: rgba(76, 60, 147, 0.63);
        padding: .4rem;
        color: #1F272C;
    }
    
    .tabela-responsiva table td {
        border-bottom: solid 1px rgba(203, 201, 210, 0.59);
        vertical-align: middle;
        color: #7d7e7f;
        padding: .4rem .6rem
    }
    
    .tabela-responsiva table tr {
        background: #e8e5e5b8
    }
    
    .tabela-responsiva table tr:nth-of-type(2n+0) {
        background: #ededed87
    }
    
    .tabela-responsiva .btn {
        padding: .24rem 1rem
    }
    
    .rolagem-tabela {
        height: 227px;
        overflow-y: auto;
        border: solid 1px rgba(76, 87, 97, 0.23);
        border-top: 0
    }
    
    .rolagem-tabela2 {
        height: 447px;
        overflow-y: auto;
        border: solid 1px rgba(76, 87, 97, 0.23);
        border-top: 0
    }
    
    footer {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: .9rem;
        padding-top: 1rem;
        padding-bottom: 0;
    }
    
    footer p {
        font-size: .9rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .mobmenu {
        display: none
    }
    /*991*/
    
    @media (max-width:991px) {
        .mobmenu {
            display: block;
            float: right;
            font-size: 2rem;
            padding: .5rem 1.3rem;
            color: #fff;
        }
        .menutopo {
            display: none
        }
        body {
            margin-top: 0
        }
        .caixa {
            box-shadow: none;
            min-height: calc(100vh - 0px);
        }
    }
    /*880*/
    
    @media (max-width:880px) {
        .menutopo {
            width: 100%;
            text-align: center;
        }
    }
    /*600*/
    
    @media (max-width:600px) {
        .titulo.h2 {
            font-size: 1.5rem!important;
        }
        .base-lista {
            padding: 2rem .8rem;
        }
        .px-2.pb-0.d-block.h5 {
            font-size: 1rem!important;
        }
    }
    /*480*/
    
    @media (max-width:480px) {
        .border .rows.p-4 {
            padding-left: 0!important;
            padding-right: 0!important
        }
        .border .col.px-5.py-5 {
            padding-bottom: 1rem!important;
            padding-top: 1rem!important
        }
        .topo .menutopo li {
            display: block;
            border-left: 0;
        }
        .base-login {
            margin-top: 50px;
            padding: 60px 20px;
        }
        .base-login .btn {
            font-size: 1.1rem;
        }
    }
    /*394*/
    
    @media (max-width:394px) {
        .topo .logo {
            font-size: 1.1rem;
            padding: 8px 8px;
        }
        .border-bottom.px-4 {
            padding: 0!important
        }
        .titulo.h2 {
            font-size: 1.2rem!important;
        }
        .px-2.pb-0.d-block.h5 {
            font-size: .8rem!important;
        }
        .btn.h4 {
            font-size: 1.1rem!important;
        }
    }
    /*338*/
    
    @media (max-width:338px) {
        .topo .logo {
            font-size: 1.1rem;
            padding: 10px 5px;
        }
    }
    /*333*/
    
    @media (max-width:333px) {
        .topo .logo {
            font-size: 1rem;
            padding: 8px 7px;
        }
        .base-botoes .btn {
            width: 100%;
            margin: .4rem 0;
            font-size: 1.1rem
        }
    }
    /*320*/
    
    @media (max-width:320px) {
        .topo .logo {
            font-size: 1rem;
            padding: 12px 5px;
        }
    }