html {
    background-color: rgb(20, 73, 27);
}

.root {
    /** 
    * Es importante que cualquier color vaya indicado acá adentro si es un color de la paleta.
    * Esto no es joda. Poné acá los colores de la paleta. Si se van a agregar colores, mejor que sean variables acá.
    * La única excepción es un color que se use una sola vez.
    */

    --color-primary-background: #EABDA9;
    --color-primary-border: #CB5A29;
    --color-primary-text: #CB5A29;

    --color-secondary-background: #BFA9A0;
    --color-secondary-border: #6C4536;
    --color-secondary-text: #6C4536;

    --color-terciary-background: #8B9282;
    --color-terciary-border: #28301D;
    --color-terciary-text: #28301D;



    --color-success-background: #D0D8DE;
    --color-success-border: #0C2435;
    --color-success-text: #0C2435;

    --color-info-background: transparent;
    --color-info-border: #0C2435;
    --color-info-text: #0C2435;

    --color-warning-background: yellow;
    --color-warning-border: brown;
    --color-warning-text: brown;

    --color-danger-background: #ff5555;
    --color-danger-border: red;
    --color-danger-text: red;

    --hover-brightness: 0.8;


    --color-header-background: #D8DBD5;
    --color-header-text: #28301D;

    --color-footer-background: #D8DBD5;
    --color-footer-text: #28301D;

    --color-body-background: #FAF7F0;

    --font-color: #000;
    --sk-selection-color: #28301dbb;

    --title-font-color: #28301D;



    --table-background: #B1B6AB;
    --table-border-color: #000000b4;
    --table-th-background-color: #646D58;
    --table-pagination-background-color: #646D58;
    --table-pagination-border-color: #28301D;
    --table-pagination-text-color: #28301D;

    --color-chips-active-background: #F0D7A7;
    --color-chips-active-border: #28301D;
    --color-chips-active-text: #28301D;

    --color-chips-inactive-background: transparent;
    --color-chips-inactive-border: #28301D;
    --color-chips-inactive-text: #28301D;


    --input-label-color-background: transparent;
    --input-label-color-text: #000;

    --input-border-color: #dbdbdb;
    --input-text-color: #000;
    --input-background-color: #fff;

    --input-autofill: #eee;
    --input-autofill-color: #050505;



    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
        'DejaVu Sans Mono', monospace;
}

[data-theme="light"] {
    /** 
    * Es importante que cualquier color vaya indicado acá adentro si es un color de la paleta.
    * Esto no es joda. Poné acá los colores de la paleta. Si se van a agregar colores, mejor que sean variables acá.
    * La única excepción es un color que se use una sola vez.
    */

    --color-primary-background: #EABDA9;
    --color-primary-border: #CB5A29;
    --color-primary-text: #CB5A29;

    --color-secondary-background: #BFA9A0;
    --color-secondary-border: #6C4536;
    --color-secondary-text: #6C4536;

    --color-terciary-background: #8B9282;
    --color-terciary-border: #28301D;
    --color-terciary-text: #28301D;



    --color-success-background: #D0D8DE;
    --color-success-border: #0C2435;
    --color-success-text: #0C2435;

    --color-info-background: #c1f0e5;
    --color-info-border: #112e43;
    --color-info-text: #112e43;

    --color-warning-background: #e9e297;
    --color-warning-border: #a55c3f;
    --color-warning-text: #a55c3f;

    --color-danger-background: #ff5555;
    --color-danger-border: red;
    --color-danger-text: red;

    --hover-brightness: 0.5;


    --color-header-background: #D8DBD5;
    --color-header-text: #28301D;

    --color-footer-background: #D8DBD5;
    --color-footer-text: #28301D;

    --color-body-background: #FAF7F0;

    --font-color: #000;
    --sk-selection-color: #28301dbb;

    --title-font-color: #28301D;



    --table-background: #B1B6AB;
    --table-border-color: #000000b4;
    --table-th-background-color: #646D58;
    --table-pagination-background-color: #646D58;
    --table-pagination-border-color: #28301D;
    --table-pagination-text-color: #28301D;

    --color-chips-active-background: #F0D7A7;
    --color-chips-active-border: #28301D;
    --color-chips-active-text: #28301D;

    --color-chips-inactive-background: transparent;
    --color-chips-inactive-border: #28301D;
    --color-chips-inactive-text: #28301D;


    --status-success: #33be79;
    --status-warning: #ebdd85;
    --status-danger: #d83232;


    --logs-background-is-info: #d5f8ff;
    --logs-background-is-warning: #ffeecd;
    --logs-background-is-danger: #ffbfbf;

    --logs-color: #000000;


    --input-label-color-background: transparent;
    --input-label-color-text: #000;

    --input-border-color: #dbdbdb;
    --input-text-color: #000;
    --input-background-color: #fff;

    --input-autofill: #eee;
    --input-autofill-color: #050505;

    --input-date-background: #fff;
    --input-date-invert: 5%;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
        'DejaVu Sans Mono', monospace;
}

[data-theme="dark"] {
    --color-primary-background: #272826;
    --color-primary-border: #D86B3A;
    --color-primary-text: #D86B3A;

    --color-secondary-background: #272826;
    --color-secondary-border: #C19482;
    --color-secondary-text: #C19482;

    --color-terciary-background: #272826;
    --color-terciary-border: #7CB434;
    --color-terciary-text: #7CB434;



    --color-success-background: transparent;
    --color-success-border: #579bcf;
    --color-success-text: #579bcf;

    --color-info-background: transparent;
    --color-info-border: #C9E9FF;
    --color-info-text: #C9E9FF;

    --color-warning-background: transparent;
    --color-warning-border: #c4b835;
    --color-warning-text: #c4b835;

    --color-danger-background: transparent;
    --color-danger-border: #bc4848;
    --color-danger-text: #bc4848;

    --hover-brightness: 1.4;

    --color-header-background: #232520;
    --color-header-text: #FFF;

    --color-footer-background: #232520;
    --color-footer-text: #FFF;

    --color-body-background: #272826;

    --font-color: #FFF;
    --sk-selection-color: #FAF7F0bb;

    --title-font-color: #FAF7F0;



    --table-background: #303030;
    --table-border-color: #FFFFFFb4;
    --table-th-background-color: #213409; /**Mismo color para el pagination active*/
    --table-pagination-background-color: #303030;
    --table-pagination-border-color: #FFF;
    --table-pagination-text-color: #FFF;

    --color-chips-active-background: #374425;
    --color-chips-active-border: #FFFFFF;
    --color-chips-active-text: #FFFFFF;

    --color-chips-inactive-background: transparent;
    --color-chips-inactive-border: #FFFFFF;
    --color-chips-inactive-text: #FFFFFF;

    
    --status-success: #33be79;
    --status-warning: #ebdd85;
    --status-danger: #d83232;


    --logs-background-is-info: #033944;
    --logs-background-is-warning: #47460c;
    --logs-background-is-danger: #590f0f;

    --logs-color: #ffffff;


    --input-label-color-background: transparent;
    --input-label-color-text: #FFF;

    --input-border-color: #9d9d9d;
    --input-text-color: #FFF;
    --input-background-color: #151515;

    --input-autofill: #151515;
    --input-autofill-color: #9d9d9d;

    --input-date-background :#dedede;
    --input-date-invert: 100%;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
        'DejaVu Sans Mono', monospace;
}

body {
    background:	var(--color-body-background);
    color: var(--font-color);
    font-family: var(--font);

    background-color: var(--color-body-background);
    text-align: -webkit-center;
}

::selection {
    background: var(--sk-selection-color) !important;
    color: var(--color-body-background) !important;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, h1, h2, h3, h4, h5, h6 {
    color: var(--title-font-color);
}

.invisible {
    margin: 0px;
    padding: 0px;
    width: 0px;
    height: 0px;
    border: none;
    background: transparent;
    color: transparent;
}

.input {
    border: 1px solid var(--input-border-color);
    background: var(--input-background-color);
    color: var(--input-text-color);
}

.input:-webkit-autofill,input:-webkit-autofill {
    -webkit-text-fill-color: var(--input-text-color);
    -webkit-box-shadow: 0 0 0 1000px var(--input-autofill) inset;
}

select {
    background: var(--input-background-color);
    color: var(--input-text-color);
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border-color: var(--input-border-color);
    margin: -10px;
    font-size: 16px;
}

option {
    background: var(--input-background-color);
    color: var(--input-text-color);
    font-size: 15px;
    padding: 10px;
    margin: 5px 0px;
}

th>select {
    padding: 7px;
    margin: -1px;
}

.control>select {
    margin: 0px;
}

.dropdown.is-hoverable.input {
    margin-top: 0px;
    height: 34px;
    border-radius: 0px;
    border-right: 2px solid grey;
    border-bottom: 2px solid grey;
    border-top: 2px solid #222;
    border-left: 2px solid #222;
}

.dropdown.is-hoverable.input,
.dropdown-trigger.input {
    width: 100%;
}

.dropdown-trigger.input,
.dropdown-trigger.input>button {
    border: none;
    height: 30px;
}

.dropdown-trigger.input>button {
    height: inherit;
}

.dropdown-menu {
    z-index: 9999 !important;
}

.dropdown-menu>.dropdown-content {
    background: var(--input-background-color);
    color: var(--input-text-color);
}

input:-internal-autofill-selected {
    background: var(--color-header-background) !important;
}

.inputdate[type=date]{
    color: var(--input-text-color);
}

.inputdate::-webkit-calendar-picker-indicator,
.inputdate::-webkit-calendar-picker-indicator:hover,
.inputdate::-webkit-calendar-picker-indicator:active {
    filter: invert(var(--input-date-invert));
    border-radius: 30px;
    background-color: var(--input-date-background);
    border: 1px solid var(--input-date-background);
}

form>.table.display-table input {
    padding: 10px;
    width: 100%;
    margin: -10px;
    background: var(--input-background-color);
    color: var(--input-text-color);
}

::placeholder {
    color: var(--input-border-color) !important;
    opacity: 1 !important;
}

body>div.container {
    min-height: 1024px;
    max-width: 1440px !important;
    padding: 0px;
    margin: 0px;
    padding-bottom: 300px;
}

.container {
    padding: 10px;
    margin: 20px;
}

.navbar {
    background-color: var(--color-header-background);
    padding: 5px 30px;
    margin: 0px 0px 30px 0px;
}

.navbar>a,
.navbar>div,
.navbar>div>a,
.navbar>div>div,
.navbar>div>div>a {
    color: var(--color-header-text);
    padding: 10px 40px;
}

.navbar>a:hover,
.navbar>div:hover,
.navbar>div>a:hover,
.navbar>div>div:hover,
.navbar>div>div>a:hover,
.navbar>a:focus,
.navbar>div:focus,
.navbar>div>a:focus,
.navbar>div>div:focus,
.navbar>div>div>a:focus,
.navbar>a:focus-visible,
.navbar>div:focus-visible,
.navbar>div>a:focus-visible,
.navbar>div>div:focus-visible,
.navbar>div>div>a:focus-visible,
.navbar>a:focus-within,
.navbar>div>a:focus-within,
.navbar>div>div:focus-within,
.navbar>div>div>a:focus-within,
.navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link,
.navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    background-color: inherit;
}

.navbar-link:not(.is-arrowless)::after {
    border-color: #3D492E !important;
}

.footer {
    background-color: var(--color-footer-background);
    max-width: 1440px;
    padding: 30px;
    margin: auto;
    color: var(--color-footer-text);
}
.footer>div>p {
    text-align: right;
    margin-right: 50px;
}

.login-form {
    max-width: 500px !important;
}
.login-form>h3 {
    margin-bottom: 30px;
    font-size: 24px;
    color: var(--title-font-color);
} 
form label,
form>div>label{
    font-size: 12px !important;
    background-color: var(--color-body-background) !important;
    color: var(--input-label-color-text) !important;
    position: relative !important;
    padding: 0px 5px !important;
    top: 15px !important;
    z-index: 999 !important;
    display: block !important;
    float: left !important;
    margin-left: 7px !important;
}

form .button {
    margin-top: 30px;
}

.password-visible {
    background-color: transparent;
    border: none;
    z-index: 10;
}

.password-visible>span>i {
    color: #49454F;
}

/** 
*ARRANCAN LOS BOTONES*
*/

.buttons-row {
    text-align: end;
}

.main-buttons-row {
    text-align: center;
}

.kf-button {
    cursor: pointer;
    justify-content: center;
    margin: 20px 5px;
    padding-bottom: calc(0.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(0.5em - 1px);
    text-align: center;
    white-space: nowrap;
    min-width: 200px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
}

.kf-button:focus:not(:active), .kf-button.is-focused:not(:active) {
    box-shadow: 0px 3px var(--color-success-border);
    translate: -1px 1px;
}

.is-success {
    color: var(--color-success-text);
    background-color: var(--color-success-background);
    box-shadow: 0px 7px var(--color-success-border);
    border: 1px solid var(--color-success-border);
}

.is-success:hover,
.is-success:focus,
.is-success:target {
    color: var(--color-success-text);
    filter: brightness(var(--hover-brightness));
}

.is-info {
    color: var(--color-info-text);
    background-color: var(--color-info-background);
    box-shadow: 0px 7px var(--color-info-border);
    border: 1px solid var(--color-info-border);
}

.is-info:hover,
.is-info:focus,
.is-info:target {
    color: var(--color-info-text);
    filter: brightness(var(--hover-brightness));
}

.is-primary {
    color: var(--color-primary-text);
    background-color: var(--color-primary-background);
    box-shadow: 0px 7px var(--color-primary-border);
    border: 1px solid var(--color-primary-border);
}

.is-primary:hover,
.is-primary:focus,
.is-primary:target {
    color: var(--color-primary-text);
    filter: brightness(var(--hover-brightness));
}

.is-secondary {
    background-color: var(--color-secondary-background);
    box-shadow: 0px 7px var(--color-secondary-border);
    border: 1px solid var(--color-secondary-border);
}

.is-secondary:hover,
.is-secondary:focus,
.is-secondary:target {
    filter: brightness(var(--hover-brightness));
}

.is-terciary {
    color: var(--color-terciary-text);
    background-color: var(--color-terciary-background);
    box-shadow: 0px 7px var(--color-terciary-border);
    border: 1px solid var(--color-terciary-border);
}

.is-terciary:hover,
.is-terciary:focus,
.is-terciary:target {
    color: var(--color-terciary-text);
    filter: brightness(var(--hover-brightness));
}

.is-warning {
    color: var(--color-warning-text);
    background-color: var(--color-warning-background);
    box-shadow: 0px 7px var(--color-warning-border);
    border: 1px solid var(--color-warning-border);
}

.is-warning:hover,
.is-warning:focus,
.is-warning:target {
    color: var(--color-warning-text);
    filter: brightness(var(--hover-brightness));
}

.switch-theme {
    color: var(--color-terciary-text);
    background: var(--color-terciary-background);
    border: 1px solid var(--color-terciary-border);
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    padding: 1px;
    margin: 5px;
    border-radius: 16px;
}

.table {
    border: 1px solid var(--table-border-color);
    width: 100%;
}

.table>tbody>tr>td {
    background: var(--color-body-background);
    color: var(--input-text-color);
    border: 1px solid var(--table-border-color);
}

.table>thead, .table>thead>tr>th, .table>tbody>tr>th {
    color: var(--input-text-color);
    border-bottom: 2px solid var(--table-border-color);
    background: var(--table-th-background-color);
}

span.dt-column-title {
    color: var(--input-text-color);
}

.table>thead>tr>th>input {
    min-height: 34px;
    width: 100%;
    color: var(--input-text-color);
    background: var(--input-background-color);
}

.kf-table-background {
    background: var(--table-background);
    padding: 50px;
    margin: 0px;
    border-radius: 15px;
    border: none;
}

.table.display-table {
    width: 100%;
    border: none;
}

.table-transparent>tbody>tr>td {
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
}

.display-table>tbody>tr {
    border-bottom: solid 1px var(--table-border-color);
}
.display-table>tbody>tr>th,
.display-table>tbody>tr>td {
    background: var(--table-background);
    color: var(--input-text-color);
    border: none;
    padding: 15px;
}

div.pagination {
    display: inline-flex;
}
div.pagination>button {
    width: 40px;
    height: 40px;
    padding: 5px;
    margin: 5px 0px;
    font-size: 14px;
    cursor: pointer;
    color: var(--table-pagination-text-color);
    background: var(--table-pagination-background-color);
    border: 1px solid var(--table-pagination-border-color);
}


.title {
    margin: 0px 0px 30px 0px;
    text-align: left;
    font-size: 30px;
    font-weight: 500;
    color: var(--title-font-color);
}

.float-left {
    float: left;
}

.temporary-message.active {
    border-radius: 16px;
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    background: var(--color-success-background);
    padding: 7px;
    margin-top: -5px;
    font-size: 11px;
}

.breadcrumb a {
    color: var(--color-primary-text) !important;
}

.breadcrumb li.is-active a {
    color: var(--color-terciary-text) !important;
}

.kf-monitor-grid {
    display: flex;
    flex-wrap: wrap;
}

@keyframes superfocus {
    0% {filter: invert(10%) drop-shadow(0px 0px 1px black);}
    33% {filter: invert(22%) drop-shadow(0.5px -1px 2px black);}
    68% {filter: invert(34%) drop-shadow(1px -0.5px 2.5px black);}
    100% {filter: invert(50%) drop-shadow(1px 0px 3px black);}
}

@keyframes superfocus-inverse {
    0% {filter: invert(50%) drop-shadow(1px 0px 3px black);}
    33% {filter: invert(34%) drop-shadow(1px -0.5px 2.5px black);}
    68% {filter: invert(22%) drop-shadow(0.5px -1px 2px black);}
    100% {filter: invert(10%) drop-shadow(0px 0px 1px black);}
}

.kf-monitor {
    display: flex;
    flex-direction: column;
    width: 23%;
    border: 3px solid;
    border-radius: 15px;
    margin: 5px 14px;
    background: var(--color-body-background);
    animation-name: superfocus-inverse;
    animation-duration: 1s;
}

.kf-monitor>.kf-status {
    width: 35px;
    height: 30px;
    align-self: center;
    border-radius: 30px;
    border: 2px solid;
    border-color: inherit;
}

.kf-monitor>.kf-is-success {
    background: var(--status-success);
}
.kf-monitor>.kf-is-warning {
    background: var(--status-warning);
}
.kf-monitor>.kf-is-danger {
    background: var(--status-danger);
}
.kf-monitor>.kf-is-blocked {
    background: var(--color-body-background);
    filter: contrast(0.6);
    cursor: not-allowed;
}

.kf-monitor>h3{
    font-size: 20px;
    margin: 10px 5px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid;
}

.kf-monitor>h3>a {
    margin: 0px -10px 0px 0px;
}

.kf-monitor-buttons {
    display: flex;
    place-content: center;
    margin: 10px;
    border-top: 1px solid;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid;
}

.kf-monitor-buttons>a {
    margin: 5px;
    padding: 5px 15px;
    border-radius: 15px;
    color: inherit;
}

.is-yellow {
    background: #ffe08a;
}
.is-green {
    background: #48c78e;
}
.is-blue {
    background: #3e8ed0;
}

.kf-monitor-disk-space {
    align-self: center;
    border-bottom: 1px solid;
    padding: 0px 0px 5px 0px;
}

.kf-monitor-certs-date {
    align-self: center;
    padding: 5px 0px 5px 0px;
}

.kf-monitor-img {
    max-height: 50px !important;
    margin: 0px 0px 0px -50px;
    padding: 0px;
    max-width: 50px;
    animation-name: superfocus-inverse;
    animation-duration: 1s;
}

.kf-monitor-img:focus,
.kf-monitor-img:focus-within ,
.kf-monitor-img:hover,
.kf-monitor-img:active,
.kf-monitor-img:target {
    filter: invert(50%) drop-shadow(1px 0px 3px black);
    animation-name: superfocus;
    animation-duration: 1s;
}

.kf-notification {
    max-height: 1000px;
    overflow: auto;
    background: inherit;
}

.kf-notification>p{
    margin: 5px 0px;
    border: inset;
}

.kf-log-is-info {
    color: var(--logs-color);
    background-color: var(--logs-background-is-info);
}
.kf-log-is-error {
    color: var(--logs-color);
    background-color: var(--logs-background-is-danger);
}
.kf-log-is-warning {
    color: var(--logs-color);
    background-color: var(--logs-background-is-warning);
}

@media screen and (min-width: 2008px) {
    .kf-monitor {
        width: 10%;
    }

    body>div.container {
        max-width: 3200px !important;
    }
}