/*
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";
    }
    /* Beide Footer-Bereiche gleich hoch machen */
/* Gemeinsame Höhe für beide Footer-Bänder */
:root { --footer-band-height: 80px; }  /* falls zu groß/klein: hier anpassen */

/* Footer-Container ohne Innenabstand, damit die Höhe exakt greift */
#footer { padding: 0; }

/* Oberes (hellblaues) Footer-Band */
#footer > :first-child {
  min-height: var(--footer-band-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Unteres (dunkelblaues) Footer-Band */
#footer > :last-child {
  min-height: var(--footer-band-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Copyright-Box nicht mehr „kleben“ lassen */
#footer .copyright {
  margin: 0;            /* raus mit negativen/seitlichen Offsets */
  padding: .5rem .75rem;
  border-radius: .25rem;
}


.start-actions p { margin: .5rem 0; }

/* Startseite: rechte Spalte (Sidebar) ausblenden, linke Spalte vollbreit */
body.home #content .row > [class*="col-"]:last-child,
body.home .page-content .row > [class*="col-"]:last-child {
  display: none !important;
}

body.home #content .row > [class*="col-"]:first-child,
body.home .page-content .row > [class*="col-"]:first-child {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Startseiten-Buttons: alle Wrapper-Hintergründe & Ränder killen */
.start-actions,
.start-actions > *,
.start-actions > *::before,
.start-actions > *::after {
  background: transparent !important;
  box-shadow: none !important;
}

.start-actions > p,
.start-actions > div,
.start-actions .btn-block,
.start-actions .button,
.start-actions .panel,
.start-actions .card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: .5rem 0 !important;   /* Abstand zwischen den Buttons */
  border-radius: 0 !important;   /* keine runden Ecken am Wrapper */
}

/* Buttons selbst behalten ihre Farbe */


.start-actions .btn-primary,
.start-actions a.button.btn-primary {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

.start-actions .btn-secondary {
  background-color: #555 !important;
  border-color: #555 !important;
}
/* Textfeld in Ticket-Erstellung kleiner machen */
/* form[action*="open.php"] textarea {
     height: 120px !important;   /* Höhe anpassen (Standard ist viel größer) */
   min-height: 80px !important;
    max-height: 200px !important;
    resize: vertical;           /* Benutzer kann es vergrößern, wenn er will */ 
 } 


/* --- open.php: "Details warum..." Feld kleiner machen --- */

/* 1) Plain-Textarea (ohne WYSIWYG) */
#open_inc textarea,
form#ticketform textarea,
form[action$="open.php"] textarea,
textarea#message,
textarea[name="message"] {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 200px !important;
  resize: vertical !important; /* optional: nur nach unten ziehbar */
}

/* 2) Wenn der WYSIWYG-Editor (Redactor) aktiv ist */
#open_inc .redactor-box,
#open_inc .redactor-box .redactor-editor,
#open_inc .redactor-layer {
  min-height: 120px !important;
  height: 120px !important;
}

/* 3) Sicherheitsnetz: jede Textarea innerhalb des Content-Bereichs dieser Seite */
section#open_inc .page-content textarea {
  height: 120px !important;
}


/* Buttons auf Textbreite + dicker machen */
a.button {
  display: inline-block;       /* nur so breit wie der Inhalt */
  padding: 8px 16px;           /* mehr Höhe und Abstand */
  font-weight: bold;           /* Text dicker */
  font-size: 15px;              /* etwas größere Schrift */
  border-radius: 4px;          /* leichte Rundung */
  min-width: unset !important; /* verhindert feste Mindestbreite */
}

/* Optional: Damit beide Buttons nebeneinander zentriert sind */
a.button + a.button {
  margin-left: 10px;
}
/* Startseiten-Buttons: nur Textbreite, aber „fetter“ wirken */
.start-actions { text-align: center; } /* zentrieren */

.start-actions .btn {
  display: inline-flex !important;     /* nur so breit wie Inhalt */
  align-items: center;
  gap: .5rem;                           /* Abstand Icon–Text */
  width: auto !important;
  min-width: 0 !important;
  padding: .6rem 1.25rem !important;    /* „dicker“ machen */
  font-weight: 700 !important;          /* Text fett */
  font-size: 1rem !important;           /* etwas größer */
  border-radius: .375rem !important;    /* leichte Rundung */
}

/* Eventuelle Utility-Klassen (px-1, mt-4, btn-block) neutralisieren */
.start-actions .btn.btn-block,
.start-actions .btn.px-1 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.start-actions .btn.mt-4 { margin-top: .5rem !important; }
p.copyright {
    background: none !important; /* Entfernt Hintergrund */
    color: white !important;     /* Textfarbe weiß */
}

#footer {
    background: transparent !important;  /* kein Vollflächen-Blau mehr */
    padding: 0;                           /* das hattest du schon – lassen */
}

#footer .container-fluid {
    max-width: 75rem;          /* gleiche Breite wie dein weißer Bereich */
    margin: 0 auto;            /* zentrieren */
     /* Blau nur in der schmalen Box */
    min-height: var(--footer-band-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;          /* optional: z.B. .375rem für weiche Kanten */
}
#footer .copyright {
  background: transparent !important;
  color: #fff !important;
}

/* 1) Kein Vollflächen-Hintergrund mehr am Footer */
#footer { 
  background: transparent !important;
  padding: 0;
}
/* falls alte Pseudo-Elemente im Theme benutzt werden: */
#footer::before, 
#footer::after { background: transparent !important; }

/* 2) Blauer Balken nur in der CONTENT-BREITE (wie oben der weiße Bereich) */
#footer .container-fluid {
  max-width: 75rem;          /* gleiche Breite wie dein weißer Content */
  margin: 0 auto;            /* zentrieren */
  background-color: #0d6efd !important;  /* Blau NUR im schmalen Bereich */
  min-height: var(--footer-band-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

/* 3) Den zweiten (vollen) Balken verhindern – letztes Kindelement NICHT als Leiste behandeln */
#footer > :last-child {
  min-height: 0 !important;
  display: block !important;
  background: transparent !important;
}