.dynamic-logo {
    fill: var(--logo-fill);
}



select {
    width: 90%;
    padding: 12px 18px;
    border: 1px solid #444;
    border-radius: 10px;
    background: var(--background-canvas, #272727);
    color: #fff !important;
    font-size: 1rem;
    font-family: Inter, sans-serif;
    appearance: none;
    min-width: 150px;
}
select option {
    background: #272727;
    color: #fff;
}

a {
    color: var(--text-icon-medium-emphasis);
    font-style: normal;
    text-decoration: none;
}

a:hover {
    color: var(--button-primary-default);
}

#wrapper {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.vertical-stack {
    display: flex;
    flex-direction: column;
}
#main-header {
    background-color: var(--background-canvas-shaded);
    border-bottom: 1px solid var(--border-stroke-default);
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px;
    position: fixed;
    z-index: 2;
}

.sidebar {
    background-color: var(--background-on-canvas);
    display: flex;
    color: var(--text-icon-medium-emphasis);
    
    height: calc(100vh - 64px);
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    padding-top: 64px;
    transition: all ease-out 200ms;
    z-index: 1;
    border-right: solid 1px #ffffff00;
}

.sidebar.closed {
    width: 60px;
}

.sidebar.closed + .body {
    padding-left: 60px;
    width: calc(100% - 60px);
}

.sidebar.closed .nav-items .icon {
    width: 22px;
    height: 22px;
}

.sidebar-close {
    transition: transform ease-out 200ms;
    cursor: pointer;
}

.sidebar.closed .icon.sidebar-close {
    transform: rotate(180deg);
}

.navigation {
    flex: 1;
    background-color: var(--background-canvas-shaded);
    overflow-y: auto;
    /* Esconde a barra de rolagem */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE e Edge */
}

.navigation::-webkit-scrollbar {
    display: none;               /* Chrome, Safari e Opera */
}

.nav-items {
    padding: 32px 4px 0px;
    margin: 0;
}

.nav-items a {
    padding: 7.5px 15px;
    display: block;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.nav-items a:hover {
    background-color: rgba(214, 133, 0, 0.05);
}

.nav-items a:hover img,
.nav-items .active img,
.nav-items li.submenu > a:hover > label:after {
    filter: grayscale(0) invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg);
}

.nav-items li a img {
    margin-right: 4px;
    vertical-align: sub;
    filter: grayscale(1);
}

.nav-items li.sub ul {
    margin: 0;
    padding: 0;
}

.nav-items li.submenu > ul {
    overflow: hidden;
    max-height: 500px;
}

.nav-items.animated li.submenu > ul {
    transition: max-height ease-out 200ms;
}

.nav-items li.submenu label {
    margin: 4px 0;
    display: block;
    padding: 7.5px 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.nav-items li.submenu label:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(../images/nav-arrow-up.svg) no-repeat center center;
    right: 18px;
    top: 4px;
    filter: grayscale(1);
}

.nav-items.animated li.submenu label:after {
    transition: transform, opacity ease-out 200ms;
}

.nav-items li.submenu.active label:after {
    filter: grayscale(0) invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg);
}

.nav-items li.active > a {
    color: var(--button-primary-default);
    background-color: rgba(214, 133, 0, 0.16);
}

.nav-items li.no-icon > a {
    padding-left: 41px;
}

.nav-items .submenu-checkbox:not(:checked) + a > label:after {
    transform: rotate(180deg);
}

.nav-items .submenu-checkbox:not(:checked) ~ ul {
    max-height: 0;
}

.submenu-checkbox {
    display: none;
}

.nav-items li.submenu > a {
    margin: 0;
    color: inherit;
    padding: initial;
    display: initial;
}

.nav-items li.submenu > a:hover {
    color: var(--button-primary-default);
}

.nav-items li.submenu.active > a > label {
    color: var(--button-primary-default);
    background-color: rgba(214, 133, 0, 0.16);
}

.nav-items .icon {
    transition: width, height ease-out 200ms;
}

.sidebar.closed .nav-items span {
    transition: opacity ease-out 200ms;
}

.sidebar.closed .nav-items span,
.sidebar.closed .nav-items label:after {
    opacity: 0;
}

.sidebar.closed .nav-items li.submenu > ul {
    max-height: 0;
}

/* profile popup */
.text {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 18px;
    font-weight: 500;
}
.elements {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.master-buttonsmall {
    align-self: stretch;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 9px 12px;
}
.masterborderless-buttonsmall {
    align-self: stretch;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.button-variants {
    align-self: stretch;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.button-variants1 {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    color: var(--text-icon-on-primary);
}
.button-variants-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.profile-popup {
    opacity: 0;
    position: absolute;
    top: 40px;
    right: -20px;
    width: 220px;
    height: 0;
    overflow: hidden;
    padding: 0 25px 0;
    transition: opacity ease-out 100ms;
}
.profile-popup-inner {
    box-shadow: var(--default-shadow);
    border-radius: 4px;
    background-color: var(--background-canvas);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    color: #a89c94;
    font-family: Inter;
}

.avatar-image-name-dropdown-open .profile-popup {
    opacity: 1;
    padding: 10px 25px 25px;
    height: fit-content;
}

.avatar-image-name-dropdown-open {
    background-color: var(--background-on-canvas);
}

/* end */

.nmeros {
    width: 88px;
    position: relative;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-icon-high-emphasis);
    display: none;
    align-items: center;
    height: 24px;
    flex-shrink: 0;
}
.total-de-membros {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 16px;
    font-weight: 500;
}
.usurios {
    position: relative;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-icon-high-emphasis);
}
.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.header {
    width: 344px;
    display: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}
.cravinhos {
    align-self: stretch;
    position: relative;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    color: var(--text-icon-high-emphasis);
}
.header1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}
.icon {
    width: 18px;
    height: 18px;
}

.label {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.div {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 18px;
    font-weight: 500;
    color: var(--text-icon-high-emphasis);
    text-align: right;
}
.whatsapp {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.instagram {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 18px;
    font-weight: 500;
}
.contato {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
}
.indicadores {
    align-self: stretch;
    border-radius: 4px;
    background-color: var(--background-on-canvas);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    gap: 16px;
    color: var(--text-icon-medium-emphasis);
}
.filtros1 {
    position: relative;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 18px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 16px;
}
.filtros1 label small {
    display: none;
}
.input-label {
    position: relative;
    line-height: 24px;
    font-weight: 500;
}
.first-line {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    padding: 0px 16px 0px 0px;
}
.label4 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.left-icon-text {
    flex: 1;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.input {
    align-self: stretch;
    background-color: var(--background-on-canvas);
    border: 1px solid var(--border-stroke-default);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 16px;
    color: var(--text-icon-high-emphasis);
    font-size: 16px;
    position: relative;
    flex: 1;
}
.select-wrapper {
    position: relative;
    display: flex;
    align-self: stretch;
}
.select-wrapper select.input {
    font-size: 16px;
    padding: 11px 13px 11px 16px;
    -webkit-appearance: none;
    appearance: none;
    outline: solid 1px transparent;
}

.select-wrapper select.input:focus-within {
    outline: solid 1px #8080803b;
}

.select-wrapper select.input option[value=""][disabled] {
    display: none;
}

.select-wrapper select.input option {
    color: var(--text-icon-high-emphasis);
}

.select-wrapper select.input:required:invalid {
    color: gray;
}

.select-wrapper:after {
    content: "";
    font-size: 1rem;
    top: 11px;
    right: 17px;
    position: absolute;
    pointer-events: none;
    background: url(../images/arrow-drop-down.svg) no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
}
.master-input {
    align-self: stretch;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.vertical-input {
    width: 344px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.filtros {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: 16px;
}
/* Foto padrão para o avatar */
.avatar-upload {
    align-self: stretch;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.avatar-upload img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--button-primary-default, #d68500);
    cursor: pointer;
}

.avatar-upload input[type="file"] {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    cursor: pointer;
}
/* final  */

.nome-redes-sociais {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.item {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.content {
    width: 392px;
    border-radius: 4px;
    background-color: var(--background-canvas);
    height: 960px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    box-sizing: border-box;
    gap: 32px;
}
.wrapper {
    position: absolute;
    top: 231px;
    left: 673px;
    border-radius: 32px;
    background-color: var(--background-canvas-shaded);
    border: 1px solid var(--border-stroke-secondary);
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
}
.button {
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 4px;
    background-color: var(--background-canvas);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px;
}
.map {
    /* position: relative; */
    overflow: hidden;
    flex: 1;
    display: flex;
    color: var(--text-icon-on-primary);
    height: calc(100vh - 64px);
    width: calc(100% - 392px - 241px);
    position: fixed;
    right: 0;
    transition: all ease-out 200ms;
}
.sidebar.closed + .body .map {
    width: calc(100% - 392px - 60px);
}
#map {
    height: 100%;
}
.body {
    padding-top: 64px;
    padding-left: 240px;
    background-color: var(--background-canvas-shaded);
    display: flex;
    width: calc(100% - 240px);
    transition: padding ease-out 200ms;
    justify-content: center; /* centraliza horizontalmente */
    align-items: center; 
}
.body > .main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.root-menu-child {
    align-self: stretch;
    position: relative;
    background-color: var(--background-on-canvas);
    height: 1px;
}
.style-17 {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 20px;
}
.master-nav-item7 {
    flex: 1;
    border-radius: 4px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.collapsed-action {
    align-self: stretch;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.root-menu {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 8px;
    gap: 7px;
    background-color: var(--background-canvas-shaded);
}
.divider {
    align-self: stretch;
    width: 1px;
    position: relative;
    background-color: var(--border-stroke-default);
}
.logo-icon {
    width: 164px;
    position: relative;
    height: 36px;
    overflow: hidden;
    flex-shrink: 0;
}
.chat-icon {
    width: 20px;
    position: relative;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.master-icon-buttonsmall {
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
}
.master-borderless-icon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.button-variants {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: flex-start; */
    justify-content: center;
}
.master-avatar {
    width: 36px;
    position: relative;
    border-radius: 50%;
    border: 1px solid var(--button-primary-default, #d68500);
    height: 36px;
    object-fit: cover;
}
.prefeito {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.01em;
    line-height: 16px;
    font-weight: 500;
    color: var(--text-icon-medium-emphasis);
}
.text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.arrow-drop-down-icon6 {
    width: 16px;
    position: relative;
    height: 16px;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar-image-name-dropdown {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 8px 2px 2px;
    gap: 8px;
    position: relative;
    cursor: pointer;
}
.avatar-image-name-dropdown:hover {
    background-color: var(--background-on-canvas);
}
.notification-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}
.notification-area .button-variants {
    cursor: pointer;
}
.notification-area .button-variants:hover .master-icon-buttonsmall img {
    filter: brightness(1.2);
}
.notification-area .notifications {
    cursor: pointer;
    position: relative;
}
.notification-area .notifications .notifications-count {
    display: flex;
    width: 14px;
    padding: 1px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 1px;
    right: 0px;
    border-radius: 12px;
    background: var(--text-icon-error);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: var(--background-on-canvas);
}
.notification-area .notifications .chat-icon.hover {
    display: none;
}
.notification-area .notifications:hover .chat-icon.hover {
    display: block;
}
.notification-area .notifications:hover .chat-icon.normal {
    display: none;
}
.notification-container {
    align-items: center;
    border-radius: 4px;
    background: var(--background-canvas-shaded, #1d1d1d);
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    padding: 16px;
    font: 12px/1 inter, sans-serif;
    margin-bottom: 6px;
    line-height: 1.3;
}
.notification-container:hover {
    background: var(--background-on-canvas);
}
.notification-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 20px;
    align-self: stretch;
    margin: auto 0;
}
.notification-content {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    flex-direction: column;
    justify-content: flex-start;
    margin: auto 0;
}
.notification-message {
    color: var(--text-icon-high-emphasis);
    font-weight: 500;
    letter-spacing: 0.06px;
}
.notification-subject {
    color: var(--text-icon-low-emphasis);
    text-overflow: ellipsis;
    font-weight: 400;
    letter-spacing: 0.05px;
    margin-top: 4px;
    overflow: hidden;
}

.notifications-wrapper {
    position: absolute;
    width: 448px;
    right: -275px;
    top: 40px;
    opacity: 0;
    height: 0;
    transition: opacity ease-out 100ms;
    overflow: hidden;
    background: var(--background-shadow);
    padding: 0;
    border-radius: 4px;
}
.notification-area .notifications:hover .notifications-wrapper {
    opacity: 1;
    height: fit-content;
    padding: 20px 16px 16px;
}
input[type="checkbox"].toggle-checkbox {
    display: none;
}

/* popover de ações do botão da lista de cadastros e cadastro */
.cell-actions {
    position: relative;
}
.cell-actions nav {
    opacity: 0;
    position: absolute;
    top: 25px;
    right: -15px;
    width: 140px;
    height: 0;
    z-index: 1;
    border: none;
    background: none;
    overflow: hidden;
    padding: 0 25px 0;
    transition: opacity ease-out 100ms;
}

.cell-actions ul {
    box-shadow: var(--default-shadow);
    border-radius: 4px;
    background-color: var(--background-canvas);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 12px 8px;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    color: var(--color-gray-100);
    font-family: Inter;
    list-style: none;
    gap: 8px;
}

.cell-actions ul li {
    display: flex;
    position: relative;
    letter-spacing: 0.01em;
    line-height: 18px;
    font-weight: 500;
}

.cell-actions ul li a {
    flex: 1;
    padding: 6px 12px;
}

.cell-actions div.cell-actions-button {
    padding: 0;
}
.cell-actions div.cell-actions-button:hover nav {
    /* display: block; */
    opacity: 1;
    padding: 10px 15px 15px;
    height: fit-content;
}

.notification-area .cell-actions nav {
    width: max-content;
    right: -82px;
}

.notification-area .cell-actions nav li a img {
    vertical-align: middle;
    padding-right: 8px;
    margin-top: -2px;
}

.notification-area .cell-actions div.cell-actions-button:hover nav {
    padding-top: 0;
    margin-top: 10px;
}

.translate-button a {
    border-radius: 4px;
}

.translate-button a.selected {
    background: var(--border-stroke-secondary);
}

.translate-button a.selected img.check-icon {
    margin-left: 2px;
    height: 13px;
    width: 13px;
    margin-bottom: -1px;
    filter: contrast(0.6) invert(1);
}
.horizontal-divider {
    height: 1px;
    width: 100%;
    background-color: var(--border-stroke-secondary);
}


/* Botão switch padrão 
<div class="switch-center">
    <label class="switch">
        <input type="checkbox" name="ativo">
        <span class="slider"></span>
    </label>
</div>
*/

.switch-center {
    display: flex;
    gap: 2rem; /* espaço entre os switches */
    justify-content: center; /* centraliza na horizontal */
    align-items: center; /* centraliza na vertical */
}

.switch-center > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #555;
    transition: .4s;
    border-radius: 34px;
}

.slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--button-primary-default);
}

input:checked + .slider::before {
    transform: translateX(22px);
}
/*                               */


/*
*Centraliza itens proporcionalmente
* Itens comum: Botão de adicionar, nome da página 
*/
.cabecalho {
    display: flex;
    align-items: center;
}
.cabecalho-left, .cabecalho-center, .cabecalho-right {
    flex: 1;
    align-items: center;
    display: flex; /* Espaço entre o botão e o texto */
}
.cabecalho-center {
    justify-content: center; /* Centraliza o texto */
}
.cabecalho-right {
    justify-content: flex-end; /* Alinha o botão à direita */
}
.cabecalho-left {
    justify-content: flex-start; /* Alinha o botão à esquerda */
}


/* Checkbox */
.form-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 15px;;
}

.form-checkbox label {
    text-align: center;
    margin-right: 5px;
    font-weight: 500;
    color: var(--text-icon-high-emphasis);
}

.form-checkbox input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    accent-color: #d68500;
}
.form-checkbox:checked {
    

    
    accent-color: #d68500;
}



/* Checkbox readonly */
.form-checkbox-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.form-checkbox-readonly label {
    text-align: center;
    margin-right: 5px;
    font-weight: 500;
    color: var(--text-icon-high-emphasis);
}

.form-checkbox-readonly input[type="checkbox"] {
    width: 15px;
    height: 15px;;
    margin-right: 10px;
    pointer-events: none;
    accent-color: #d68500;
}
.form-checkbox-readonly [type="checkbox"]:checked {
    width: 15px;
    height: 15px;;
    margin-right: 10px;
    pointer-events: none;
    accent-color: #d68500;
}
.form-checkbox-readonly [type="checkbox"]:not(:checked) {
    pointer-events: none;
    accent-color: #ccc;
    opacity: 0.5;
    filter: grayscale(100%);
}

.form-checkbox-readonly label {
    pointer-events: none;
}

/*Estilo opções de ações em tabelas*/

/*
Exemplo:


<td title="opcoes" style="position: relative;">
                        <div class="menu-container">
                            <button class="menu-button">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            

                            <div class="menu-dropdown">
                                <a href="#" onclick=""><i class="fas fa-file-medical"></i> Atestado</a>
                                <a href="#" onclick=""><i class="fas fa-prescription"></i> Receita</a>
                                <a href="#" onclick=""><i class="fas fa-paper-plane"></i> Encaminhamento</a>
                            </div>
                        </div>
                    </td>

*/

.menu-container {
    position: relative;
    display: inline-block;
}

.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-icon-medium-emphasis);
}

.menu-button:hover {
    color: var(--button-primary-default);
}

.menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--background-canvas-shaded);
    min-width: 180px;
    border: 1px solid var(--background-canvas);
    border-radius: 8px;
    box-shadow: 0px 8px 16px #00000033;
    z-index: 100;
}

.menu-dropdown a {
    color: var(--text-icon-medium-emphasis);
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: bold;
}

.menu-dropdown a:hover {
    background-color: var(--background-canvas);
    color: var(--button-primary-default);
}