* {
    font-family: Roboto, Arial, "Droid Sans", Helvetica, Sans-serif;
}

html {
}

body {
    margin: 0;
    text-align: center;
    font-size: 12px;
}

@media print {
    #divInfraAreaTelaE {
        display: none;
        visibility: hidden;
    }
}

div, legend, caption {
    text-align: left;
}

input, button, textarea, select, table, label, legend, caption, a, span, p {
    font-size: .8125rem;
}

legend {
    width: auto;
}

input, button, textarea, select {
    background-color: #fff;
}

select:focus, textarea:focus, input:focus {
    background-color: #dfdfdf;
    outline: none;
}

a:focus {
    outline: none;
}

button:focus, a.infraAnchorButton:focus {
    outline: 1px solid black;
}

a.infraAnchorButton:focus-visible{
    outline-offset: 0;
}

select option {
    padding: 1px .5rem;
}

.ms-choice>span.placeholder {
    color: unset;
    background-color: unset;
}


a:focus img, img:focus {
    outline: 1px dotted black;
    border-radius: 4px;
}

a:hover img, img:hover {
    outline: none !important;
}

div.infraBarraSistema a:focus img,
div.infraDivOrdenacao a:focus img,
#imgInfraMenuPontosTopo:focus,
#lnkInfraCheck:focus img {
    outline: 1px dotted white;
}

#lnkInfraUnidade:focus {
    outline: 1px dotted white;
    outline-offset: 1px;
}

#divInfraMenuSistema{
    margin-right: 10px;
}

#lnkInfraMenuSistema{
    color: white;
}

#lnkInfraMenuSistema:focus img,
#lnkInfraMenuSistema:focus span {
    outline: 1px dotted white;
    outline-offset: 1px;
    border-radius: 4px;
}

div.infraAreaPaginacao a:focus img {
    outline: 1px dotted black;
}

a, img {
    cursor: pointer;
}

hr {
    border-bottom: solid #0494c7 .125rem;
}

label.infraLabelTitulo {
    font-size: 1rem;
    color: white;
    padding: 4px 10px;
    font-weight: 400;
    background-color: #0494c7;
    border-radius: .2rem;
    width: 99%;
}

label.infraLabelTitulo img {
    vertical-align: top;
}

div.infraBarraSeguranca {
    padding: .2em;
    display: block;
    background-color: #fa3227;
    text-align: center;
}

div.infraBarraSeguranca span {
    color: white;
    font-weight: bold;
}

div.infraBarraAcesso {
    padding: 8px 4px;
    text-align: right;
}

div.infraBarraAcesso span {
    font-size: .875rem;
    font-weight: 600;
}

div.infraBarraAcesso a {
    font-size: .875rem;
    text-decoration: none;
    font-weight: normal;
}

div.infraBarraAcesso a:hover {
    text-decoration: underline;
}

nav.infraBarraNavegacao {
    min-height: 65px;
}

div.infraBarraSistema {
}

div.infraBarraSistema h6 {
    color: white;
    font-size: .6rem;
    padding: 2px 0 1px 0;
}


#spnInfraIdentificacaoSistema {
    color: white;
    font-size: 1.2rem;
    font-weight: 400;
    vertical-align: text-top;
}

#divInfraBarraSistemaPadrao {
    z-index: 1000;
}

#divInfraBarraSistemaLinha {
    height: 4px;
}

.infraBarraSistemaPadraoE,
.infraBarraSistemaMovelE,
.infraBarraSistemaMovelD {
    height: 47px;
    white-space: nowrap;
}

.infraBarraSistemaPadraoE img {
    vertical-align: sub;
}

div.infraAcaoBarraSistema {
    margin: 5px 0 0 0;
    padding-left: 3px;
}

div.infraBarraLocalizacao {
    margin: 5px 0 2px 0;
    padding: 2px 0.25rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: left;
    width: fit-content;
}

div.infraAreaTela {
    display: block;
    overflow: visible;
    width: 100%;
}

div.infraAreaTelaE {
    float: unset !important;;
    width: unset !important;
}

div.infraAreaTelaD {
    float: unset !important;
    width: unset !important;
    border: unset !important;
}

div.infraBarraComandos {
    text-align: left;
    clear: both;
    border-top: 2px solid transparent;
    border-bottom: 8px solid transparent;
    width: 100%;
    text-align: right;
}

div.infraBarraComandos input,
div.infraBarraComandos button {
    margin-left: .25rem;
}

div.infraBarraRodape {
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: 1rem;
    background-color: var(--infra-esquema-cor-escura);
}

div.infraBarraRodape,
div.infraBarraRodape a{
    font-size: .625rem;
    color: white;
    white-space: pre;
}

div.infraBarraRodape a{
    font-weight: bold;
}

div.infraAreaDados {
    position: relative;
    clear: both;
    overflow: visible;
}

div.infraAreaTabela {
    clear: both;
    display: table;
    width: 100%;
    overflow: auto;
}

div.infraAreaDadosDinamica {
    clear: both;
    display: block;
}

img.infraImg,
img.infraImgNormal {
    opacity: 1;
    border-width: 0;
}

img.infraImg:hover,
img.infraImgNormal:hover {
    opacity: 0.5;
    border-width: 0;
}

img.infraImgOpaca {
    opacity: 0.3;
    border-width: 0;
}

div.infraAreaDebug {
    overflow: auto;
    display: table;
    white-space: pre-wrap;
    font-size: .875rem;
    width: 100%;
}

div.infraAutoCompletar {
    border: .1em solid #9F9F9F;
    background-color: #00FF00;
    padding: .3em;
    font-size: .875rem;
    color: #000000;
    display: none;
    position: absolute;
    z-index: 999;
}

div.infraAutoCompletar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.infraAutoCompletar ul li {
    display: block;
}

div.infraAutoCompletar a {
    color: #000000;
    text-decoration: none;
}

div.infraAutoCompletar a:hover {
    color: #000000;
}

div.infraAutoCompletar li.selected {
    background-color: #7d95ae;
    color: #000000;
}

select.infraSelect {
    display: block;
    border-radius: .2rem;
    line-height: 1.5em;
    font-size: .875rem;
    height: calc(1.5em + .4rem + 4px);
    border: 1px solid #ced4da;
}

select.infraSelect[multiple] {
    height: unset;
    margin-top: 4px;
}

button.ms-choice {
    height: calc(1.5em + .4rem + 4px);
}

div.ms-drop,
button.ms-choice > span {
    font-size: .875rem;
}


select.infraSelectOculto {
    display: none;
}



div.infraAreaPaginacao {
    margin: 5px auto;
    text-align: center;
    clear: both;
    height: calc(1.5em + .4rem + 6px);
}

div.infraAreaPaginacao select {
    vertical-align: bottom;
}

div.infraAreaPaginacao a {
    vertical-align: middle;
}

td.infraTd {
}

td.infraTd b {
    font-weight: bold;
}

td.infraTd i {
    font-style: italic;
}

div.infraBarraCategoria {
    display: block;
    overflow: hidden;
    padding: 0.2em;
}

div.infraAviso {
    position: absolute;
    border: .1em solid #999999;
    background-color: #f4f4f4;
    border-radius: .4rem;
    padding: 10px;
    z-index: 999;
}

div.infraAviso img {
    vertical-align: text-top;
    width: 40px;
    height: 40px;
}

div.infraAviso span {
    font-weight: 600;
    font-size: 1rem;
}


div.infraFundoTransparente {
    z-index: 997;
    visibility: hidden;
    position: absolute;
    overflow: hidden;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    background: transparent url("imagens/fndtransp.gif");
    background-repeat: repeat;
}


tr.infraTrClara,
td.infraTdClara {
    background-color: #fff;
}

tr.infraTrEscura,
td.infraTdEscura {
    background-color: #f4f4f4;
}

tr.infraTrVermelha{
    background-color: #f59f9f;
}

div.infraAreaGlobal a {
    cursor: pointer;
}

div.infraLinkOrgao {
}

span.infraUsuario {
    display: inline-block;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    vertical-align: middle;
    width: 50%;
    padding-bottom: .3em;
}

a.infraAcaoBarraConjugada {
    padding: 3px 6px;
    font-size: .75rem;
    font-weight: 400;
    color: #495057 !important;
    height: 24px;
    line-height: 18px;
    background-color: white;
}

a.infraAcaoBarraConjugada:hover {
    cursor: pointer;
}

span.infraAcaoBarraConjugada,
span.infraAcaoBarraConjugada:hover {
    padding: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    line-height: 0;
    height: 24px;
    background-color: white;
}

span.infraAcaoBarraConjugada img {
    margin-right: 1px;
}

#lnkInfraMenuSistema:hover {
    opacity: 0.5;
}

#lnkInfraUnidade {
    border: 1px solid white;
}

#lnkInfraUnidade:hover {
    border: 1px solid #999;
    text-decoration: none;
}

div.infraAreaValidacao {
    margin-top: 1em;
    margin-bottom: .2em;
    font-size: 1.2rem;
    color: #ff4545;
}

input.infraButton, button.infraButton, a.infraAnchorButton {
    margin-bottom: 5px;
    border: 1px solid #666;
    padding: .3rem .6rem;
    border-radius: .25rem;
}

a.infraAnchorButton {
   display:inline-block;
   text-align: center;
   margin:0;
}

a.infraAnchorButton:hover {
    text-decoration: none;
}

input.infraButton,
input.infraButton span,
button.infraButton,
button.infraButton span,
a.infraAnchorButton {
    font-size: .8125rem;
    color: #495057;
    line-height: 1.5;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input.infraButton:hover,
input.infraButton:hover span,
button.infraButton:hover,
button.infraButton:hover span,
a.infraAnchorButton:hover{
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

label.infraLabelOpcional,
label.infraLabelObrigatorio {
    color: #666;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

label.infraLabelObrigatorio {
    font-weight: 600;
}

label.infraLabelDesabilitado {
    color: #999;
    margin-bottom: .2em;
}

table.infraTable {
    margin: 2px 0;
    color: #212529;
    border: 1px solid rgba(221, 221, 221, 0.78);
    border-collapse: collapse;
    border-spacing: 2px;
}

table.infraTable thead tr,
table.infraTable tr > th.infraTh {
    color: #ECF0F1;
    text-align: -moz-center;
}

th.infraTh {
    display: table-cell;
    padding: .375rem;
    font-size: .875rem;
    font-style: normal;
    font-weight: normal;
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    text-align: center;
    color: #ECF0F1;
    line-height: 24px;
}

th.infraTh img {
    padding: 0;
    vertical-align: top;
}

table.infraTable td {
    font-size: .875rem;
    line-height: 20px;
    padding: .375rem;
    border-top: 1px solid #dee2e6;
}


table.infraTable td a,
a.infraAncoraSigla {
    font-size: .875rem;
}

table.infraTable td b {
    font-weight: bold;
}

caption.infraCaption {
    border-bottom: .1em solid #496004;
    font-size: .875rem;
    text-align: right;
    color: #666;
    padding: .2em 0;
}

div.infraDivOrdenacao {
    display: inline-table;
    margin: 0px 10px;
    vertical-align: middle;
}

div.infraDivSetaOrdenacao {
    display: table-cell;
    padding: 0 1px;
}

div.infraDivRotuloOrdenacao {
    display: table-cell;
    padding-right: 3px;
}

div.infraDivThCheck {
    display: inline-table;
    vertical-align: middle;
    text-align: left;
    width:100%;
}

div.infraDivThCheckSelecao {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1px;
    width:1%;
}

div.infraDivThCheckRotulo {
    display: table-cell;
    vertical-align: middle;
    padding-left: 3px;
}

a.infraAncoraSigla {
    text-decoration: none;
}

a.infraAncoraSigla:hover {
    text-decoration: underline;
}

fieldset.infraFieldset {
    border: .1em solid #969594;
    margin-top: 2px;
    box-sizing: border-box;
    -moz-border-radius: .2rem;
    -webkit-border-radius: .2rem;
    border-radius: .2rem;
}

legend.infraLegend {
    font-weight: normal;
    margin-bottom: 0;
    font-size: .875rem;
    letter-spacing: .1em;
    color: white;
    background-color: #969594;
    margin-left: .8125em;
    padding: 0 5px;
    border-radius: .2rem;
}

legend.infraLegendOpcional {
    padding: .2em;
}

legend.infraLegendObrigatorio {
    font-weight: bold;
    padding: .2em;
}

span.infraTeclaAtalho {
    text-decoration: underline;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    background-color: transparent !important;
}

label.infraLabelObrigatorio span.infraTeclaAtalho {
    font-weight: bold;
}

form.infraForm {
}

input.infraPassword {
}

input.infraText, textarea.infraTextarea {
    border: 1px solid #ced4da;
    border-radius: .2rem;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}

input.infraText {
    height: calc(1.5em + .4rem + 4px);
}

textarea.infraTextarea {
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
    resize: none;
}


div.infraExcecao span {
    font-size: 1rem;
    color: #ff4545;
}

div.infraDetalhesExcecao,
div.infraDetalhesManutencao {
    width: 100%;
    overflow: hidden;
    display: table;
}

div.infraDetalhesExcecao b,
div.infraDetalhesManutencao b {
    font-weight: 600;
}

span.infraDetalhesExcecao,
span.infraDetalhesManutencao {
    font-size: .875rem;
}

div.infraTooltipTitulo {
    background-color: #ccc;
    padding: 3px 8px;
    border-radius: .2rem;
    border-bottom: unset;
}

div.infraTooltipTitulo hr {
    border: 0;
}

div.infraTooltipTexto {
    padding: 3px;
}

div.infraTooltipTexto hr {
    margin: .25rem 0;
}

div.infraTooltip {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: .2rem;
    z-index: 999999999;
}

tr.infraTrAcessada,
tr.infraTrAcessada td,
td.infraTdAcessada {
    background-color: #ffffb1 !important;
}

tr.infraTrAcessada td,
tr.infraTrAcessada span,
tr.infraTrAcessada b,
tr.infraTrAcessada div {
    color: black !important;
}

tr.infraTrMarcada,
tr.infraTrMarcada td,
td.infraTdMarcada {
    background-color: #79e5e5 !important;
}

tr.infraTrSelecionada,
tr.infraTrSelecionada td,
td.infraTdSelecionada {
    background-color: #e5e5e5 !important;
}

.infraReadOnly {
    border: .1em solid #ced4da;
    background-color: #f4f4f4;
}

input.infraAutoCompletar {
    border: 1px solid #aaa;
    border-radius: 4px;
}

.infraAjaxMarcarSelecao {
    border: 1px solid #ced4da !important;
}

div.infraBotaoMenu {
    position: absolute;
    border: .1em solid #dfdfdf;
    overflow: hidden;
    background-color: white;
    z-index: 1001;
}

div.infraBotaoMenu ul {
    list-style: none;
    margin: 0;
    border: 0;
    padding: 0;
}

div.infraBotaoMenu a {
    display: block;
    margin: 0;
    text-decoration: none;
    left: 0;
    cursor: pointer;
    color: #666;
    border: 0.1em solid #fff;
    padding: 0.15em 0.45em;
    background-color: #fff;
    width: 90%;
}

li.infraSeparadorBotaoMenu {
    border-bottom: 1px dotted #ccc;
}

div.infraBotaoMenu a:link,
div.infraBotaoMenu a:active,
div.infraBotaoMenu a:visited {
    color: #666;
}

div.infraBotaoMenu a:hover,
div.infraBotaoMenu a:focus {
    background-color: #e0e0e0;
}

img.infraImgBotaoMenu {
    height: 1em;
    padding-left: .2em;
    border-width: 0;
}

div.infraSidebarMenu a:focus {
    outline: none;
}

div.infraSidebarMenu a:focus img {
    outline: none;
}

div.infraMenuAcoes {
    position: absolute;
    display: block;
    border-top: .1em solid black;
    border-right: .1em solid #dfdfdf;
    border-bottom: .1em solid #dfdfdf;
    border-left: .1em solid black;
}

div.infraMenuAcoes a {
    display: block;
    margin: 0;
    text-decoration: none;
    left: 0;
    cursor: pointer;
    border: 0.1em solid #fff;
    padding: 0.15em 0.45em;
    background-color: #fff;
}

div.infraMenuAcoes a img {
    padding-right: .2em;
}

div.infraMenuAcoes a:link,
div.infraMenuAcoes a:active,
div.infraMenuAcoes a:visited {
    color: #666;
}

div.infraMenuAcoes a:hover,
div.infraMenuAcoes a:focus {
    background-color: #e0e0e0;
}

img.infraImgMenuAcaoSelecionada {
    background-color: black;
}

img.infraImgMenuAcaoNormal {
    border: 0;
}


div.infraImpressao table {
    background-color: #dfdfdf;
}

div.infraImpressao table th {
    background-color: white;
    background-image: none;
}

div.infraImpressao table th,
div.infraImpressao table td {
    border: 1px solid #dfdfdf;
}

div.infraImpressao table.infraTableOrdenacao {
    background-color: white;
}

div.infraImpressao table.infraTableOrdenacao td {
    border: 0;
}

span.infraTituloLogoSistema {
    vertical-align: text-top;
    color: white;
    font-size: .8125rem;
    font-weight: normal;
    padding-left: 1em;
}

div.infraBarraSistemaPadraoE span.infraTituloLogoSistema {
    vertical-align: text-bottom;
}

div.infraTituloImprimirTabela {
    padding-top: .3em;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: left;
}

#divInfraMensagens {
    font-size: .875rem;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1000;
    top: .25rem;
    opacity: 0;
}

.fade-in {
    opacity: 1 !important;
    transition: opacity 0.2s ease;
}

.infraNotificacao {
    font-size: .8125rem;
    display: inline-block;
    position: relative;
    top: -1px;
    line-height: 12px;
    padding: 0 3px;
    color: white !important;
    text-shadow: 0 1px rgba(0, 0, 0, 0.25);
    border: 1px solid;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
}

.infraNotificacao {
    background: #67c1ef;
    border-color: #30aae9;
    background-image: -webkit-linear-gradient(top, #acddf6, #67c1ef);
    background-image: -moz-linear-gradient(top, #acddf6, #67c1ef);
    background-image: -o-linear-gradient(top, #acddf6, #67c1ef);
    background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
}

.infraNotificacao.verde {
    background: #77cc51;
    border-color: #59ad33;
    background-image: -webkit-linear-gradient(top, #a5dd8c, #77cc51);
    background-image: -moz-linear-gradient(top, #a5dd8c, #77cc51);
    background-image: -o-linear-gradient(top, #a5dd8c, #77cc51);
    background-image: linear-gradient(to bottom, #a5dd8c, #77cc51);
}

.infraNotificacao.verde2 {
    background: #12c63d;
    border-color: #04a432;
    background-image: -webkit-linear-gradient(top, #82f585, #12c63d);
    background-image: -moz-linear-gradient(top, #a5dd8c, #12c63d);
    background-image: -o-linear-gradient(top, #a5dd8c, #12c63d);
    background-image: linear-gradient(to bottom, #a5dd8c, #12c63d);
}

.infraNotificacao.azul {
    background: #2280ff;
    border-color: #3a69e2;
    background-image: -webkit-linear-gradient(top, #62a2f5, #0958e6);
    background-image: -moz-linear-gradient(top, #62a2f5, #0958e6);
    background-image: -o-linear-gradient(top, #62a2f5, #0958e6);
    background-image: linear-gradient(to bottom, #62a2f5, #0958e6);
}

.infraNotificacao.amarelo {
    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
    color: black;
    background: #ffff66;
    border-color: #f4a306;
    background-image: -webkit-linear-gradient(top, #ffff66, #faba3e);
    background-image: -moz-linear-gradient(top, #ffff66, #faba3e);
    background-image: -o-linear-gradient(top, #ffff66, #faba3e);
    background-image: linear-gradient(to bottom, #ffff66, #faba3e);
}

.infraNotificacao.vermelho {
    background: #fa492c;
    border-color: #fa3227;
    background-image: -webkit-linear-gradient(top, #fc9f8a, #fa492c);
    background-image: -moz-linear-gradient(top, #fc9f8a, #fa492c);
    background-image: -o-linear-gradient(top, #fc9f8a, #fa492c);
    background-image: linear-gradient(to bottom, #fc9f8a, #fa492c);
}

.infraNotificacao.cinza {
    background: #868686;
    border-color: #686868;
    background-image: -webkit-linear-gradient(top, #afafaf, #868686);
    background-image: -moz-linear-gradient(top, #afafaf, #868686);
    background-image: -o-linear-gradient(top, #afafaf, #868686);
    background-image: linear-gradient(to bottom, #afafaf, #868686);
}

input[type="text"].infraText:disabled,
input[type="text"].infraText[readonly],
textarea.infraTextarea:disabled,
textarea.infraTextarea[readonly],
select.infraSelect:disabled,
select.infraSelect[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

div.dd-select {
    overflow: hidden;
}

a.dd-selected, a.dd-option {
    height: 30px;
}

a.dd-selected img, a.dd-option img {
    padding-top: 1px;
}

a.dd-selected label, a.dd-option label {
    font-size: .875rem;
}

label.dd-selected-text {
    line-height: 30px !important;
    font-weight: normal;
}

a.dd-selected {
    padding: 1px 0 0 5px;
}

a.dd-option {
    padding: 2px 0 2px 5px;
}

.infraProcessando {
    background: #fff url('svg/aguarde.svg') no-repeat scroll 100% 100% !important;
}

.infraProcessando::-ms-clear {
    display: none;
}

/*Animação personalizada alerta*/
.alert.show {
    animation: customFadeIn .5s ease-in-out;
}

/* Adicione suas classes de animação personalizadas para a entrada do alert*/
@keyframes customFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .divInfraAreaTela {
        height: calc(100vh - 66px);
        max-height: calc(100vh - 66px);
        min-height: calc(100vh - 66px);
    }

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


#divInfraAreaTelaD {
    overflow-y: auto;
    position: relative;
    /*scrollbar-gutter: auto;*/
}

a {
    color: #000;
    background-color: unset;
}

img {
    vertical-align: unset;
    border-style: unset;
}

table {
    border-collapse: separate;
}

caption {
    padding-top: unset;
    caption-side: top;
}

label {
    display: inline;
}

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    cursor: unset;
    box-sizing: border-box;

}

.divInfraAreaTelaE {
    background-color: #333;
}

/* Overriding styles */

::-webkit-input-placeholder {
    font-size: .8125rem !important;
}

:-moz-placeholder { /* Firefox 18- */
    font-size: .8125rem !important;
}

::-moz-placeholder { /* Firefox 19+ */
    font-size: .8125rem !important;
}

.ms-choice, .ms-drop ul>li label {
    display: flex !important;
}

.ms-drop ul>li span {
    display: flex;
    align-items: center;
    margin-left: 2px;
    padding-top: 1px;
}
.ms-drop ul li label span  {
    padding-top: 1px;
}

.infraDivCheckbox, .infraDivRadio {
    white-space: nowrap;
    height: 30px;
    line-height: 20px;
}

.infraCheckbox, .infraRadio {
    opacity: 0;
}

fieldset .infraDivCheckbox, fieldset .infraRadioDiv {
    margin-left: .8125em;
}

.infraCheckboxInput[style*="visibility: hidden"] + .infraCheckboxLabel,
.infraCheckboxInput[style*="visibility:hidden"] + .infraCheckboxLabel,
.infraRadioInput[style*="visibility: hidden"] + .infraRadioLabel ,
.infraRadioInput[style*="visibility:hidden"] + .infraRadioLabel {
    visibility: hidden;
}

.infraCheckboxInput[style*="display:none"] + .infraCheckboxLabel,
.infraCheckboxInput[style*="display: none"] + .infraCheckboxLabel,
.infraRadioInput[style*="display:none"] + .infraRadioLabel,
.infraRadioInput[style*="display: none"] + .infraRadioLabel {
    display: none;
}

.infraCheckboxInput:disabled + label, .infraRadioInput:disabled + label {
    opacity: 0.5;
}

.infraCheckboxInput:focus + label, .infraRadioInput:focus + label {
    outline: 1px dotted black;
    outline-offset: 2px;
}

.infraCheckboxInput:focus + label {
    border-radius: 2px;
}

.infraCheckboxDiv, .infraRadioDiv {
    display: inline-block;
    vertical-align: middle;
    cursor: default;
    height: 20px;
    width: 20px;
    text-align: left;
    position: relative;
    margin-left: 3px;
    margin-right: 3px;
    line-height: 20px;
}

.infraCheckboxRadioSemDiv {
    height: 20px;
    width: 20px;
}

.infraCheckboxDiv input, .infraRadioDiv input {
    height: 1px;
    width: 1px;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0;
    z-index: -1;
}

.infraCheckboxDiv label {
    height: 20px;
    width: 20px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    font-size: .875rem;
    font-weight: bold;
}

.infraCheckboxDiv label::before {
    content: "";
    height: 20px;
    width: 20px;
    border: 1px solid #999;
    transition: all 0.2s ease;
    background: #FFF;
    color: #FFF;
    line-height: 20px;
    text-align: center;
}

.infraCheckboxDiv label::before {
    border-radius: .2rem;
}


.infraCheckboxDiv label:focus::before, .infraCheckboxDiv label:hover::before {
    background: #DDD;
}

.infraCheckboxDiv input:checked + label::before {
    background: #ff7212;
    border-color: #ff7212;
}


.infraCheckboxDiv input:checked + label::before {
    content: "\2713";
}

.infraLabelCheckbox, .infraLabelRadio {
    position: relative;
    top: 2px;
}

label.infraLabelCheckbox:hover, label.infraLabelRadio:hover {
    cursor: pointer;
}

.infraRadioDiv label {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: 0.2s;
    border: 1px solid gray;
}


.infraRadioDiv > input:checked + label { /* (RADIO CHECKED) <i> STYLE */
    box-shadow: inset 0 0 0 3px #fff;
    background: orange;
}

div:focus-visible {
    outline: 1px dotted black;
    border-radius: 4px;
}

#btnInfraTopo {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 2.2rem;
    z-index: 99;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 0;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3);
}

#btnInfraTopo:focus {
    outline: none;
}

#btnInfraTopo:hover {
    background: rgba(0, 0, 0);
}

#btnInfraTopo img:focus {
    outline: 1px dotted white;
}

.form-control {
    background-clip: initial;
}

.infraInputFile {
    display: none;
}

.infraLabelInputFile {
    background-color: #ffffff;
    border-bottom-color: #666666;
    border-radius: 0.25rem;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    color: #495057;
    padding-bottom: 0.3rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.3rem;
    width: unset !important;
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: background-color, border-color, box-shadow;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
}

.infraLabelInputFile:hover {
    background-color: #0494c7;
    border-color: #155f9b;
    border-radius: 0.25rem;
    border-style: solid;
    border-width: 1px;
    color: #ffffff;
    padding-bottom: 0.3rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.3rem;
}

.infraDivInputFile {
    position: relative;
    border: 2px dashed #ced4da;
    border-radius: .25rem;
    padding: 20px;
    height:5.5em !important;
    text-align: left;
}

.infraDivDropFile{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1;
}

.infraDivDropFileAtiva{
    border-color: #aaa;
    background-color: #dfdfdf;
}

.infraSpanNomeArquivo{
    font-size: 14px;
    color: #212529 !important;
    padding-left:.5em;
}

.infraSpanDropFile {
    font-size: 14px;
    color: #999 !important;
    padding-left:.5em;
}

#divInfraNavegadorAviso{
    display: block;
    position: absolute;
    right:1rem;
    left:1rem;
    top:1rem;
    z-index:999;
}

#divInfraNavegadorAviso span, a{
    font-size: .875rem;
}

#divInfraNavegadorAviso a{
    color:#0099e5;
}
/*--------------------*/
/*inicio dos estilos para formulario e tabela responsivos*/


/*divs responsivas e visiveis devem usar essa classe */
/*divs responsivas do mesmo tamanho*/
.infraResponsivoExibir{
    display: flex;
    flex-shrink: 0;
    flex-basis: 0%;
}
/*divs responsivas e nao visiveis devem usar essa classe */
.infraResponsivoEsconder{
    display: none;
}

/*divs responsivas que formam coluna*/
.infraResponsivoFlexColumn{
    flex-direction: column;
}
/*expandir divs responsivas*/
.infraBlocoResponsivo.infraBlocoResponsivoExpandir{
    flex-grow: 1;
}
/*expandir divs responsivas apenas no mobile se tem largura passada como parametro*/
.infraBlocoResponsivo.infraBlocoResponsivoExpandirWidth{
    flex-grow: unset !important;
    flex-shrink: unset !important;
    flex-basis: unset !important;
}
/*retirar flex de divs nao responsivas e seus filhos*/
.infraBlocoResponsivoNaoExpandir, .infraBlocoResponsivoNaoExpandir > *{
    flex-grow: unset !important;
    flex-shrink: unset !important;
    flex-basis: unset !important;
}
/*primeiro filho label de uma div horizontal vai expandir e ter a proporcao 1*/
.infraBlocoResponsivoHorizontal > label:first-child,
/*assim como outros filhos que nao sejam img, ou a (para nao distorcer)*/
/*
  Devido a um bug ao usar padding em input/select junto com flex-grow/flex-shrink/flex-basis,
  para evitar um pequeno desalinhamento na esquerda, o flex-basis nao é 0%, e sim 1%:
 */
.infraBlocoResponsivoHorizontal > *:not(img,a){
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 1%;
}
/*estilos para formularios verticais que tem labels a esquerda dos campos.
Os labels devem ter a mesma largura, como se formassem uma coluna, entao os elementos da direita podem ter a proporcao de 1 a 5 para essa coluna
*/
/*.infraAreaResponsiva.infraAreaResponsivaProporcaoLabel5 .infraBlocoResponsivoHorizontal > *:not(img,label,a){
    flex-grow: 5;
    flex-shrink: 1;
    flex-basis: 0%;
}*/
.infraAreaResponsiva.infraAreaResponsivaProporcaoLabel4 .infraBlocoResponsivoHorizontal > *:not(img,label,a){
    flex-grow: 4;
}
.infraAreaResponsiva.infraAreaResponsivaProporcaoLabel3 .infraBlocoResponsivoHorizontal > *:not(label,img,a)
{
    flex-grow: 3;
}
.infraAreaResponsiva.infraAreaResponsivaProporcaoLabel2 .infraBlocoResponsivoHorizontal > *:not(label,img,a){
    flex-grow: 2;
}
.infraAreaResponsiva.infraAreaResponsivaProporcaoLabel1 .infraBlocoResponsivoHorizontal > *:not(label,img,a){
    flex-grow: 1;
}


/*centralizar o icone de ajuda e dar margin*/
.infraAreaResponsiva .InfraAncAjudaImg{
    display: flex;
    margin-left: 0.25rem;
}
/*nao expandir imagem*/
.infraAreaResponsiva .infraImg{
    align-self: center;
}
/*ajustes no checkbox e radio dentro de area responsiva*/
.infraAreaResponsiva .infraCheckboxDiv,
.infraAreaResponsiva .infraRadioDiv {
    flex-grow: 0 !important;
}
/*retirar margin setado em areas nao responsivas*/
.infraBlocoResponsivo  > label,
.infraBlocoResponsivo .infraCheckboxDiv,
.infraBlocoResponsivo .infraDivRadio,
.infraBlocoResponsivo .infraBlocoResponsivo  {
    margin : 0;
}
/*margin dos blocos no primeiro nivel de uma area responsiva*/
.infraAreaResponsiva > .infraBlocoResponsivo{
    margin: 0.5rem 0.5rem 0 0;
}
/*campos expadinrem dentro da div respondiva*/
.infraAreaResponsiva input:not([type=checkbox]):not([type=radio]), .infraAreaResponsiva textarea, .infraAreaResponsiva select:not(.multipleSelect){
    width: 100%;
}
/*ajustes no fieldset dentro de div responsivo, sobrescrevendo o existente sem ser esponsivo*/
.infraBlocoResponsivo fieldset{
    padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    margin: 0px;
}
.infraBlocoResponsivo fieldset .infraDivCheckbox,
.infraBlocoResponsivo  fieldset .infraRadioDiv{
    margin-left: 0;
}
.infraBlocoResponsivo fieldset.infraFieldset   > *:not(legend){
    margin: 0.5rem 0 0.5rem 0.7rem ;
}

/*ajustes no checkbox e radio dentro de div responsivo*/
.infraBlocoResponsivo .infraLabelCheckbox,
.infraBlocoResponsivo .infraLabelRadio{
    top:0;
    margin: 0;
}
.infraBlocoResponsivo  .infraCheckboxDiv ~ label,
.infraBlocoResponsivo  *~.infraCheckboxDiv ,
.infraBlocoResponsivo  .infraRadioDiv  ~ label,
.infraBlocoResponsivo  *~.infraRadioDiv  {
    margin-left: .25rem;
}

/*margin para campos abaixo de labels no posicionamento vertical*/
.infraBlocoResponsivo.infraBlocoResponsivoVertical > *  ~ *{
    margin-top: 0.1rem;
}

@media (max-width: 599px) {
    /* Tabelas responsivas */
    table.infraTableResponsiva {
        border: 0;
    }
    table.infraTableResponsiva > :first-child:is(tbody) > tr:first-child,
    table.infraTableResponsiva > :first-child:is(thead) > tr:first-child,
    table.infraTableResponsiva > :first-child:is(caption)+tbody > tr:first-child,
    table.infraTableResponsiva > :first-child:is(caption)+thead > tr:first-child
    {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table.infraTableResponsiva tr {
        border-bottom: 3px solid var(--infra-esquema-cor-barra-superior);
        display: block;
    }
    table.infraTableResponsiva td {
        display: block;
        text-align: right !important;
        min-height: 33.391px;
        width: 100%;
    }
    table.infraTableResponsiva td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    table.infraTableResponsiva td:last-child {
        border-bottom: 0;
    }
}
/*resolucao maxima, na qual formulario e tabela se adaptam*/
@media (max-width: 768px) {
    /*margin left nos elementos irmaos bloco do primeiro filho de um bloco, pois no mobile o parametro margin é desconsiderado*/
    .infraBlocoResponsivo.infraBlocoResponsivoHorizontal:not(.infraResponsivoFlexColumn) > *.infraBlocoResponsivo ~ *.infraBlocoResponsivo{
        margin-left: 0.25rem;
    }

    /*margin vertical dos blocos que quebram linha em todos os niveis em mobile, para garantir espaçamento*/
    .infraAreaResponsiva .infraBlocoResponsivo.infraResponsivoFlexColumn {
        margin: 0.1rem 0;
    }
    /*expandir divs responsivas apenas no mobile se tem largura passada como parametro*/
    .infraBlocoResponsivo.infraBlocoResponsivoExpandirWidth{
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 1%;
    }
    /*ajustes em relacao ao estilo nao responsivo existente*/
    .infraBlocoResponsivo .multipleSelect{
        flex-grow: 1;
        margin-bottom: .25rem;
        width: unset !important;

    }
    /*ajustes em relacao ao estilo nao responsivo existente*/
    .infraBlocoResponsivo select.infraSelect , .infraBlocoResponsivo input.infraText, .infraBlocoResponsivo textarea.infraTextarea{
        /*padding-top: 0.5rem;
        padding-bottom: 0.5rem;*/
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }


}
/*resolucao a partir da qual a tela se comporta como desktop/notebook*/
@media (min-width: 769px) {

    /*classe apenas a partir dessa resolucao, poir no mobile, será sempre em coluna*/
    .infraResponsivoFlexRow{
        flex-direction: row;
    }

    /*posicao default dos campos*/
    .infraBlocoResponsivoHorizontal:not(.infraBlocoResponsivoAlinhamento) > *:not(.infraBlocoResponsivo) {
        align-self: center;
    }
    /*alinhamentos dos eixos de orientacao e cruzado dos blocos*/
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoInicio{
        justify-content: flex-start;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoFim{
        justify-content: flex-end;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCentro{
        justify-content: center;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoEntre{
        justify-content: space-between;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoRedor{
        justify-content: space-around;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCruzadaInicio{
        align-items: flex-start;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCruzadaFim{
        align-items: flex-end;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCruzadaCentro{
        align-items: center;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCruzadaBaseline{
        align-items: baseline;
    }
    .infraBlocoResponsivo.infraBlocoResponsivoAlinhamentoCruzadaEsticar{
        align-items: stretch;
    }


    /*ajustes em relacao ao estilo nao responsivo existente*/
    .infraBlocoResponsivo input.infraText, .infraBlocoResponsivo textarea.infraTextarea {
        padding: 0 0.25rem;
    }


    /*estilos para margin*/
    .infraMarginPosL.infraMarginTam0,
    .infraMarginPosM.infraMarginTam0,
    .infraMarginPosX.infraMarginTam0{
        margin-left: 0;
    }
    .infraMarginPosL.infraMarginTam1,
    .infraMarginPosM.infraMarginTam1,
    .infraMarginPosX.infraMarginTam1{
        margin-left: 0.25rem;
    }
    .infraMarginPosL.infraMarginTam2,
    .infraMarginPosM.infraMarginTam2,
    .infraMarginPosX.infraMarginTam2{
        margin-left: 0.5rem;
    }
    .infraMarginPosL.infraMarginTam3,
    .infraMarginPosM.infraMarginTam3,
    .infraMarginPosX.infraMarginTam3{
        margin-left: 1rem;
    }
    .infraMarginPosL.infraMarginTam4,
    .infraMarginPosM.infraMarginTam4,
    .infraMarginPosX.infraMarginTam4{
        margin-left: 2rem;
    }
    .infraMarginPosL.infraMarginTam5,
    .infraMarginPosM.infraMarginTam5,
    .infraMarginPosX.infraMarginTam5{
        margin-left: 4rem;
    }
    .infraMarginPosL.infraMarginTam6,
    .infraMarginPosM.infraMarginTam6,
    .infraMarginPosX.infraMarginTam6{
        margin-left: 8rem;
    }
    .infraMarginPosR.infraMarginTam0,
    .infraMarginPosM.infraMarginTam0,
    .infraMarginPosX.infraMarginTam0{
        margin-right: 0;
    }
    .infraMarginPosR.infraMarginTam1,
    .infraMarginPosM.infraMarginTam1,
    .infraMarginPosX.infraMarginTam1{
        margin-right: 0.25rem;
    }
    .infraMarginPosR.infraMarginTam2,
    .infraMarginPosM.infraMarginTam2,
    .infraMarginPosX.infraMarginTam2{
        margin-right: 0.5rem;
    }
    .infraMarginPosR.infraMarginTam3,
    .infraMarginPosM.infraMarginTam3,
    .infraMarginPosX.infraMarginTam3
    {
        margin-right: 1rem;
    }
    .infraMarginPosR.infraMarginTam4,
    .infraMarginPosM.infraMarginTam4,
    .infraMarginPosX.infraMarginTam4{
        margin-right: 2rem;
    }
    .infraMarginPosR.infraMarginTam5,
    .infraMarginPosM.infraMarginTam5,
    .infraMarginPosX.infraMarginTam5{
        margin-right: 4rem;
    }
    .infraMarginPosR.infraMarginTam6,
    .infraMarginPosM.infraMarginTam6,
    .infraMarginPosX.infraMarginTam6{
        margin-right: 8rem;
    }
    .infraMarginPosT.infraMarginTam0,
    .infraMarginPosM.infraMarginTam0,
    .infraMarginPosY.infraMarginTam0{
        margin-top: 0;
    }
    .infraMarginPosT.infraMarginTam1,
    .infraMarginPosM.infraMarginTam1,
    .infraMarginPosY.infraMarginTam1{
        margin-top: 0.25rem;
    }
    .infraMarginPosT.infraMarginTam2,
    .infraMarginPosM.infraMarginTam2,
    .infraMarginPosY.infraMarginTam2{
        margin-top: 0.5rem;
    }
    .infraMarginPosT.infraMarginTam3,
    .infraMarginPosM.infraMarginTam3,
    .infraMarginPosY.infraMarginTam3{
        margin-top: 1rem;
    }
    .infraMarginPosT.infraMarginTam4,
    .infraMarginPosM.infraMarginTam4,
    .infraMarginPosY.infraMarginTam4{
        margin-top: 2rem;
    }
    .infraMarginPosT.infraMarginTam5,
    .infraMarginPosM.infraMarginTam5,
    .infraMarginPosY.infraMarginTam5{
        margin-top: 4rem;
    }
    .infraMarginPosT.infraMarginTam6,
    .infraMarginPosM.infraMarginTam6,
    .infraMarginPosY.infraMarginTam6{
        margin-top: 8rem;
    }
    .infraMarginPosB.infraMarginTam0,
    .infraMarginPosM.infraMarginTam0,
    .infraMarginPosY.infraMarginTam0{
        margin-bottom: 0;
    }
    .infraMarginPosB.infraMarginTam1,
    .infraMarginPosM.infraMarginTam1,
    .infraMarginPosY.infraMarginTam1{
        margin-bottom: 0.25rem;
    }
    .infraMarginPosB.infraMarginTam2,
    .infraMarginPosM.infraMarginTam2,
    .infraMarginPosY.infraMarginTam2{
        margin-bottom: 0.5rem;
    }
    .infraMarginPosB.infraMarginTam3,
    .infraMarginPosM.infraMarginTam3,
    .infraMarginPosY.infraMarginTam3{
        margin-bottom: 1rem;
    }
    .infraMarginPosB.infraMarginTam4,
    .infraMarginPosM.infraMarginTam4,
    .infraMarginPosY.infraMarginTam4{
        margin-bottom: 2rem;
    }
    .infraMarginPosB.infraMarginTam5,
    .infraMarginPosM.infraMarginTam5,
    .infraMarginPosY.infraMarginTam5{
        margin-bottom: 4rem;
    }
    .infraMarginPosB.infraMarginTam6,
    .infraMarginPosM.infraMarginTam6,
    .infraMarginPosY.infraMarginTam6{
        margin-bottom: 8rem;
    }
}
/*fim dos estilos para formulario e tabela responsivos*/
/*--------------------*/

.w-95 {
    width: 95% !important;
}
.w-90 {
    width: 90% !important;
}
.w-85 {
    width: 85% !important;
}
.w-80 {
    width: 80% !important;
}
.w-70 {
    width: 70% !important;
}
.w-65 {
    width: 65% !important;
}
.w-60 {
    width: 60% !important;
}
.w-55 {
    width: 55% !important;
}
.w-45 {
    width: 45% !important;
}
.w-40 {
    width: 40% !important;
}
.w-35 {
    width: 35% !important;
}
.w-30 {
    width: 30% !important;
}
.w-20 {
    width: 20% !important;
}
.w-15 {
    width: 15% !important;
}
.w-10 {
    width: 10% !important;
}
.w-5 {
    width: 5% !important;
}


/* Tela XS */
@media (max-width: 575px) {

    .w-xs-100 {
        width: 100% !important;
    }
    .w-xs-95 {
        width: 95% !important;
    }
    .w-xs-90 {
        width: 90% !important;
    }
    .w-xs-85 {
        width: 85% !important;
    }
    .w-xs-80 {
        width: 80% !important;
    }
    .w-xs-75 {
        width: 75% !important;
    }
    .w-xs-70 {
        width: 70% !important;
    }
    .w-xs-65 {
        width: 65% !important;
    }
    .w-xs-60 {
        width: 60% !important;
    }
    .w-xs-55 {
        width: 55% !important;
    }
    .w-xs-50 {
        width: 50%  !important;
    }
    .w-xs-45 {
        width: 45% !important;
    }
    .w-xs-40 {
        width: 40% !important;
    }
    .w-xs-35 {
        width: 35% !important;
    }
    .w-xs-30 {
        width: 30% !important;
    }
    .w-xs-25 {
        width: 25% !important;
    }
    .w-xs-20 {
        width: 20% !important;
    }
    .w-xs-15 {
        width: 15% !important;
    }
    .w-xs-10 {
        width: 10% !important;
    }
    .w-xs-5 {
        width: 5% !important;
    }

    .h-xs-100 {
        height: 100% !important;
    }

    .h-xs-75 {
        height: 75% !important;
    }

    .h-xs-50 {
        height: 50% !important;
    }

    .h-xs-25 {
        height: 25% !important;
    }



}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }
    .w-sm-95 {
        width: 95% !important;
    }
    .w-sm-90 {
        width: 90% !important;
    }
    .w-sm-85 {
        width: 85% !important;
    }
    .w-sm-80 {
        width: 80% !important;
    }
    .w-sm-75 {
        width: 75% !important;
    }
    .w-sm-70 {
        width: 70% !important;
    }
    .w-sm-65 {
        width: 65% !important;
    }
    .w-sm-60 {
        width: 60% !important;
    }
    .w-sm-55 {
        width: 55% !important;
    }
    .w-sm-50 {
        width: 50%  !important;
    }
    .w-sm-45 {
        width: 45% !important;
    }
    .w-sm-40 {
        width: 40% !important;
    }
    .w-sm-35 {
        width: 35% !important;
    }
    .w-sm-30 {
        width: 30% !important;
    }
    .w-sm-25 {
        width: 25% !important;
    }
    .w-sm-20 {
        width: 20% !important;
    }
    .w-sm-15 {
        width: 15% !important;
    }
    .w-sm-10 {
        width: 10% !important;
    }
    .w-sm-5 {
        width: 5% !important;
    }

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }
    .w-md-95 {
        width: 95% !important;
    }
    .w-md-90 {
        width: 90% !important;
    }
    .w-md-85 {
        width: 85% !important;
    }
    .w-md-80 {
        width: 80% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .w-md-70 {
        width: 70% !important;
    }
    .w-md-65 {
        width: 65% !important;
    }
    .w-md-60 {
        width: 60% !important;
    }
    .w-md-55 {
        width: 55% !important;
    }
    .w-md-50 {
        width: 50%  !important;
    }
    .w-md-45 {
        width: 45% !important;
    }
    .w-md-40 {
        width: 40% !important;
    }
    .w-md-35 {
        width: 35% !important;
    }
    .w-md-30 {
        width: 30% !important;
    }
    .w-md-25 {
        width: 25% !important;
    }
    .w-md-20 {
        width: 20% !important;
    }
    .w-md-15 {
        width: 15% !important;
    }
    .w-md-10 {
        width: 10% !important;
    }
    .w-md-5 {
        width: 5% !important;
    }

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-25 {
        height: 25% !important;
    }


}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }
    .w-lg-95 {
        width: 95% !important;
    }
    .w-lg-90 {
        width: 90% !important;
    }
    .w-lg-85 {
        width: 85% !important;
    }
    .w-lg-80 {
        width: 80% !important;
    }
    .w-lg-75 {
        width: 75% !important;
    }
    .w-lg-70 {
        width: 70% !important;
    }
    .w-lg-65 {
        width: 65% !important;
    }
    .w-lg-60 {
        width: 60% !important;
    }
    .w-lg-55 {
        width: 55% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
    .w-lg-45 {
        width: 45% !important;
    }
    .w-lg-40 {
        width: 40% !important;
    }
    .w-lg-35 {
        width: 35% !important;
    }
    .w-lg-30 {
        width: 30% !important;
    }
    .w-lg-25 {
        width: 25% !important;
    }
    .w-lg-20 {
        width: 20% !important;
    }
    .w-lg-15 {
        width: 15% !important;
    }
    .w-lg-10 {
        width: 10% !important;
    }
    .w-lg-5{
        width:5%! important
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }
    .w-xl-95 {
        width: 95% !important;
    }
    .w-xl-90 {
        width: 90% !important;
    }
    .w-xl-85 {
        width: 85% !important;
    }
    .w-xl-80 {
        width: 80% !important;
    }
    .w-xl-75 {
        width: 75% !important;
    }
    .w-xl-70 {
        width: 70% !important;
    }
    .w-xl-65 {
        width: 65% !important;
    }
    .w-xl-60 {
        width: 60% !important;
    }
    .w-xl-55 {
        width: 55% !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .w-xl-45 {
        width: 45% !important;
    }
    .w-xl-40 {
        width: 40% !important;
    }
    .w-xl-35 {
        width: 35% !important;
    }
    .w-xl-30 {
        width: 30% !important;
    }
    .w-xl-25 {
        width: 25% !important;
    }
    .w-xl-20 {
        width: 20% !important;
    }
    .w-xl-15 {
        width: 15% !important;
    }
    .w-xl-10 {
        width: 10% !important;
    }
    .w-xl-5 {
        width: 5% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }
}


/* Extra extra large devices (large desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .w-xxl-100 {
        width: 100% !important;
    }
    .w-xxl-95 {
        width: 95% !important;
    }
    .w-xxl-90 {
        width: 90% !important;
    }
    .w-xxl-85 {
        width: 85% !important;
    }
    .w-xxl-80 {
        width: 80% !important;
    }
    .w-xxl-75 {
        width: 75% !important;
    }
    .w-xxl-70 {
        width: 70% !important;
    }
    .w-xxl-65 {
        width: 65% !important;
    }
    .w-xxl-60 {
        width: 60% !important;
    }
    .w-xxl-55 {
        width: 55% !important;
    }
    .w-xxl-50 {
        width: 50% !important;
    }
    .w-xxl-45 {
        width: 45% !important;
    }
    .w-xxl-40 {
        width: 40% !important;
    }
    .w-xxl-35 {
        width: 35% !important;
    }
    .w-xxl-30 {
        width: 30% !important;
    }
    .w-xxl-25 {
        width: 25% !important;
    }
    .w-xxl-20 {
        width: 20% !important;
    }
    .w-xxl-15 {
        width: 15% !important;
    }
    .w-xxl-10 {
        width: 10% !important;
    }
    .w-xxl-5 {
        width: 5% !important;
    }

    .h-xxl-100 {
        height: 100% !important;
    }

    .h-xxl-75 {
        height: 75% !important;
    }

    .h-xxl-50 {
        height: 50% !important;
    }

    .h-xxl-25 {
        height: 25% !important;
    }
}