/**
 * index.scss
 */

/****************************************************
 General CSS configurations
 ****************************************************/

 *{
    box-sizing: border-box; /* Includes padding and margin inside width and height calculations*/
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f1f1f1;
}

/****************************************************
 Bootstrap mods
 ****************************************************/
.btn:hover{
    background-color: #b4b4b4;
    border-color: #b4b4b4;
    color: #FFF;
}


.btn-primary{
    background-color:#00a98f;
    border-color:#00a98f;
}

.btn-primary:hover{
    background-color:#445376;
    border-color:#445376;
}

a{
    color: #00a98f;
}

/* Altera o texto do botão de upload*/
.custom-file-input:lang(en)~.custom-file-label::after,
.custom-file-input:lang(pt)~.custom-file-label::after,
.custom-file-input~.custom-file-label::after {
    content: "Selecionar Arquivo";
}

/****************************************************
 Main container
 ****************************************************/
.my-container{
    margin-top: 80px;
    padding-top: 20px;
    min-width: 300px;
}


/****************************************************
 Navbar top menu
 ****************************************************/
.my-navbar{
    min-height: 80px;
}

.my-logo{
    width: 300px;
}


/****************************************************
 Login page
 ****************************************************/
.my-login-container{
    margin-top: 40px;
    max-width: 400px;
}

.my-login-img{
    width: 400px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.my-login-header{
    padding-top: 60px;
    padding-bottom: 20px;
}

.my-login-form{
    padding: 20px;
}

.my-login-helper{
    padding-top: 8px;
}


/****************************************************
 Password toogle 
 ****************************************************/

 .my-pwd-toogle a, .my-pwd-tooglen a:hover{
    color: #495057;
    text-decoration: none;
}

.my-pwd-toogle a div{
     height: 100%;
}

.my-pwd-toogle a div span{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/****************************************************
 Home page (menu)
 ****************************************************/
.my-card, .my-card:hover{
    color: inherit;
    text-decoration: none;
    border: inherit;
}

.my-card:hover{
    background-color: #00a98f;
    color: white;
}

.my-card-img-hover{
    filter: brightness(0) invert(1);
}

.my-card-img{
    width: 50%;
    min-width: 100px;
}

/****************************************************
 Report translation
 ****************************************************/

.my-invisible{
    display: none !important;
}

.my-big-checkbox{
    width: 20px; 
    height: 20px;
    vertical-align: middle;
}


/****************************************************
 User edition pages
 ****************************************************/

 .my-user-form{
    padding: 20px;
}

.my-prepend {
    width : 140px;
}

.my-prepend span {
    width : 100%;
}

.my-prepend input {
    width: 100%;
    min-width: 140px;
}


/****************************************************
 User edition pages
 ****************************************************/

/* Dois cards por linha no tablet */
@media (max-width: 992px) {
    .my-card-deck .my-card {
        flex: 0 0 43%;
    }
}


/* Evita que login quebre no mobile */
@media (max-width: 576px) {
    .my-name{
        display: none;
    }
}

/****************************************************
 Datatables (clients)
 ****************************************************/

/* Align top itens */
.datatable-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    /* flex-direction: row-reverse; */
}
@media (max-width: 576px) {
    .datatable-header{
        flex-direction: column;
    }
}

.datatable-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

/* Fix input formating */
.my-dt-input{
    display: inline-block;
    width: auto;
}

/* Paginate buttons */
.paginate_button{
    padding: 8px;
}

.paginate_button.current{
    background-color: #eceff1;
}