@import url('overwritten-bootstrap.css');

.text-primary-dark{
    color: var(--primary-dark);
}

.text-terciary{
    color: var(--terciary);
}

:root{
    --primary: #3c8dbc;
    --primary-dark: #337ab7;

    --secondary: #3498db;
    
    --terciary: #667694; /* #2D6DA3; */

    --secondary-rgb: 52, 152, 219;

    --black: rgb(0,0,0,1);
    --black-95: rgb(0,0,0,.95);
    --black-9: rgb(0,0,0,.9);
    --black-8: rgb(0,0,0,.8);
    --black-7: rgb(0,0,0,.7);
    --black-6: rgb(0,0,0,.6);
    --black-5: rgb(0,0,0,.5);
    --black-4: rgb(0,0,0,.4);
    --black-3: rgb(0,0,0,.3);
    --black-2: rgb(0,0,0,.2);
    --black-15: rgb(0,0,0,.15);
    --black-1: rgb(0,0,0,.1);

    --white: rgb(255,255,255,1);
    --white-95: rgb(255,255,255,.95);
    --white-9: rgb(255,255,255,.9);
    --white-8: rgb(255,255,255,.8);
    --white-7: rgb(255,255,255,.7);
    --white-6: rgb(255,255,255,.6);
    --white-5: rgb(255,255,255,.5);
    --white-4: rgb(255,255,255,.4);
    --white-3: rgb(255,255,255,.3);
    --white-2: rgb(255,255,255,.2);
    --white-15: rgb(255,255,255,.15);
    --white-1: rgb(255,255,255,.1);
}

.body {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}

.load {
    opacity: 1;
}

.dx-button-mode-contained {
    border-color: #ddd;
    color: #333;
    margin: 5px !important;
}

.dx-button-default {
    background-color: var(--primary-dark);
    border-color: var(--terciary);
    color: #fff;
}

/* Esses dois estilos, definem a cor dos ícones de filtros que aparecem nos headers dos grids do DevExtreme */
.dx-datagrid .dx-header-filter {
    color: var(--white-3) !important;
}

.dx-datagrid .dx-header-filter-empty {
    color: var(--black-15) !important
}

/* Esse estilo, define a cor dos ícones que pertecem a um grid */
.dx-button-mode-contained .dx-icon {
    color: var(--terciary) !important;
}

.mainFooter {
    border-top: 1px solid #d2d6de;
    padding: 15px;
    display: flex;
}

.mainFooter strong {
    color: #444;
}

.blue1 {
    color: var(--terciary);
}