@font-face {

    font-family: 'Speedee-Regular';

    src: url('/fonts/Speedee_Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}G



@font-face {

    font-family: 'Speedee-Bold';

    src: url('/fonts/Speedee_Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



body {

    font-family: 'Speedee-Regular', Arial, sans-serif;

    margin: 0;

    padding: 0;

    overflow: auto;

}



#top-bar {

    background-color: #ffbc0d;

    color: white;

    padding: 10px;

    width: 100%;

    position: fixed;

    top: 0;

    z-index: 2;

    height: 55px;

}



#menu {

    width: 250px;

    height: 100%;

    background-color: #f9f9f9;

    position: fixed;

    left: 0;

    top: 55px;

    overflow-x: hidden;

    padding-top: 20px;

    color: #000;

    transition: 0.5s;

    z-index: 1;

}



#menu a {

    padding: 15px 20px;

    text-decoration: none;

    font-size: 18px;

    color: #000;

    display: block;

    border-bottom: 1px solid #e5e5e5;

}



.non-link-item {

    padding: 15px 20px;

    background-color: #e4e4e4;;

    font-size: 18px;

    color: #000;

    display: block;

    border-bottom: 1px solid #e5e5e5;

}



#menu a:hover {

    background-color: #e5e5e5;

    color: #db0007;

}



.submenu {

    display: none;

    padding-left: 20px;

    transform-origin: top;

}



#menu .submenu a {

    font-size: 15px;

    padding: 8px 20px;

}



#menu .submenu a:hover {

    background-color: #e5e5e5;

    color: #db0007;

}



#logo {



    width: 50px;



    height: 50px;



    position: fixed;



    top: 20px;



    color: #db0007;



    font-weight: bold;



    display: inline-block;



    font-family: 'Speedee-Bold';



    font-weight: bold;



}







#logo a {



    color: inherit;



    text-decoration: none;



}







@media screen and (min-width: 769px) {



    #logo {



        text-align: left;



        left: 60px;



        font-size: 30px;



    }







#logo-img {



        text-align: left;



        margin-left: 10px;



        margin-top: 15px;



    }

#logo-otp {



        text-align: left;



        margin-left: 30px;



        margin-top: 15px;



    }



    #content {



        margin-left: 270px;



        margin-top: 40px;



    }



    .number-container {



        display: grid;



        grid-template-columns: repeat(4, 250px);



        gap: 20px;



        text-align: center;



    }

    .number-container-mob {

        display: grid;

        grid-template-columns: repeat(2, 48%);

        gap: 20px;

        text-align: center;

    }

    .number-container-half {

        display: grid;

        grid-template-columns: repeat(4, 24%);

        gap: 20px;

        text-align: center;

    }



    .number-container-dfs {



        display: grid;



        grid-template-columns: repeat(2, 400px);



        gap: 20px;



        text-align: center;



    }



}







@media screen and (max-width: 768px) {



    #logo {



        text-align: right;



        right: 60px;



        font-size: 22px;



    }



    #logo-img {



        position: fixed;



        right: 115px;



        top: 20px;



    }



    #logo-otp {



        position: fixed;



        right: 20px;



        top: 20px;



    }



    #content {



        margin-left: 10;



        margin-top: 40px;



    }







    #menu {



        width: 100%;



        left: -100%;



    }







    #mobile-menu-btn {



        display: block;



        position: fixed;



        top: 15px;



        left: 15px;



        background-color: #f9f9f9;



        color: #db0007;



        border: none;



        padding: 10px;



        font-size: 18px;



        cursor: pointer;



        z-index: 3;



    }







    #menu.open {



        left: 0;



    }



    .number-container {

        display: grid;

        grid-template-columns: repeat(2, 185px);

        gap: 20px;

        text-align: center;

    }



    .number-container-mob {

        display: grid;

        grid-template-columns: repeat(1, 98%);

        gap: 20px;

        text-align: center;

    }

    .number-container-half {

        display: grid;

        grid-template-columns: repeat(2, 48%);

        gap: 20px;

        text-align: center;

    }



    .number-container-dfs {



        display: grid;



        grid-template-columns: repeat(1, 360px);



        gap: 20px;



        text-align: center;



        align-items: center;



        justify-content: center;



    }



}







#background-image {



    width: 20%;



    max-width: 140px;



    position: fixed;



    right: 30px;



    top: 75px;



    z-index: 2;



}







#mobile-menu-image {



    width: 30px;



    max-width: 100%;



}







#dfs-icon {



    width: 20px;



    max-width: 100%;



}



#openPopup {



    display: inline;



}



#openPopupOtp {



    display: inline;



}



a.openPopupOtp {

    text-decoration: none;

}





table {



    width: 100%;



    border-collapse: collapse;



    margin-top: 20px;



}







th, td {



    color: #000;



    border: 1px solid #6f6f6f;



    padding: 8px;



    text-align: left;



}







.live-table th {



    background-color: #ffbc0d;



}



.outage-table th {



    background-color: #ffbc0d;

    text-align: center;



}



.outage-table tr {



    background-color: #ffffff;



}







#daily {



    background-color: #f4f4f4 !important;



    font-weight: bold;



}







#live-sales-heading {



    padding-bottom: 20px;



}







#underline {



    position: relative;



    background: linear-gradient(#db0007, #db0007);



    background-repeat: no-repeat;



    background-size: 100% 3px;



    background-position: 50% 100%;



    padding: 0 1px 1.5px 0;



    font-family: 'Speedee-Bold';



    font-weight: bold;



    font-size: 24px;



    margin-top: 20px;



    z-index: 0;



}



#last_updated_1 {



    position: relative;



    left: 660px;



    top: 10px;



}



#last_updated_2 {



    position: relative;



    left: 460px;



    top: 10px;



}



.login-link {



    background-color: #e4e4e4;;



    padding: 15px 20px;



    text-decoration: none;



    font-size: 18px;



    color: #000;



    border-bottom: 1px solid #e5e5e5;



}















        .number-box {



            display: flex;



            flex-direction: column;



            align-items: center;



            height: 90px;



            border-radius: 10px;



            overflow: hidden;



            border: 1px solid #27272a;



        }



          .dash-box {



            display: flex;



            flex-direction: column;



            align-items: center;



            height: 100px;



            border-radius: 10px;



            overflow: hidden;



            border: 1px solid #27272a;



            width: 100%;



        }



          .dash-box-mob {



            display: flex;



            flex-direction: column;



            align-items: center;



            min-height: 100px;



            border-radius: 10px;



            overflow: hidden;



            border: 1px solid #27272a;



            width: 100%;



        }



        .number-box-dfs {



            display: flex;



            flex-direction: column;



            align-items: center;



            height: 100px;



            border-radius: 10px;



            overflow: hidden;



            border: 1px solid #27272a;



        }







        .gray-background {



            background-color: #ffbc0d;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }







        .white-background {



            background-color: #ffffff;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



        }

        .white-background-content {

            display: flex; 



            background-color: #ffffff;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



        }



        .white-background-mob {



            background-color: #ffffff;



            padding: 18px;



            width: 100%;



            box-sizing: border-box;



        }



        .dfs-background {



            background-color: #ffffff;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            align-items: center;



            justify-content: center;



        }



        .style-breakfast {



            background-color: rgb(250, 246, 12);



            color: #000;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-refrigeration {



            background-color: rgb(20, 202, 252);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-grills {



            background-color: rgb(252, 8, 8);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-names {



            background-color: rgb(17, 17, 17);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-fryers {



            background-color: rgb(209, 148, 50);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-cleanliness {



            background-color: rgb(91, 45, 135);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-discards {



            background-color: rgb(30, 0, 255);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



        .style-dates {



            background-color: rgb(166, 31, 171);



            color: #fff;



            font-size: 18px;



            padding: 10px;



            width: 100%;



            box-sizing: border-box;



            font-weight: bold;



        }



.popupOverlay {



    display: none;



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.7);



    justify-content: center;



    align-items: center;



}







.popupContent {



    position: relative;



    background-color: #fff;



    padding: 20px;



    border-radius: 5px;



    min-width: 350px;



    min-height: 100px;



}



.closePopup {



    position: absolute;



    right: 5px;



    top: -15px;



    font-size: 50px;



    cursor: pointer;



    color: #db0007;



}



.p-popup {



    font-weight: bold;



}





.alert-box {

  width: 300px;

  margin: 20px;

  padding: 16px;

  background-color: #fde6e6;

  position: relative;

}



.alert-box::before {

  content: '';

  height: 100%;

  width: 4px;

  background-color: #db0007;

  position: absolute;

  left: 0;

  top: 0;

}



.alert-title {

  color: #db0007;

  margin-top: 0;

  font-size: 20px;

}



.alert-content {

  color: #000000;

  margin: 8px 0;

}









.confirm-box {

  width: 400px;

  margin: 15px;

  padding: 15px;

  background-color: #bff5ce;

  position: relative;

}



.confirm-box::before {

  content: '';

  height: 100%;

  width: 4px;

  background-color: #32a854;

  position: absolute;

  left: 0;

  top: 0;

}



.confirm-title {

  color: #32a854;

  margin-top: 0;

  font-size: 20px;

}



.confirm-content {

  color: #000000;

  margin: 8px 0;

}







#myDropdown {

  background-color: #f7f7f7;

  color: #333;

  border: 1px solid #ccc;

  border-radius: 4px;

  padding: 8px;

  width: 200px;

}



#myDropdown:hover {

  border-color: #999;

}



#myDropdown:focus {

  outline: none;

}



#myDropdown option {

  background-color: #f7f7f7;

  color: #333;

}



#checkbox-form input[type="checkbox"] {

    transform: scale(2);

    margin-right: 20px;

}

#checkbox-form input[type="radio"] {

    transform: scale(2);

    margin-right: 10px;

    margin-left: 25px;

}

.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}



.tooltip .tooltiptext {

  visibility: hidden;

  width: 180px;

  background-color: #f4f4f4;

  color: black;

  text-align: center;

  line-height: 1.5;

  border-radius: 6px;

  padding: 5px 10px;

  position: absolute;

  z-index: 1;

  top: -5px;

  left: 110%;

  opacity: 0;

  transition: opacity 0.5s;

  border: 1px solid black;

}



.tooltip .tooltiptext::after {

  content: "";

  position: absolute;

  top: 15%;

  right: 100%;

  margin-top: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: transparent black transparent transparent;

}

.tooltip:hover .tooltiptext {

  visibility: visible;

  opacity: 1;

}



        #datepicker {

            width: 100px;

        }



        table.product-timeline {

            width: 95%;

            border-collapse: collapse;

            margin-bottom: 20px;

        }

        table.product-timeline th, table.product-timeline td {

            border: 1px solid #ccc;

            text-align: center;

            padding: 8px;

        }

        table.product-timeline th {

            background-color: #f2f2f2;

        }

        table.product-timeline .active {

            background-color: lightgreen;

        }

        table.product-timeline .inactive {

            background-color: lightcoral;

        }

        table.product-timeline .gray {

            background-color: lightgray;

        }



.collapsible {

  color: #000;

  cursor: pointer;

  padding: 15px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 17px;

  background-color: #f8f8f8;

  border-bottom: 1px solid #e5e5e5;

}



.active, .collapsible:hover {

  background-color: #ffe5b5;

  color: #db0007;

}



.collapsible .arrow {

  transition: transform 0.3s ease;

  display: inline-block;

  margin-right: 10px;

}



.collapsible.active .arrow {

  transform: rotate(90deg);

}



.content {

  padding: 0 18px;

  max-height: 0;

  overflow: hidden;

  background-color: #fff8e8;

  transition: max-height 0.2s ease-out;

}

.center {

    text-align: center;

}

.outage-grey {

    color: #afafaf;

    text-align: center;

}

.outage-red {

    color: #db0007;

    text-align: center;

}

.outage-green {

    color: #008000;

    text-align: center;

}

.outage-approved {

    color: 9d9d9d;

    text-align: center;

    font-style: italic;

}

.product-width {

        max-width: 180px;

    }



.hidden {

    display: none;

}



#formContainer {

    margin-top: 10px;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #f9f9f9;

}





.button-row {

    display: block; 

    align-items: center;

    background-color: #fff2d1;

    border: 1px solid #ffd76f;

    padding: 10px;

    margin: 10px 0;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

    text-decoration: none;

    color: #000;

    text-align: center; 

}



.button-row:hover {

    background-color: #ffe7aa; 

}





.button-row div {

    margin-right: 10px;

}



.button-row:hover {

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.button-div {

    align-items: center;

    background-color: #fff2d1;

    border: 1px solid #ffd76f;

    padding: 10px;

    margin: 10px 0;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

    text-decoration: none;

    color: #000;

    text-align: center; 

}



.button-div:hover {

    background-color: #ffe7aa; 

}





.button-div div {

    margin-right: 10px;

}



.button-div:hover {

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

        .priority-2 {

            width: 12px;

            height: 12px;

            background-color: red;

            border-radius: 50%;

            display: inline-block;

        }

        .priority-1 {

            width: 12px;

            height: 12px;

            background-color: orange;

            border-radius: 50%;

            display: inline-block;

        }

        .priority-0 {

            width: 12px;

            height: 12px;

            background-color: green;

            border-radius: 50%;

            display: inline-block;

        }



    .image-container {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

    }



    .image-item {

        text-align: center;

        margin-bottom: 20px;

        width: 33.33%;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .image-item img {

        width: 100px;

        height: 100px;

        object-fit: cover;

    }



    .image-item p {

        margin-top: 10px;

        font-size: 14px;

        font-weight: normal;

    }



.image-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.image-list li {

    margin-bottom: 20px;

}



.image-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.image-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.image-item img {

    width: 100px; /* Šířka obrázku */

    height: 100px; /* Výška obrázku */

    object-fit: cover;

    border: 1px solid #ddd;

    border-radius: 5px;

}



.image-caption {

    margin-top: 5px; /* Mezera nad popiskem */

    font-size: 10px;

    text-align: center;

    color: #333; /* Můžete upravit barvu popisku */

}





.square-button {

    width: 105px;

    height: 105px;

    background-color: #fff3d6;

    border: 2px solid #ffd76f;

    color: black;

    font-size: 40px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

}



.square-button:hover {

    background-color: #ffecbd;

}



.rectangle-button {

    width: 105px;

    height: 135px;

    background-color: #fff3d6;

    border: 2px solid #ffd76f;

    color: black;

    font-size: 40px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

}



.rectangle-button:hover {

    background-color: #ffecbd;

}



.image-button {

    width: 105px;

    height: 105px;

    background-color: #fff3d6;

    background-size: cover;

    background-position: center;

    border: 2px solid #ffd76f;

    border-radius: 8px;

    font-size: 20px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}



.image-button::after {

    content: attr(data-count);

    width: 30px;

    height: 30px;

    background-color: rgba(255, 215, 111, 0.8);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: black;

    font-size: 16px;

    position: absolute;

    top: calc(50% - 15px);

    left: calc(50% - 15px);

}



.image-detail {

    width: 105px;

    height: 135px;

    background-color: #fff3d6;

    background-size: cover;

    background-position: center;

    border: 2px solid #ffd76f;

    border-radius: 8px;

    font-size: 20px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}

.image-detail:hover {

    background-color: #fff3d6;

}



.button-container {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    width: 100%;

}

#search-results {

    border: 1px solid #ddd;

    padding: 10px;

    background-color: #fff;

    position: absolute;

    width: 200px;

    display: block;

    max-height: 200px;

    overflow-y: auto;

}



.search-result {

    padding: 5px;

    cursor: pointer;

    border-bottom: 1px solid #ddd;

    display: flex;

    align-items: center;

    gap: 10px;

}



.search-result:hover {

    background-color: #f1f1f1;

}



.search-item {

    display: flex;

    align-items: center;

}



.search-image {

    width: 50px;

    height: 50px;

    object-fit: cover;

    margin-right: 10px;

}



.add-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 15px;

    cursor: pointer;

    background-color: #ffd76f;

    border: none;

    border-radius: 5px;

    font-size: 14px;

    text-align: center;

    margin-left: 10px;

}



.add-button:hover {

    background-color: #e0c053;

}



.left-content {

    flex: 1;

}



.right-content {

    width: 90px;

    text-align: center;

    position: relative;

    padding-left: 5px;

}



.right-content::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 1px;

    height: 100%;

    background-color: #000;

}



  .question-container {

    margin-bottom: 8px;

    padding-bottom: 8px;

  }

  .question-text {

    margin-bottom: 8px;

  }

  hr {

    margin: 8px 0;

    border: 0;

    border-top: 1px solid #ccc;

  }