/* Impede que a div apareça antes da instância do Vue ser criada */
[v-cloak] {
    display: none;
}


/* all the others css effects or fix */
.box-img {
    position: relative;
    width: 100%;
    background-color: white !important;
    border-radius: 10px;
}

.content {
    padding-top: 5px !important;
}

.box-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.box-img:hover .box-image {
    opacity: 0.3;
}

.box-img:hover .middle {
    opacity: 1;
}

.text {
    background-color: rgba(40, 49, 121, 0.79);
    width: 100%;
    height: 100%;
    color: white;
    /*font-size: 16px;*/
    padding: 16px 32px;
    border-radius: 10px;
}

.header-color {
    background-color: #283179;
}


.footer-pack {
    background-color: #181c3e;
    position: fixed;
    width: 100%;
    bottom: 0;
    color: #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    float: none !important;
}


.index-bg {
    background: url(/img/fundo7.png) repeat scroll 0 0 #f1f1f1 !important;
    position: relative;
    overflow: hidden;
    height: 100vh;
}


.box-index {
    background-color: #242c6d !important;
    border-radius: 10px;
    color: #fff;
    font-family: sans-serif;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    /*font-size: 30px;*/
}

.title-big {
    color: white !important;
    font-size: larger;
    padding-top: 10px;
}

.title-small {
    color: #ffffff;
    font-size: small;
    padding: 10px 0 10px;
}


.left .topbar-left {
    background-color: #242c6d;
    height: fit-content;
    padding-bottom: 10px;
}

.btn-success {
    color: white !important;
}

.z-index {
    z-index: 2;
    font-family: "Work Sans", sans-serif;
}

.z-index a:focus {
    color: #0b0b0b;
}

.header-padding {
    padding: 10px 0 10px;
}

.move-right {
    float: right !important;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: white !important;
    text-decoration: none;
}


.btn-secondary {
    color: white !important;
}

.bg-red {
    background-color: red;
}

.bg-yellow {
    background-color: yellow;
}

.bg-grey {
    background-color: #a7a7a7 !important;
}

.btn-p {
    padding-top: 1.9rem;
}

.subtitle {
    margin-left: 10px;
    padding: 10px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

th, td {
    white-space: nowrap !important;
}

table thead tr {
    background-color: #242c6d;
    color: white;
}

table btn-sm {

    padding: 0.25rem 0.5rem !important;
}


#sidebar-menu > ul > li > a {
    padding: 10px 20px;
}

#btnForgotPassword {
    font-size: smaller;
}


.historyModal .modal {
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.historyModal .modal-dialog {
    overflow-y: initial !important;
    max-width: 800px !important;
}

.historyModal .modal-body {
    height: 450px;
    overflow-y: auto;
}

.bg-Irregular {
    background-color: #f5b225 !important;
}

.bg-Bloqueado {
    background-color: #ec536c !important;
}

.bg-Cancelando {
    background-color: #6887bb !important;
}

.bg-Cancelado {
    background-color: #a7a7a7 !important
}

 .tablePagesCount{
     display: block;
     overflow-x: auto;
     white-space: nowrap;
     width: 100%;
     border:none;
 }
 .table-secretariat{
     display: block;
     overflow-x: auto;
     white-space: nowrap;
     width: 100%;
     border:none;
     max-height: 400px;
 }

 .allign-bottom{
     display: flex;
     align-items: flex-end;
 }

.btn-flex-bottom {
    display: flex;
    align-items: flex-end;
}
.btn-flex-bottom-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.right-align-btn {
    display: flex;
    flex-direction: row-reverse;
}

.full-col-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*dropzone*/
.dropzone-custom-content {
  text-align: center;
}

.dropzone-custom-title {
    margin-top: 0;
    color: #00b782;
}

.subtitle {
    color: #314b5f;
}



/*btn previdencia */
.btn-round-custom{
    border-radius:100%;
    width: 25px;
    height: 25px
}
.icon-align-center-custom{
    margin-left: -1.5px;
    margin-top: 4px;
}
.btn-secondary-custom{
    background-color: #6c757d;
    border: 1px solid #6c757d;
    color: #ffffff;
}
.btn-secondary-custom:hover, .btn-secondary-custom:focus, .btn-secondary-custom:active, .btn-secondary-custom.active{
    background-color: #434a50;
    border: 1px solid #434a50;
}
.btn-secondary-custom.focus, .btn-secondary-custom:focus {
    box-shadow: 0 0 0 0.2rem rgba(95, 109, 98, 0.5);
}
.btn-secondary-custom:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(95, 109, 98, 0.5);
}
.btn-secondary-custom:not(:disabled):not(.disabled):active{
    color: #fff;
    background-color: #434a50;
    border-color: #434a50;
}

.tr-color{
    background-color: #a7a7a7 ;
    color:#FFFFFF !important;
}
.tr-color:hover{
    background-color: #cfcfcf !important;
    color:#FFFFFF !important;
}
.tr-color a{
    color: #ffffff !important;
}

.invalid-cid{
    isplay: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
    padding: 0px;
}

.dataTables_scrollBody {
    overflow: unset !important;
}

.dataTables_wrapper .row:first-child {
    max-height: 75vh !important;
    overflow: auto;
}

tbody tr td .row:last-child{
    flex-wrap: nowrap !important;
}





.hide-the-menu{
    transition: all .5s ease-in-out;
    display: none;
    position: relative !important;
}

.force-margin{
    transition:margin-left 500ms;
    margin-left: auto !important;
}

.hide-button{
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    margin: 3px;
    width: auto; /* Full width */
    /*position: absolute;*/
    z-index: 100
}
.custom-icon{
    font-size: 25px !important;
}