/*
Basic.css
*/

@import url('tema.css');

/* Works on Firefox */
* {
    scrollbar-color: var(--scrollThumb) var(--scrollTrack);
    scrollbar-width: thin;
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: var(--scrollTrack);
        padding: 2px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scrollThumb);
        border-radius: 2px;
    }

a {
    color: var(--blue);
}

body {
    font-size: 0.9rem;
    margin: 0px;
    padding: 0px;
    background-color: var(--background-color) !important;
    color: var(--txt-color) !important;
}

br {
	clear: left;
}

table {
    width: 100%;
    border-spacing: 1px;
   /* white-space: nowrap;
    overflow-x: scroll;*/
}

.table-thead-top0 {
    position: sticky;
    top: 0px;
    background-color: var(--background-color);
    z-index: 10;
}

.table-thead {
    position: sticky;
    top: 63px;
    background-color: var(--background-color);
    z-index: 10;
}

.table tr.line0 td,
.table tr.line1 td {
    padding: 0.5rem 0.5rem !important;
    border-bottom-width: var(--bs-border-width) !important;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg) !important;
}

/*Override weelColorPicker.js*/
.customWheelColorPicker {
	width: 700px;
	height: 250px;
}

.jQWCP-wWidget {
	box-sizing: content-box !important;
	background: var(--card-background, #eee) !important;
	border-color: var(--color-500, #aaa) !important;
}

	.jQWCP-wWidget.jQWCP-block {
		position: relative;
		border-top-color: var(--card-background, #aaa) !important;
		border-left-color: var(--card-background, #aaa) !important;
		border-right-color: var(--color-300, #aaa) !important;
		border-bottom-color: var(--color-300, #aaa) !important;
		box-shadow: var(--card-shadow, inset 1px 1px 1px #ccc) !important;
	}

.jQWCP-wWheel {
	border-color: var(--color-500, #aaa) !important;
}

.jQWCP-slider {
	border-color: var(--color-500, #aaa) !important;
}

/**/

/*Override jquery*/
.ui-widget.ui-widget-content {
	border: 1px solid var(--table-border-color) !important;
	background: var(--background-color) !important;
}

.ui-corner-all {
    box-sizing: content-box !important;
}

.ui-dialog .ui-dialog-content {
    padding: 0;
}

.ui-dialog-titlebar-close:empty {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--bs-btn-close-opacity);
    filter: var(--filter-svg);
}

    .ui-dialog-titlebar-close:hover {
        color: var(--bs-btn-close-color);
        text-decoration: none;
        opacity: var(--bs-btn-close-hover-opacity);
    }

    .ui-dialog-titlebar-close:focus {
        outline: 0;
        box-shadow: var(--bs-btn-close-focus-shadow);
        opacity: var(--bs-btn-close-focus-opacity);
    }
/*Fim jquery*/

/* Override bootstrap */
body {
    --bs-table-bg: var(--table-bg);
    --bs-table-striped-bg: var(--table-striped-bg);
    --bs-table-striped-color: var(--txt-color);
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.2);
    --bs-table-hover-color: var(--txt-color);
    --bs-table-accent-bg: transparent;
}
table.table {
    color: var(--txt-color);
    font-size: 1rem;
    border-color: var(--table-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--table-striped-bg);
    color: var(--txt-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--table-hover-bg);
    color: var(--txt-color);
}

.backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: background-color 0.2s linear;
	background-color: rgba(0,0,0,0);
	visibility: hidden
}

	.backdrop:has(.alert) {
		z-index: 1044;
		visibility: visible;
		background-color: rgba(0,0,0,0.5);
	}

.dropdownMenu {
    background: #343A40;
    color: #fff;
    font-size: 0.8rem;
    z-index: 2;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
}

.offcanvas {
    color: var(--txt-color, #303030) !important;
}

.offcanvas-header {
    background-color: var(--color-900);
}

.offcanvas-body {
    background-color: var(--color-900)
}

.card {
    background-color: var(--card-background);
    background-clip: border-box;
    border: 1px solid rgba(112, 112, 112, 0.5);
}

/*override bootstrap*/
.custom-tooltip {
    --bs-tooltip-bg: rgba(0, 0, 0, 0.7);
    pointer-events: none !important;
}

.modal-content {
    background-color: var(--card-background) !important;
    border: 1px solid rgba(112, 112, 112, 0.5) !important;
    color: var(--txt-color);
    font-size: 1rem;
    max-height: calc(100% - 80px) !important;
}

    .modal-content .modal-header {
        background-color: var(--card-header) !important;
        color: #fff;
        border-bottom: 1px solid var(--txt-color);
    }

        .modal-content .modal-header .btn-close {
            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(27deg) brightness(102%) contrast(101%) !important;
        }

.btn-search {
    color: #fff;
    background-color: var(--btn-secundary);
    border: 0;
    border-radius: 5px;
    padding: 8px;
    margin-left: 5px;
}

.btn-secundary {
    color: #fff;
    background-color: var(--btn-secundary) !important;
    border-color: var(--btn-secundary) !important;
}
    .btn-secundary:hover {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
    }
    .btn-secundary:focus {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
        box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 20%) !important;
    }

.btn-primary {
    color: #fff;
    background-color: var(--btn-primary-bootstrap) !important;
    border-color: var(--btn-primary-bootstrap) !important;
}
    .btn-primary:hover {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
    }
    .btn-primary:focus {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
        box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 20%) !important;
    }

.btn-success {
    color: #fff;
    background-color: var(--btn-confirm) !important;
    border-color: var(--btn-confirm) !important;
}

    .btn-success:hover {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
    }

    .btn-success:focus {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
        box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 20%) !important;
    }

.btn-primary-icon {
    color: #fff;
    font-size: 24.5px;
    background-color: var(--btn-primary-bootstrap) !important;
    border-color: var(--btn-primary-bootstrap) !important;
}

    .btn-primary-icon:hover {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
    }

    .btn-primary-icon:focus {
        color: #fff;
        filter: brightness(1.2) contrast(0.9) !important;
        box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 20%) !important;
    }

.btn-close {
    filter: var(--filter-svg);
}
/*FIM override bootstrap*/


.svgTxtColor{
    filter: var(--filter-svg-default);
}

.svgBlack {
    filter: brightness(0) saturate(100%);
}

.svgWhite {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(27deg) brightness(102%) contrast(101%);
}

.svgInvertColor {
    filter: invert(1);
}

.svgSucess {
    filter: var(--filter-svg-green);
}

.svgDelete {
    filter: var(--filter-svg-red);
}

.svgEdit {
    filter: var(--filter-svg-yellow);
}

.svgDefault {
    filter: var(--filter-svg-blue);
}

.buttonDownload {
    background-color: var(--btn-primary-bootstrap) !important;
    border-color: var(--btn-primary-bootstrap) !important;
    color: #fff;
    height: 32px;
    padding: 4px 10px 4px 35px;
    font-size: 1rem;
    background-image: url('../mvc/img/icon-download-24.svg');
    background-repeat: no-repeat;
    background-position: 10% 50%;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
}

.buttonUpload {
    background-color: var(--btn-primary-bootstrap) !important;
    border-color: var(--btn-primary-bootstrap) !important;
    color: #fff;
    height: 32px;
    padding: 4px 10px 4px 35px;
    font-size: 1rem;
    background-image: url('../mvc/img/icon-upload-24.svg');
    background-repeat: no-repeat;
    background-position: 10% 50%;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
}

.btnIcon {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
}

.iconSucess {
    color: var(--green) !important;
}

.iconDelete {
    color: var(--red) !important;
}

.iconTxtColor {
    color: var(--txt-color) !important;
}

.iconEdit {
    color: var(--yellow) !important;
}

.iconDefault {
    color: var(--blue) !important;
}

.btnIcon:hover {
    color: #fff !important;
    background-color: rgba(0,0,0,0.5) !important;
}

.cardInfo {
    font-size: 1rem;
    border-radius: 10px;
    background-color: var(--card-background);
    margin: 10px;
    border: 1px solid rgba(112, 112, 112, 0.5);
}

    .cardInfo .cardHeader {
        border-radius: 10px 10px 0 0;
        background-color: var(--card-header);
    }

.PageList {
    color: var(--txt-color);
    background-color: var(--background-color);
    display: block;
    margin: 0px;
    padding: 10px;
}

.list-title-center {
	display: block;
    margin: 0 auto;
    text-align: center;
}

.pageHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    height: 4rem;
    background-color: var(--primary-color);
    z-index: 1001;
}

.pagetitle {
    background-color: var(--primary-color);
    font: normal 18px 'Segoe UI', Calibri, anita_semi-squareregular, Open Sans,Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    padding: 5px 5px 5px 25px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
}

.pagetitle2 {
    background-color: var(--card-header);
    font: normal 18px 'Segoe UI', Calibri, anita_semi-squareregular, Segoe UI, Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    padding: 5px 5px 5px 25px;
}

.pagetitle3 {
    font: normal 18px 'Segoe UI', Calibri, anita_semi-squareregular, Segoe UI, Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    width: 85%;
}

.pagetitle4 {
    font: normal 18px 'Segoe UI', Calibri, anita_semi-squareregular, Segoe UI, Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    width: 50%;
}

.pagetitlePrimary {
    background-color: var(--primary-color);
    font-size: 2.38rem;
    color: #fff;
    font-weight: 500;
    display: block;
    margin: 0 auto;
    height: 4rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.pagetitleTransparent {
    background-color: transparent;
    font: normal 18px 'Segoe UI', Calibri, anita_semi-squareregular, Open Sans,Verdana, Arial, Helvetica, sans-serif;
    color: var(--txt-color);
    font-weight: 500;
    display: block;
    margin: 0 auto;
    padding: 5px 5px 5px 25px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.pagetitleTranparentLarge {
    background-color: transparent;
    font: normal 2.38rem 'Segoe UI', Calibri, anita_semi-squareregular, Open Sans,Verdana, Arial, Helvetica, sans-serif;
    color: var(--txt-color);
    font-weight: bold;
    display: block;
    margin: 0 auto;
    padding: 5px 5px 5px 25px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.pageBodyWithFooter {
    margin-bottom: 60px;
}

.centerbox {
    display: block;
    margin: 2.5rem 1% 1% 1%;
}

.centerbox2 {
    background-color: var(--card-background);
	display: block;
    padding: 15px;
    margin: 0 auto;
}

.centerbox3 {
    background-color: var(--background-color);
	display: block;
    padding: 10px;
    margin: 0 auto;
}

.pagefooter {
    background-color: var(--primary-color);
    color: #fff;
    border-top: 1px solid rgba(112, 112, 112, 0.5);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    padding: 10px 10px 10px 10px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.pagefooter2 {
    background-color: var(--card-background);
    color: #fff;
    text-align: center;
    display: block;
    padding: 10px 0px 10px 0px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.pagefooterNoMargin {
	background-color: #DDDDDD;
	text-align: center;
	display: block;
	padding: 10px 10px 10px 10px;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 100;
	margin: 0px;
}



.boxMessage {
    font-size: 1rem;
    font-weight: 400;
    color: #286989;
    background-color: #A1D1E9;
    padding: 1rem;
    border: 1px solid #286989;
    display: block;
    border-radius: 0.375rem;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1050;
    animation: fadeOut 2s linear 5s 1 normal forwards;
}

.boxMessageSucess {
    font-size: 1rem;
    font-weight: 400;
    color: #2F862B;
    background-color: #A3DFA0;
    padding: 1rem;
    border: 1px solid #2F862B;
    display: block;
    border-radius: 0.375rem;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1050;
    animation: fadeOut 2s linear 5s 1 normal forwards;
}

.boxMessageError {
    font-size: 1rem;
    font-weight: 400;
    color: #A62222;
    background-color: #FF8E8E;
    padding: 1rem;
    border: 1px solid #A62222;
    display: block;
    border-radius: 0.375rem;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1050;
    animation: fadeOut 2s linear 5s 1 normal forwards;
}

.boxMessageWarning {
    font-size: 1rem;
    font-weight: 400;
    color: #A67815;
    background-color: #FFD271;
    padding: 1rem;
    border: 1px solid #A67815;
    display: block;
    border-radius: 0.375rem;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1050;
    animation: fadeOut 2s linear 5s 1 normal forwards;
}

    /* boqueia o fundo da pagina */
    .block {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        /*    border: solid 2px red; */
        background-color: #808080;
        filter: Alpha(Opacity=70);
        opacity: 0.70;
        -moz-opacity: 0.70;
        display: table-cell;
        vertical-align: middle;
    }

.btnDataTimeline {
    background-color: var(--btn-primary-bootstrap);
    color: #fff !important;
    padding: 1em 1.5em;
    position: relative;
    margin-right: 15px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
}

.btnDataTimeline:hover {
    filter: brightness(0.9) contrast(1.2) ;
}

.tdAlign td label {
    padding-top: 10px;
}

.winSalvar {
    border: 1px solid rgba(112, 112, 112, 0.5);
    background-color: var(--card-background);
    z-index: 90;
    position: absolute;
    height: 490px;
    width: 455px;
    left: 50%;
    top: 50%;
    margin-left: -210px;
    margin-top: -245px;
    border-radius: 5px;
}

.c-loader {
    -webkit-animation: is-rotating .75s linear infinite;
    animation: is-rotating .75s linear infinite;
    display: inline-block;
    border: .25em solid var(--blue);
    border-radius: 50%;
    border-right-color: transparent;
    vertical-align: -.125em;
    height: 2rem;
    width: 2rem;
}

.toast-body {
    color: #303030 !important;
}

.btn-close-modal {
    box-sizing: content-box;
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    width: 1em;
    height: 1em;
    color: #000;
    background: transparent url(../images/icones-svg/close.svg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
}

    .btn-close-modal:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }

@keyframes is-rotating {
    to {
        transform: rotate(1turn);
    }
}

@keyframes fadeOut {
    from {
        visibility: visible;
        opacity: 1;
        z-index: 1050;
    }

    to {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
    }
}