﻿:root {
    /* #1D2D36; */
    --secondary-100: #F0F0F0;
}


dialog {
    /*background-color: white;
    width: 70%;
    height: 85%;
    margin: auto;
    border-radius: 0.8rem;
    border: none;
    padding: 1rem;*/
    /*max-width: 1030px;*/
    /*max-height:750px;*/
    /*max-height:780px;*/
    /*overflow: hidden;*/
    /*min-width: 400px;*/
}
.aviso {
    background-color:transparent;
    margin:auto;
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*z-index: 1050;*/
    /*display: block;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    border:none;
}
.Modal_Close_Loop {
    background-color: white;
    width: 70%;
    height: 85%;
    margin: auto;
    border-radius: 0.8rem;
    border: none;
    padding: 1rem;
    /*max-width: 1030px;*/
    /*max-height:750px;*/
    /*max-height:780px;*/
    overflow: hidden;
    /*min-width: 400px;*/
    width: 80%;
    height: 100%;
}

.Modal__Container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.Modal__Container__Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0.5rem 0;
    color: var(--text-300);
    border-bottom: 1px solid var(--color-secondary-1)
}

.Modal__Container__Header__Span {
    cursor: pointer;
    color: var(--secondary-100);
    cursor: pointer;
    background-color: var(--text-300);
    border-radius: 1rem;
}

    .Modal__Container__Header__Span:hover {
        color: rgb(239 68 68 / 0.8);
        background-color: transparent;
    }

.Modal__Container__Main__Overflow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /*padding:0 0 1rem 0;*/
}


.Modal__Container__Footer {
    display: flex;
    /*justify-content: flex-end;*/
    flex-direction:column;
    height: fit-content;
    align-items: center;
    padding: 1rem 0 0 0;
    gap: 0 2rem;
}

.Modal__Container__Main{

}

.Modal__Container__Footer__Main {
    width: 100%;
    display: flex;
    overflow-y: auto;
    max-height: 227px;
    display: grid;
    gap: 0 1rem;
    grid-auto-flow: dense;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 31rem), 1fr));
    width: 100%;
}

.Modal__Container__Footer_Div {
    height: 100%;
    width:100%;
}
.Heigth_modificador {
    height: auto;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.card__sectionInfo__Main {
    display: grid;
    gap: 4px;
    grid-auto-flow: dense;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    width: 100%;
    height: -webkit-fill-available;
}


.tags {
    gap: 0.35rem;
    background-color: #F3F3F4;
    border-radius: 1rem;
    align-items: center;
    padding: 0.35rem;
    height: 2rem;
    /* font-weight: 500; */
    font-size: 0.9rem;
}

.Submenu__Item__a {
    padding: 0.7rem 0.35rem;
    width: 100%;
    display: flex;
    gap: 1rem;
}
.Flag__Span {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
    .Flag__Span::before {
        display: inline-block;
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background-color: #356E35;
    }

.Dialog__Div__Information__Overflow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.Modal__Container_Footer__Buttons {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap:0 2rem;
}
    .Modal__Container_Footer__Buttons > input[type=number] {
        border: 1px solid var(--color-secondary-1);
        border-radius: 0.8rem;
        background: none;
        padding: 1rem;
        font-size: 1rem;
        color: var(--color-secondary-1-placeholder);
        transition: border var(--time-transition-labels) cubic-bezier(0.4,0,0.2,1);
    }


        .Modal__Container_Footer__Buttons > input[type=number]:focus {
            outline: none;
            border: 1.5px solid var(--bg-primary-100);
        }

.buttons__Containners {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 0 0;
}