.light-theme {
    --color-font:                                #333;
}

.dark-theme {
    --color-font:                                #FFF;
}


.article {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    /* flex:                                   1; */

    padding-top:                            30px;
    padding-bottom:                         30px;
    padding-left:                           80px;
    padding-right:                          30px;

    overflow: hidden;

    /* border: 0.5px solid red; */
}

.article--auth {
    min-height: unset;
}

.article--visible {
    display: unset !important;
}

.article--row {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            center;

    gap:                                    20px;

    /* background-color: red; */
}

.article--column {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    flex:                                   1;
    gap:                                    20px;

    /* background-color: red; */
}

.article-column {
    min-height:                             550px;


    display:                                flex;
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            center;

    gap:                                    12.5px;

    /* background-color: green; */
}

.article-column--center {
    justify-content:                        center;
}

.article-column-line {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            center;
}





.article-tools-list {
    flex:                                   auto;
    height:                                 250px;
}

.article-tools-list-table-head {
    /* display:                                flex;
    flex-direction:                         column; */
    /* justify-content:                        center;
    align-items:                            center; */
    height:                                 55px;

    background-color: var(--background-table-head);
}

.article-tools-list-table-head-row {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            center;

    /* background-color: blue; */
}

.article-tools-list-table-body-row {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            center;

    /* background-color: blue; */
}

.article-tools-list-table-head-row-column {
    display: flex;
    justify-content: center;
    align-items: center;

    height:                                 55px;

    /* background-color: green; */
}

.article-tools-list-table-head-row-column--small {
    width:                                 73px;

    /* background-color: green; */
}

.article-tools-list-table-head-row-column--small-medium {
    width:                                 150px;

    /* background-color: blue; */
}

.article-tools-list-table-head-row-column--medium {
    width:                                 190px;

    /* background-color: red; */
}

.article-tools-list-table-head-row-column--big {
    width:                                 250px;

    /* background-color: yellow; */
}

.article-tools-list-table-body-row-column {
    display: flex;
    justify-content: center;
    align-items: center;

    height:                                 45px;

    /* background-color: green; */
}

.article-tools-list-table-body-row-column--small {
    width:                                 73px;

    /* background-color: greenyellow; */
}

.article-tools-list-table-body-row-column--small-medium {
    width:                                 150px;

    /* background-color: darkblue; */
}

.article-tools-list-table-body-row-column--medium {
    width:                                 190px;

    /* background-color: darkred; */
}

.article-tools-list-table-body-row-column--big {
    width:                                 250px;

    /* background-color: darkorange; */
}



.article-tools-list--overflow-y-scroll {
    overflow-y:                             scroll;
}

.article-tools-list--overflow-x-hidden {
    overflow-x:                             hidden;
}





.article-arrow {
    width:                                  24px;
    height:                                 24px;

    position:                               relative;

    top:                                    42.5px;
    left:                                   -50px;
}

.article-content-block {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            start;
}

.article-content-block--top {
    margin-bottom: 5px;
}

.article-content-block--middle {
    margin-top: 5px;
    margin-bottom: 5px;
}

.article-content-block--bottom {
    margin-top: 5px;
}

.article-content-block--dev {

    border: 2px solid black;
    background-color: orange;
}


.article-header {
    display:                                flex;
    justify-content:                        space-between;
    align-items:                            center;
}


.article-header-menu {
    flex: 1;
    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    height: 50px;
    padding-left: 10px;
    padding-right: 10px;

    gap: 10px;

    /* background-color: green; */
}

.article-menu {
    /* min-height:                             700px; */

    display:                                flex;
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            center;

    gap:                                    12.5px;

    /* RETIRAR ################################# */
    /* border: 2px solid blue; */
}

.article-menu-group {
    width:                                  224px;
    min-height:                             100px;


    display:                                flex;
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            left;

    /* padding-top: 2.5px;
    padding-bottom: 2.5px; */

    padding-left: 5px;
    padding-right: 5px;

    /* border-bottom: 1px solid var(--background-line); */

    /* RETIRAR ################################# */
    /* border: 2px solid green; */
    /* background-color: green; */
}

.article-menu-group--row {
    flex-direction:                         row;
    justify-content:                        start;
    align-items:                            left;
}

.article-menu-group--center {
    justify-content:                        center;
    align-items:                            center;
}

.article-menu-group-profile {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    text-align: center;

    padding: 5px;

    /* background-color: red; */
}

.article-layout {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            start;

    /* min-height: 500px; */

    gap:                                    20px;

    margin-bottom: 75px;

    /* background-color: blue; */
}


.article-layout--left {
    flex-direction:                         column;
    justify-content:                        left;
}


.article-layout--document {
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            center;

    /* min-height: 460px; */
    margin-bottom: 0px;

    /* background-color: red; */
}

/* .article-layout--video {
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            center;

    min-height: 460px;
    margin-bottom: 0px;

    background-color: blue;
}

.article-layout--image {
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    min-height: 460px;
    margin-bottom: 0px;

    background-color: yellow;
}

.article-layout--file {
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    min-height: 460px;
    margin-bottom: 0px;

    background-color: pink;
} */

/*
.article-layout--top25 {
    flex-direction:                         column;
    justify-content:                        space-between;
    align-items:                            center;
    margin-top:                             25px;

    min-height: 450px;
}

.article-layout--top45 {
    flex-direction:                         column;
    justify-content:                        space-between;
    align-items:                            center;

    margin-top:                             45px;

    min-height: 450px;
}
*/

.article-description {
    word-break: break-word;
    word-wrap: break-word;
}

.article-content {
    width: 100%;
    /* padding-bottom: 100px; */

    /* width: 67vw; */
    /* min-height: 275px; */

    /* RETIRAR ################################# */
    /* border: 2px solid yellow; */
    /* background-color: red; */
}

.article-content--center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-content--row {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        space-between;
    align-items:                            center;
}

.article-content--column {
    flex: 1;

    display:                                flex;
    flex-direction:                         column;
    justify-content:                        left;
    align-items:                            left;

    gap:                                    12.5px;

    /* background-color: red; */
}

.article-content-group {
    min-height:                             100px;

    display:                                flex;
    flex-direction:                         column;
    gap:                                    2.5px;

    padding-left: 5px;
    padding-right: 5px;

    /* RETIRAR ################################# */
    /* border: 2px solid red; */
}

.article-content-group-block {
    min-height:                             100px;

    display:                                flex;
    flex-direction:                         column;
    gap:                                    2.5px;

    padding-left: 5px;
    padding-right: 5px;

    /* RETIRAR ################################# */
    /* border: 2px solid pink; */

}

.article-content-group-block-subject {
    min-height:                             40px;

    padding-top: 15px;
    /* margin-bottom: 15px; */

    display:                                flex;
    flex-direction:                         column;
    gap:                                    2.5px;

    /* RETIRAR ################################# */
    /* background-color: green; */
}

.article-content-group-block-subject-head {
    min-height:                             40px;

    display:                                flex;
    flex-direction:                         row;
    justify-content:                        space-between;
    align-items:                            center;

    /* RETIRAR ################################# */
    /* background-color: blue; */
}

.article-content-group-block-subject-body {
    display:                                flex;

    padding-top: 10px;
    padding-bottom: 10px;


    /* RETIRAR ################################# */
    /* background-color: red; */
}

.article-content-group-block-subject-body--column {
    flex-direction: column;

    gap:                                    10px;
}

.article-content-group-block-subject-body--row {
    flex-direction: row;  

    gap:                                    30px;
}

.article-content-group-block-subject-body-item {
    flex: 1;
    
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        space-around;
    align-items:                            left;

    padding-top: 7.5px;
    padding-bottom: 7.5px;

    /* RETIRAR ################################# */
    /* background-color: blue; */
}

.article-content-group-block-subject-body-item--row {
    flex-direction:                         row;
    gap: 10px;
}

.article-content-group-block-subject-body-item--column {
    flex-direction:                         column;
    gap: 10px;
}

.article-content-group-block-subject-body-item--left-center {
    justify-content:                        left;
    align-items:                            center;
}

.article-content-group-block-subject-body-item--right-center {
    justify-content:                        right;
    align-items:                            center;
}

.article-content-group-block-subject-body-item--center-end {
    justify-content:                        center;
    align-items:                            end;
}

.article-details {
    width: 100%;
    min-height: 100px;

    padding-top: 2.5px;
    padding-bottom: 2.5px;

    gap: 5px;
    background-color: red;
}


.article-content-group-item {
    display:                                flex;
    flex-direction:                         row;
    /* justify-content:                        center; */
    align-items:                            center;

    /* padding-left: 5px; */
    padding-top: 2.5px;
    padding-bottom: 2.5px;

    gap: 5px;

    /* background-color: red; */

    /* border: 2px solid red; */
}

.article-content-group-item-minH500 {
    min-height: 500px;
}

.article-content-group-item--row {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        center;
    align-items:                            center;

    /* background-color: red; */
}

.article-content-group-item--column  {
    flex-direction: column;
    justify-content: center;
}

.article-content-group-item--column-end {
    align-items: end;
}

.article-content-group-item--left {
    justify-content:                        left;
}

.article-content-group-item--gap0 {

    gap: 0px;

    /* background-color: red; */
}

.article-content-group-item--confirmation-pass {
    background-color: #efefef;
}

.article-content-group-item--right {
    justify-content:                        right;
}

.article-content-group-item-column {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    gap: 10px;

    /* background-color: green; */

}


.article-content--file {
    width: 100%;
    word-spacing: 5px;
}


.article-content-header {
    height:                                 40px;

    display:                                flex;
    justify-content:                        space-between;
    align-items:                            start;

    gap:                                    5px;

    /* background-color: red; */
}


.article-content-header--left {
    justify-content:                        left;
    text-align:                             center;
    align-items: center;
}


.article-content-header-div {
    /* flex: 1; */
    /* width:                                  100% !important; */
    /* height:                                 100% !important; */
    display:                                flex;
    justify-content:                        center;
    position: relative;

    /* background-color: yellow; */
}

.article-content-header-div--flex {
    flex: 1;
}


.article-content-header-div--column {
    flex-direction: column;
}

.article-content-header-div--center {
    align-items:                            center;
}

.article-content-header-div--end {
    align-items:                            end;
}


.article-content-div {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        start;
    align-items:                            left;

    width:                                  45.5%;
    height:                                 375px;

    gap:                                    10px;

    /* background-color:                       green; */
}

.article-content-header-div-docs-display {
    display:                                flex;
    justify-content:                        space-between;
    align-items:                            center;

    width:                                  210px;
    height:                                 25px;

    background-color:                       var(--background-article-subtitle);

    padding:                                7.5px;
}

.article-content-header-div-docs-display-subtitle {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    flex: 1;
    /* min-width:                               185px; */
    height:                                 25px;

    font-size:                              17px;
    font-weight:                            bold;

    color:                                  var(--fontcolor-article-subtitle);

}

.article-content-header-div-docs-display-subtitle--selected {
    padding-left:                           25px;
}


.article-content-header-div-docs-display-subtitle--private {
    color:                                  var(--fontcolor-article-subtitle-private);
}

.article-content-header-preferences {


    min-width:                              30px;
    height:                                 40px;

    position: relative;


    /* padding:                           7.5px; */
}

.article-content-header-preferences-button {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    cursor: pointer;
    border: 0px;
    border-radius: 0px;
    user-select: none;

    gap:                                    7.5px;
    padding:                                8px;

    background-color: var(--background-article-subtitle);
}

.article-content-header-preferences-title {
    flex: 1;

    font-size:                              17px;
    font-weight:                            bold;

    /* margin-right: 37.5px; */
    margin-right: 30px;

    color:                                  var(--fontcolor-article-subtitle);
}


.article-content-header-preferences-window {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 15px;

    width: 230px;
    /* min-height: 200px; */

    padding: 7.5px;

    position:absolute;

    z-index: 9996;

    background-color: var(--background-article-subtitle);
}

.article-content-header-preferences-window-item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    width: 100%;

    /* background-color: green; */
}

.article-content-header-preferences-window-item-label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 25px;

    font-size:                              12.5px !important;
    font-weight:                            bold;
    color:                                  var(--fontcolor-article-subtitle);

    /* background-color: yellow; */
}


/* .article */

.article-content-header-div-docs-display-arrow {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;
        
    border: 0;
    background-color:                       var(--background-article-subtitle);
    cursor:                                 pointer;
}

.article-content-header-div-docs-selector {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position:absolute;

    z-index: 9996;
    /* margin-top: 218.5px; */

    /* width: 225px; */

    background-color:                       var(--background-article-subtitle);
}


.article-content-header-div-docs-selector-item {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    width:                                  140px;
    height:                                 40px;

    font-size:                              17px;
    font-weight:                            bold;

    color:                                  var(--fontcolor-article-subtitle);

    padding-left:                           42.5px;
    padding-right:                          42.5px;

    cursor:                                 pointer;
}

.article-content-header-div-docs-selector-item--private {
    color:                                  var(--fontcolor-article-subtitle-private);
}

.article-content-header-div-docs-selector-item:hover {
    background-color:                       var(--background-article-dropdown-item-hover);
}


.article-content-div-line {
    display: flex;
    flex-direction: line;
    justify-content: left;
    align-items: center;

    /* max-width: 420.5px; */

    /* background-color: green; */
}

.article-content-div--preview {
    justify-content: center;
    align-items: center;


    /* width: 54%; */
    width: 556px;
    /* height: 375px; */

    background-color: #f3f3f3;
}

.article-content-div--file-preview {
    justify-content: center;
    align-items: center;

    width: 556px;

    /* overflow-y: scroll;
    overflow-x: hidden; */

    background-color: #f3f3f3;
}



.article-content-footer {
    display:                                flex;
    justify-content:                        right;
    align-items:                            center;

    gap:                                    20px;
}



.article-title {
    font-family:                            "Gabarito", sans-serif;

    font-size:                              30px;
    font-weight:                            bold;
}

.article-content-title {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    width:                                  fit-content;
    min-width:                              350px;

    font-size:                              25px;
    font-weight:                            bold;

    background-color:                       var(--background-article-title);
    color:                                  var(--fontcolor-article-title);

    padding-left:                           15px;
    padding-right:                          15px;
    box-sizing:                             border-box;
    /* margin-top:                             7.5px;
    margin-bottom:                          7.5px; */

    height:                                 50px;

    /* border-left: 15px solid var(--background-article-title);
    border-right: 15px solid var(--background-article-title); */
}

.light-theme .article-content-title--public {
    color: #333;
}

.dark-theme .article-content-title--public {
    color: #6699FF;
}

.light-theme .article-content-title--private {
    color: #990000;
}

.dark-theme .article-content-title--private {
    color: #FF9999;
}


.article-content-subtitle {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    width:                                  fit-content;
    min-width:                              200px;

    font-size:                              17px;
    font-weight:                            bold;

    background-color:                       var(--background-article-subtitle);
    color:                                  var(--fontcolor-article-subtitle);

    padding-left:                           15px;
    padding-right:                          15px;


    height:                                 40px;
}

.article-text {
    font-size:                              15.5px;

    color:                                  var(--color-font);

    /* background-color: red; */
}

.article-text--username {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    width:                                  257.5px;
    height:                                 30px;

    padding-left:                           10px;
    padding-right:                          10px;

    /* font-weight: 600; */
}

.article-text--pass {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    width:                                  257.5px;
    height:                                 30px;

    padding-left:                           10px;
    padding-right:                          10px;

    /* font-weight: 600; */
}

.article-text--item {
    font-weight: 600;

    /* background-color: red; */
}

.article-text--checklist {
    height:                                 30px;

    font-size:                              16px;

    color:                                  var(--fontcolor-default);

    /* background-color: yellow; */
}

.article-text--100x30 {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;
    text-align:                             center;

    width:                                  100px;
    height:                                 33px;
}

.article-text--300x60 {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;
    text-align:                             center;

    width:                                  300px;
    height:                                 63px;

    gap:                                    10px;
}

.article-text--left {
    justify-content:                        left;
}

.article-emphasized {
    font-family:                            "Gabarito", sans-serif;
    font-weight:                            600;

    color:                                  var(--fontcolor-article-emphasized);
}

.article-bold {
    font-weight:                            bold;
    color: var(--fontcolor-default);
}

.article-list {
    display:                                flex;
    flex-direction:                         column;
}

.wiki-item {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    gap: 10px;

    height: 30px;

    margin-left: 0px !important;
}

.article-link {
    text-decoration:                        none;
    color:                                  var(--fontcolor-article-link);
    cursor: pointer;
}

.light-theme .article-link--public {
  color: #175796;
}

.dark-theme .article-link--public {
  color: #6699FF;
}

.light-theme .article-link--private {
  color: #990000;
}

.dark-theme .article-link--private {
  color: #FF9999;
}

.article-link--row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    /* color: blue !important; */
}

.article-link--column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: start !important;

    gap: 15px;

    width: 90%;
    /* padding-left: 10px !important; */
    min-height: 40px;

    box-sizing: border-box;
    word-break: break-all;
    word-wrap: break-word;

    overflow: hidden;



    /* color: blue !important; */

    /* background-color: pink; */

}



.article-create-line {
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        space-between;
    align-items:                            center;

    height: 70px;

    /* width: 68.5vw; */

    /* background-color:                       red; */
}

.article-create-line--left {
    justify-content:                        left;
    align-items:                            center;

    gap: 6.5px;
}

.article-create-line-div {
    position:                               relative;
    display:                                flex;
    flex-direction:                         row;
    justify-content:                        left;
    align-items:                            center;

    /* gap:                                    15px; */

    /* background-color:                       blue; */
}

.article-input {
    padding-left:                           10px;
    padding-right:                          10px;

    border:                                 0;

    height:                                 30px;

    color:                                  var(--fontcolor-input);
    border:                                 2px solid var(--bordercolor-input);
}

.article-input--correct {
    background-color: var(--background-input-correct) !important;
    border:                                 2px solid var(--bordercolor-input-correct);
}


.article-input--wrong {
    background-color: var(--background-input-wrong) !important;
    border:                                 2px solid var(--bordercolor-input-wrong);
}


.article-input::placeholder {
    font-size:                              10px;

    color:                                  var(--fontcolor-input-placeholder);
}

.article-input-preview {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    /* object-fit: ; */

    width:                                  423.5px;
    height:                                 250px;

    /* gap:                                    10px; */

    background-color: var(--background-body);
}

.article-input-preview-img {
    display:                                flex;
    flex-direction:                         column;
    justify-content:                        center;
    align-items:                            center;

    width:                                  423.5px;
    height:                                 250px;

    object-fit:                             contain;

    background-color: var(--background-body);
}

.article-input-preview--show-video {
    width:                                  625px;
    height:                                 400px;

    background-color:                       black;
    border-right:                           1px solid black;
}

.article-input-preview--show-image {
    width:                                  625px;
    height:                                 400px;
}

.article-input-preview--show-file {
    gap:                                    10px;

    width:                                  625px;
    height:                                 400px;
}

.article-input-preview--show-infos {
    gap:                                    10px;

    width:                                  625px;
    height:                                 120px;

    background-color: var(--background-body);

    /* background-color: red; */
}

.article-input-preview-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width:                                  100%;
    height:                                 30px;
    /* gap: 20px; */

    /* background-color: green; */
}

.article-input-preview-line--center {
    justify-content: center;
}


.article-input-preview-line-label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width:                                  45%;
    height:                                 30px;

    color:                                  var(--fontcolor-article-text);

    /* background-color: pink; */
}

.article-input-preview-line-value {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width:                                  45%;
    height:                                 30px;
}

.article-input-preview-line-value--max {
    width: 100%;
}

/* .article-input-preview--show-external-video {
    width:                                  650px;
    height:                                 425px;
} */

/* .article-content-img {
    width: 556px;
    height: 375px;
}

.article-content-img--low-preview {
    object-fit: contain;
    position: absolute;

    z-index: 9997;
}

.article-content-img--high-preview {
    object-fit: contain;
} */

.article-input-selector-div {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;

    /* background-color: red; */
}

.article-input-selector-header {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;

    width: 100%;
    height: 36.9px;

    font-size: 12.5px;
    font-weight: bold;
    font-style: normal;

    color: var(--fontcolor-default);
    border: 1px solid var(--background-selector-head);
}

.article-input-selector-header-line {
    width: 1px;
    height: 21.3px;

    margin-left: 2.5px;
    margin-right: 2.5px;

    background-color: var(--background-selector-head);

}

.article-input--selector-search {
    width: 35%;
    height: 25.3px;
    
    margin-left: 2.5px;
    margin-right: 2.5px;
    border: 0px;

    color: var(--fontcolor-default);
    /* background-color: #ebebeb; */
    /* box-shadow: inset 2px 3px 5px rgb(214, 214, 214); */
}

/* .article-input--selector-search:focus {
    outline: none;
} */

.article-input--selector-select {
    width: 17.5%;
    height: 25.3px;
    
    margin-left: 2.5px;
    margin-right: 2.5px;
    border: 0px;

    color: var(--fontcolor-default);
    /* background-color: #ebebeb; */
    /* box-shadow: inset 2px 3px 5px rgb(214, 214, 214); */
}

.article-input--selector-select:focus {
    outline: none;
}

/* .article-input-selector-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 40px;

    font-size: 12.5px;
    font-weight: bold;
    font-style: normal;

    color: var(--fontcolor-default);
    background-color: var(--background-selector-head);
} */

.article-input-selector-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width:                                  100%;
    height:                                 200px;

    /* color: var(--fontcolor-default); */
    /* background-color: var(--background-selector-head); */
    border-bottom: 1px solid var(--background-selector-head);
    border-left: 1px solid var(--background-selector-head);
    border-right: 1px solid var(--background-selector-head);
    /* border: 2px solid var(--bordercolor-input); */

    /* background-color: var(--background-selector-head); */
}


.article-input-selector-body-content {
    overflow-y:                             auto;
    overflow-x:                             hidden;

    width:                                  100%;
    height:                                 200px;

    /* gap: 20px; */

    /* margin-left: 2.5px;
    margin-right: 2.5px; */
    
    z-index:                                9995;

    /* background-color:                       var(--background-select); */
    /* background-color:                       red; */
}


.article-input-selector-item {
    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    width:                                  100%;
    height:                                 30px !important;

    margin-bottom:                          2.5px;

    gap: 20px;

    padding-left:                           10px;
    padding-right:                          10px;

    cursor:                                 pointer;

    /* background-color:                       var(--selector-item); */
}

/* .article-input-selector-item:hover {
    background-color:                       var(--selector-item-hover);
}

.article-input-selector-item--selected {
    background-color:                       var(--selector-item-selected);
} */

.article-input-selector-item:hover {

    /* color: var(--fontcolor-reverted); */
    color: var(--fontcolor-reverted);
    background-color: var(--background-selector-option-hover);
}

.article-input-selector-item--selected {

    color: var(--fontcolor-default);
    background-color:                                           var(--background-button-auth);
}



.article-input-selector-item-cell {
    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    font-size: 12.5px;

    white-space: pre;

    /* height: 35px; */


    /* background-color: pink; */
}

.article-input-selector-item-cell--cnt {
    justify-content:                        center;

    width: 10%;
    height: 25px;

    margin-right: 20px;

    border-radius: 50px;

    /* margin-left: 10px; */

    color: var(--fontcolor-reverted);
    background-color: var( --background-cell-counter);
}

.article-input-selector-item-cell--dept {
    width: 15%;

    /* margin-left: 10px; */
}

.article-input-selector-item-cell--role {
    width: 15%;

    /* margin-left: 10px; */
}

.article-input-selector-item-cell--id {
    width: 12.5%;

    /* margin-left: 10px; */
}

.article-input-selector-item-cell--name {
    /* justify-content:                        center; */
    /* width: 55%; */

    /* margin-left: 10px; */
}

.article-input-selector-item-value {
    display:                                flex;
    justify-content:                        left;
    align-items:                            center;

    width: 95.5px;
    height: 35px;

    /* background-color: pink; */
}

.article-input-selector-item-name {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    width: 295.5px;
    height: 35px;

    /* background-color: yellow; */
}

.hidden-by-dept {
    display: none !important;
}

/* .article-input-selector {
    position:                               absolute;
    width:                                  400px;
    height:                                 36px;

    top:                                    0;
    right:                                  0;
    z-index:                                600;

    cursor:                                 pointer;
} */

.article-input-btn {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;
    width:                                  42px !important;
    height:                                 42px !important;

    border-right:                           2px solid var(--bordercolor-input);
    border-top:                             2px solid var(--bordercolor-input);
    border-bottom:                          2px solid var(--bordercolor-input);

    background-color:                       var(--background-button-auth);
}

.article-input--w50 {
    width:                                  50px;
}

.article-input--w75 {
    width:                                  75px;
}

.article-input--w100 {
    width:                                  100px;
}

.article-input--w125 {
    width:                                  125px;
}

.article-input--w150 {
    width:                                  150px;
}

.article-input--w175 {
    width:                                  175px;
}

.article-input--w185 {
    width:                                  185px;
}

.article-input--w200{
    width:                                  200px;
}

.article-input--w225{
    width:                                  225px;
}

.article-input--w212{
    width:                                  212.5px;
}

.article-input--w250 {
    width:                                  250px;
}

.article-input--w400 {
    width:                                  400px;
}

/* .article-input--max {
    width:                                  100%;
} */


.article-input--h44 {
    height:                                 44px;
}

.article-input--select-w225 {
    width:                                  249.5px;
}


.article-input--select-w250 {
    width:                                  273.25px;
}

.article-input--select-w400 {
    width:                                  423.25px;
}

.article-input--select-h36 {
    height:                                 36px;
}

.article-input--search {
    height:                                 34.8px;

    width:                                  27vw;

    min-width:                              150px;
}

.article-input--order {
    height:                                 40px;

    width:                                  13vw;
    min-width:                              150px;


    color:                                  var(--fontcolor-input-order);
}

.article-input--username {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    width:                                  257.5px;
    height:                                 40px;
}

.article-input--pass {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    width:                                  215.5px;
    height:                                 40px;

    border-left:                            2px solid var(--bordercolor-input);
    border-right:                           0;
    border-top:                             2px solid var(--bordercolor-input);
    border-bottom:                          2px solid var(--bordercolor-input);
}

.article-input--margin-left-5 {
    margin-left: 5px;
}

.article-input--page {
    -moz-appearance:                        textfield;
    text-align:                             center;

    height:                                 34.8px;

    width:                                  7.5vw;
    min-width:                              100px;
}

.article-input--page::-webkit-inner-spin-button {
    -webkit-appearance:                     none;
    margin:                                 0;
}

.article-input--textarea {
    height:                                 274.5px;
    resize:                                 none;
}

.article-input--small {
    width:                                  30px;
}

.article-input--medium {
    width:                                  156.5px;
}


.article-input--big {
    width:                                  211.5px;
}

.article-input--xbig {
    width:                                  302px;
}

.article-input--content-xbig {
    width:                                  100%;
}

.article-input--select-big {
    width:                                  235px;
    height:                                 36px;
}

.article-input--select-sbig {
    width:                                  273px;
    height:                                 36px;
}

.article-input--disabled {
    background-color:                       var(--background-input-disabled);
    color:                                  var(--fontcolor-input);
    cursor:                                 not-allowed;
    opacity:                                0.7;
}


.article-input--disabled-green {
    background-color:                       var(--background-input-disabled-green);
    color:                                  var(--fontcolor-input-disabled);
    font-weight: 700;
    /* color:                                  var(--fontcolor-input); */
}

.article-input--disabled-yellow {
    background-color:                       var(--background-input-disabled-yellow);
    color:                                  var(--fontcolor-input-disabled);
    font-weight: 700;
    /* color:                                  var(--fontcolor-input); */
}

.article-input--disabled-red {
    background-color:                       var(--background-input-disabled-red);
    color:                                  var(--fontcolor-input-disabled);
    font-weight: 700;

    /* color:                                  var(--fontcolor-input); */
}

.article-input--file {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    cursor:                                 pointer;
    color:                                  var(--fontcolor-default);
    background-color:                       var(--background-input-file);
}

.article-input--file:hover {
    background-color:                       var(--hover-input-file);
}

.article-label {
    display:                                flex;
    align-items:                            center;
    height:                                 36.5px;

    font-size:                              14px;

    color:                                  var(--fontcolor-article-label);
}

.article-label--header-selector {
    display:                                flex;
    align-items:                            center;
    /* height:                                 36.5px; */

    margin-top: 1.5px;
    margin-left: 10px;
    margin-right: 5px;
    font-size:                              10px;

    color:                                  var(--fontcolor-article-label);
}

.article-button-image {
    width: 170px;
    height: 170px;

    border-radius: 50%;

    display:                                flex;
    justify-content:                        center;
    align-items:                            center;

    font-size:                              16px;

    color:                                  var(--fontcolor-default);

    transition:                             all 0.2s ease-in-out;
}

.article-button-image:hover {
    color:                                  var(--fontcolor-reverted);
}

.article-label--pointer {
    cursor:                                 pointer;
}

.article-label--block-title {
    font-size:                              15px;
    font-weight:                            600;

    padding-left:                           0px;
    padding-right:                          0px;
}

.article-label--subject-title {
    min-width:                              225px;

    font-size:                              13px;
    font-weight:                            600;

    padding-left:                           0px;
    padding-right:                          0px;

    /* RETIRAR ################################# */
    /* background-color: blue; */
}

.article-label--subject-display {
    min-width:                              100px;

    display:                                flex;
    justify-content:                        right;
    align-items:                            center;

    cursor:                                 pointer;

    /* RETIRAR ################################# */
    /* background-color: red; */
}

.article-label--tab-group-title {
    font-size:                              18px;
    font-weight:                            600;

    padding-left:                           0px;
    padding-right:                          0px;
}

.article-label--menu-group-title {
    font-size:                              13px;
    font-weight:                            600;

    padding-left:                           0px;
    padding-right:                          0px;
}

.article-label--info {
    font-size:                              13px;
    color:                                  var(--fontcolor-article-label-info);
}


.article-label--reducted {
    padding-left:                           0px;
    padding-right:                          0px;
}

.article-label--left {
    justify-content:                        left;
}

.article-label--right {
    justify-content:                        right;
}

.article-label--small {
    width:                                  77.5px;
    min-width:                              77.5px;
}

.article-label--big {
    width:                                  110px;
    min-width:                              110px;
}

.article-label--xbig {
    width:                                  140px;
    min-width:                              140px;
}

.article-label--xxbig {
    width:                                  225px;
    min-width:                              225px;

    /* background-color: red; */
}

.article-label--xxxbig {
    width:                                  230px;
    min-width:                              230px;
}








/* .article-select-button-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 32px;
    height: 33px;

    border-right:                                 2px solid var(--bordercolor-input);
    border-top:                                 2px solid var(--bordercolor-input);
    border-bottom:                                 2px solid var(--bordercolor-input);

} */

.article-password-checklist {
    position: absolute;
    padding: 10px;
    background: var(--background-checklist);
    box-shadow: 3px 3px 10px var(--shadow-checklist);

    border-radius: 0px 0px 10px 10px;

    pointer-events: none;
    transform: translateY(20px);
    transition: .5s ease;

    z-index:                                9998;
}


/* .article-newpassword-checklist {
    position: absolute;
    top: 319px;
    width: 252.5px;
    padding: 10px 10px;
    background: var(--background-checklist);
    box-shadow: 3px 3px 10px var(--shadow-checklist);

    border-radius: 0px 0px 10px 10px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: .5s ease;
} */

.article-password-list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.article-password-list-item {
    display: flex;
    justify-content: left;
    align-items: center;

    height: 30px;
    margin: 0;

    gap: 20px;


    color: var(--fontcolor-default);
    font-size: 13.5px;
}

.article-password-list-item::before{
    /*content: '\f00d';*/
    content: '\2610';
    /*font-family: 'Font Awesome 6 Free';*/
    /* font-family: 'FontAwesome';*/

    font-size: 12px;
}

.article-password-list-item.checked::before{
    content: '\2612';
    color: var(--fontcolor-checklist-checked);
}

#registerPass:focus ~ .article-password-checklist {
    opacity: 1;
    transform: translateY(0);
}

#toolsAccountSecurityNewPassword:focus ~ .article-newpassword-checklist {
    opacity: 1;
    transform: translateY(0);
}


.article-hidden {
    width: 165px;
    height: 165px;
    background-color: var(--background-avatar-icon);
    border-radius: 50%;

    /* padding: 5px; */
}

.article-hidden--icon {
    width: 45px;
    height: 45px;

    padding: 5px;

    border-radius: 0;

    /* background-color: var(--background-avatar-icon); */
}

.article-avatar {
    display: none;

    width: 165px;
    height: 165px;
    object-fit: cover;
    background-color: var(--background-avatar-icon);
    border-radius: 50%;
}

.article-avatar--icon {
    width: 45px;
    height: 45px;

    padding: 5px;

    border-radius: 0;

    /* background-color: var(--background-avatar-icon); */
}

/* .article-avatar--icon-light {
    width: 45px;
    height: 45px;


    border-radius: 0;
}

.article-avatar--icon-black {
    width: 45px;
    height: 45px;
    border-radius: 0;
} */


.article-content-empty {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;


  width: 100%;
  min-height: 515px;
}

.article-content-header-empty {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  min-height: 50px;

  gap: 5px;
}

.article-content-block-empty {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  flex: 1;
  min-height: 50px;

  box-sizing: border-box;

  position: relative;
}

.article-content-block-empty--right {
  justify-content: right !important;
}


.article-content-prebody-empty {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 100%;
  min-height: 400px !important;
}

.light-theme .article-content-prebody-empty {
  color: #333;
}

.dark-theme .article-content-prebody-empty {
  color: #FFF;
}

.article-content-footer-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  min-height: 50px;

  gap: 5px;
}

.article-content-block-text-empty {
  padding: 2px;
}

.article-avatar--perfil {
    display: flex;

    object-fit: cover;

    /* width: 200px;
    height: 200px; */

    /* background-color: #808080; */
}

.article-body {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100% !important;
    /* max-width: 1085px !important; */
    min-height: 465px;

    padding-top: 15px;
    padding-bottom: 15px;

    /* background-color: blue; */
}

.article-body-table {
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;

    /* gap: 5px !important; */

    /* width: 100% !important; */
    min-height: 420px !important;

    /* background-color: green; */
}

.article-body-table  tr {
    display: flex !important;

    flex: 1 !important;

    margin-bottom: 5px;
    max-height: 500px !important;

    /* background-color: blue !important; */
}

.article-body-table  td {
    padding: 0px !important;
    box-sizing: unset !important;
}

.article-body-table-td {
    /* flex: 1 !important; */

    padding-left: 0px !important;
    padding-right: 0px !important;
    /* padding-top: 8px !important;
    padding-bottom: 8px !important; */

    width: 100% !important;
    /* max-height: 50px !important; */

    /* background-color: red; */
}

.article-body-table-td-type {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-weight: 600;

    color: var(--fontcolor-article-link);
}

.article-body-table-td-type--private {
    color:                                  var(--fontcolor-article-link-private);
}

.article-body-table-td-title {
    
    color:                                  var(--fontcolor-article-link);
}

.article-body-table-td-title-visualizer {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    width: 100%;
    /* flex: 1 !important; */
    /* height: 35px; */
    /* margin-left: 10px; */

    /* padding-right: 1px; */
    padding-left: 2.5px;


    gap: 2.5px;

    color:                                  var(--fontcolor-article-link);

    /* background-color: orange; */
}

.article-body-table-td-title-visualizer--private {
    color:                                  var(--fontcolor-article-link-private);
}

.article-body-table-td-description {
    color:                                  var(--fontcolor-article-link);
}

/* .article-body-table-td-description--private {
    color:                                  var(--fontcolor-article-link-private);
} */




.article-body-table-td-description-visualizer {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    text-align: left;


    font-size: 11.5px;
    font-style: italic;
    color:                                  var(--fontcolor-article-link);

    padding-right: 5px;
    padding-left: 2.5px;

    box-sizing: border-box;
    word-break: break-word;
    word-wrap: break-word;
}

.article-body-table-td-description-visualizer--private {
    font-size: 13px;
    font-style: italic;
    color:                                  var(--fontcolor-article-link-private);
}



.article-body-table-li {
    display: flex;
    flex-direction: row;
    /* flex-direction: column; */
    justify-content: start;
    align-items: start; 

    /* width: 100%; */

    gap: 7.5px;

    margin: 0px !important;
    padding: 0px !important;
}

.article-body-table-li-gutter {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    width: 50px;
    min-height: 40px;

    /* background-color: green; */
}

.article-body-table-li-visualizer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center !important;
    text-align: center !important;

    gap: 20px;

    width: 100%;
    /* min-height: 40px; */

    /* background-color: blue; */
}

#articleDataTable_wrapper {
    flex: 1;
}

.article-body-loader {
    width: 50px; /* Largura do spinner */
    height: 50px; /* Altura do spinner */
    border: 6px solid var(--background-color-loader); /* Cor principal */
    border-top: 6px solid transparent; /* Cor para criar o efeito de rotação */
    border-radius: 50%; /* Torna o elemento circular */
    animation: spin 1s linear infinite; /* Animação contínua */
}

@keyframes spin{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.article-content-image {
    width: 650px;
    height: 405px;

    object-fit: contain;
}

.article-input-preview-file {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 40px;

    /* background-color: blue; */
}

.article-profile-text {
    display:                                flex;
    align-items:                            center;
    height:                                 25px;

    padding-left:                           7.5px;
    padding-right:                          7.5px;

    font-size:                              16px;
    font-weight:                            500;
    color:                                  var(--fontcolor-profile-text);

    /* background-color: red; */
}

.article-profile-text--display {
    flex: 1;
}

.article-profile-text--exp {
    height:                                 50px;
}

.article-profile-text--sup {

    justify-content:                        center;
    align-items:                            end;
    padding-bottom:                         5px;
    font-size:                              15px;
}

.article-profile-text--sub {
    font-size:                              14px;
    font-weight:                            400;
    color:                                  var(--fontcolor-profile-text-sub);
}

.article-editor {
    /* max-width: max-content; */

    /* background-color: green; */
}

.article-horizontal-line {
    flex: 1;
    min-height: 1.5px;
    background-color: var(--background-line);
}


.article-view-min {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 460px;

    gap: 10px;

    /* background-color: red; */
}



.article-font-dev {
    font-weight: bold;
    color: var(--fontcolor-dev) !important;
}

.article-brgd-dev {
    background-color: var(--brgdcolor-dev) !important;
}


.article-group {
    display: flex;
    flex-direction: column;
    justify-content: start;

    gap: 20px;

    width: 100%;
    min-height: 50px;

    /* background-color: pink; */
}

.article-row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    width: 100%;
    min-height: 50px;

    /* background-color: red; */
    /* border: solid 1px red; */
}

.article-row-label {
    width: 200px;
    font-size: 15px;
}

.light-theme .article-row-label {
    color: #333;
}

.dark-theme .article-row-label {
    color: #fff;
}

.article-row-input {
    flex: 1;
    height: 40px;
}

.article-row-input--wrong {
    background-color: rgb(233, 162, 162);
}

.article-row-select {
    flex: 1;
    height: 40px;
}


.article-row-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    object-fit: contain;

    flex: 1;
    max-height: 500px;

    background-color: #FFFFFF;
    border: 1.5px solid #E6E6E6;

    word-break: keep-all;
    word-wrap: break-word;
}

.article-row-iframe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    object-fit: contain;

    flex: 1;
    min-height: 500px;
    max-height: 500px;

    background-color: #FFFFFF;
    border: 1.5px solid #E6E6E6;

    word-break: keep-all;
    word-wrap: break-word;
}

.article-row-button {
    display:                                flex;
    justify-content:                        center;
    align-items:                            center;
    border: 0;
    text-decoration: none;
    flex: 1;
    height: 40px;
    cursor:                                 pointer;
    font-size:                                                  10.5px;
    font-weight:                                                600;
    transition:                                                 background-color 0.3s ease;
}

.light-theme .article-row-button {
    background-color: #E6E6E6;
    color: #333333;
}

.dark-theme .article-row-button {
    background-color: #333333;
    color: #FFFFFF;
}

.article-row-button--wrong {
    background-color: rgb(233, 162, 162) !important;
}


.light-theme .article-row-button:hover {
    background-color: #175796;
    color: #FFFFFF;
}

.dark-theme .article-row-button:hover {
    background-color: #19487D;
    color: #FFFFFF;
}


@media (max-width: 1490px) {
    .article {
        margin: 0px !important;
        padding-left: unset !important;
        padding-right: unset !important;

        margin-left: 20px !important;
        margin-right: 20px !important;

        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 2.5px !important;
    }

    .article--visible {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .article-home-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: left !important;
        align-items: left !important;
        width: 100% !important;
        height: 125px !important;
    }

    .article-home-header-logo {
        height: 125px !important;
    }

    .article-description {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .article-arrow {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        height: 50px !important;


        position: unset !important;

        top: unset !important;
        left: unset !important;
    }

    .article-header {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 75px !important;
        gap: 15px !important;
    }

    .article-content-title {
        text-align: center !important;
        width: 100% !important;
        padding-left: 2.5px !important;
        padding-right: 2.5px !important;
        margin: 0px !important;
        box-sizing: border-box !important;

        font-size: 16px !important;

        min-width: unset !important;
    }

    .article-body-table-td-type {
        font-size: 12.5px !important;
    }

    .article-body-table-li {
        gap: 0px !important;
    }

    .article-body-table-li-gutter {
        width: 30px !important;
    }

}