pre {
    white-space: pre-wrap;
}

pre.break_word {
    overflow-wrap: break-word;
}

div.hanging_indent {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.t4clearfix:after {
    content: "";
    clear: both;
    display: table;
}

:root {
    --t4-color-background: white;
    --t4-color-shadow: gray;
}

span.non-printable-char {
    color: greenyellow;
    font-weight: normal;
    display: inline-block;
    width: 1ch;
}

/** ============================ DEV =========================== */

html.t4dev {
    border: 20px solid;
    border-image: repeating-linear-gradient(
            -45deg,
            black,
            black 20px,
            #ffb101 20px,
            #ffb101 40px
    ) 20;
    border-bottom: none;
    border-top: none;
    min-height: calc(100% - 0px);
}

html div.dev_stat_duration {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
    background: var(--t4-color-background);
    padding: 5px 10px;
    border-top-right-radius: 5px;
    box-shadow: 0 0 10px var(--t4-color-shadow);
}

/** ============================ ACCORDEON =========================== */
div.tt_accordeon {
    cursor: ns-resize;
}

div.tt_accordeon span.collapse_icon {
    float: right;
}

div.tt_accordeon span.collapse_icon:after {
    content: "⬆️";
}

div.tt_accordeon.collapsed span.collapse_icon:after {
    content: "⬇️";
}

div.tt_accordeon_content {
    transition: .5s;
}

/** ============================ SESSION =========================== */
div.t4logout {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

div.t4logout div {
    background: var(--t4-color-background);
    padding: 5px 10px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 10px var(--t4-color-shadow);
}

div.t4logout form {
    display: inline;
    vertical-align: top;
}

div.t4logout form span:before {
    content: "❌ ";
}

div.t4logout form span {
    display: inline-block;
    width: 1.4em;
    overflow: hidden;
    white-space: nowrap;
}

/** ============================ MESSAGES =========================== */

div.message,
div#ajaxmsg {
    color: black;
    background: white;
    font-weight: normal;
}

div.message.error,
div#ajaxmsg {
    background: #fdd;
}

div.message.ok {
    background: #dfd;
}

div#ajaxmsg {
    width: 90%;
    position: absolute;
    top: min(25px, 5vw);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

/** ============================ DIFF =========================== */

ins.high {
    text-decoration: none;
    background: #fdd;
    font-weight: bold;
}

ins.high.empty {
    border: 1px solid red;
}

/** ============================ FORMS =========================== */

form label {
    vertical-align: top;
}

form.t4lockform {
    display: inline;
}

/** ============================ TABLES =========================== */

table thead {
    position: sticky;
    top: 0;
    background: var(--t4-color-background);
    z-index: 1;
}

/** ============================ THIRDPARTY =========================== */

div.highcharts_container {
    height: 400px;
}