/* Variáveis */
:root {
    --sw-purple: #46068E;
    --sw-purple-focus: #340669;
    --sw-cherry: #fd3268;
    --sw-orange: #ff4f42;
    --sw-background: #f0f0f0;
    --gray-1: #d4d4d4;
    --gray: #3F3F46;
    --sw-font-family: "ITC Avant Garde Std Bk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


/* Estilos gerais */
@font-face {
    font-family: "ITC Avant Garde Std Bk";
    src: url("../assets/fonts/ITC Avant Garde Gothic/ITC Avant Garde Gothic Book.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

body,
input,
select,
option,
label,
.form-label,
.custom-control-label,
textarea,
.btn,
.form-check-label {
    letter-spacing: 0.5px !important;
    font-size: 12px !important;
    font-family: var(--sw-font-family) !important;
}

.text-description {
    font-size: 11px !important;
}

.text-title {
    font-weight: 600 !important;
    font-size: 13px !important;
}


/* Gestão de Cardápio */
.text-title-negrito-12 {
    font-weight: 700 !important;
    font-size: 12px !important;
    font-family: var(--sw-font-family)!important;
}
.text-description-10 {
    font-weight: 500 !important;
    font-size: 10px !important;
    font-family: var(--sw-font-family)!important;
}

.text-highlight {
    text-decoration: none;
    border: 1px solid darkgoldenrod;
    font-size: 10px !important;
    white-space: normal;
    width: 100%;
    max-height: 37px;
    padding: 2px 5px;
}

.text-highlight div label {
    white-space: normal !important;
}

.card-header {
    font-size: 11px !important;
}

.groupNode {
    color: #005491!important;
}

.nav-link {
	    color: #000000!important;
}
/* Mensagem de alerta */
.swal2-content {
    font-weight: 500 !important;
    font-size: 13px !important;
	font-family: var(--sw-font-family)!important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--sw-cherry)!important;
}

.swal2-icon.swal2-error {
    border-color: var(--sw-cherry)!important;
    color: var(--sw-cherry)!important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: var(--sw-cherry)!important;
}
/* Mensagem de alerta */


/* Scrollbar */
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #ededed;
    border: 5px transparent solid;
    border-left: 5px transparent solid;
    /*border-top: 10px transparent solid;
    border-bottom: 10px transparent solid;*/
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border: 5px transparent solid;
    border-left: 5px transparent solid;
    /*border-top: 10px transparent solid;
    border-bottom: 10px transparent solid;*/
    background-clip: padding-box;
}


/* Login */
@media (min-width: 576px) {	
    #formAtivaUsuario {
		width: 650px !important;
	}
	
	#formLogin {
		width: 530px !important;
	}
}

@media (max-width: 575px) {

	#containerFundo {
		background-color: var(--sw-purple) !important;
	}

	#containerImagem {
		display: none !important;
	}

	#containerFundoCereja {
		display: none !important;
	}
	
	.form-group, .form-label {
		margin-bottom: 0 !important;
	}
	
	*:not(.HTMLListagemFields):not(.HTMLListagemFieldsOdd):not(.HTMLListagemFieldsEven):not(.HTMLTableBodyCell):not(.HTMLTableHeaderSearch):not(.grid):not(.gridAltCol):not(.gridDark):not(.gridDarkAltCol):not(.gridSelected):not(.gridSelectedAltCol):not(.gridSelectedOver):not(.gridSelectedOverAltCol):not(.gridSelectedDark):not(.gridSelectedOverDark):not(.gridSelectedOverDarkAltCol):not(.gridSelectedDarkAltCol)>.form-group:not([webrun-type="HTMLGroupBox"]):not([webrun-type="HTMLContainer"]),.form-action {
		margin: 0 !important;
	}
	
	#formLogin, #formAtivaUsuario {
		width: 100% !important;
		position: unset !important;
	}
}

#containerFundo {
    display: flex;
    min-height: unset !important;
    height: 100% !important;
    width: unset !important;
    top: unset !important;
    left: unset !important;
    position: unset !important;
    padding: 0 !important;
}

#containerImagem {
    background-color: var(--sw-purple);
    background-image: url("../assets/images/background-login.jpg");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: cover;
    flex-grow: 8;
    min-height: unset !important;
    height: 100% !important;
    width: unset !important;
    top: unset !important;
    left: unset !important;
    position: unset !important;
}

#containerFundoCereja {
    background-color: var(--sw-cherry);
    flex-grow: 2;
    min-height: unset !important;
    height: 100% !important;
    width: unset !important;
    top: unset !important;
    left: unset !important;
    position: unset !important;
}

#topoLogin {
    border: none !important;
    height: unset !important;
    min-height: unset !important;
}

#topoLogin img {
    width: 200px !important;
}

#formLogin {
    border-radius: 10px;
    top: 0 !important;
    bottom: 0 !important;
    animation: fade 1000ms;
    height: 490px !important;
    min-height: 490px !important;
    margin: unset !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin-right: -37px !important;
    right: 20% !important;
    left: unset !important;
    font-size: 13px !important;
}

#formLogin #inputsLogin #bemVindo {
    font-weight: 700;
    font-size: 16px !important;
}

#formLogin #inputsLogin,
#formLogin #btnLogin {
    padding-left: 39px !important;
    padding-right: 39px !important;
}

#formLogin #btnLogin button {
    height: 40px !important;
    border-radius: 38px;
    background-color: var(--sw-cherry);
    border: none;
    color: white;
    font-size: 21px !important;
    font-weight: 500;
    margin-top: 25px;
}

#formLogin #btnLogin button i {
    display: none !important;
}

#formLogin #inputsLogin label {
    margin-top: 10px;
}

#formLogin #inputsLogin input:focus {
    border-color: var(--sw-cherry);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 1px solid var(--sw-cherry);
}

#formLogin #topoLogin div {
    padding: 0 !important;
}

#formLogin #topoLogin,
#formLogin #topoLogin div,
#formLogin #inputsLogin,
#formLogin #inputsLogin div,
#formLogin #inputsLogin label,
#formLogin #btnLogin {
    position: unset;
    top: unset !important;
    left: unset !important;
    height: unset !important;
    min-height: unset !important;
    width: unset !important;
}

#formLogin #inputsLogin,
#formLogin #inputsLogin div,
#formLogin #inputsLogin #bemVindo,
#formLogin #inputsLogin #insiraOsDados {
    width: 100% !important;
}

#formLogin #inputsLogin #bemVindo label,
#formLogin #inputsLogin #insiraOsDados label {
    width: 100% !important;
    text-align: center !important;
}

#formLogin #inputsLogin #bemVindo label {
    margin-top: -20px;
}

#formLogin #inputsLogin #insiraOsDados label {
    margin-bottom: 20px !important;
    font-size: 12px;
}


/* Topo */
#topoCosmo {
    height: 45px !important;
    min-height: unset !important;
    width: unset !important;
    position: unset !important;
    flex-grow: 1;
    display: flex;
    padding: 0 !important;
}

#topoCosmo #ContainerLogo,
#topoCosmo #ContainerLogo div,
#topoCosmo #ContainerLabelLoja,
#topoCosmo #ContainerLabelLoja div,
#topoCosmo #ContainerBotoes,
#topoCosmo #ContainerBotoes div {
    width: unset !important;
    height: unset !important;
    min-height: unset !important;
    left: unset !important;
    top: unset !important;
    position: unset !important;
}

#topoCosmo #ContainerLogo {
    background-color: var(--sw-purple);
    min-width: 20vw;
    width: 20vw;
    padding: 0 !important;
}

#topoCosmo #ContainerLogo #imgLogo,
#topoCosmo #ContainerLogo #imgLogo div {
    height: 100% !important;
}

/*
#topoCosmo #ContainerLogo img {
    width: 45px !important;
}
*/

#topoCosmo #ContainerLabelLoja {
    flex-grow: 1;
    border-bottom: 1px solid var(--gray-1);
    padding: 0 !important;
    display: flex;
    justify-content: end;
}

#topoCosmo #ContainerLabelLoja #Lbl_NomeLoja {
    width: max-content !important;
}

#topoCosmo #ContainerLabelLoja #Lbl_NomeLoja,
#topoCosmo #ContainerLabelLoja #Lbl_NomeLoja>div {
    height: 100% !important;
}

#topoCosmo #ContainerLabelLoja #Lbl_NomeLoja>div {
    justify-content: flex-end !important;
    margin-right: 15px;
    flex-direction: row;
    height: 100% !important;
}

#topoCosmo #ContainerLabelLoja #Lbl_NomeLoja label {
    font-size: 12px !important;
    color: var(--gray) !important;
    border: 1px solid var(--gray-1);
    border-radius: 30px;
    padding: 7px 20px;
    font-family: var(--sw-font-family);
}

#topoCosmo #ContainerBotoes {
    flex-grow: 0;
    border-bottom: 1px solid var(--gray-1);
    padding: 0 !important;
}

#topoCosmo #ContainerBotoes #userImageContainer {
    display: flex;
    align-items: center;
    padding: 5px 10px !important;
    margin: 5px 10px;
    color: var(--gray) !important;
    border: 1px solid var(--gray-1);
    border-radius: 30px;
    cursor: pointer !important;
}

#topoCosmo #ContainerBotoes #userImageContainer #LabelImagemUser label {
    color: var(--sw-orange) !important;
    font-size: 10px !important;
    padding-right: 7px;
}

#IconButtonContainer {
    left: 25% !important;
    right: unset !important;
    padding: 0 !important;
    width: unset !important;
    top: -2px !important;
}

#icons {
    height: unset !important;
}

#icons .navbar-toggler {
    width: 38px;
    height: 36px;
    padding: 2px;
}

#icons .menu-inner-container,
#iconsPrincipal {
    min-height: unset !important;
}


/* Menu Lateral */
#MenuLateralCosmo {
    background-color: var(--sw-purple);
    width: 20vw !important;
    top: 45px !important;
    height: calc(100% - 45px) !important;
}

#MenuLateralCosmo a:hover {
    cursor: pointer;
    text-decoration: none;
}

#MenuLateralCosmo .menu-inner-container {
    min-height: unset !important;
}

#MenuLateralCosmo .menu-search {
    padding: 0 10px;
}

#MenuLateralCosmo .menu-search .btn-primary {
    background: none !important;
    background-color: white !important;
    color: var(--sw-orange) !important;
    height: 34px;
}

#MenuLateralCosmo .menu-search .btn-primary:hover {
    border-color: #c8c8c8 !important;
    box-shadow: 0 -0.5px 2px #727272 !important;
}

#MenuLateralCosmo .resultSearchList .card {
    border: 0;
    background-color: unset;
    color: var(--gray-1) !important;
}

#MenuLateralCosmo .list-group-item {
    border: 0;
    background-color: unset;
    color: var(--gray-1) !important;
    margin-left: 0px;
    font-size: 13px;
}

#MenuLateralCosmo .list-group {
    border-radius: 0px!important;
}

/* Define o estilo para o item selecionado */
#MenuLateralCosmo .list-group-item.selected {
    background-color: #F3F3F3 !important;
    color: var(--gray);
    font-weight: bold;
}

#MenuLateralCosmo .list-group-item.selected i{   
    color: var(--sw-orange)!important;
   
}
#MenuLateralCosmo .list-group-item.selected span{   
    color: #000000!important;
   
}



#MenuLateralCosmo .list-group-item:focus {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: white;
    color: var(--gray) !important;
}

#MenuLateralCosmo .list-group-item:focus>i {
    color: var(--sw-orange);
}

#MenuLateralCosmoPrincipal {
    border: 0;
    border-radius: 0;
    background-color: unset;
    flex-grow: 1;
    padding-bottom: 45px;
    width: 20vw !important;
}

#MenuLateralCosmo .resultSearchList {
    overflow-x: hidden !important;
}

#tab0 {
    min-height: unset !important;
}


/* Abas */
#Aba {
    top: 50px !important;
    z-index: 3;
}

.nav.nav-tabs {
    flex-wrap: wrap !important;
    background-color: var(--sw-background);
}

.nav.nav-tabs:empty {
    border: none !important;
}

.nav.nav-tabs .nav-link.active {
    font-weight: 800 !important;
}

.nav.nav-tabs .nav-link:not(.generic-button) {
    padding: 0.25rem 0.5rem !important;
    height: 35px;
    font-size: 12px !important;
}

.nav.nav-tabs .nav-link:not(.generic-button) button {
    padding: 5px !important;
}


/* Aviso Sem Abas */
#containerSemAplicacao {
    width: 80% !important;
    margin-left: 20%;
    margin-top: 30px;
}

#containerSemAplicacao #avisoNenhumaAplicacao,
#containerSemAplicacao #avisoNenhumaAplicacao div {
    width: 100% !important;
}

#containerSemAplicacao #avisoNenhumaAplicacao label {
    width: 100% !important;
    text-align: center !important;
    margin-top: 15px;
    font-family: var(--sw-font-family);
}

#containerSemAplicacao,
#containerSemAplicacao #avisoNenhumaAplicacao {
    top: unset !important;
    left: unset !important;
    display: flex;
    flex-direction: column;
    height: unset !important;
    min-height: unset !important;
    position: unset !important;
}


/* Cabeçalho */
#optionsUserPrincipal i {
    color: var(--sw-orange);
    font-size: 16px !important;
    min-width: 20px;
}

#optionsUserPrincipal .dropdown-menu {
    font-size: 12px !important;
    line-height: 18px !important;
    width: 100% !important;
    background-color: #f8f9fa !important;
}

#optionsUserPrincipal .dropdown-item.active, .dropdown-item:active {
    background-color: white !important;
}


/* Tables */
#results-table.table td {
    padding: 6px;
}


/* Radio button */
.custom-control.custom-radio .custom-control-label {
    display: flex;
    align-items: center;
}


/* Botões padrões da tela */
#formNavbar li.nav-item a {
    padding: 5px 16px !important;
}

#formNavbar li.nav-item a i {
    font-size: 1.1rem !important;
    color: var(--sw-orange);
}


/* Faixa descritiva */
div[id^="txtNomeLoja"],
div[id^="lblFaixaDestaque"],
div[id^="txtClienteTel"],
div[id^="txtHistoricoCliente"],
div[id^="txtObserv"],
div[id="txtSubgrupo"],
div[id^="txtNomeTabela"],
div[id^="txtNomeProduto"],
div[id^="txtNomePerfil"],
div[id^="txtClienteFiscal"],
div[id^="txtClienteConfiguracao"],
div[id^="lblCotacaoProdutos"] {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, .125);
}

div[id^="txtNomeLoja"] label,
div[id^="lblFaixaDestaque"] label,
div[id^="txtClienteTel"] label,
div[id^="txtHistoricoCliente"] label,
div[id^="txtObserv"] label,
div[id="txtSubgrupo"] label,
div[id^="txtNomeTabela"] label,
div[id^="txtNomeProduto"] label,
div[id^="txtNomePerfil"] label,
div[id^="txtClienteFiscal"] label,
div[id^="txtClienteConfiguracao"] label,
div[id^="lblCotacaoProdutos"] label {
    color: unset !important;
    font-family: unset !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* ------------------------------------------------------------ */



#btnLogin,
#btnLogin button {
    border-top-left-radius: 63%;
    border-bottom-left-radius: 63%;
    display: block !important;
    box-shadow: none !important
}

@keyframes fade {
    from {
        opacity: 0;
        transform: scale(0.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

#toast-container-br {
    bottom: 5rem !important
}

#Aba {
    position: fixed !important;
    width: 79vw !important;
    height: calc(100% - 55px) !important;
    margin: auto !important;
    left: 20.5% !important
}

#icons-content,
#iconsPrincipal div.navbar-header {
    background-color: var(--light)
}

#iconsPrincipal {
    background-color: transparent !important
}

a:not(.page-link):not(.fc-event) {
    text-decoration: none !important;
    color: black !important
}

#atalhosListaContainer i:hover,
#icons i:hover {
    filter: drop-shadow(0px 1px 2px #b8b8b8);
    transform: translateY(-3px)
}

#icons .nav-link {
    flex-direction: column
}

#icons .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' data-prefix='fas' data-icon='grip-horizontal' class='svg-inline--fa fa-grip-horizontal fa-w-14' role='img' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M96 288H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM96 96H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm160 0h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") !important
}

#icons .navbar-header {
    border-radius: .25rem;
    margin: auto
}

#icons-content button {
    padding: .3rem !important;
    font-size: .9rem !important
}

#icons-content {
    position: absolute;
    width: 6rem !important;
    top: 3.6rem !important
}

#iconsPrincipal {
    justify-content: center !important
}

#iconsPrincipal a.nav-link i.menu-icon {
    font-size: 2rem;
    margin: .3rem;
    display: block;
    text-align: center
}

#iconsPrincipal .menu-item-text,
#atalhosListaContainer .menu-item-text {
    white-space: normal !important;
    text-align: center
}

#userImage img {
    border-radius: 50% !important
}

#optionsUser {
    width: 100% !important;
    /*left: 41px !important;*/
    position: relative;
    top: 5px !important;
    
}

#optionsUserPrincipal {
    display: none;
    border-radius: .3rem
}

#optionsUserPrincipal .menu-icon {
    float: left
}

.user-button {
    top: 0 !important;
    min-height: 0px !important;
    height: 40px !important
}

#icons ul {
    max-height: 80vh !important;
    overflow: auto !important;
    flex-wrap: initial !important
}

.user-button:hover #optionsUserPrincipal {
    display: block !important;
    width: 14rem;
    float: right;
	border: none !important;
	
}

/* Define o estilo padrão para os itens dentro de #optionsUserPrincipal */
#optionsUserPrincipal .list-group-item {
    color: initial; /* Cor inicial da fonte */
    font-weight: normal; /* Peso da fonte inicial */
}

/* Define o estilo ao clicar em um item dentro de #optionsUserPrincipal */
#optionsUserPrincipal .list-group-item:active,
#optionsUserPrincipal .list-group-item:focus {
    color: #000000; /* Cor da fonte preta */
    font-weight: bold; /* Fonte negrita */
}

/* Estilo para quando um item está ativo */
#optionsUserPrincipal .list-group-item.active {
    color: #000000; /* Fonte preta */
    font-weight: bold; 
}


#optionsUserPrincipal .list-group-item-action:hover {
    background-color: #cccccc !important;
}

#MenuLateralCosmo .list-group-item-action:hover {
    background-color:  #F3F3F3!important;
    color: #000000!important;
}

#optionsUserPrincipal li {
    width: 100%;
    text-align: center
}

#optionsUserPrincipal a {
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    text-decoration: none;
    border-radius: .3rem;
	border: none !important;
}

#optionsUserPrincipal a {
    padding-left: 1.5rem
}

#icons ul::-webkit-scrollbar-thumb {
    background-color: #dad7d7
}

#icons ul::-webkit-scrollbar {
    width: 5px !important
}

@keyframes fadeLista {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

#atalhosListaContainer {
    max-height: 65% !important;
    min-height: auto !important;
    left: unset !important;
    top: inherit !important;
    bottom: 5.5rem !important;
    right: 1.5rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
    z-index: 99999999 !important;
    padding: 0 !important
}

#atalhosListaContainer a {
    margin-bottom: 1rem;
    animation: fadeLista 200ms ease-out;
    animation-fill-mode: both
}

#atalhosListaContainer a i {
    font-size: 1.5rem !important;
}

#atalhosListaContainer a .menu-item-text {
    font-size: .6rem;
    max-width: 100% !important
}

#atalhosFAB {
    width: 64px !important;
    height: 64px !important;
    top: inherit !important;
    bottom: 1.5rem;
    left: unset !important;
    right: -2.7rem !important;
    z-index: 100000000 !important
}

#atalhosFAB:focus-within {
    width: 64px !important;
    height: 64px !important;
    top: inherit !important;
    bottom: 1.5rem;
    left: unset !important;
    right: 1.5rem !important;
    z-index: 100000000 !important;
    transition: right 500ms ease-in-out
}

#atalhosFAB .fa-chevron-left {
    right: 45px;
    bottom: 24px;
    position: absolute
}

#atalhosFAB button[aria-expanded="true"] .fa-chevron-left,
#atalhosFAB:focus-within .fa-chevron-left {
    display: none
}

#atalhosListaContainer .menu-shortcut:focus-within {
    filter: drop-shadow(0px 8px 2px #b8b8b8)
}

#atalhosFAB button {
    box-shadow: none !important
}

#atalhosFAB button[aria-expanded="true"] .fa-reply-all {
    display: none
}

#atalhosFAB button[aria-expanded="false"] .fa-times {
    display: none
}

#atalhosFAB+[data-original-title="HTMLButton"] {
    display: none !important
}

#atalhosListaContainer a:nth-child(2n+1) {
    animation-delay: 50ms
}

#atalhosListaContainer a:nth-child(2n) {
    animation-delay: 150ms
}

.backdrop-shortcut {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease
}

.backdrop-shortcut.show {
    opacity: .85;
    pointer-events: all
}

#atalhosListaContainer::-webkit-scrollbar-thumb {
    background-color: #dad7d7
}

#atalhosListaContainer::-webkit-scrollbar {
    width: 2px !important
}

@media(max-width: 575.98px) {

    #MenuLateralCosmoPrincipal,
    #MenuLateralCosmo {
        width: auto !important
    }

    #atalhosListaContainer .menu-item-text {
        max-width: unset !important
    }

    #MenuLateralCosmo,
    .menu-collapse-button {
        top: .8rem !important
    }

    .user-button {
        width: 40% !important;
        margin: auto !important
    }


    #optionsUser {
        left: 1.5rem !important;
        top: 5.1rem !important
    }

    #userImageContainer::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        color: white;
        content: "\f0dd";
        margin-top: 5px;
        position: absolute;
        margin-left: 40px !important
    }

    #userName {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    #userImage {
        margin-right: 0 !important;
        margin-left: -21px !important;
        width: 44% !important
    }

    #userName div {
        justify-content: start !important
    }

    #userImageContainer {
        width: 36% !important
    }

    #userImageContainer,
    .user-button {
        margin: auto;
        border: none !important;
        padding: 0rem !important;
        top: -0.2rem !important
    }

    #optionsUserPrincipal .collapse:not(.show) {
        display: block !important
    }

    #optionsUserPrincipal .navbar-header {
        display: none !important
    }

    #IconButtonContainer {
        top: .8rem !important;
        position: fixed !important;
        width: 20% !important;
        right: .9rem !important
    }

    #icons ul {
        max-height: 70vh !important
    }

    #icons .navbar-toggler {
        width: 3.5rem !important;
        height: 2.5rem !important
    }

    #Aba {
        width: 96vw !important;
        top: 82px !important;
        height: calc(100% - 81px) !important;
        position: fixed !important;
        left: 2vw !important
    }

    #Aba .nav-item {
        height: auto !important
    }
}


/* Personalização do componente Color Picker */

.colorpicker_field,
.colorpicker_hex {
    background-image: none !important;
    background-color: var(--sw-background) !important;
    border-radius: 5px;
}

.colorpicker_field::before,
.colorpicker_hex::before {
    margin-left: 5px;
    font-family: var(--sw-font-family);
    font-size: 14px;
    color: var(--sw-purple);
}

.colorpicker_rgb_r::before {
    content: "R";
}

.colorpicker_rgb_g::before {
    content: "G";
}

.colorpicker_rgb_b::before {
    content: "B";
}

.colorpicker_hsb_h::before {
    content: "H";
}

.colorpicker_hsb_s::before {
    content: "S";
}

.colorpicker_hsb_b::before {
    content: "B";
}

.colorpicker_field>input,
.colorpicker_hex>input {
    height: 22px !important;
    color: black !important;
    font-family: var(--sw-font-family) !important;
    top: 0 !important;
}

.colorpicker_hex::before {
    content: "#";
}

.colorpicker_hex>input {
    right: 3px !important;
    width: 60px !important;
}

.colorpicker_submit {
    width: 53px !important;
    left: 292px !important;
    padding-top: 1px;
    border-radius: 5px;
    background-image: none !important;
    background-color: var(--sw-orange) !important;
    color: white;
    text-align: center;
    font-family: var(--sw-font-family);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.colorpicker_submit::before {
    content: "OK";
}

.loading {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: white;
    z-index: 999999 !important;
    opacity: .5;
}

.loading>div>label {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1.5;
}

/* Campos de texto no filtro das colunas das grades. */
.listTable .recordEditorCell input[type=text],
.listTable .recordEditorCellAltCol input[type=text] {
    /* Deixa na mesma altura que outros tipos de campos nesse filtro. */
    height: 33px !important;
}

/* Botão com fonte menor e aparência primária */
.btn-menor > .btn {
    color: #000000 !important;
    background-color: #9e9b9b !important;
    border-color: #c8c8c8 !important;
    box-shadow: 0px -0.5px 2px #727272 !important;
    background: linear-gradient(to top, #F2F2F2, #b8b8b8) !important;
    font-size: 12px !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef !important;
    opacity: 1 !important;
}

/*Grade Inicio*/
.listGrid [role="rowheader"]{
	background-color: var(--sw-purple) !important;
}
/**/
.listGrid [role="button"]{
	background-color: var(--sw-purple) !important;
}
.listGrid [role="toolbar"]{
	background-color: var(--sw-purple) !important;
}
/*Grade Inicio*/
.btn-menor > .btn > span {
  white-space: nowrap !important;
}

.btn-menor > .btn:hover {
    color: #000000 !important;
    border: #636464 !important;
    box-shadow: 0px -0.5px 2px #727272 !important;
    background: linear-gradient(to bottom, #f2f2f2, #b8b8b8) !important;
}

.btn-menor > .btn.focus,
.btn-menor > .btn:focus {
  color: rgb(0, 0, 0);
  background-color: #7f807f;
  border-color: #797a79;
}
.btn-menor > .btn.disabled,
.btn-menor > .btn:disabled {
  color: #000000;
  border-color: #c8c8c8;
  box-shadow: 0px -0.5px 2px #727272;
  background: linear-gradient(to top, #F2F2F2, #b8b8b8);
  background-color: #d0d2d0;
}

.btn-menor > .btn:not(:disabled):not(.disabled).active, .btn-menor > .btn:not(:disabled):not(.disabled):active, .show>.btn-menor > .btn.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf
}

.btn-menor > .btn:not(:disabled):not(.disabled).active:focus, .btn-menor > .btn:not(:disabled):not(.disabled):active:focus, .show>.btn-menor > .btn.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5)
}

.btn {
    font-size: 12px !important;
}

.btn-primary {
    color: #fff !important;
    background: var(--sw-purple) !important;
    border: 0 !important;
}

.btn-primary:hover {
    color: #fff !important;
    background: var(--sw-purple-focus) !important;
    border: 0 !important;
}

.btn-primary.focus,
.btn-primary:focus {
  color: #fff !important;
  background: var(--sw-purple-focus) !important;
  border: 0 !important;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff !important;
    background: var(--sw-purple) !important;
    border: 0 !important;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem var(--sw-purple-focus) !important;
}

/* Removido checkbox de filtro da grid */
table div[class=checkboxItemLite], table div[class=checkboxItemLiteOver] {
    display: none !important;
}





/* Ativação do Usuário */
 

#formAtivaUsuario {
    border-radius: 10px;
    top: 0 !important;
    bottom: 0 !important;
    animation: fade 1000ms;
    height: 580px !important;
    min-height: 560px !important;
    margin: unset !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin-right: -37px !important;
    right: 20% !important;
    left: unset !important;
    font-size: 13px !important;
}
 

#formAtivaUsuario #inputsLogin #bemVindo   {

    font-weight: 700;

    font-size: 16px !important;

}

#formAtivaUsuario #inputsLogin,

#formAtivaUsuario #btnLogin {

    padding-left: 39px !important;

    padding-right: 39px !important;

}

 

#formAtivaUsuario #btnLogin button {

    height: 40px !important;

    border-radius: 38px;

    background-color: var(--sw-cherry);

    border: none;

    color: white;

    font-size: 21px !important;

    font-weight: 500;

    margin-top: 25px;

}

 

 

#formAtivaUsuario #btnLogin button i {

    display: none !important;

}

 

#formAtivaUsuario #inputsLogin label {

    margin-top: 10px;

}

 

#formAtivaUsuario #inputsLogin input:focus {

    border-color: var(--sw-cherry);

    -webkit-box-shadow: none;

    box-shadow: none;

    outline: 1px solid var(--sw-cherry);

}

 

#formAtivaUsuario #topoLogin div {

    padding: 0 !important;

}

 

#formAtivaUsuario #topoLogin,

#formAtivaUsuario #topoLogin div,

#formAtivaUsuario #inputsLogin,

#formAtivaUsuario #inputsLogin div,

#formAtivaUsuario #inputsLogin label,

#formAtivaUsuario #btnLogin {

    position: unset;

    top: unset !important;

    left: unset !important;

    height: unset !important;

    min-height: unset !important;

    width: unset !important;

}

 

#formAtivaUsuario #inputsLogin,

#formAtivaUsuario #inputsLogin div,

#formAtivaUsuario #inputsLogin #bemVindo,

#formAtivaUsuario #inputsLogin #insiraOsDados {

    width: 100% !important;

}

 

#formAtivaUsuario #inputsLogin #bemVindo label,

#formAtivaUsuario #inputsLogin #insiraOsDados label {

    width: 100% !important;

    text-align: center !important;

}

 

#formAtivaUsuario #inputsLogin #bemVindo label {

    margin-top: -20px;

}

 

#formAtivaUsuario #inputsLogin #insiraOsDados label {

    margin-bottom: 20px !important;

    font-size: 12px;

}

 

/* Ativação do Usuário fim */








/* Redefinir Senha */

#formLogin #inputsRedefinirSenha #bemVindoRedefinirSenha   {

    font-weight: 700;

    font-size: 16px !important;

}

 

 

#formLogin #inputsRedefinirSenha,

#formLogin #btnRedefinirSenha {

    padding-left: 39px !important;

    padding-right: 39px !important;

}

 

#formLogin #btnRedefinirSenha button {

    height: 40px !important;

    border-radius: 38px;

    background-color: var(--sw-cherry);

    border: none;

    color: white;

    font-size: 21px !important;

    font-weight: 500;

    margin-top: 25px;

}

 

 

#formLogin #btnRedefinirSenha button i {

    display: none !important;

}

 

#formLogin #inputsRedefinirSenha label {

    margin-top: 10px;

}

 

#formLogin #inputsRedefinirSenha input:focus {

    border-color: var(--sw-cherry);

    -webkit-box-shadow: none;

    box-shadow: none;

    outline: 1px solid var(--sw-cherry);

}

 

#formLogin #topoLogin div {

    padding: 0 !important;

}

 

#formLogin #topoLogin,

#formLogin #topoLogin div,

#formLogin #inputsRedefinirSenha,

#formLogin #inputsRedefinirSenha div,

#formLogin #inputsRedefinirSenha label,

#formLogin #btnRedefinirSenha {

    position: unset;

    top: unset !important;

    left: unset !important;

    height: unset !important;

    min-height: unset !important;

    width: unset !important;

}

 

#formLogin #inputsRedefinirSenha,

#formLogin #inputsRedefinirSenha div,

#formLogin #inputsRedefinirSenha #bemVindoRedefinirSenha,

#formLogin #inputsRedefinirSenha #insiraOsDadosRedefinirSenha {

    width: 100% !important;

}

 

#formLogin #inputsRedefinirSenha #bemVindoRedefinirSenha label,

#formLogin #inputsRedefinirSenha #insiraOsDadosRedefinirSenha label {

    width: 100% !important;

    text-align: center !important;

}

 

#formLogin #inputsRedefinirSenha #bemVindoRedefinirSenha label {

    margin-top: -20px;

}

 

#formLogin #inputsRedefinirSenha #insiraOsDadosRedefinirSenha label {

    margin-bottom: 20px !important;

    font-size: 12px;

}

 

 

/* Redefinir Senha FIM */