/*
    Author: Kamil Staniec
    Author URI: http://www.devveb.pl
    Theme: apflow Errors
*/


/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
html, body{font-size:100%;height:100%;background:#fafafa}
body,html,div,h1,button,p{margin:0;padding:0}
button{cursor:pointer;background:transparent;font:inherit;border:0}
button:focus{outline:none}
a, u{text-decoration:none}
a, span, p, h1, q, u{font: 300 13px 'Roboto', 'sans-serif', 'Comfortaa';color:#999}
div{box-sizing:border-box}


/*--------------------------------------------------------------
Report
--------------------------------------------------------------*/
.global-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.content-container{
    max-width: 600px;
    background:#fff;
    padding: 1.875rem;
    border-radius: 3px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.25);
    text-align: center;
    border: 1px solid #e5e5e5;
    position: relative;
    overflow: hidden
}

.logo a{
    font: 700 40px 'Comfortaa';
    color: #ff7657
}

.logo p{
    margin-left: 80px;
    color: #d1d1d1;
    font-size: 11px
}

.message{margin:25px 0 20px}

.message p *:not(span):not(i){
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.1);
    padding: 0.25rem 0.4375rem;
    border-radius: 3px;
    line-height: 30px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.1)
}

.message span{
    color: #ff5959;
    text-decoration: underline
}
.message b{background: #ff5959}
.message q{background: #ff6473}
.message a{background: #503bff}
.message u{background: #64638f}

.message i, .footer-container i{
    margin-right: 5px;
    display: inline
}

.table-container{
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 15px;
    display: block;
    overflow-x: auto;
    white-space: nowrap
}

.table-container tbody, .table-container tr > th:last-child{width: 100%}
.table-container th, .table-container tr{
    padding: 0.625rem;
    border: 1px solid #e5e5e5;
}

.table-container tr > th:first-child{
    background: #fafafa;
    padding: 0 1.25rem
}

.table-container tr > th:last-child{
    text-align: left;
    padding-left: 1.25rem
}

.table-container h1{text-transform: uppercase}

.sql-query{
    text-overflow: ellipsis;
    white-space: normal;
}

.btn-trace{
    text-align: left;
    margin-top: 10px;
}

.btn-trace button, .btn-close button{
    padding: 0.5rem;
    background: #ff7657;
    border-radius: 2px
}

.btn-trace span, .btn-close span{
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(0,0,0,.1)
}

.trace-container{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 1.875rem
}

.btn-close{
    text-align: right;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.9375rem
}

.trace{
    text-align: left;
    margin: 20px 0;
    display: block;
    overflow: auto;
    white-space: nowrap;
    max-width: 100%;
    max-height: 73%;
}

.footer-container{margin-top: 15px}
.footer-container > *{font-size: 11px}
.footer-container span{color: #d1d1d1}

.footer-container a{color: #0074e4}
.footer-container a:hover{text-decoration: underline}

@media screen and (max-width: 37.5rem){
    .content-container{
        background: none;
        border: none;
        box-shadow: none;
        width: 100%;
        border-radius: 0;
        padding: 0.625rem
    }
}

@media screen and (max-height: 800px) {
    .global-container{display: block}
}