﻿/* =========================================================
   COMMON.CSS (FULL READY) – Διορθωμένο
   - Sidebar collapse χωρίς κενό, με animation + cookie state (από JS)
   - Δεν “νεκρώνουν” clicks στο sidebar όταν είναι open
   - Fix για min-width overflow/kενά
   - RadSplitter / Panes 100% height σωστά
   - doublescroll / doublescroll_f ΜΟΝΟ με CSS (χωρίς JS)
   - Telerik scroll μέσα σε flex: min-height:0
   ========================================================= */

.modal-title {
    display: contents;
}

.tooltip {
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

    .tooltip.show {
        opacity: .9;
    }

/* ===================== ICON FONT ===================== */
.icon:before {
    font-family: OutlookSampleApp !important;
    speak: none;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon.icon-Home:before {
    content: "\e600";
}

.icon.icon-Menu:before {
    content: "\e601";
}

.icon.icon-Product-Mail:before {
    content: "\e602";
}

.icon.icon-Product-Calendar:before {
    content: "\e603";
}

.icon.icon-Product-Contacts:before {
    content: "\e604";
}

.icon.icon-Product-Notes:before {
    content: "\e605";
}

.icon.icon-Info:before {
    content: "\e606";
}

.icon.icon-Download:before {
    content: "\e607";
}

.icon.icon-Search:before {
    content: "\e608";
}

.icon.icon-Chevron-West:before {
    content: "\e609";
}

.icon.icon-Chevron-East:before {
    content: "\e60a";
}

.icon.icon-Chevron-North:before {
    content: "\e60b";
}

.icon.icon-Chevron-South:before {
    content: "\e60c";
}

.icon.icon-DoubleChevron-West:before {
    content: "\e60d";
}

.icon.icon-DoubleChevron-East:before {
    content: "\e60e";
}

.icon.icon-DoubleChevron-North:before {
    content: "\e60f";
}

.icon.icon-DoubleChevron-South:before {
    content: "\e610";
}

.icon.icon-Arrow-West:before {
    content: "\e611";
}

.icon.icon-Arrow-East:before {
    content: "\e612";
}

.icon.icon-Arrow-North:before {
    content: "\e613";
}

.icon.icon-Arrow-South:before {
    content: "\e614";
}

.icon.icon-Priority-High:before {
    content: "\e615";
}

.icon.icon-Priority-Low:before {
    content: "\e616";
}

.icon.icon-Spam:before {
    content: "\e617";
}

.icon.icon-Add-Circle:before {
    content: "\e618";
}

.icon.icon-Mail-Circle:before {
    content: "\e619";
}

.icon.icon-Edit-Circle:before {
    content: "\e61a";
}

.icon.icon-Delete-Circle:before {
    content: "\e61b";
}

.icon.icon-Delete:before {
    content: "\e61c";
}

.icon.icon-Close:before {
    content: "\e61d";
}

.icon.icon-Ok:before {
    content: "\e61e";
}

.icon.icon-View:before {
    content: "\e61f";
}

.icon.icon-Photo:before {
    content: "\e620";
}

.icon.icon-Person:before {
    content: "\e621";
}

.icon.icon-Send:before {
    content: "\e622";
}

.icon.icon-Save:before {
    content: "\e623";
}

.icon.icon-Warning:before {
    content: "\e624";
}

.icon.icon-Bell:before {
    content: "\e625";
}

.icon.icon-Calendar:before {
    content: "\e626";
}

.icon.icon-Time:before {
    content: "\e627";
}

.icon.icon-Recurrence:before {
    content: "\e628";
}

.icon.icon-Non-Recurrence:before {
    content: "\e629";
}

.icon.icon-View-ListView:before {
    content: "\e62a";
}

.icon.icon-View-Grid:before {
    content: "\e62b";
}

.icon.icon-View-ReadingPane-Down:before {
    content: "\e62c";
}

.icon.icon-View-ReadingPane-Right:before {
    content: "\e62d";
}

.icon.icon-Folder:before {
    content: "\e62e";
}

html .RadScheduler .rsIcon {
    font-family: OutlookSampleApp;
}

html .RadGrid .rgActionButton, html .rnvLink .radIcon {
    font-size: 16px;
}

html .rnvLink .radIcon {
    height: 22px;
    line-height: 22px;
}

html .RadScheduler .rsIconArrowLeft:before {
    content: "\e611";
}

html .RadScheduler .rsIconArrowRight:before {
    content: "\e612";
}

html .RadScheduler .rsIconCalendar:before {
    content: "\e626";
}

@font-face {
    font-family: 'OutlookSampleApp';
    src: url("../fonts/OutlookSampleApp.eot?4e35sj");
    src: url("../fonts/OutlookSampleApp.eot?#iefix4e35sj") format("embedded-opentype"), url("../fonts/OutlookSampleApp.woff?4e35sj") format("woff"), url("../fonts/OutlookSampleApp.ttf?4e35sj") format("truetype"), url("../fonts/OutlookSampleApp.svg?4e35sj#OutlookSampleApp") format("svg");
    font-weight: normal;
    font-style: normal;
}


/* ===================== BASE LAYOUT ===================== */
html, body, form {
    height: 100%;
}

form {
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    font: 100 16px "Segoe UI", Arial, Helvetica, sans-serif;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

a {
    color: inherit;
    text-decoration: none;
}

    a:focus, a:hover {
        text-decoration: none !important;
    }

.hidden {
    display: none !important;
}

html form {
    white-space: nowrap;
}

html .slider,
html .page {
    box-sizing: border-box;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

/* page */
html .page {
    width: 100%;
    margin-left: -4px;
    padding-top: 56px;
    white-space: normal;
    overflow: auto;
}

    /* ✅ FIX: ήταν 960px και σου δημιουργούσε overflow/κενά */
    html .page > div {
        min-width: 0 !important;
        box-sizing: border-box;
        width: 100%;
    }

html .main-header {
    margin-top: -56px;
}

html .container {
    box-sizing: border-box;
    height: 100%;
}

/* Sidebar: float layout */
html .sidebar {
    box-sizing: border-box;
    height: 100%;
    float: left;
}

/* right section */
html .section {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    padding-top: 54px;
}

html .secondaryMenu {
    margin-top: -54px;
}

    html .secondaryMenu .rnvItem {
        float: left;
    }

html .scroller {
    box-sizing: border-box;
    height: 100%;
    position: relative;
    overflow: hidden;
}

html .gridWrapper,
html .mailDetails {
    box-sizing: border-box;
    height: 49.9%;
}

html .rgMasterTable {
    box-sizing: border-box;
}

html .mailDetails {
}

html .RadWindow {
    white-space: normal;
}


/* ===================== LEFT SLIDER MENU ===================== */
.slider {
    width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    transition: width 0.07s 0.07s ease;
}

.expandedSlider .slider {
    width: 200px;
}

.slider .logo {
    margin: 0;
    padding: 12px 15px;
    background: #000;
}

.slider .RadMenu .rmRootGroup {
    padding: 0;
    background: transparent;
    border: 0;
}

    .slider .RadMenu .rmRootGroup .rmRootLink {
        border: 0;
    }

        .slider .RadMenu .rmRootGroup .rmRootLink:hover {
            color: inherit;
            background: #393939;
        }

    .slider .RadMenu .rmRootGroup .rmSelected > .rmRootLink {
        background: #2d2d2d;
    }

    .slider .RadMenu .rmRootGroup .rmFocused > .rmLink {
        box-shadow: none;
    }

.slider .main-menu .rmRootGroup .rmRootLink {
    font-size: 18px;
    font-weight: 100;
    position: relative;
    line-height: 52px;
}

    .slider .main-menu .rmRootGroup .rmRootLink span.rmLeftImage {
        font-size: 28px;
        margin: 0 10px 0 0 !important;
        width: auto;
    }

        .slider .main-menu .rmRootGroup .rmRootLink span.rmLeftImage:before {
            font-family: FontAwesome;
        }

.slider .main-menu .rmRootGroup .rmItem:hover,
.slider .main-menu .rmRootGroup .rmItem.rmSelected {
    background: #393939;
}

    .slider .main-menu .rmRootGroup .rmItem:hover .rmRootLink:before,
    .slider .main-menu .rmRootGroup .rmItem.rmSelected .rmRootLink:before {
        content: "";
        height: 100%;
        width: 3px;
        position: absolute;
        left: 0;
        top: 0;
    }

.slider .jobs .rmRootLink:before {
    background: #0082cc;
}

.slider .jobs .rmLeftImage:before {
    content: "\f01c";
}

.slider .production .rmRootLink:before {
    background: #ec6807;
}

.slider .production .rmLeftImage:before {
    content: "\f085";
}

.slider .contacts .rmRootLink:before {
    background: #ff3f5e;
}

.slider .contacts .rmLeftImage:before {
    content: "\e604";
}

.slider .planner .rmRootLink:before {
    background: #679a35;
}

.slider .planner .rmLeftImage:before {
    content: "\f073";
}

.slider .exprod .rmRootLink:before {
    background: #ff4d6b;
}

.slider .exprod .rmLeftImage:before {
    content: "\f085";
}

.slider .help-menu {
    background: #000;
    position: absolute;
    top: 100vh;
    margin-top: -75px;
    left: 0;
    text-transform: uppercase;
}


/* ===================== HEADER ===================== */
.main-header {
    padding: 2px 10px;
    color: #fff;
}

    .main-header .icon {
        font-size: 2em;
        line-height: 32px;
    }

    .main-header .home-btn {
        float: left;
        padding: 8px 0;
        cursor: pointer;
        display: flex;
    }

        .main-header .home-btn .icon {
            margin-right: 5px;
        }

        .main-header .home-btn .text {
            vertical-align: top;
            font-weight: 400;
            font-size: 24px;
        }

        .main-header .home-btn:before {
            font-size: 1.08333333em;
        }

    .main-header .header-info {
        float: right;
    }

        .main-header .header-info .rnvRootGroupWrapper,
        .main-header .header-info .rnvRootLink {
            border: 0;
        }

        .main-header .header-info > span {
            margin-right: 30px;
        }


/* ===================== RADNAV ===================== */
html .RadNavigation {
    font-size: 16px;
}

    html .RadNavigation .rnvRootGroup {
        display: block;
    }

        html .RadNavigation .rnvRootGroup .rnvItem {
            vertical-align: middle;
        }

        html .RadNavigation .rnvRootGroup:after {
            content: "";
            display: block;
            clear: both;
        }

    html .RadNavigation .rnvFocused > .rnvLink {
        box-shadow: none;
    }

    html .RadNavigation .rightScndNav {
        float: right;
    }

        html .RadNavigation .rightScndNav .rnvTemplate {
            padding: 0;
            border: 0;
        }

        html .RadNavigation .rightScndNav.rnvHovered .rnvRootLink.rnvTemplate,
        html .RadNavigation .rightScndNav.rnvSelected .rnvRootLink.rnvTemplate,
        html .RadNavigation .rightScndNav.rnvFocused .rnvRootLink.rnvTemplate {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }

        html .RadNavigation .rightScndNav .button {
            display: inline-block;
            padding: 15px;
            cursor: pointer;
        }

        html .RadNavigation .rightScndNav .icon {
            font-size: 1em;
        }

        html .RadNavigation .rightScndNav .text {
            display: inline-block;
            text-indent: -99999px;
        }

    html .RadNavigation .rwzSprite {
        display: inline-block;
        vertical-align: top;
    }

    html .RadNavigation .icon {
        font-size: 2em;
        line-height: 22px;
    }

    html .RadNavigation .rnvLink, html .RadNavigation .rnvText {
        cursor: pointer;
        border: 0px !important;
    }

    html .RadNavigation .rwzSprite + .rnvText {
        margin-left: 10px;
    }

    html .RadNavigation .user .rnvText {
        margin: 0;
    }

    html .RadNavigation .user .rwzSprite {
        position: absolute;
        right: 0;
        font-size: 1.5em;
    }

    html .RadNavigation .user .icon {
        font-size: 1.2em;
    }

.rsbListItem {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ===================== RADMENU (HORIZONTAL) ===================== */
html .RadMenu {
    font-size: 12px;
}

.RadMenu .rmGroup .rmContent {
    padding: 4px 12px !important;
}

.RadMenu .rmGroup .rmLink {
    padding: 4px 12px !important;
}

.RadMenu .rmRootGroup .rmContent {
    padding: 0px !important;
}

.RadMenu .rmRootGroup.rmHorizontal > .rmItem,
.RadMenu .rmRootGroup.rmHorizontal > .rmRootScrollGroup > .rmItem {
    border: none !important;
}

.RadMenu .rmRootGroup .rmRootLink {
    border-color: #555 !important;
    padding: 15px !important;
    border: none !important;
}

.RadMenu .rmGroup, .RadMenu .rmRootGroup, .RadMenu .rmMultiColumn, .RadMenu .rmPopup {
    border-width: 0px !important;
}


/* ===================== TOOLTIP ===================== */
.scroller {
    overflow: auto;
    overflow-x: hidden;
}

html .RadToolTip {
    color: #000;
    background: #fff;
    border-color: #cdcdcd;
}

    html .RadToolTip .rtCalloutTopCenter {
        border-bottom-color: #cdcdcd;
        left: auto;
        right: 38px;
    }

        html .RadToolTip .rtCalloutTopCenter:before {
            border-bottom-color: #fff;
        }

    html .RadToolTip .rtContent {
        padding: 15px;
        white-space: nowrap;
    }

        html .RadToolTip .rtContent * {
            vertical-align: top;
        }

        html .RadToolTip .rtContent > div:after {
            content: "";
            display: block;
            clear: both;
        }

    html .RadToolTip img {
        display: inline-block;
        margin-right: 17px;
    }

    html .RadToolTip .content {
        display: inline-block;
    }

        html .RadToolTip .content > span {
            display: block;
        }

    html .RadToolTip .addBtn {
        padding: 5px 0;
        margin: 10px 0;
        border-width: 1px 0;
        border-style: solid;
        border-color: #cdcdcd;
        cursor: pointer;
    }

        html .RadToolTip .addBtn * {
            vertical-align: middle;
        }

        html .RadToolTip .addBtn .icon {
            font-size: 2em;
        }


/* ===================== SIDEBAR BASE ===================== */
.rnvSlide {
    min-width: 160px;
}

    .rnvSlide .rnvLink .rnvText {
        cursor: pointer;
    }

.sidebar {
    width: 240px;
    background-color: #f5f5f5;
}

    .sidebar .RadTreeView {
        margin-top: 10px;
        line-height: 1.7em;
    }

        .sidebar .RadTreeView .rtIn {
            display: block;
            margin-left: -27px;
            padding-left: 27px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar .RadTreeView .rtHover .rtIn,
        .sidebar .RadTreeView .rtSelected .rtIn,
        .sidebar .RadTreeView .rtEdit .rtIn {
            color: #000;
            background: #fff;
            border-color: #fff;
        }

        .sidebar .RadTreeView .rtLines .rtLI:before,
        .sidebar .RadTreeView .rtLines .rtTop:before,
        .sidebar .RadTreeView .rtLines .rtMid:before,
        .sidebar .RadTreeView .rtLines .rtBot:before {
            display: none;
        }

    .sidebar #newFolderContainer {
        padding-left: 1.66667em;
    }

    .sidebar .btn-new-node {
        margin-top: 7px;
        padding-left: 28px;
        cursor: pointer;
    }

    .sidebar .rtLI.last {
        border-bottom: 1px solid #e1e1e1;
    }


/* ===================== INPUTS ===================== */
html body .RadInput_MetroTouch input.riFocused,
html body .RadInput_Focused_MetroTouch {
    outline: none;
}


/* ===================== MOBILE ===================== */
.mobile .slider .main-menu {
    display: block;
}

.mobile .container {
    padding-top: 54px;
}

.mobile .sidebar {
    width: 100%;
    height: auto;
    float: none;
    margin-top: -54px;
}

.mobile .RadMenu {
    font-size: 13px;
}

.mobile .main-header .rnvText {
    display: none;
}

.mobile .RadNavigation .user .rnvLink {
    height: 22px;
    padding-right: 70px;
    background: url("../Images/photo-profile-s.png") 15px 4px no-repeat;
}

.mobile .sidebar {
    font-weight: normal;
}

.mobile .RadMenuPopup .rmItem.rmSelected {
    background: transparent;
}

.mobile .RadMenuPopup .rmItem {
    border: 0;
}

.mobile .breadcrumb {
    overflow: hidden;
}

    .mobile .breadcrumb .item {
        position: relative;
        display: inline-block;
        padding: 7px 10px;
    }

        .mobile .breadcrumb .item.selected {
            color: #000;
        }

        .mobile .breadcrumb .item.expanded {
            color: #fff;
        }

        .mobile .breadcrumb .item + .item {
            margin-left: 20px;
        }

            .mobile .breadcrumb .item + .item:before {
                content: "\e60e";
                font-family: 'OutlookSampleApp';
                position: absolute;
                left: -20px;
                top: 10px;
                color: #bfbfbf;
            }

        .mobile .breadcrumb .item.menu {
            display: inline-block;
        }

    .mobile .breadcrumb .RadMenu {
        vertical-align: middle;
    }

        .mobile .breadcrumb .RadMenu .rmRootToggle {
            border: 0;
            color: inherit;
            background: transparent !important;
            box-shadow: none;
        }

            .mobile .breadcrumb .RadMenu .rmRootToggle:before {
                font-family: OutlookSampleApp;
                content: "\e62e";
            }

.mobile .RadNavigation.secondaryMenu .rnvItem.rnvFirst {
    margin-right: 0;
}

.mobile .header-info {
    width: 210px;
}

/* ✅ Mobile min-width (αν το θες) */
.mobile .page > div {
    min-width: 600px;
    box-sizing: border-box;
}

.mobile .RadNavigation .rightScndNav .horizontalBtn,
.mobile .RadNavigation .rightScndNav .verticalBtn {
    display: none;
}


/* ===================== MISC ===================== */
.min40 {
    min-width: 40px !important;
    white-space: nowrap;
    display: contents;
}

.min80 {
    min-width: 80px !important;
    white-space: nowrap;
}

.min100 {
    min-width: 100px !important;
    white-space: nowrap;
}

.rgHeader.rgCheck {
    padding-left: 0px !important;
}

.progress {
    background-color: lightgray;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: inherit;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    transition: width .6s ease;
}

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

.bg-gray-light {
    background-color: #f7f7f7;
}

.bg-black {
    background-color: #111 !important;
    color: white !important;
}

.bg-red {
    background-color: #dd4b39 !important;
    color: white !important;
}

.bg-yellow {
    background-color: #f39c12 !important;
}

.bg-aqua {
    background-color: #00c0ef !important;
}

.bg-blue {
    background-color: #0073b7 !important;
    color: white;
}

.bg-light-blue {
    background-color: #3c8dbc !important;
}

.bg-green {
    background-color: #00a65a !important;
}

.bg-production {
    background-color: #77aa45 !important;
}

.bg-navy {
    background-color: #001F3F !important;
}

.bg-teal {
    background-color: #39CCCC !important;
}

.bg-olive {
    background-color: #3D9970 !important;
}

.bg-lime {
    background-color: #01FF70 !important;
}

.bg-orange {
    background-color: #FF851B !important;
}

.bg-fuchsia {
    background-color: #F012BE !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

.bg-maroon {
    background-color: #D81B60 !important;
}

.text-red {
    color: #dd4b39 !important;
}

.text-yellow {
    color: #f39c12 !important;
}

.text-aqua {
    color: #00c0ef !important;
}

.text-blue {
    color: #0073b7 !important;
}

.text-black {
    color: #111111 !important;
}

.text-light-blue {
    color: #3c8dbc !important;
}

.text-green {
    color: #00a65a !important;
}

.text-gray {
    color: #d2d6de !important;
}

.text-navy {
    color: #001f3f !important;
}

.text-teal {
    color: #39cccc !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-orange {
    color: #ff851b !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-purple {
    color: #605ca8 !important;
}

.text-maroon {
    color: #d81b60 !important;
}

.rgNoRecords div {
    height: 100px;
    padding: 30px;
    font-size: 20px;
    text-align: center;
}

.sub_title {
    vertical-align: top;
    font-weight: 400;
    font-size: 24px;
}

mark {
    background: #e6ff00;
    color: #000;
    padding: 0 2px;
}


/* ===================== SEARCH UI ===================== */
.nav-box {
    display: flex;
}

.nav-text {
    position: relative;
    display: inline-block;
    padding: 10px;
}

    .nav-text .riTextBox {
        padding-right: 32px !important;
    }

        .nav-text .RadInputFocused input,
        .nav-text .riTextBox[value]:not([value=""]) {
            background-color: #e6ff00 !important;
            box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
        }

.nav-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555 !important;
    font-size: 10px;
    font-weight: 700;
}

    .nav-clear i {
        font-size: 29px;
    }

    .nav-clear:hover {
        color: #000 !important;
    }

.nav-btn {
    padding: 5px;
}


/* ===================== GLOBAL PROGRESS ===================== */
.global-progress {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

    .global-progress .progress-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.7);
    }

    .global-progress .progress-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #555;
    }

.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

.text-red-bold {
    color: red;
    font-weight: 700;
}

.RadInput .riTextBox {
    height: 30px !important;
}


/* ===================== PROGRESS BOXES ===================== */
.progress-boxes {
    position: relative;
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.15);
    max-width: 200px;
}

    .progress-boxes .pb {
        display: block;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid rgba(255,255,255,.35);
    }

    .progress-boxes .pb-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #000000;
        text-shadow: 1px -1px 11px rgb(0 0 0 / 50%);
        pointer-events: none;
        z-index: 2;
        white-space: nowrap;
    }

.pb-fin {
    background: #77aa45;
}

.pb-start {
    background: #ff851b;
}

.pb-pend {
    background: #cfd4da;
}

.pb-out {
    position: relative;
    background-image: repeating-linear-gradient( -45deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 5px, rgba(255,255,255,0.15) 5px, rgba(255,255,255,0.15) 10px );
}

.progress-boxes .pb:last-child {
    border-right: 0;
}

.cal-today {
    background-color: #d1ffbd;
}

.rgRow td, .rgAltRow td {
    padding: 5px !important;
}

.priority_press_1 {
    background-color: #77aa45;
    font-size: 8px;
    padding: 2px;
    border-radius: 3px;
    color: white;
}

.priority_press_2 {
    background-color: orange;
    font-size: 8px;
    padding: 2px;
    border-radius: 3px;
    color: white;
}

.priority_press_3 {
    background-color: red;
    font-size: 8px;
    padding: 2px;
    border-radius: 3px;
    color: white;
}


/* =========================================================
   ✅ SIDEBAR COLLAPSE (ΔΙΟΡΘΩΜΕΝΟ)
   - Χωρίς flex στο container
   - Χωρίς “κενό” δεξιά
   - Clicks λειτουργούν όταν είναι open
   ========================================================= */
.container.clear {
    display: block !important;
    width: 100% !important;
}

.container.production {
    display: block !important;
    width: 100% !important;
    min-height: calc(100vh - 60px) !important;
    height: calc(100vh - 60px) !important;
}

.production.doublescroll {
    height: calc(100vh - 60px)!important;
}

/* Sidebar base */
#sidebar,
html .sidebar {
    width: 240px;
    transition: width .25s ease, opacity .25s ease, visibility .25s ease;
    overflow: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ✅ clicks ON */
}

/* Right content δίπλα στο float */
.section.right {
    display: block;
    overflow: hidden;
    min-width: 0;
    margin-left: 0 !important;
}

/* Collapsed */
body.sidebar-collapsed #sidebar,
body.sidebar-collapsed html .sidebar {
    width: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* ✅ όταν κλειστό, να μην πιάνει clicks */
}

/* Προαιρετικό: αν έχεις overlay που μένει */
body.sidebar-collapsed .tm-click-overlay {
    display: none !important;
}


/* ===================== CALENDAR STYLING ===================== */
.main_calendar:first-child caption,
.SmallCalendar:first-child caption {
    padding: 0px;
}



html .RadCalendar .rcTitlebar,
html .RadCalendar .rcMain {
    border: 0;
}

html .RadCalendar .rcTitlebar {
    border-bottom: 1px solid #cdcdcd;
}

html .RadCalendar .rcWeek th {
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    font-size: 12px;
}

.sidebar .RadCalendar .rcRow a,
.sidebar .RadCalendar .rcRow span {
    display: inline-block;
    border: none !important;
    border-radius: 3px;
    padding: 4px;
    width: 1.42857143em;
    text-decoration: none;
    outline: 0;
}

.sidebar .RadCalendar {
    line-height: 2.4 !important;
}

    .sidebar .RadCalendar .rcRow a,
    .sidebar .RadCalendar .rcRow span {
        padding: 3px !important;
    }

    .sidebar .RadCalendar .rcRow td {
        height: 35px !important;
        width: 40px !important;
        padding: 0px !important;
        border: none !important;
        border-bottom: 1px solid !important;
        border-right: 1px solid !important;
        border-color: #d6d6d6 !important;
    }

        .sidebar .RadCalendar .rcRow th + td,
        .sidebar .RadCalendar .rcRow td:first-child {
            border-left: 1px solid !important;
            border-color: #d6d6d6 !important;
            padding: 0px !important;
        }

    .sidebar .RadCalendar .rcRow:first-child td,
    .sidebar .RadCalendar .rcRow:first-child th {
        border-top: 1px solid !important;
        border-color: #d6d6d6 !important;
    }

    .sidebar .RadCalendar .rcRow td:last-child {
        padding: 0px !important;
    }

    .sidebar .RadCalendar .rcWeek th {
        text-align: center;
        padding: 0px !important;
    }

html .sidebar .RadCalendar .rcRow .rcSelected {
    background: #25a0da;
}

.sidebar .rcOtherMonth {
    border: none;
}

/* Wrapper: πιάνει όλο το κελί */
.sidebar .calwrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ΗΜΕΡΑ: πάνω αριστερά */
.sidebar .calday {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    line-height: 11px;
}

/* ΑΡΙΘΜΟΣ: στο κέντρο */
.sidebar .caljobs {
    position: absolute;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: #e53935;
}

.sidebar .RadCalendar .rcTitlebar .rcTitle {
    width: 100%;
    cursor: pointer;
    font-size: 15px;
}

.calday.cal-weekend {
    opacity: .45;
    pointer-events: none; /* προαιρετικό: να μην “πιάνεται” καν */
}

.sidebar .RadCalendar .rcTitlebar .rcFastPrev,
.sidebar .RadCalendar .rcTitlebar .rcFastNext {
    display: none !important;
}

.sidebar > .RadCalendarPopupShadows {
    left: 12px !important;
    padding-top: 26px !important;
}

.dtdinpt {
    display: none;
}

.RadCalendar {
    width: inherit !important;
}

.rcSelected .calday {
    color: #ffffff;
}


/* ===================== PAGE THEMES ===================== */
.css_jobs {
    background-image: url("../Images/backgrounds/header_mail.gif");
}

    .css_jobs .RadTreeView_MetroTouch .rtSelected .rtIn {
        border-color: #25a0da;
        color: #fff;
        background-color: #25a0da;
    }

.css_planner {
    background-image: url(../Images/backgrounds/header_calendar.gif);
}

    .css_planner .RadTreeView_MetroTouch .rtSelected .rtIn {
        border-color: #25a0da;
        color: #fff;
        background-color: #25a0da;
    }

.css_operators {
    background-image: url(../Images/backgrounds/header_notes.gif);
}

    .css_operators .RadTreeView_MetroTouch .rtSelected .rtIn {
        border-color: #25a0da;
        color: #fff;
        background-color: #25a0da;
    }


.css_production {
    background-image: url(../Images/backgrounds/header_about.gif);
}

.css_ex_prod {
    background-image: url(../Images/backgrounds/header_contacts.gif);
}


/* =========================================================
   ✅ RADSPLITTER FULL HEIGHT (Jobs.aspx)
   ========================================================= */
.SplitterFull {
    width: 100% !important;
    height: 100% !important;
}

.RadSplitter {
    width: 100% !important;
    height: 100% !important;
}

/* Προαιρετικά: τα panes να “αναπνέουν” σε ύψος */
.RadPane {
    height: 100% !important;
    min-height: 0 !important;
}


/* =========================================================
   ✅ FOLDER PANE (Calendar + scroll κάτω)
   Βάλτο στο Jobs.aspx: <div class="folder-pane"> ... </div>
   ========================================================= */
.folder-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0; /* κρίσιμο */
}

.folder-nav {
    flex: 1 1 auto;
    min-height: 0; /* κρίσιμο */
    overflow-y: auto;
    overflow-x: hidden;
}

.folder-nav-scroll {
    flex: 1 1 auto;
    min-height: 0; /* κρίσιμο */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 350px);
}


/* =========================================================
   ✅ GRID WRAPPERS / DETAILS
   ========================================================= */

.grid2_hidden {
    visibility: hidden;
}

.grid2_show {
    visibility: visible;
}





.grid2-wrap {
    overflow: hidden;
}

.mailDetails {
    border-top: 1px solid #cdcdcd;
    background: #fff;
}

    .mailDetails .header {
        padding: 0 12px;
        color: #000 !important;
        background: #e8e8e8;
    }

    .mailDetails .order_header {
        padding: 0 12px;
        color: #fff;
        background: #222222;
        display: block;
        margin: 0px !important;
    }

        .mailDetails .order_header .title {
            color: #fff !important;
        }

    .mailDetails .order_header_chunk {
        color: #000 !important;
        font-weight: 700;
    }

    .mailDetails .order_value {
        color: #000 !important;
    }

    .mailDetails .title {
        color: #25a0da;
    }

    .mailDetails .header:after {
        content: "";
        display: block;
        clear: both;
    }

    .mailDetails #subject {
        font-size: 17px;
        border-bottom: 1px solid #fff;
    }

    .mailDetails #from {
        float: left;
        padding: 4px 0;
    }

    .mailDetails #recieved {
        float: right;
        padding: 10px 0;
    }

    .mailDetails .span_ {
        font-size: 10px;
        position: relative;
        color: #006a9d !important;
        font-weight: 700;
        top: 5px;
    }

.ProdDetails .order_header {
    padding: 0 12px;
    color: #fff;
    background: #222222;
    display: block;
    margin: 0px !important;
}

.header .job_name {
    font-size: small;
    line-height: 14px;
    display: block;
}

.col-actions {
    width: 150px !important;
}

.doublescroll_f .RadAjaxPanel {
    height: 100%;
    min-height: 0;
}


/* =========================================================
   ✅ doublescroll / doublescroll_f ΜΟΝΟ με CSS
   Αντί για JS: resizeDoubleScroll()
   ========================================================= */

/* 1) Full height chain (ξανά για σιγουριά) */
html, body, form {
    height: 100%;
}

/* 2) wrappers που “κρατάνε” το ύψος */
.doublescroll,
.doublescroll_f {
    display: flex;
    flex-direction: column;
    min-height: 0; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ */
}

/* Διαφορετικά offsets, όπως είχες */
.doublescroll {
    height: calc(100vh - 300px);
}

.doublescroll_f {
    height: calc(100vh - 300px);
}

/* 3) Jobs layout μέσα στο doublescroll */
.jobs-layout {
    display: flex;
    gap: 12px; /* optional */
    min-height: 0;
}
.production-layout {
    display: flex;
    gap: 12px; /* optional */
    min-height: 0;
}



/* 4) areas να μπορούν να “συμπιεστούν” */
.jobs-grid-area,
.jobs-prod-area {
}

/* 5) Telerik rgDataDiv να γεμίζει το διαθέσιμο ύψος */
.doublescroll .rgDataDiv,
.doublescroll_f .rgDataDiv {
    max-height: 100% !important;
}

/* ===================== PATCH: Jobs layout (grid πάνω, production κάτω) ===================== */

/* 0) Το page να ΜΗΝ κάνει δικό του scroll (σπάει 100% heights) */
html .page {
    overflow: hidden !important;
}

/* 1) Full-height chain μέσα στο app */
html, body, form {
    height: 100%;
}

    html .container {
        height: 100% !important;
    }

    html .section.right {
        height: 100% !important;
        overflow: hidden !important;
    }

    html .scroller {
        height: 100% !important;
        overflow: hidden !important;
    }

/* 2) RadSplitter να παίρνει πραγματικό ύψος */
.SplitterFull,
.RadSplitter {
    height: 100% !important;
    width: 100% !important;
}

.RadPane {
    height: 100% !important;
    min-height: 0 !important;
}

/* 3) Το wrapper που έχει Grid + Production να είναι ΚΑΘΕΤΟ flex (όχι οριζόντιο) */
.doublescroll.jobs-layout {
    display: flex !important;
    flex-direction: column !important; /* <-- ΑΥΤΟ είναι το κρίσιμο */
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 4) Grid area γεμίζει ό,τι μένει */
.jobs-grid-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 5) Production area σταθερό κάτω (π.χ. 260px – άλλαξέ το όπως θες) */
.jobs-prod-area {
    flex: 0 0 260px !important; /* <-- άλλαξε 260 -> 300 αν θες */
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 5) Production area σταθερό κάτω (π.χ. 260px – άλλαξέ το όπως θες) */
.jobs-prod-area-prod {
    flex: 0 0 460px !important; /* <-- άλλαξε 260 -> 300 αν θες */
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 6) RadGrid να τεντώνει στο διαθέσιμο ύψος */
.jobs-grid-area .RadGrid {
    height: 100% !important;
}

/* 7) Το scroll div του Telerik να γεμίζει (αν χρησιμοποιείς AllowScroll=true) */
.jobs-grid-area .rgDataDiv {
    height: 100% !important;
    max-height: 100% !important;
}

/* ===================== PATCH: right grid wrapper (.doublescroll_f) ===================== */
/* Αν το .doublescroll_f είναι μέσα σε container με 100% ύψος, κράτα το έτσι: */
.doublescroll_f {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    .doublescroll_f .rgDataDiv {
        height: calc(100vh - 250px) !important;
    }

/* ====== FIX: Force Telerik grid scrolling ====== */

/* Το container του grid να είναι πραγματικά περιορισμένο */
.jobs-grid-area {
    overflow: hidden !important;
}


    /* Αυτό είναι το div που κάνει το scroll στον Telerik */
    .jobs-grid-area .RadGrid .rgDataDiv {
        height: calc(100% - 142px) !important; /* 42px περίπου header του grid */
        max-height: calc(100% - 142px) !important;
        overflow: auto !important;
    }

    /* Αν έχεις pager κάτω, αφαίρεσε λίγο ακόμα */
    .jobs-grid-area .RadGrid .rgPager {
        flex: 0 0 auto;
    }

.d-grid {
    display: grid;
}

/* =========================================================
   FINAL FIX – Telerik RadGrid SCROLL (Jobs.aspx)
   ΒΑΛΤΟ ΑΚΡΙΒΩΣ ΣΤΟ ΤΕΛΟΣ ΤΟΥ common.css
   ========================================================= */

/* --- reset αντικρουόμενων κανόνων --- */
.scroller,
.page,
.container,
.section.right {
    overflow: hidden !important;
}

/* --- full height chain --- */
html, body, form {
    height: 100% !important;
}

.container,
.section.right,
.scroller,
.RadSplitter,
.SplitterFull,
.RadPane {
    height: 100% !important;
}

/* --- wrapper grid + production (ΚΑΘΕΤΟ layout) --- */
.doublescroll.jobs-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* --- grid area γεμίζει το διαθέσιμο --- */
.jobs-grid-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* --- production σταθερό κάτω --- */
.jobs-prod-area {
    flex: 0 0 300px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.jobs-prod-area-prod {
    flex: 0 0 400px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    .jobs-prod-area-prod .RadGrid {
        border: none !important;
        overflow: auto;
    }
/* --- RadGrid ΠΡΕΠΕΙ να είναι 100% --- */
.jobs-grid-area .RadGrid {
    height: 100% !important;
}


    /* ✅ ΜΟΝΟ ΕΔΩ ΚΑΝΕΙ SCROLL Ο TENERIK */
    .jobs-grid-area .RadGrid .rgDataDiv {
        height: calc(100% - 42px) !important; /* header */
        max-height: calc(100% - 42px) !important;
        overflow-y: auto !important;
    }

    /* --- αν υπάρχει pager --- */
    .jobs-grid-area .RadGrid .rgPager {
        flex: 0 0 auto !important;
    }

/* =========================================================
   ✔️ TENERIK SCROLL – ΜΟΝΟ ΑΥΤΟ ΧΡΕΙΑΖΕΤΑΙ
   ========================================================= */

/* chain */
html, body, form,
.container,
.section.right,
.scroller,
.RadSplitter,
.SplitterFull,
.RadPane {
    height: 100% !important;
    min-height: 100vh; /* μέχρι κάτω στην οθόνη */
    overflow: hidden !important;
}

.production {
    height: calc(100vh - 120px) !important;
}

/* layout */
.doublescroll.jobs-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

.jobs-grid-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    /* ✅ ΤΟ GRID ΠΡΕΠΕΙ ΝΑ ΕΧΕΙ ΠΡΑΓΜΑΤΙΚΟ HEIGHT */
    .jobs-grid-area .RadGrid {
        height: 100% !important;
    }

        /* ❌ ΜΗΝ ΑΦΗΝΕΙΣ ΤΟ TABLE ΝΑ ΜΕΓΑΛΩΝΕΙ */
        .jobs-grid-area .RadGrid .rgMasterTable {
            height: auto !important;
        }

        /* ✅ ΜΟΝΟ ΑΥΤΟ ΚΑΝΕΙ SCROLL */
        .jobs-grid-area .RadGrid .rgDataDiv {
            height: calc(100% - 86px) !important;
            max-height: calc(100% - 86px) !important;
            overflow-y: auto !important;
        }

/* =========================================================
   RIGHT GRID
   ========================================================= */

.pane-expanded {
    overflow: auto !important;
}

.pane-fix {
    overflow: hidden !important;
}


.doublescroll_f {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 62px) !important;
    min-height: 0 !important;
}

    .doublescroll_f .RadGrid {
    }

    .doublescroll_f .rgDataDiv {
        overflow-y: auto !important;
    }

/* =========================================================
   FIX: RadAjaxPanel + RadGrid SCROLL
   ΜΟΝΟ μέσα στο .jobs-grid-area
   ========================================================= */

.jobs-grid-area,
.jobs-grid-area .RadAjaxPanel,
.jobs-grid-area .RadAjaxPanel > div {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

    /* Grid να γεμίζει το διαθέσιμο ύψος */
    .jobs-grid-area .RadGrid {
        height: 100% !important;
    }

    /* ΜΟΝΟ το Telerik scroll */
    .jobs-grid-area .rgDataDiv {
        height: calc(100% - 142px) !important; /* header grid */
        max-height: calc(100% - 142px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

.pnupd_css {
    display: contents;
}

.job_data {
    line-height: 12px;
}

.text_customer {
    font-size: 14px;
}

.text_job_name {
    font-weight: 600 !important;
}

.RadPicker_Bootstrap .rcCalPopup {
    border-radius: 4px !important;
}

.dif-days {
    display: flex;
}

.dif-days-div {
}

.RadNavigation_BlackMetroTouch .rnvRootGroupWrapper {
    border-color: #555;
    color: #fff;
    background-color: #000000 !important;
}

.RadMenu .rmGroup .rmContent {
    padding: 4px 32px;
    cursor: pointer;
}

    .RadMenu .rmGroup .rmContent:hover {
        background-color: #3c3b3b;
    }

.printbay_css {
    box-shadow: -11px 0px 0 #3a9100;
    padding: 0px 5px;
}

.b2b_css {
    padding: 0px 5px;
}

.pn_item_passed {
    box-shadow: -11px 0px 0 #dd4b39;
    padding: 0px 5px;
}

.rp_item {
}
/* Operators */
.chat .item > img {
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 50%;
}

.chat .item > .message > .name {
    display: block;
    font-weight: 600;
}

.chat .item {
    margin-bottom: 10px;
}

    .chat .item > .message {
        margin-left: 55px;
        margin-top: -40px;
    }


/* wrapper */
.rp_prod {
    display: table;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    /* κάθε row */
    .rp_prod .table-row {
        transition: background-color 0.15s ease;
    }

        /* hover */
        .rp_prod .table-row:hover {
            background-color: #f5f7fa;
        }

    /* cells */
    .rp_prod .cell {
        display: table-cell;
        padding: 6px 10px;
        vertical-align: middle;
        border-bottom: 1px solid #e1e5ea;
        white-space: nowrap;
        text-wrap: auto;
    }

    .rp_prod .last-cell {
        text-align: right;
    }

    .rp_prod .id-cell {
    }

    .rp_prod .job-cell {
        white-space: nowrap;
        text-wrap: auto;
    }

    /* optional: job name πιο έντονο */
    .rp_prod .cell:nth-child(5) {
        font-weight: 600;
    }

    /* zebra rows */
    .rp_prod .table-row:nth-child(even) {
        background-color: #fafbfc;
    }

    /* selection state (αν το χρειαστείς μετά) */
    .rp_prod .table-row.selected {
        background-color: #e6f0ff;
    }

        .rp_prod .table-row.selected a {
            background-color: #e6f0ff;
        }

    .rp_prod .assignTrue {
        background-color: #ffdabb !important;
        color: black !important;
    }

    .rp_prod .assignFalse {
        background-color: #ffffff !important;
        color: black !important;
    }

    .rp_prod .assignTrue a {
        color: black !important;
    }



.grid_oper table {
    table-layout: fixed;
    width: 100%;
    display: contents !important;
}

.rp-table {
    width: 100%;
}

.table-prod {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .table-prod th,
    .table-prod td {
        padding: 6px 8px;
        font-size: 12px;
        border-bottom: 1px solid #e0e0e0;
        vertical-align: top;
    }

    .table-prod th {
        background: #f5f5f5;
        text-align: left;
        font-weight: 600;
    }

    .table-prod tr:hover {
        background: #f9f9f9;
    }

    .table-prod .id-cell {
        text-align: center;
        font-weight: bold;
        width: 50px;
    }

    .table-prod .last-cell {
        text-align: center;
    }

.assignTrue {
    background: #eef8ff;
}

.assignFalse {
    opacity: 0.85;
}

.ajaxWrap {
    display: block;
    width: 100%;
    min-height: 100%;
}

.pnupd {
    min-height: 100vh; /* μέχρι κάτω στην οθόνη */
}

.sidebar .RadTreeView .rtSelected .rtIn, .sidebar .RadTreeView .rtEdit .rtIn {
    color: #ffffff;
    background: #25a0da !important;
    border-color: #fff !important;
}

.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

    .online-dot.on {
        background: #28a745;
        box-shadow: 0 0 0 2px rgba(40,167,69,.15);
    }

    .online-dot.off {
        background: #adb5bd;
    }


.online-toggle {
    display: inline-block;
    width: 28px;
    height: 14px;
    border-radius: 14px;
    background: #d94a39;
    position: relative;
    margin-right: 8px;
    vertical-align: middle;
    float: right;
}

    .online-toggle:before {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        top: 1px;
        left: 1px;
        border-radius: 50%;
        background: #fff;
        transition: all .15s ease;
    }

    .online-toggle.on {
        background: #28a745;
    }

        .online-toggle.on:before {
            left: 15px;
        }

.UserActiveFalse {
    border-left: 6px solid red;
    background-color: #ffeaea;
}

.UserActiveTrue {
    border-left: 6px solid #77aa45;
}

.UserActiveFalse img {
}

.UserActiveTrue img {
}

.myelipsis {
    display: inline-block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myelipsis {
    width: 120px !important;
}

.job_id_link {
    color: black;
    text-decoration: underline;
}



.rmDisabled span, .rmDisabled i {
    color: gray;
}


/* ===== Toast Container ===== */
#toast-container {
    pointer-events: none; /* click μόνο στα toasts */
}

    /* ===== Toast Box ===== */
    #toast-container .toast {
        pointer-events: auto;
        border-radius: 6px;
        overflow: hidden;
        animation: toast-slide-in 0.25s ease-out;
        margin-bottom: 10px;
        min-height: 100px;
    }


    /* ===== Toast Header ===== */
    #toast-container .toast-header {
        padding: 0.4rem 0.6rem;
    }

        /* Title */
        #toast-container .toast-header strong {
            font-weight: 600;
        }

        /* Small text (π.χ. "τώρα") */
        #toast-container .toast-header small {
            margin-right: 0.5rem;
        }

        /* Close button */
        #toast-container .toast-header .close {
            font-size: 26px;
            opacity: 1.6;
            top: -4px;
            position: relative;
        }

            #toast-container .toast-header .close:hover {
                opacity: 1;
            }

    /* ===== Toast Body ===== */
    #toast-container .toast-body {
        padding: 0.6rem 0.75rem;
        text-wrap: auto;
    }


    #toast-container .shadow {
        box-shadow: 0 20px 25px -5px var(--tw-shadow-color, oklab(0% 0 0 / .3)), 0 8px 10px -6px var(--tw-shadow-color, oklab(0% 0 0 / .3));
    }



    #toast-container .toast-info {
        background-color: #17a2b8; /* info - γαλάζιο */
    }

    #toast-container .text-info {
        color: #000000 !important;
    }

    #toast-container .toast-success {
        background-color: #28a745; /* success - πράσινο */
        color: white;
    }

    #toast-container .text-success {
        color: #ffffff !important;
    }

    #toast-container .toast-error {
        background-color: #dc3545; /* error - κόκκινο */
    }

    #toast-container .text-error {
        color: #000000 !important;
    }

    #toast-container .toast-warning {
        background-color: #ffc107; /* warning - κίτρινο */
        color: #212529; /* καλύτερη αναγνωσιμότητα */
    }

    #toast-container .text-warning {
        color: #000000 !important;
    }

    #toast-container .toast-danger {
        background-color: #bd2130; /* danger - σκούρο κόκκινο */
    }

    #toast-container .text-danger {
        color: #000000 !important;
    }

/* ===== Animation ===== */
@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.prod_row_css_0 {

}
.prod_row_css_1 {
    background: rgb(255 165 0) !important;
    color: #fff !important;
    padding: 7px;
    height: 100%;
    position: relative;
    display: inline-table;
}
.prod_row_css_2 {
    background: rgb(255 0 0) !important;
    color: #fff !important;
    padding: 7px;
    height: 100%;
    position: relative;
    display: inline-table;
}
.prod_row_css_3 {
    background: rgb(119 170 69) !important;
    color: #fff !important;
    padding: 7px;
    height: 100%;
    position: relative;
    display: inline-table;
}
.printTextDiv {
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    background-color: #25a0da;
    color: white;
}
.printTextDivset {
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    background-color: #000;
    color: white;
}