.light-theme {
    --color-font-default:                           #333333;
    --color-font-reverted:                          #FFFFFF;

    --color-font-fixed:                             #333333;

    --color-border-list:                        #E6E6E6;
    --color-background-list:                    #FFFFFF;

    --color-background-status-dot-valid:             #73ff73;
    --color-background-status-dot-invalid:           #fd6969;

    --color-background-list-edit:                        #FFFFFF;


    --list-hover-color:                             #dadada88;
    --list-selected-color:                          #efefef88;

    /* --color-background-status-new:                   #73ff73; */

    --color-background-header:                          #f6f6f6;
    --color-header-tools-line-divider:                      #333333;
    --color-border-search:                          #333333;

    /* --color-icon-default:                           hsl(0, 0%, 20%); */

    --color-font-public:                            #007313;
    --color-font-private:                           #990000;

    --color-shadow:                                 #9e9e9e;

    --color-modified:                               #d9d751;

}

.dark-theme {
    --color-font-default:                           #FFFFFF;
    --color-font-reverted:                          #333333;

    --color-font-fixed:                             #333333;

    --color-border-list:                        #205fa7;
    --color-background-list:                    #16304a;

    --color-background-status-dot-valid:             #64da64;
    --color-background-status-dot-invalid:           #cb5454;

    --color-background-list-edit:                        #16304a;


    --list-hover-color:                             #dadada88;
    --list-selected-color:                          #efefef88;



    --color-background-header:                          #19487D;
    --color-header-tools-line-divider:                      #333333;
    --color-border-search:                          #333333;
    
    /* --color-background-status-new:                   #73ff73; */

    /* --color-icon-default:                           hsl(0, 0%, 80%); */

    --color-font-public:                            #64DA64;
    --color-font-private:                           #FF9999;

    --color-shadow:                                 #0b1d2f;

    --color-modified:                               #747200;
}


.list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

    border: 1.5px solid var(--color-border-list);
    background-color: var(--color-background-list);
}

.list-header-tools {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

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

    padding: 15px;
}

.list-header-tools-line {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 10px;
    width: 100%;
    min-height: 30px;

    color: var(--color-font-default);
}

.list-header-tools-line--title {
    font-size: 14px;
    font-weight: 600;
}

.list-header-tools-line--center {
    justify-content: center;
}

.list-header-tools-line--left {
    justify-content: left;
    padding-left: 15px;
}

.list-header-tools-line--right {
    justify-content: right;
    padding-right: 15px;
}

.list-header-tools-line-divider {
    width: 0.5px;
    height: 67.5%;
    background-color: var(--color-header-tools-line-divider);
}

.list-border-bottom {
    border-bottom: 1.5px solid var(--color-border-list);
}

.list-body {
    height: 305px;
    overflow: auto;
    width: 100%;

    box-shadow: inset 0 1.5px 5px var(--color-shadow);
}

.list-body-row {
    display: flex;
    min-width: max-content;
}

.list-body-row--header {
    min-height: 40px;

    position: sticky;
    top: 0;
    z-index: 2;

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

.list-body-row--modified {
    background-color: var(--color-modified);
}

.list-body-row-cell {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 8px;

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

.list-body-row-cell--column {
    flex-direction: column !important;
    gap: 2.5px;
}

.list-body-row-cell--row {
    flex-direction: row !important;
    gap: 5px;
}

.list-body-row-cell--start {
    justify-content: start !important;
}

.list-icon {
    width: 25px;
    height: 25px;
}

.list-icon-animation:hover {
    cursor: pointer;

    transform: scale(1.1);
}

.list-icon-disabled {
    background: none !important;
    cursor: not-allowed;

    transform: scale(1);
}

.list-text {
    color: var(--color-font-default);
}

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

    gap: 2.5px;
}

.list-text-main {
    font-size: 12px;
    font-weight: 600;
    word-break: break-all;
}

.list-text-sub {
    font-size: 11.5px;
    font-weight: 500;
}

.list-text--public {
    color: var(--color-font-public)
}

.list-text--private {
    color: var(--color-font-private);
}

.list-search {
    text-align: left;
    width: 200px;
    height: 24px;

    border: 0px;

    border-bottom: 1px solid var(--color-border-search);
}

.list-select {
    width: 200px;
    height: 24px;

    border: 0px;

    border-bottom: 1px solid var(--color-border-search);
}

.list-input {
    text-align: center;
    width: 100%;
    height: 30px;
}

.list-status-dot-valid {
    width: 10px;
    height: 10px;

    border-radius: 20px;
    padding: 5px;
    background-color: var(--color-background-status-dot-valid);
}

.light-theme .list-status-dot-valid {
    color: var(--color-font-default);
}

.dark-theme .list-status-dot-valid {
    color: var(--color-font-reverted);
}

.list-status-dot-invalid {
    width: 10px;
    height: 10px;

    border-radius: 20px;
    padding: 5px;
    background-color: var(--color-background-status-dot-invalid);
}

.light-theme .list-status-dot-invalid {
    color: var(--color-font-default);
}

.dark-theme .list-status-dot-invalid {
    color: var(--color-font-reverted);
}

.keep-all {
    word-break: keep-all !important;
}

.break-all {
    word-break: break-all !important;
}

@media (max-width: 1490px) {
    .list {
        max-width: 1420px !important;
    }

    .list-header-tools {
        padding-left: unset !important;
        padding-right: unset !important;
    }

    .list-header-tools-line {
        flex-direction: column !important;
        height: unset !important;

        padding-left: unset !important;
        padding-right: unset !important;
    }

    .list-header-tools-line-divider {
        display: none !important;
    }

    .list-search {
        width: 100% !important;
        height: 40px !important;
    }

    
    .list-select {
        width: 100% !important;
        height: 40px !important;
    }
}

@media (max-width: 820px) {
    .list {
        max-width: 760px !important;
    }
}

@media (max-width: 608px) {
    .list {
        max-width: 548px !important;
    }
}

@media (max-width: 484px) {
    .list {
        max-width: 424px !important;
    }
}

@media (max-width: 390px) {
    .list {
        max-width: 330px !important;
    }
}

@media (max-width: 360px) {
    .list {
        max-width: 300px !important;
    }
}