.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    transition: var(--transition);
    transform-origin: top;
    display: flex;
    place-content: center;
    place-items: center;
    transform: scaleY(0);
    opacity: 0;
    overflow:auto;
}

.modal.atv{
    transform: scaleY(1);
    opacity: 1;
    overflow:visible;
}

.modal>.background{
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: black;
    opacity: var(--opacity);
}

.modal>.content{
    width: auto;
    height: auto;
    background: white;
    z-index: 1;
    display: grid;
    position: absolute;
    border-radius: 5px;
    grid-template-rows: auto auto;
    user-select: text;
}

.modal>.content>.close{
    background: #2196F3;
    color: white;
    cursor: pointer;
    width: var(--close);
    height: var(--close);
    position: absolute;
    right: 0;
    display: flex;
    place-items: center;
    place-content: center;
    padding: calc(var(--close) / 2);
    border-radius: 0 0 0 10px;
}

.modal>.content>.close>svg {
    height: inherit;
    width: inherit;
}

.modal>.content>.body{
    --padding:10px;
    padding: var(--padding);
    overflow: auto;
    width: auto;
    height: auto;
    max-height: calc(90vh - (var(--padding) * 2));
    max-width: calc(680px - (var(--padding) * 2));
    margin-top: calc(var(--close) * 2);
    align-content: center;
    text-align: center;
    display: block;
    user-select: text;
    
}

.modal>.content>.body>div{
    display: inline-flex;
    width: 100%;
}

.modal .content .title{
    padding: calc(var(--close) / 2);
    height: var(--close);
    margin-right: calc(var(--close) * 2);
    text-transform: capitalize;
    color: #494848;
    font-weight: bolder;
    margin-bottom: calc(var(--close) * -2);
}

.modal .content.contentor {
    --bd: 1px;
    --pd: 10px;
    display:grid !important;
    border: var(--bd) solid #8080806b;
    padding: var(--pd);
    border-radius: var(--pd);
    max-width: calc(100% - ((var(--bd) + var(--pd)) * 2));
}

.modal .content.contentor .labelInfo {
    margin: 0px;
}

.labelInfo {
    text-align: left;
    color: #5a5a5a;
    word-break: break-all;
    margin: 2px 0 1px 0;
}

.labelInfo > .ngt{
    font-weight: bolder;
    text-transform: capitalize;
    margin-right: 10px;
    color: black;
}

.modal > .content > .body > div.content.loja .perfil{
    width: fit-content;
    padding: 0 10px;
    margin: 10px;
    border-radius: 0.3rem;
}

.modal > .content > .body > div.content.loja .store{
    min-width: -moz-available;
    height: -moz-available;
    min-width: -webkit-fill-available;
    height: -webkit-fill-available;
    padding: 30%;
    background-color: transparent;
}

.modal > .content > .body table{
    min-width: 100%;
    display: inline-table;
}
.modal > .content > .body table svg{
    max-width: 30px;
}
.modal > .content > .body form{
 border: 4px solid var(--colorModalFormBorder);
 border-radius: 0.5rem;
 padding: 10px;
}
.modal > .content > .body form  label:hover{
 border-color: #2196F3;
 color: #2196F3;
    
}
.modal > .content > .body form + form{
 margin-top: 20px;
}
.modal > .content > .body form>div:has(label + input[type='submit'].inputs):first-child:before{
 content: "";
 position: static;
 background: var(--colorModalFormBorder);
 width: 100%;
 height: 4px;
 margin-bottom: -170px;
}
.modal > .content > .body form>div:has(label + input[type='submit'].inputs):first-child{
 margin-bottom: 30px;
}

.modal > .content > .body form input[type='submit'].inputs:hover{
    border: 1px solid white;
    color: white;
    background: var(--color);

}
.modal > .content > .body form p{
    word-spacing: 10px;
}
.modal > .content > .body form div:has(>label){
    gap:20px;
    display: flex;
    flex-wrap: wrap;
    place-items: center;
}

.modal table thead{
    top: calc(-1 * (var(--close) /2));
}

.modal .produtosCorpoDetalhe table thead{
    top: 0;
}