:root {
    font-size: 1em;
    font-family: 'Open Sans';
    --text-primary: #b6b6b6;
    --text-secondary: #ffffff;

    --bg-primary: #23232e;
    --bg-secondary: #141418;

    --bg-sidemenu: #f8f8f8;
    --bg-sidemenu-topic: #e7e7e7;
    --bg-sidemenu-section: var(--bg-sidemenu);

    --bg-body: #ffffff;

    --transition-speed: 600ms;

    --form-shadow: rgb(36, 204, 124, 0.25);

    --color-mro-1: #24cc7c;
    --color-mro-2: #24d981;
    --color-mro-3: #041c75;
    --color-mro-4: #18507c;
    --text-color-menu-1: #181818;
    --text-color-menu-2: var(--color-mro-2);
    --table-bg-color: var(--bg-sidemenu);
    --color-mro-list-group: #76ffbd;
    --color-mro-list-group-hover: var(--color-mro-1);
    --card-shadow: rgb(36, 204, 124, 0.25);
}

* {
    /* reset nos elementos para nenhum espaçamento nativo */
    margin: 0;
    padding: 0;

    /* padding não irá aumentar o widget/height do elemento */
    box-sizing: border-box;
}
  
body {
    color: black;
    background-color: var(--bg-body);
    text-rendering: optimizeLegibility !important;
    /*renderizar a fonte com qualidade maior*/
    margin: 0;
}

/*
1. TYPOGRAPHY
2. TABLE
3. BACKGROUNDS
4. BUTTONS
5. LAYOUT
6. NAV-MENU
7. CARDS
8. LIST-GROUP
9. BADGES
10. CUSTOM SELECT
*/

/* ----- TYPOGRAPHY ----- */
.header-mro {
    color: var(--color-mro-4);
}

.color-mro-secondary {
    color: var(--color-mro-2);
}

.link-mro {
    color: var(--color-mro-3);
}
.link-mro:hover {
    color: var(--color-mro-4);
}
/* ----- TABLE ------ */
.bg-table-header {
    background-color: var(--color-mro-4);
    color: var(--text-secondary);
}

.bg-table-body {
    background-color: var(--table-bg-color);
}
/* ----- BACKGROUNDS ----- */
.loginpage {
    height: 100vh;
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* ----- BUTTONS ------ */
.create-btn {
    background-color: var(--color-mro-1);
    color: var(--text-secondary);
    border-color: var(--color-mro-2);
}

.create-btn:hover {
    background-color: var(--color-mro-2);
    border-color: var(--color-mro-1)
}

.create-btn:focus {
    background-color: var(--color-mro-3);
    border-color: var(--color-mro-4);
    box-shadow: 0 0 0 0.25rem var(--form-shadow);
}

.btn {
    outline: none !important;
    box-shadow: none;
}

.menu-toggle-button {
    padding: 3px 8px;
    background-color: var(--color-mro-2);
    transition: 150ms;
}

.menu-toggle-button-clicked {
    background-color: var(--color-mro-1);
    box-shadow:0 0 0 0.25rem var(--form-shadow);
}

.menu-toggle-button i {
    font-size: 24px;
    align-self: center;
}

.btn-outline-mro{
    color: var(--color-mro-1);
    border-color: var(--color-mro-1);
}

.btn-outline-mro:hover{
    background-color: var(--color-mro-1);
    color: var(--text-secondary);
    border-color: var(--color-mro-2)
}

.btn-outline-mro:focus{
    background-color: var(--color-mro-3);
    color: var(--text-secondary);
    border-color: var(--color-mro-3);
    box-shadow: 0 0 0 0.25rem var(--form-shadow);
}

/* ----- LAYOUT -----*/
.container-100w {
    width: 100%;
}

.container-90 {
    width: 90%;
    margin: 0 5%;
}

.height-max-100vh {
    max-height: 100vh;
}

/* ----- NAV-MENU ----- */
.sidebar-topic {
    background-color: var(--bg-sidemenu-topic);
    padding: 0.75rem 0;
    text-align: center;
    color: var(--text-color-menu-1);
}

.sidebar-nav-mro-lg {
    background-color: var(--bg-sidemenu);
    min-height: 100vh;
    min-width: 15rem;
}

.sidebar-nav-mro-md {
    background-color: var(--bg-sidemenu);
    width: 100vw;
    height: 100vh;
}

.navbar-mro {
    background-color: var(--bg-sidemenu);
}

.menu-section {
    background-color: var(--bg-sidemenu-section);
}

.sidebar-item {
    background-color: var(--bg-sidemenu-section);
    color: var(--text-color-menu-1);
    transition: 300ms;
}

.sidebar-item:hover {
    background-color: var(--color-mro-4);
    padding-left: 5px;
    transition: 300ms;
    color: var(--text-color-menu-2);
}

/* ----- CARDS ----- */
.estimator-card {
    color: black;
    transition: 400ms
}

.estimator-card:hover {
    color: var(--color-mro-1);
    box-shadow: 5px 5px 5px grey;
    transition: 400ms
}

.estimator-card-icon {
    font-size: 3rem;
}

.estimator-card-subtitle {
    color:var(--text-primary);
}

/* ----- FORMS ----- */
.form-control:focus {
    border-color: var(--color-mro-3);
    box-shadow: 0 0 0 0.25rem var(--form-shadow);
}

/* ----- LIST-GROUP ----- */
.detail-list-group{
    background-color: var(--color-mro-list-group);
}

.detail-list-group:hover{
    background-color: var(--color-mro-list-group-hover);
    color: var(--text-secondary);
}

/* ----- BADGES ----- */

.badge-mro {
    background-color: var(--color-mro-4);
}

/* ----- AUTOCOMPLETE ----- */

.autocomplete-mro {
    background-color: var(--bg-sidemenu);
    color: var(--color-mro-4);
    border: solid 1px var(--color-mro-3);

}

.autocomplete-mro li {
    list-style: none;
}

.ui-helper-hidden-accessible { 
    display:none; 
}

.ui-autocomplete {
    position: relative;
}

/*----- CUSTOM SELECT -----*/

.user-district-select{
    min-height: 5rem;
    padding-top: 0;
    padding-bottom: 0;
    
}