:root {
    --color-primary: #066e29;
    --color-success: #11BE3D;
    --color-danger: #ee0d0d;
    --color-border: #a7a7a7;
    --color-border-dark: #000;
    --color-border-medium: #4e4d4d;

    --color-bg-white: #fff;
    --color-bg-light: #f1f5f9;
    --color-hover: #e8f4f8;
    --color-text: #000;
    --color-text-light: #64748b;
    --color-text-medium: #475569;

    --color-dept-dtic: #B7C9ED;
    --color-dept-dpof: #EE9EA7;
    --color-dept-drh: #E4CEE3;
    --color-dept-da: #FCE9AF;
    --color-dept-oa: #DFE52D;

    --color-card-green-light: #92F5C5;
    --color-card-green-medium: #C3D49F;
    --color-card-green-highlight: #47E26C;
    --color-card-green-aqua: #57EF9C;
    --color-card-green-mint: #DEFDED;

    --color-card-yellow: #DFE52D;
    --color-card-yellow-light: #EDED88;
    --color-card-yellow-soft: #F6D977;

    --color-card-cyan-light: #C6E9ED;
    --color-card-cyan: #56D3D7;
    --color-card-blue-light: #E8EEFA;
    --color-card-blue: #638AD9;

    --color-card-orange: #FCD5B6;
    --color-card-pink: #F8D8DD;
    --color-card-beige: #FEF4DB;
    --color-card-lilac: #F3E9F2;
    --color-card-red: #E3646D;
    --color-card-purple: #BD89B9;
    --color-card-dark-green: #204931;
}

.org-scroll {
    width: 100%;
    height: 75vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grap;
    padding-bottom: 20px;
}

.org-scroll:active {
    cursor: grabbing;
}

.org-scroll:fullscreen {
    background-color: #f5f6fa;
    width: 100vw;
    height: 100vh;
    padding: 20px;
}

.org-scroll:-webkit-full-screen {
    background-color: #f5f6fa;
    width: 100vw;
    height: 100vh;
    padding: 20px;
}

.org-canvas {
    transform: scale(0.5);
    min-width: 1980px;
    min-height: 1150px;
    will-change: transform;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: -270px;
}

.btn{
    background-color: var(--color-card-dark-green);
    color: var(--color-bg-white);
    border-color: var(--color-bg-white);
    padding: 8px;
    border-radius: 8px;
    font-size: 10px;
}

.org-tree ul {
    padding-top: 20px;
    padding-left: 0;
    position: relative;
    display: flex;
    justify-content: center;
}

.org-tree li {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 8px 5px 0;
    transition: all 0.3s ease;
}

.org-tree li:only-child {
    padding-top: 0;
}

.org-tree ul.horizontal-overlay {
    position: absolute;
    padding-top: 20px;
    z-index: 10;
    left: 58%;
    transform: translateX(-50%);
}

.org-tree ul.horizontal-overlay>li {
    width: 130px;
}

.org-tree .horizontal-overlay.ul-oax {
    margin-top: 338px;
}

.org-tree .horizontal-overlay.ul-da {
    margin-top: 470px;
    width: 100px;
    left: 70%;
}

.org-tree .horizontal-overlay.ul-oaa {
    padding-top: 240px;
}

.org-tree .horizontal-overlay.ul-dtic {
    left: 53%;
}

.org-tree .horizontal-overlay.ul-dpof {
    width: 100px;
    left: 48%;
}

.org-tree .horizontal-overlay.ul-dg {
    left: 116%;
}

.org-tree .horizontal-overlay.ul-cdpc {
    left: 80%;
}

.org-tree .horizontal-overlay.ul-dct {
    width: 110px;
    left: 37%;
}

.org-tree .horizontal-overlay.ul-dsg {
    left: 30%;
}

.org-tree .horizontal-overlay.ul-dgd {
    left: 40%;
}

.org-tree .horizontal-overlay.ul-dt {
    left: 38%;
}

.org-tree .horizontal-overlay.ul-dagbd {
    left: 47%;
}

.org-tree .horizontal-overlay.ul-df {
    width: 100px;
}

.org-tree .horizontal-overlay.ul-dp {
    width: 130px;
}

.org-tree .horizontal-overlay.ul-dcl {
    left: 151%;
}

/* Nó com Filhos na Vertical */
.org-tree .horizontal-overlay.ul-dggp,
.org-tree .horizontal-overlay.ul-dmst,
.org-tree .horizontal-overlay.ul-ddgs,
.org-tree .horizontal-overlay.ul-dc,
.org-tree .horizontal-overlay.ul-dgp,
.org-tree .horizontal-overlay.ul-dcpp,
.org-tree .horizontal-overlay.ul-dcc,
.org-tree .horizontal-overlay.ul-dmp,
.org-tree .horizontal-overlay.ul-disi {
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
}

.org-tree .horizontal-overlay.ul-dggp {
    width: 100px;
    left: 45%;
}

.org-tree .horizontal-overlay.ul-dmst {
    left: 50%;
}

.org-tree .horizontal-overlay.ul-ddgs {
    left: 51%;
}

.org-tree .horizontal-overlay.ul-dc {
    width: 110px;
    left: 50%;
}

.org-tree .horizontal-overlay.ul-dgp {
    left: 50%;
}

.org-tree .horizontal-overlay.ul-dcpp {
    left: 50%;
}

.org-tree .horizontal-overlay.ul-dcc {
    width: 39px;
}

.org-tree .horizontal-overlay.ul-disi {
    left: 20%;
}

.org-tree .horizontal-overlay.ul-oa {
    position: absolute;
    z-index: 20;
    margin-top: 20px;
}

.org-tree .horizontal-overlay.ul-cg{
    display: inline-block;
    left: -50%;
    top: -18%;
}

.org-tree .horizontal-overlay.ul-dg>li {
    width: 300px;
    margin-right: 130px;
}

.org-tree .horizontal-overlay.ul-drh>li {
    margin-right: 60px;
}

.org-tree .horizontal-overlay.ul-dtic>li {
    margin-right: 40px;
}

.org-tree .horizontal-overlay.ul-dpof>li {
    margin-right: 40px;
    left: 19%;
}

.org-tree .horizontal-overlay.ul-dea>li {
    width: 140px;
    left: -20%;
}

.org-tree .horizontal-overlay.ul-da>li {
    padding-right: 158px;
}

.org-tree .horizontal-overlay.ul-dcc>li {
    width: 150px;
    display: block;
}

.org-tree .horizontal-overlay.ul-dsg>li {
    width: 120px;
}

.org-tree .horizontal-overlay.ul-dgd>li {
    width: 130px;
}

.org-tree .horizontal-overlay.ul-dmp>li {
    width: 130%;
}

.org-tree .horizontal-overlay.ul-disi>li {
    padding: 5px 0 5px 30px;
    position: relative;
    display: block;
    width: 140px;
}



.org-tree ul.ul-dmst>li::before,
.org-tree ul.ul-dmst::before,
.org-tree ul.ul-dmst>li::after,
.org-tree ul.ul-dmp>li::before,
.org-tree ul.ul-dmp::before,
.org-tree ul.ul-dmp>li::after,
.org-tree ul.ul-dcc>li::before,
.org-tree ul.ul-dcc::before,
.org-tree ul.ul-dcc>li::after,
.org-tree ul.ul-ddgs>li::before,
.org-tree ul.ul-ddgs::before,
.org-tree ul.ul-ddgs>li::after,
.org-tree ul.ul-dggp>li::before,
.org-tree ul.ul-dggp::before,
.org-tree ul.ul-dggp>li::after,
.org-tree ul.ul-dc>li::before,
.org-tree ul.ul-dc::before,
.org-tree ul.ul-dc>li::after,
.org-tree ul.ul-dgp>li::before,
.org-tree ul.ul-dgp::before,
.org-tree ul.ul-dgp>li::after,
.org-tree ul.ul-dcpp>li::before,
.org-tree ul.ul-dcpp::before,
.org-tree ul.ul-dcpp>li::after,
.org-tree ul.ul-disi>li::before,
.org-tree ul.ul-disi::before,
.org-tree ul.ul-disi>li::after,
.org-tree ul.ul-cg::before {
    content: '';
    position: absolute;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    border: none;
    border-radius: 0;
    width: auto;
    height: auto;
}


.org-tree li::before,
.org-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid var(--color-border);
    width: 73%;
    height: 20px;
}

.org-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--color-border);
}

.org-tree li:only-child::after,
.org-tree li:only-child::before {
    display: none;
}

.org-tree li:first-child::before,
.org-tree li:last-child::after {
    border: 0 none;
}

.org-tree li:last-child::before {
    border-right: 2px solid var(--color-border);
}

.org-tree ul ul::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    border-left: 2px solid var(--color-border);
    width: 0;
    height: 36px;
    transform: translateX(-50%);
}


.org-tree .horizontal-overlay.ul-dmst::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -16px;
    width: calc(28% - 20px);
    height: 272px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dmst>li::after {
    top: 50%;
    left: -14px;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree ul.ul-dmp::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -15px;
    width: 12px;
    height: 351px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dmp>li::after {
    top: 50%;
    left: -15px;
    width: 22px;
    border-top: 2px solid var(--color-border);
}

.org-tree ul.ul-dcc::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -15px;
    width: 32px;
    height: 75px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dcc>li::before {
    top: 0;
    bottom: -10px;
    left: -15px;
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dcc>li:last-child::before {
    bottom: 50%;
}

.org-tree ul.ul-dcc>li::after {
    top: 50%;
    left: -15px;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-ddgs::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -14px;
    width: calc(25% - 20px);
    height: 272px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-ddgs>li::after {
    top: 50%;
    left: -13px;
    width: 18px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-dggp::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -25px;
    width: 8px;
    height: 272px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dggp>li::after {
    top: 50%;
    left: -24px;
    width: 29px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-dc::after {
    content: '';
    position: absolute;
    top: -50px;
    left: -23px;
    width: 10px;
    height: 210px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dc>li::after {
    top: 50%;
    left: -21px;
    width: 26px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-dcpp::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -16px;
    width: calc(28% - 20px);
    height: 260px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dcpp>li::after {
    top: 50%;
    left: -14px;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-dgp::after {
    content: '';
    position: absolute;
    top: -65px;
    left: -16px;
    width: calc(28% - 20px);
    height: 284px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}

.org-tree ul.ul-dgp>li::after {
    top: 50%;
    left: -14px;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree ul.ul-disi::after {
    content: '';
    position: absolute;
    top: -65px;
    left: 12px;
    width: 20px;
    height: 335px;
    border-top: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}


.org-tree ul.ul-disi>li::after {
    top: 50%;
    left: 15px;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree .horizontal-overlay.ul-da>li::before {
    left: -34%;
}

.org-tree .horizontal-overlay.ul-da>li::after {
    left: 30%;
}

.org-tree .horizontal-overlay.ul-oa::before {
    height: 57px;
    top: -36px;
}

.org-tree .horizontal-overlay.ul-dtic::before {
    left: 405px;
}

.org-tree .horizontal-overlay.ul-dpof::before {
    left: 50px;
}

.org-tree .horizontal-overlay.ul-drh::before {
    left: 160px;
    top: -15px;
}

.org-tree ul.ul-da::before {
    height: 506px;
    top: -484px;
    left: 18px;
}

.org-tree .horizontal-overlay.ul-dea::before {
    left: 33px;
}

.org-tree ul.ul-oax::before {
    height: 375px;
    top: -354px;
}

.org-tree ul.ul-oaa::before {
    height: 264px;
    top: -15px;
}

.org-tree ul.ul-dg::before {
    left: 42%;
}

.org-tree ul.ul-dcl>li::after,
.org-tree ul.ul-dcl>li::before,
.org-tree ul.ul-dcl>li:last-child::after {
    border: none;
}

.org-tree ul.ul-dcl::before {
    left: 17%;
    height: 43px;
}

.org-tree ul.ul-dcl>li::after {
    top: 27%;
    left: 119px;
    width: 18px;
    border-top: 2px solid var(--color-border);
}


.org-tree ul.ul-level-1 {
    padding-top: 80px;
}

.org-tree ul.ul-level-1::before {
    height: 95px;
    left: 58%;
}

.org-tree ul.ul-level-1>li:nth-child(2)::before {
    border: 0 none;
}

.org-tree li.card-2 {
    position: absolute;
    top: 5px;
    left: 58%;
    padding: 0;
    margin-left: 20px;
    z-index: 10;
}

.org-tree li.card-2::before,
.org-tree li.card-2::after {
    display: none !important;
}

.org-tree li.card-2>.card::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 102%;
    width: 20px;
    border-top: 2px solid var(--color-border);
}

.org-tree li.card-3,
.org-tree li.card-4,
.org-tree li.card-5 {
    left: 13%;
}

.org-tree li.card-43 {
    position: absolute;
    left: 120%;
}

.org-tree .card.id-63 {
    margin-left: -53px;
}

.org-tree .card.id-100 {
    left: -97%;
    margin-left: -20px;
}
.org-tree li.card-42::after,
.org-tree li.card-42::before {
    border: none;
}


.org-tree li.card-43::before {
    border: none;
}

.org-tree li.card-100::after {
    border: none;
}

.org-tree li.card-100>.card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 102%;
    width: 64px;
    border-top: 2px solid var(--color-border);
}

.org-tree li.card-43>.card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -55%;
    width: 62px;
    border-top: 2px solid var(--color-border);
}

.org-tree li.card-63>.card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 101%;
    width: 30px;
    border-top: 2px solid var(--color-border);
}

.card {
    border: 2px solid var(--color-border-dark);
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-text);
    font-family: Arial, sans-serif;
    font-size: 13px;
    display: inline-block;
    border-radius: 5px;
    background-color: var(--color-bg-white);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    word-wrap: break-word;
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
}

.card:hover {
    background-color: var(--color-hover);
    transform: translateY(-5px);
}

.org-tree .horizontal-overlay.ul-dtic>li>div.card {
    background-color: var(--color-dept-dtic);
}

.org-tree .horizontal-overlay.ul-dpof>li>div.card {
    background-color: var(--color-dept-dpof);
}

.org-tree .horizontal-overlay.ul-drh>li>div.card {
    background-color: var(--color-dept-drh);
}

.org-tree .horizontal-overlay.ul-da>li>div.card {
    background-color: var(--color-dept-da);
}

.org-tree .horizontal-overlay.ul-oa>li>div.card {
    background-color: var(--color-dept-oa);
}

.org-tree .horizontal-overlay.ul-oaa>li>div.card {
    background-color: var(--color-card-orange);
}

.card.id-1 {
    border: 4px solid var(--color-border-dark);
}

.card.id-2 {
    background-color: var(--color-success);
    color: var(--color-bg-white);
}

.card.id-3,
.card.id-4,
.card.id-5,
.card.id-63 {
    background-color: var(--color-card-green-light);
}

.card.id-12,
.card.id-16 {
    background-color: var(--color-card-green-medium);
}

.card.id-15 {
    background-color: var(--color-card-green-highlight);
}

.card.id-25,
.card.id-26,
.card.id-27,
.card.id-28,
.card.id-29 {
    background-color: var(--color-card-green-aqua);
}

.card.id-7,
.card.id-8,
.card.id-9,
.card.id-10,
.card.id-11,
.card.id-13,
.card.id-14,
.card.id-82,
.card.id-83,
.card.id-84 {
    background-color: var(--color-card-green-mint);
}

.card.id-6 {
    background-color: var(--color-card-yellow);
}

.card.id-22,
.card.id-23,
.card.id-24,
.card.id-89,
.card.id-90 {
    background-color: var(--color-card-yellow-light);
}

.card.id-44 {
    background-color: var(--color-card-yellow-soft);
}

.card.id-35,
.card.id-36,
.card.id-38,
.card.id-39,
.card.id-40,
.card.id-41 {
    background-color: var(--color-card-cyan-light);
}

.card.id-30,
.card.id-31,
.card.id-32,
.card.id-33,
.card.id-34,
.card.id-37,
.card.id-81 {
    background-color: var(--color-card-cyan);
}

.card.id-61,
.card.id-62,
.card.id-64,
.card.id-92,
.card.id-93,
.card.id-96,
.card.id-97,
.card.id-98,
.card.id-99 {
    background-color: var(--color-card-blue-light);
}

.card.id-47 {
    background-color: var(--color-card-blue);
}

.card.id-42,
.card.id-43 {
    left: -54%;
}

.card.id-65,
.card.id-66,
.card.id-67,
.card.id-87 {
    background-color: var(--color-card-pink);
}

.card.id-71,
.card.id-72,
.card.id-73,
.card.id-74,
.card.id-75,
.card.id-76,
.card.id-77,
.card.id-78,
.card.id-79,
.card.id-80,
.card.id-86 {
    background-color: var(--color-card-beige);
}

.card.id-68,
.card.id-69,
.card.id-70,
.card.id-88 {
    background-color: var(--color-card-lilac);
}

.card.id-45 {
    background-color: var(--color-card-red);
}

.card.id-46 {
    background-color: var(--color-card-purple);
}


.org-painel {
    display: none;
}

.org-painel.active {
    position: fixed;
    top: 40px;
    right: 300px;
    width: 380px;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-bg-white);
    box-shadow: -4px 15px 15px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    cursor: grab;
    padding: 20px;
    box-sizing: border-box;
}

.close-painel {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    background-color: var(--color-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 300;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    transition: 0.3s ease;
    color: var(--color-text-light);
    border: none;
    cursor: pointer;
}

.close-painel:hover {
    background-color: var(--color-danger);
    border: 2px solid var(--color-danger);
    color: var(--color-bg-white);
}

.org-painel-content {
    margin-top: 2.30rem;
    text-align: center;
}

.org-painel-nome {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin: 10px;
}

.org-painel-diretor {
    font-weight: bold;
    padding-top: 10px;
}

.org-painel-descricao {
    font-size: 12px;
    margin-top: 1rem;
    text-align: justify;
    text-indent: 30px;
    padding: 15px;
}

.organograma-ui {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

.organograma-button{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.organograma-info-left {
    display: flex;
    justify-content: flex-start;
}

.container-norma {
    display: flex;
    align-items: center;
    width: fit-content;
    min-width: 130px;
    border: 1px solid var(--color-border-medium);
    padding: 5px 10px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: bold;
    margin-left: auto;
    font-size: 8px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    margin-top: 0 !important;
}

.container-norma:hover {
    background-color: var(--color-card-dark-green);
    color: var(--color-bg-white);
    border-color: var(--color-bg-white);
}

.container-date {
    width: 100%;
    text-align: left;
    margin-top: 5px;
    margin-top: 0 !important;
}

.container-date>p {
    display: inline-block;
    padding: 3px 8px;
    margin: 0;
    font-size: 0.65rem !important;
    color: var(--color-text-light);
    font-weight: 500;
}

.container-date>p>span {
    font-weight: 700;
    color: var(--color-text-medium);
}

@media (max-width: 750px) {
    .org-painel.active {
        position: fixed;
        right: 50px;
        width: 80%;
        height: auto;
    }
}