[data-role="modal"]:before { 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
    height:100vh; width:100vw;
    content:'';
    background:var(--cavelo-navy-green-corner); 
    opacity:0.4;    
}
[data-role="modal"] { 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
    height:100vh; width:100vw;
    background:rgba(0,0,0,0.8); 
    z-index:900; 
    overflow-y:auto; 
    padding:5em; 
}

[data-role="modal"].hidden { display:none; top:0; bottom:0; left:0; width:0; }
[data-role="modal"] > .content { 
    position:relative; 
    display:inline-block; 
    z-index:1000; 
    left:50%; 
    transform: translateX(-50%); 
    background-color:var(--cavelo-white); 
    border-color:transparent !important;
    border-width:0px;
}   
[data-role="modal"] > .content:before {
    content:'';
    position:absolute;
    display:inline-block; 
    height:100%;
    width:0.5rem;
    left:-0.5rem;
    background: var(--cavelo-navy-green);
    z-index:10;
}

[data-role="modal"] > .content > .header { position:relative; padding:1.5em; border-bottom:1px solid var(--cavelo-white); }
[data-role="modal"] > .content > .header > * { position:relative; display:inline-block; margin-bottom:0; }
[data-role="modal"] > .content > .header > .title { margin-right:2em; margin-bottom:0; }
[data-role="modal"] > .content > .header > .subtitle { display:block; margin-bottom:0; } 
[data-role="modal"] > .content > .header > .menu { position:absolute; right:0; top:0; background-color:transparent; }
[data-role="modal"] > .content > .header > h3.subtitle { text-transform:none; }

[data-role="modal"] > .content > .header > .menu > .close { 
    position:absolute !important; 
    display:block !important;
    overflow:visible;
    top:0;
    padding:0px !important; 
    margin:0px !important;
    min-width:2.5em !important; 
    min-height:2.5em !important;
    border:0px !important;
    color:transparent;
    background-color:var(--cavelo-white);
    border-radius:50%;
    text-align:center;
    z-index:990;
    transform:translate(-50%, -50%);
    line-height:1em;
}
[data-role="modal"] > .content > .header > .menu > .close:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size:1rem;
    content:"\f00d"
}

[data-role="modal"] > .content > .body { position:relative; padding:1.5em; }
[data-role="modal"] > .content > .alert { overflow-x:auto; padding-right:3em !important; }
[data-role="modal"] > .content > .footer { position:relative; padding:1.5em; text-align:left; border-top:1px solid var(--cavelo-white); }
[data-role="modal"] > .content > .footer > * { margin-right:1em; }


[data-role="modal"] > .content.xlarge { width:1400px; max-width:100vw; }
[data-role="modal"] > .content.xlarge > * { padding:2em; }

[data-role="modal"] > .content.large { width:1000px; max-width:100vw; }
[data-role="modal"] > .content.large > * { padding:2em; }

[data-role="modal"] > .content.medium { width:600px; max-width:100vw; }
[data-role="modal"] > .content.medium > * { padding:1.5em; }

[data-role="modal"] > .content.small {width: 400px; max-width:100vw;}
[data-role="modal"] > .content.small > * { padding:1em; }

[data-role="modal"] > .content.full {width:calc(100vw - 3rem); max-width:calc(100vw - 3rem);}
[data-role="modal"] > .content.full > * { padding:1em; }

[data-role="modal"] > .content.auto {max-width:calc(100vw - 3rem);min-width:200px;width: fit-content;}
[data-role="modal"] > .content.auto > * { padding:1em; }

[data-role="modal"] > .content > .header.slim { padding:0; height:0px; border:0; }
[data-role="modal"] > .content > .header.slim > .title { visibility:hidden; }
[data-role="modal"] > .content > .header.slim > .subtitle { visibility:hidden; }
[data-role="modal"] > .content > .footer.slim { padding:0; height:0px; border:0; visibility:hidden; }


html.small [data-role="modal"] { padding:1em; }
html.small [data-role="modal"] > .content.large { width:calc(100vw - 2em); max-width:100vw; }
html.small [data-role="modal"] > .content.medium { width:calc(100vw - 2em); max-width:100vw; }
html.small [data-role="modal"] > .content.small { width:calc(100vw - 2em); max-width:100vw; }
html.small [data-role="modal"] > .content.auto { width:calc(100vw - 2em); max-width:100vw; }
html.small [data-role="modal"] > .content > .header > .menu > .close { height:2em; width:2em; transform:translate(-1.2em, -1em); }

[data-role="modal"] > .content > * { border-width:0px; }


#modal-back-to-top {
    cursor:pointer;
    font-size:1em;
    position:fixed;
    bottom:30px;
    right:30px;
    background-color:var(--cavelo-navy);
    opacity:0;
    transition:opacity 0.5s;    
    z-index:9999 !important;
}
#modal-back-to-top > * { display:block; color:var(--cavelo-white); padding:0.8em 1em; text-decoration:none !important; }
#modal-back-to-top.active { opacity:0.4; transition:opacity 1s; z-index:999; text-decoration:none !important; }
#modal-back-to-top.active:hover { opacity:1; transition:opacity 1s; text-decoration:none !important; }


[data-role="modal"] > .content > .alert > button.close { position:absolute; top:0.5em; right:0.5em; }

[data-role="modal"] > .documentation {
    position:fixed;
    display:flex;
    align-items:center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    top:1rem;
    left:1rem;
    border-radius:50%;
}