:root {
    --primary-color: #336699;

    --bl-btn-text: black;
    --bl-btn-font-size: 12px;

    --trash-button-bg-color: tomato;
    --trash-button-color: white;

    --undefined-color: #999999;
    --info-color: #4c99e5;
    --info-color-darker: #00285d;
    --success-color: green;
    --warn-color: #f0b433;
    --danger-color: tomato;
    --level-text-color: black;
    --level-color: white;
    --text-color: #333333;

    --text-marker-color: #FBD603;

    --spaced-row-space-size: 10px;
    --spaced-column-space-size: 8px;
}

.undefined {
    --level-color: var(--undefined-color) !important;
}

.success {
    --level-color: var(--success-color) !important;
}

.info {
    --level-color: var(--info-color) !important;
}

.danger {
    --level-color: var(--danger-color) !important;
}

.warn {
    --level-color: var(--warn-color) !important;
    --level-text-color: black;
}

.info.darker {
    --level-color: var(--info-color-darker) !important;
}

/*****  LAYOUT  ******/
.column {
    display: flex;
    flex-direction: column;
}

.column.spaced > *:not(:last-child) {
    margin-bottom: var(--spaced-column-space-size);
}

.column label {
    margin-bottom: 4px;
}

.column.bottom {
    justify-content: flex-end;
}

.column.top {
    justify-content: flex-start;
}

.column.middle {
    justify-content: center;
}

.column.start {
    align-items: flex-start;
}

/* Aligns items to the start of the container */
.column.center {
    align-items: center;
}

/* Centers items horizontally */
.column.end {
    align-items: flex-end;
}

/* Aligns items to the end of the container */
.column.stretch {
    align-items: stretch;
}

/* Stretches items to fill the container */
.column.baseline {
    align-items: baseline;
}

.column.space-between {
    justify-content: space-between;
}

/* Aligns items based on their baseline */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.row.spaced > *:not(:last-child) {
    margin-right: var(--spaced-row-space-size);
}

.row.space-between {
    justify-content: space-between;
}

.row.space-around {
    justify-content: space-around;
}

.row.space-evenly {
    justify-content: space-evenly;
}

.center-row {
    justify-content: center;
}

.row.center {
    justify-content: center;
}

.row.end {
    justify-content: flex-end;
}

.row.start {
    justify-content: flex-start;
}

.row.space-between {
    justify-content: space-between;
}

.row.top {
    align-items: flex-start;
}

.row.middle {
    align-items: center;
}

.row.bottom {
    align-items: flex-end;
}

.row.stretch {
    align-items: stretch;
}

.row.baseline {
    align-items: baseline;
}


.grow0 {
    flex-grow: 0;
}

.grow1 {
    flex-grow: 1;
}

.grow2 {
    flex-grow: 2;
}

.grow3 {
    flex-grow: 3;
}

.grow4 {
    flex-grow: 4;
}

.topo {
    /*position: fixed;
    top: 0;
    right: 0;
    left: 0;*/
}

.main-header {
    height: 46px;
    background-color: var(--primary-color);
    padding: 0 30px;
    color: white;
    font-size: 12px;
    font-weight: normal;
}

.main-header .title {
    font-size: 15px;
    margin-left: 8px;
}

.main-header .info-login {
    margin-right: 20px;
}

.main-header a {
    color: white;
    margin-left: 8px;
    align-content: center;
}

.main-menu {
    width: 100%;
    margin: 0;
    background: white;
    color: black;
    height: 30px;
}

.content {
    margin: 16px;
    padding-top: 20px;
}


/*****  COMPONENTS CREATED  ******/
.text-marker {
    background: var(--text-marker-color);
}

.text-marker.yellow {
    --text-marker-color: #FBD603;
}

.text-marker.blue {
    --text-marker-color: #1e9eff;
}

.text-marker.green {
    --text-marker-color: #4bff11;
}


.badge {
    background-color: var(--level-color);
    color: var(--level-text-color);
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
    align-content: center;
}

/*Dividers*/
hr.dashed {
    border-top: 3px dashed #bbb;
}

hr.dotted {
    border-top: 3px dotted #bbb;
}

hr.solid {
    border-top: 3px solid #bbb;
}

hr.rounded {
    border-top: 6px solid #bbb;
    border-radius: 3px;
}


.vertical-line {
    --border-width: 3px;
    --border-color: #bbb;
    --border-style: solid;

    border-left: var(--border-width) var(--border-style) var(--border-color);
}

.vertical-line.dashed {
    --border-style: dashed;
}

.vertical-line.dotted {
    --border-style: dotted;
}

.vertical-line.solid {
    --border-style: solid;
}

.vertical-line.rounded {
    --border-width: 6px;
    --border-radius: 3px;
    border-radius: var(--border-radius);
}

/*****  COMPONENTS CUSTOMIZE  ******/
.fa {
    align-content: center;
}


.bl.ui-panel .ui-panel-titlebar {
    background-color: var(--primary-color);
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
}

.bl.ui-panel .ui-panel-title {
    display: block;
}

.bl.clean.ui-panel .ui-panel-titlebar {
    background-color: #f5f5f5;
    color: black;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: bold;

}

.bl.clean.ui-panel .ui-panel-content {
    padding: 0;
    margin: 0;
}

.bl.sm.ui-panel .ui-panel-titlebar {
    font-size: 12px;
    font-weight: lighter;
    padding: 4px 8px;
}

.bl.sm.clean.ui-panel {
    padding: 0;
    font-size: 10px;
}

.bl.sm.ui.ui-panel-title {
    margin: 0;
}

.noborder.ui-panel {
    border: none;
}


.column .ui-panel-content {
    display: flex;
    flex-direction: column;
}

.column .ui-panel-content > * {
    margin: 0;
    margin-top: 4px;
}

/*****  TOP BAR  ******/
.top-bar {
    height: 46px;
    background: var(--primary-color);
    color: white;
    align-items: center;
}

.top-bar .logo {
    height: 40px;
    margin-left: 20px;
}

.top-bar .title {
    font-size: 15px;
    margin-left: 5px;
}


.ui-button-text {
    text-shadow: none;
}

/*Better layout default button*/
.bl .ui-button-text {
    color: var(--bl-btn-text);
    font-size: var(--bl-btn-font-size);
}

.bl.ui-button .ui-icon {
    color: var(--bl-btn-text);
}

.bl.ui-button {
    background: var(--level-color) !important;
}

.bl.salvar.ui-button {
    --level-color: green;
    --bl-btn-text: white;
}

.bl.limpar.ui-button {
    --level-color: orange;
    --bl-btn-text: black;
}

.bl.info.ui-button {
    --bl-btn-text: white;
}


.bl.lg.ui-button {
    letter-spacing: .8px;
    --bl-btn-font-size: 26px;
}

.bl.md.ui-button {
    letter-spacing: .2px;
    --bl-btn-font-size: 14px;
}

.trash-button.ui-button {
    background: tomato !important;
}

.trash-button .ui-button-text {
    color: white;
}

.trash-button.ui-button .ui-icon {
    color: white;
}

.filtro-panel .row .trash-button {
    margin-left: auto !important;
    background: white !important;
}

.filtro-panel .row label {
    align-self: center;
    margin-right: 10px;
    margin-left: 4px;
}

.filtro-panel .row table {
    margin-left: 8px;
    margin-right: 8px;
}

.filter-search-button {
    grid-column-start: 2;
    display: flex;
    align-items: center;
}

.filter-search-button > button {
    flex-shrink: 1;
}

.filter-notificacao {
    margin-left: auto;
    border: 1px solid #dddddd;
}

.info-box {
    color: white;
    background-color: #336699;
    border-radius: 10px;
    border-color: transparent;
    padding: 14px 8px;
}


.bl.ui-fieldset {
    --fieldset-color: var(--primary-color);
    --fieldset-text-color: white;
    --fieldset-legend-border-color: #00285d;

    border-color: var(--fieldset-color);
    margin-bottom: 20px;
}

.bl.ui-fieldset.sub {
    --fieldset-color: #f1f1f1;
    --fieldset-legend-border-color: #d5d5d5;
    --fieldset-text-color: black;
}

.bl.ui-fieldset > legend {
    background: var(--fieldset-color);
    color: var(--fieldset-text-color);
    border-color: var(--fieldset-legend-border-color);
    font-size: 12px;
    text-shadow: none;
}

.bl.ui-fieldset.fit > .ui-fieldset-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.bl.ui-fieldset.fit > .ui-fieldset-content > *:not(:last-child) {
    margin-bottom: var(--spaced-column-space-size);
}

.bl.ui-fieldset.fit .input-item {
    align-self: stretch;
}

.bl.ui-fieldset.fit .input-item.labelComBorda, .input-item.ui-inputfield {
    width: auto !important;
}

.ui-selectbooleancheckbox.readonly .ui-chkbox-box.ui-state-disabled {
    opacity: 1;
}

/*noinspection ALL*/
.html-box {
    display: inline-block;
    padding: 4px;
    cursor: text;
    background: none #ffffff;
    border: 1px solid #cccccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

.card,
.ui-panel.card {
    --level-color: #f3f6fa;
    background-color: var(--level-color);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.10), 0 1.5px 4px rgba(44, 62, 80, 0.08);
    padding: 20px;
    border: none;
}

.ui-panel.card .ui-panel-titlebar {
    background: transparent;
    color: #265283;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #e0e6ed;
    border-radius: 10px 10px 0 0;
    padding: 16px 20px 12px 20px;
}

.ui-panel.card .ui-panel-content {
    background: transparent;
    padding: 16px 20px 20px 20px;
    border-radius: 0 0 10px 10px;
}

.remove-margin {
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .row.middle-mobile {
        align-items: center;
    }

    .ui-button {
        margin-bottom: 10px;
    }

    .hide-on-mobile {
        display: none;
    }

    .column-mobile {
        flex-direction: column;
    }

    .column-mobile.start-mobile {
        align-items: flex-start;
    }
}