[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:2em !important; 
    min-height:2em !important;
    border:0px !important;
    color:transparent;
    background-color:white;
    border-radius:50%;
    text-align:center;
    z-index:990;
    transform:translate(-1em, -1em);
    line-height:1em;
}
[data-role="modal"] > .content .header .menu .close i { 
    position:absolute;
    display:block !important;
    overflow:hidden;
    font-size:2.5em;
    top:0;
    height:1em;
    width:1em;
    margin:0px; 
    padding:0px; 
    background-color:transparent;
    text-align:center;
    color:var(--cavelo-orange);
    border:0px;
    border-radius:50%;
    line-height:1em;
    transform:translate(-2px, -2px);
}
[data-role="modal"] > .content .body { position:relative; padding:1.5em; }
[data-role="modal"] > .content .alert { overflow-x:auto; }
[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.auto { max-width:100vw; min-width:200px; }
[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"] > .video.content:before { display:none !important; }
[data-role="modal"] > .video .header { padding:0 !important; margin:0 !important; height:0 !important; border-width:0 !important; }
[data-role="modal"] > .video .header > .title { visibility:hidden !important; }
[data-role="modal"] > .video .header > .subtitle { visibility:hidden !important; }
[data-role="modal"] > .video .body { padding:0 !important; margin:0 !important; }
[data-role="modal"] > .video .footer { padding:1em !important; margin:0 !important; }
[data-role="modal"] > .video iframe { box-sizing:border-box; }