/*
Main responsive theme file Type 1
*/
/*
    Created on : 22.09.2020, 11:24:13
    Updated on : 24.07.2023, 16:24:13
    Author     : Jens Eberle <osticket.com.de>
*/

:root {
}

/** grundlegende Elemente **/
    * {
        margin: 0px;
        padding: 0px;
        hyphens: auto;
    }
    body {
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        letter-spacing: 0.02rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
    }
    .container-fluid {
        max-width: 75rem;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }
    h5 { font-size: 1.0rem; }
    h6 { font-size: 0.8rem; }
    p {
        margin: 0.5rem 0rem;
    }
    p:first-of-type {
        margin-top: 0rem;
    }
    p:last-of-type {
        margin-bottom: 0rem;
    }
    a, a:focus, a:hover {
        text-decoration: none;
    }
    i { /* center icons */
        align-self: center;
    }
    img {
        border: 0px;
        text-decoration: none;
        max-width: 100%;
    }
    textarea {
        width: 100%;
    }
    .ui-timepicker-select,
    textarea {
        padding: .375rem .75rem;
        border-radius: var(--bs-border-radius);
        border: var(--bs-border-width) solid #959595 !important;
    }
    ol ol li {
        list-style-type: lower-alpha;
    }
    .rounded-xlg {
        border-radius: .5rem!important;
    }
    .w-40 {
        width: 40% !important;
    }
    .card-footer:last-child {
        border-radius: unset;
    }

/** HEADER **/
    /** message bars **/
        #msg_messages div,
        #messages_barRT div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            padding: 0.3rem 1rem;
            min-height: 1.5rem;
            margin: 0rem;
            border-radius: 0rem;
        }
        .error_barRT i,
        .msg_error i {
            font-size: 120%;
        }
        .warning_barRT i,
        .msg_warning i {
            font-size: 120%;
        }
        .notice_barRT i,
        .msg_notice i {
            font-size: 120%;
        }
        #msg_messages .alert-dismissible .btn-close,
        #messages_barRT .alert-dismissible .btn-close {
            padding: .55em 1rem;
        }
        #msg_messages p,
        #messages_barRT p {
            padding-left: 0.5rem;
            padding-right: 1rem;
            margin-bottom: 0rem;
        }
        .alert-warning {
            background-color: #ffecb0;
            border-color: #f9db7f;
            color: inherit;
        }

    #header {
        padding-bottom: 0.1em;
    }
    #header-logo img {
        max-height: 5rem;
        max-width: 24rem;
        width: 100%;
        margin: .5rem 1rem;
    }

    /* Navigation top right */
        #headerNavRight {
            font-size: 1.1rem;
            white-space: nowrap;
        }
        @media only screen and (min-width: 992px) { /* breakpoint for lg */
            #menueRight .nav-link i {
                font-size: 1rem;
            }
        }
        #menueRight .flag-icon {
            width: 2rem;
            line-height: 1.5em;
            border-bottom: solid 0.1rem black;
        }
        #menueRight .dropdown-menu {
            width: auto;
            min-width: auto;
            border-radius: 0rem;
            position: absolute;
            margin-top: -5px !important;
        }
        #menueRight .nav-link.active {
            border-bottom: 0.2rem solid rgba(255,255,255,.5);
            margin-top: -0.2rem;
            padding-top: .2rem !important;
            border-radius: .3rem .3rem 0rem 0rem;
        }
        #menueRight .nav-link i {
            font-size: 1.5rem;
        }
        @media only screen and (min-width: 992px) { /* breakpoint for lg */
            #menueRight .nav-link i {
                font-size: 1.1rem;
            }
        }
    /* Navigation Main navbar */
        #mainNavbar {
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.01rem;
            text-shadow: 0.05rem 0.05rem 0.2rem #333;
            box-shadow: inset 0 -2px 10px -2px rgba(0,0,0,0.5);
        }
        /* Main navbar toggler */
        #mainNavbar .navbar-toggler:focus {
            box-shadow: none;
        }
        @media only screen and (min-width: 768px) { /* breakpoint for md */
            #mainNavbarElements li {
                font-size: 0.9rem;
                border-right: 0.05rem solid #aaa;
            }
            #mainNavbarElements li:first-of-type {
                border-left: 0.05rem solid #aaa;
            }
        }

/** FOOTER **/
    #footer {
    }
    #footerNavbar a {
        text-decoration: none;
    }
    #footerNavbar a:hover {
        text-decoration: underline;
    }
    #footerNavbar nav-item { /* li */ }
    #footerNavbar nav-link { /* a */ }
    #footer .copyright {
        font-size: .8rem;
    }
    #poweredBy {
        font-size: 0.8rem;
    }
    #poweredBy img {
        height: 2rem !important;
    }
    /* loading popup */
    #loading {
        height: auto;
    }
    #loading .innerdiv {
        display: flex;
        align-items: center;
    }
    #loading i {
        font-size: 3rem;
    }

/** PAGE BODY **/
    #content {} /* content full width*/
    .page-content {} /* content with max-width*/

    /** FORMS **/

    .submitBtnFormChanged {
        border-color: #ff0000;
        box-shadow: 0px 0px 10px 3px #f00;
    }
    /* Checkbox styling
    https://dev.to/proticm/styling-html-checkboxes-is-super-easy-302o */
        .checkbox {
            display: flex;
            margin: 0rem;
            cursor: pointer;
        }
        .checkbox > input {
            height: 1.5rem !important;
            width: 1.5rem !important;
            min-width: 1.5rem !important;
            margin: auto 1rem;
            appearance: none;
            /* transition-duration: 0.3s; */
            border: 1px solid #959595;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
            display: flex;
            align-items: center;
          }
        .checkbox > input:checked:before {
            font-family: "Font Awesome 6 Free";
            content: "X";
            margin: 0px auto;
            font-weight: bold;
            font-size: 1.1rem;
        }
        .checkbox > input:active {
            border: 2px solid #34495E;
        }
    /* Helptopic select box */
        .jsTreeWrapper {
          max-width: unset !important;
        }
        .jstree-anchor,
        .jstree-anchor:link,
        .jstree-anchor:visited {
            margin: auto 0rem;
        }
    /* redactor (HTML-Editor) */
        /* box border */
        .redactor-box.redactor-styles-on {
            border-top-left-radius: var(--bs-border-radius-lg);
            border-top-right-radius: var(--bs-border-radius-lg);
            overflow: hidden;
        }
        /* toolbar */
        .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
            padding: 0px;
            text-align: left;
        }
        /* toolbar buttons */
        .redactor-toolbar a, .redactor-air a {
            border: 1px solid #ccc;
        }
        /* toolbar icons */
        .redactor-toolbar a.re-button-icon.re-button-icon,
        .redactor-air a.re-button-icon.re-button-icon {
            height: 36px;
            padding: 9px 12px 6px 12px;
            margin: 0px;
        }
    /* date/timepicker popup */
        #ui-datepicker-div {
            /* Popup zentrieren*/
            left: 0 !important; 
            right: 0; 
            margin-left: auto; 
            margin-right: auto;
            width: 34em !important;
            z-index: 11000 !important;
        }
        @media (max-width: 40em) {
            .ui-datepicker-group {
                width: 100% !important;
            }
            #ui-datepicker-div {
                width: 17em !important;
            }
        }
        /* change timepicker button img */
        .ui-datepicker-trigger { /* button element */
            background-image: url("../images/calendar-and-check-mark.png");
            background-size: contain;
            width: 1.5rem;
            height: 1.5rem;
            padding: .5rem 0 0 0;
            margin-left: 0.3rem;
        }
        .ui-datepicker-trigger img {
            display: none;
        }
    /* filedrop areas */
        .filedrop {
          width: 100%;
          padding: 0px !important;
        }
        /* Info Field AttachmentsDiv */
        .freetext-files {
            margin: .5rem -.5rem -.5rem -.5rem;
        }
        @media (min-width: 576px) and (max-width: 767px), (min-width: 992px) { /* sm and lg */
            .freetext-files {
                margin-left: -1.5rem;
                margin-right: -1.5rem;
            }
            .freetext-files .title,
            .freetext-files .file {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }
        }
        /* Info Field AttachmentsDiv > titleDiv */
        .freetext-files .title {
            padding: 0.75rem 0.5rem;
            font-weight: 600;
            border-top: 0.025rem solid #17a2b8;
            border-bottom: 0.025rem solid #17a2b8;
        }
        /* Info Field AttachmentsDiv > filesDiv */
        .freetext-files .file {
            display: inline-block;
            padding: 0.5rem;
        }

    /* Section breaks */
        .thread-body.bleed,
        div.section-break {
            margin: -.5rem;
            padding-top: 0.5em !important;
        }
        div.section-break {
            border-top: 2px solid #17a2b8 !important;
            border-bottom: 2px solid #17a2b8 !important;
        }
        .thread-body.bleed h3,
        div.section-break h3 {
            margin: -.5rem 0rem 0rem 0rem;
            font-weight: bolder;
            font-size: 1.2rem;
            padding: .5rem;
        }
        .thread-body.bleed em,
        .thread-body.bleed div,
        div.section-break em {
            display: block;
            padding: .5rem;
            border-top: 1px solid #17a2b8;
        }
        .thread-body.bleed * *,
        div.section-break * * {
            padding: 0rem !important;
        }
        @media (min-width: 576px) and (max-width: 767px), (min-width: 992px) { /* sm and lg */
            .thread-body.bleed,
            div.section-break {
                margin: -.5rem -1.5rem !important;
            }
            .thread-body.bleed > *,
            div.section-break > * {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }
        }
    /* select2 fields (z.B. Zeitzone-Feld) */
        .select2-container {
            width: 100% !important;
        }
        .select2-container .select2-selection--single {
            height: auto !important;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            padding-left: 0.5rem;
        }

/*** spezial page classes ***/

/** startpage **/
    #kb-search-input {}
    .landing_page_faq_header {
        font-weight: 600;
        letter-spacing: 0.01rem;
    }
/** ticket view page - tread **/
    /* avatar */
    .thread-entry .avatar,
    .thread-event .avatar {
        width: 4rem;
        height: auto;
    }
    @media (max-width: 576px) {
        .thread-entry .avatar,
        .thread-entry .card {
            border-radius: .375rem !important;
        }
    }
    /* timeline */
    .thread-event .timeline,
    .thread-entry .avatar+.timeline {
        margin: auto 0px;
        width: 2rem;
        border-top-style: dotted !important;
    }
    .thread-entry .timeline-down,
    .thread-event .timeline-down {
        width: 3.5rem;
        padding: .62rem 0rem;
        border-right-style: dotted !important;
    }
    .timeline-down .card {
        margin-right: -1.25rem;
        margin-left: auto;
        width: 2.5rem;
        height: 2.5rem;
    }
    /* thread event entry */
    .thread-event-desc img {
        height: 2rem !important;
        width: auto !important;
        margin-right: 0.25rem;
    }
    /* Inline image hovering with download link */
    .image-hover {
        display: inline-block;
        position: relative;
        max-width: 100%; /* Ensure image hovered is resized */
    }
    .image-hover .caption {
        position: absolute;
        right: 3px;
        bottom: 5px;
        visibility: hidden;
        opacity: 0.5;
        transition: visibility 0s linear, opacity 0.2s ease-in;
    }
    .image-hover .caption a {
        font-size: 1.5rem;
    }
    .image-hover:hover .caption {
        visibility: visible;
        opacity: 1;
        transition-delay: 0.2s;
    }
    .icon-download-alt {
        margin-top: auto;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        display: inline-block !important;
        vertical-align: bottom;
    }
    .icon-download-alt:before {
        content: "\f381";
    }