:root {
    --page-direction: column;
}

main {
    flex: 1;
}
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}
.ed2-simple-page {
    flex: 1;
    width: 100%;
    height: 100%;
}

.ed2-page-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.ed2-page-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.ed2-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 2px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.ed2-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
}
.ed2-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.ed2-treeview-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 80%;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 2px 2px 2px 2px;
    overflow: auto;
    background-color: whitesmoke;
}

.ed2-treeview {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 2px 2px 2px 2px;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0 3px 4px rgba(0,0,0,0.4);
    overflow: auto;
}
.ed2-treeview ul, li, a {
    padding: 1px;
    font-size: 14px;
    color: darkblue;
}

.ed2-treeview-node {
    display: flex;

}

    .ed2-treeview-node ul, li, a {
        padding: 0px 0px 0px 25px;
        font-size: 14px;
        color: darkblue;
    }

.ed2-treeview-card {
    display: flex;
    padding: 0px 0px 0px 5px;
    background-color: white;
    min-width: 150px;
}
    .ed2-treeview-card ul, li, a {
        padding: 0px 0px 0px 5px;
        font-size: 14px;
        color: darkblue;
    }

.ed2-treeview-footer {
    min-width: 150px;
}

.ed2-content {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    padding: 10px 10px 10px 10px;
}

.ed2-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: white;
    overflow: hidden;
    gap: 10px;
    margin: 2px 2px 2px 2px;
}

.ed2-design {
    flex: 1;
    width: 99%;
    height: 79%;
    background-color: white;
    border-radius: 5px;
    margin: 5px 5px 5px 5px;
}
.ed2-summary-container {
    display: flex;
    flex-direction: row;
    margin: 5px 5px 5px 5px;
    width: 100%;
    height: 100%;
}
.ed2-summary-graph {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 2px 2px 2px 2px;
}

.ed2-summary-table {
    display: flex;
    width: 100%;
    height: 100%;
}
.ed2-design-print {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 500px;
    page-break-after: always;
}
.ed2-design-container {
    display: flex;
    flex-direction: row;
}

.ed2-design-menu {
    display: flex;
    min-width: 500px;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    background-color: whitesmoke;
    border: 1px solid #ccc;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    gap: 5px;
    margin: auto;
}

.ed2-design-content {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0px 10px 0px 0px;
    padding: 10px;
}

.ed2-logo {
    display: flex;
    height: 50px;
    width: 50px;
    padding: 5px 5px 5px 5px;
}

    .ed2-logo img {
        border-radius: 50%;
        height: 40px;
        width: 40px;
    }


.ed2-status {
    display: flex;
    width: 100%;
    height: 30px;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: whitesmoke;
}
.ed2-table-row {
    display: flex;
    flex-direction: row;
}

    .ed2-table-row p {
        align-content: center;
        text-align: center;
        color: darkblue;
        font-size: 12px;
    }

.ed2-title {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 30px;
    width: 100%;
    align-content: center;
    text-align: center;
    gap: 5px;
    padding: 5px 5px 5px 5px;
    overflow: hidden;
}

    .ed2-title a {
        align-content: center;
        text-align: center;
        color: white;
    }
    .ed2-title p {
        align-content: center;
        text-align: center;
    
        color: black;
    }
    .ed2-title input {
        align-content: center;
        text-align: center;     
        display: flex;
    }

.ed2-title-menu {
    display: flex;
    flex-direction: row;
    width: 420px;
    align-content: flex-start;
    align-items: center;
    padding: 1px 1px 1px 1px;
    gap: 5px;
}

.ed2-title-design {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.ed2-title-end {
    display: flex;
    width: 300px;
    flex-direction: row;
    align-items: center;
}

    .ed2-title-end p {
        padding: 0px 0px 0px 0px;
        margin: auto;
        color: darkblue;
    }

.ed2-content-title {
    display: flex;
    min-width: 300px;
    width: 99%;
    height: 30px;
    border-radius: 5px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    page-break-after: avoid;
}
    .ed2-content-title p h1 h2 h3 a {
        text-align: center;
    }

.container-page {
    display: flex;
    padding: 0px;
    gap: 0px;
    border: 1px solid transparent;
    background-color: white;
}

.design-menu {
    display: flex;
    min-width: 500px;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    margin: auto;
    background-color: whitesmoke;
}

.section0 {
    display: flex;
    width: 100%;
    height: 100%;
}

.section1 {
    width: 25%;
    margin: initial;
    overflow: auto;
}

.section2 {
    width: 25%;
    margin: initial;
    overflow: auto;
}
.section3 {
    flex: 1;
    margin: initial;
    overflow: auto;
}

.grid-setup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 1150px;
    border: 1px solid transparent;
    background-color: whitesmoke;
}

.grid-parts {
    border-radius: 10px;
    gap: 20px;
    border: 1px solid transparent;
    background-color: whitesmoke;
    justify-content: start;
    overflow-x: scroll;
}

section {
    border: 1px solid #ccc;
}

.ed2-dialog-container {
    display: flex;
    height: 90vh;
    width: 90vw;
    min-width: 840px;
    min-height: 350px;
    border-radius: 10px;
    background-color: whitesmoke;
    border: 2px solid silver;
    margin: auto;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.ed2-dialog-multipart {
    display: flex;
    height: 90%;
    width: 90%;
    overflow: auto;
    border-radius: 10px;
    background-color: whitesmoke;
    border: 2px solid silver;
    margin: auto;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.part-card {
    display: grid;
    grid-template-columns: repeat(6, 10rem);
    grid-gap: 5px;
    position: relative;
}

    .part-card > li {
        position: relative;
        width: 150px;
        height: 150px;
        background-size: cover;
        border-radius: 0.5rem;
        justify-content: start;
        list-style-type: none;
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
        transition: 0.1s ease-out;
    }

        .part-card > li:hover {
            transform: scale(1.01);
        }

.part-card-info {
    border-radius: 0.5rem;
    width: 150px;
    height: 150px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0.7) 30%, rgba(0,0,0,0) 80%);
    padding: 1rem 1rem;
    color: #fff2cc;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
    line-height: 1.25rem;
}

    .part-card-info .title {
        color: white;
        font-size: 1.4rem;
        display: bgrid-containerlock;
        margin: 0.2rem 0 0.4rem 0;
        font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
    }

    .part-card-info .price {
        position: absolute;
        bottom: 0.5rem;
        right: 1rem;
        font-size: 1.5rem;
        font-weight: 700;
        padding: 0rem 0.7rem;
        border-radius: 4px;
        background-color: darkblue;
        color: white;
        line-height: 2rem;
    }


.ed2-system-info {
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 0px 10px 0px 1px;
    align-content:center;
}

    .ed2-system-info p {
        font-size: 12px;
        color: darkblue;
        padding: 4px 0px 0px 0px;
        height: 25px;
    }

    .ed2-system-info h4, h5, input {
        font-size: 16px;
        color: darkblue;
        margin: 0;
        font-weight: bold;
    }

.ed2-system-header-left {
    width: 150px;
    min-width: 150px;
    height: 120px;
    min-height: 120px;
    text-align: center;
    padding: 0px 10px 0px 2px;
}

.ed2-system-header-right {
    width: 150px;
    min-width: 150px;
    height: 120px;
    min-height: 120px;
    text-align: start;
    padding: 0px 2px 0px 10px;
}

.ed2-system-table-left {
    width: 148px;
    min-width: 150px;
    text-align: end;
    background-color: whitesmoke;
    padding: 0px 10px 0px 2px;
}

.ed2-system-table-right {
    width: 100px;
    min-width: 120px;
    text-align: center;
    background-color: whitesmoke;
    padding: 0px 0px 0px 0px;
}


.ed2-graph-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.ed2-graph-info {
    display: flex;
    flex-direction: column;
    width: 150px;
    min-width: 150px;
    height: 140px;
}
.ed2-graph-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2px 2px 2px 2px;
    overflow: auto;
}

.ed2-graph-container2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background-color: white;
    overflow: hidden;
}


.ed2-chart-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ed2-chart-menu {
    display: flex;
    flex-direction: row;
    background-color: whitesmoke;
    height: 35px;
    width: 100%;
    margin: auto;
    gap: 10px;
    padding: 5px 0px 5px 0px;
    align-content: center;
    overflow: hidden;
}

.ed2-chart-row {
    display: flex;
    flex-direction: row;
    background-color: whitesmoke;
    height: 60px;
    width: 100%;
    gap: 10px;
    padding: 5px 5px 5px 5px;
    align-content: center;
}

.ed2-chart-card {
    display: initial;
}
.ed2-chart {
    flex:1;
    overflow: auto;
}

.ed2-grid-inputs {
    display: grid;
    grid-template-rows: repeat(3, 10rem);
    width: 15%;
    height: 100%;
    padding: 1px;
    gap: 1px;
    border: 1px solid transparent;
    background-color: white;
}
.ed2-grid-inputs-row {
    flex: 1;
}

.ed2-grid-outputs {
    display: flex;
    flex-direction: column;
    width: 15%;
    height: 100%;
    padding: 1px;
    gap: 1px;
    border: 1px solid transparent;
    background-color: white;
}
.grid-header {
    display: flex;
    background-color: whitesmoke;
    overflow-x: scroll;
}

.grid-diagram {
    display: grid;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: floralwhite;
}

.grid-footer {
    display: grid;
    border-radius: 10px;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas en pantallas grandes */
    gap: 10px; /* Espacio entre las tarjetas */
    background-color: whitesmoke;
}

.ed2-card-container {
    display: flex;
    flex-direction: row;
    background-color: white;
    width: 100%;
    min-width: 100px;
    transition: 0.2s ease-out;
   
}
   

.card-delete {
    display: none;
    width: 50px;
    height: 50px;
    background-color: floralwhite;
}


.card-grid {
    text-align: center;
    text-decoration-color: blue;
    width: 120px;
}

.ed2-part-card {
    text-align: center;
    text-decoration-color: blue;
    width: 120px;
    transition: 0.1s ease-out;
}

.ed2-card-container-column {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 100%;
    height: 100%;
    min-width: 100px;
    gap: 10px;
    transition: 0.2s ease-out;
}

.ed2-populate-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    height: 110px;
    padding: 5px 2px 2px 5px;
    border-radius: 10px;
    background-color: aliceblue;
    box-shadow: 0 3px 4px rgba(0,0,0,0.4);
    overflow: hidden;
}

    .ed2-populate-card:hover {
        transform: scale(1.01);
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
        border-radius: 10px;
        background-color: white;
    }

    .ed2-populate-card p {
        text-align: left;
        font-size: 10px;
        color: blue;
    }
.card-main {
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-content: start;
    align-items: center;
    width: 120px;
    height: 120px;
}
    .card-main:hover {
        transform: scale(1.01);
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
        border-radius: 10px; 
    }

    .card-main a {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: darkblue;
    }
    .card-main p, input {
        text-align: center;
        font-size: 10px;
        color: darkblue;
    }

.card-name {
    text-align: center;
    width: 120px;
    height: 25px;
}

part-input-rect {
    width: 80px;
    height: 80px;
    fill: aqua;
}

.ed2-card-details {
    width: 120px;
    background-color: whitesmoke;
    padding: 0px 0px 0px 0px;
}

    .ed2-card-details p {
        text-align: center;
        font-size: 12px;
        color: darkblue;
        margin: 0;
    }
    .ed2-card-details input {
        text-align: center;
        font-size: 10px;
        color: darkblue;
        width: 80px;
        height: 20px;
        margin: 0px 0px 1px 0px;
        border:  0;
    }

    .ed2-card-details h4 {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: darkblue;
        margin: 2px;
    }

.ed2-text-red p {
    text-align: left;
    font-size: 12px;
    color: darkred;
    margin: 0;
}



.table-detail {
    border: 1px solid #ccc;
    width: 95%;
}

.card-summary {
    width: 120px;
    height: 110px;
}

    .card-summary p {
        text-align: left;
        font-size: 14px;
        color: darkblue;
        margin: 10;
    }

    .card-summary thead, tr, td {
        text-align: left;
        font-size: 12px;
        color: darkblue;
        margin: 0;
        border: 1px solid #ccc;
    }

    .card-summary h4 {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: darkblue;
        margin: 2px;
    }

.card-controls {
    text-align: center;
    font-size: 14px;
    text-decoration-color: blue;
    width: 120px;
    height: 40px;
}

.card-graph {
    text-align: center;
    font-size: 14px;
    text-decoration-color: blue;
    width: 120px;
    height: 100px;
}
.card-base {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: whitesmoke;
    width: 120px;
    gap: 0px;
    display: flex; /* Utiliza un modelo de caja flexible */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
}

imagen-icono {
    width: 10px;
    height: 10px;
    object-fit: cover;
    top: 0;
    left: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: black;
}
.imagen-part {
    width: 120px;
    height: 75px;    
}

.imagen-graph {
    width: 115px;
    height: 95px;
}

.drag-zone {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1px;
    height: 10px;
    border: 1px solid blue;
    background-color: whitesmoke;
}

.ed2-container-flex {
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background-color: whitesmoke;
    border-radius: 0.5rem;
    box-shadow: 0 3px 4px rgba(0,0,0,0.4);
}


.ed2-empty-box {
    width: 120px;
    height: 220px;
    padding: 0px 0px 0px 0px;
    border: 1px solid transparent;
    background-color: floralwhite;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
}
    .ed2-empty-box h6 {
        font-size: 14px;
        height: 14px;
        margin: 2px;
        padding: 2px;
        color: darkblue;
        font-style: italic;
        text-align: center;
    }

.ed2-container-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 10px;
    gap: 5px;
    border: 1px solid transparent;
    background-color: whitesmoke;
    border-radius: 0.5rem;
}

.ed2-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

.ed2-modal-header {
    padding: 0px;
    border: 1px solid #ccc;
    height: 50px;
    justify-content: center;
    background-color: whitesmoke;
}

.ed2-modal-title {
    display: initial;
    height: 50px;
}



.ed2-modal-body {
    display: initial;
    padding: 2px;
    height: 100%;
    width: 100%;
    background-color: white;
    overflow: auto;
}

    .ed2-modal-body th {
        font-size: 14px;
        height: 14px;
        margin: 2px;
        padding: 2px;
        background-color: whitesmoke;
        text-align: center;
    }

    .ed2-modal-body tr {
        height: 14px;
        margin: 2px;
        padding: 2px;
        text-align: left;
    }

    .ed2-modal-body td {
        height: 14px;
        margin: 2px;
        padding: 2px;
        text-align: left;
    }

    .ed2-modal-body label, p {
        font-size: 12px;
        height: 20px;
        margin: 0px;
    }
    .ed2-modal-body input {
        font-size: 12px;
        height: 20px;
        margin: 0px;
        border: 1px solid #ccc;
    }

.ed2-modal-footer {
    display: flex;
    flex-direction: row;
    height: 40px;
    gap: 10px;
    padding: 0;
    border: 1px solid #ccc;
    margin: 0px;
    justify-content: flex-start;
    background-color: whitesmoke;
}


.ed2-modal-table {
    width: 100%;
    height: 100%;
    overflow: auto;
    table-layout: auto;
}
    .ed2-modal-table  p {
        font-size: 12px;
        height: 20px;
        margin: 0px;
    }

    .ed2-modal-table td {
        word-wrap: break-word;
    }

.ed2-table-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.ed2-table-container p {
    font-size: 12px;
    margin: 0px;
    color: darkblue;
}