.myreservationheader {
    display: flex;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-variant: small-caps;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-size: calc(1.325rem + .2vw);
    width: 100%;
    text-align: left;
    margin-left: 1rem;

}

/* Verberg de standaard pijl van het selectie-element */
.select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
    padding-right: 0;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* Zorg ervoor dat het selectie-element de volledige breedte inneemt */
}

.imgsize {
    width:100px;
    height:100px;
}

/* Algemene stijlen */
.welkomtekst {
    text-align: center;
}

/* Container 1 en 2 stijlen */
.container_top {
    width: 80%;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
    padding: 0;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 3;
}

.indexpage{
    min-height:390px;
}



/* Mobile styles */
@media screen and (max-width: 767px) {
    .container_top {
	position:relative;
        width: 100%;
    }
    .indexpage {
        height: 40%;
    }
    .row{

        --bs-gutter-x: 0;
    }
}

.row.-payments {
    display:contents;
    justify-content:center;
}



.container_right {
    width: 40%;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    padding: 0;
}
.container_left {
    width: 28%;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    padding: 0;
    margin-right: 1%;
}

.container_center {
    width: 80%;
    color: #000;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    padding: 0;
    /*margin-top: 6px;
    margin-bottom: 3px;*/
    overflow: scroll; /* Gebruik 'hidden' om de scrollbar te verbergen */
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .container_center{
        width: 100%;
    }


    .selected-img {
        width: 100%;
        height: 60%;
    }
    }

    /* Voeg eventueel deze regel toe om ook voor andere browsers de scrollbar te verbergen */
    .container_center::-webkit-scrollbar {
        display: none;
    }


.reservation-list {
    width: 100%;
    overflow: scroll;
    padding: 5px;
    margin: 1px;
}

.product-list {
    width: 100%;
    overflow: scroll;
    padding: 5px;
    margin: 1px;
}

.selected-img {
    width: 100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Vertically align content to the bottom */
    align-items: center; /* Horizontally center content */
    text-align:center;
}



.currency::before {
    content: '\20AC'; /* Unicode voor het euroteken */
    margin-right: 3px; /* Aanpassen aan je voorkeur */
}

.currency {
    margin-right: 5px;
    text-align: right;
    font-weight: bold;
}




.payment-list {
    width: 100%;
    height: 500px;
    overflow: scroll;
    padding: 5px;
    margin: 1px;
}

.container-checkin {
    position:absolute;
    top: 100px;
    width : 80%;
}
/* Container 3 stijlen */
.container33 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%; /* Volledige hoogte van het scherm */
    margin: 15px;
    background-image: url("https://cdn.mews.com/Media/Image/FCB4D698-C5EE-4C41-AE6E-AFAA00D0A194");
    background-size: cover;
    background-repeat: no-repeat;
}
.enterpriseinfo{
    margin-top: 5px;
        width:100%
}

.more {
    color: #000;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
}

.label {
    font-weight: bold;
    width:10%;
    color: #333;
    color: #000;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
}

.header {
    color: #000;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #fff;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    text-align: center;
    background: #72705D;
    z-index: 100;
    min-height: 2em; /* Hoogte van de header */
    line-height: 2em; /* Verticaal centreren van de tekst */
}


.column {
    text-align: left;
    margin-left: 1rem;
}

    .column.-left {
        text-align: left;
        margin-left: 1rem;
    }
    .column.-right {
        text-align: right;
        margin-right: 1rem;
    }

.column.-center{
    text-align: center;
}


/* Afbeeldingsstijlen */
.imgsize {
    max-width: 100%;
    height: auto;
}

/* Stijlen voor lijsten */
ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}



#reservation-list li, #payment-list li, #product-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px;
    margin: 0px;
}

/* Mobile styles */
@media screen and (max-width: 767px) {

    #reservation-list li {
        padding-left: 5px;
        font-size: 1.4rem;
    }
}

    #reservation-list li .column, #payment-list li .column, #product-list li .column{
       
    }


    #reservation-list li:nth-child(odd), #payment-list li:nth-child(odd), #product-list li:nth-child(odd) {
        background-color: #f8f8f8; /* Achtergrondtint voor oneven elementen */
    }

    #reservation-list li:nth-child(even), #payment-list li:nth-child(even), #product-list li:nth-child(even) {
        background-color: #fff; /* Achtergrondtint voor even elementen */
    }

    #reservation-list li:hover {
        background-color: #e1e1e1; /* Achtergrondtint voor hover-elementen */
    }

#reservation-list li.selected {
    background-color: #72705D; /* Background color for selected elements within reservation-list */
    color: white; /* Text color for selected elements within reservation-list */
}



/* Verberg de standaard verticale scrollbar voor reservation-list en payment-list */
.reservation-list::-webkit-scrollbar, .payment-list::-webkit-scrollbar, .product-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Verberg de standaard horizontale scrollbar voor reservation-list en payment-list */
.reservation-list::-webkit-scrollbar-thumb, .payment-list::-webkit-scrollbar-thumb, .product-list::-webkit-scrollbar-thumb {
    display: none;
}

/* Verberg de standaard verticale scrollbar in Firefox voor reservation-list en payment-list */
.reservation-list, .payment-list, .product-list {
    scrollbar-width: none;
}

/* Verberg de standaard horizontale scrollbar in Firefox voor reservation-list en payment-list */
.reservation-list, .payment-list, .product-list {
    scrollbar-color: transparent transparent;
}

    /* Stijl voor de inhoud van de scrollbar (optioneel) voor reservation-list en payment-list */
    .reservation-list::-webkit-scrollbar-thumb, .payment-list::-webkit-scrollbar-thumb, .product-list::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    /* Stijl voor de track van de scrollbar (optioneel) voor reservation-list en payment-list */
    .reservation-list::-webkit-scrollbar-track, .payment-list::-webkit-scrollbar-track, .product-list::-webkit-scrollbar-track {
        background-color: transparent;
    }

    /* Stijl voor de hoek van de scrollbar (optioneel) voor reservation-list en payment-list */
    .reservation-list::-webkit-scrollbar-corner, .payment-list::-webkit-scrollbar-corner, .product-list::-webkit-scrollbar-corner {
        background-color: transparent;
    }

/* Stijl voor de hoek van de scrollbar in Firefox (optioneel) voor reservation-list en payment-list */
.reservation-list, .payment-list, .product-list {
    scrollbar-color: transparent transparent;
}



.content-div {
    height:500px;
}
.button-container {
    position: relative;
    display: flex;
    margin-right: 35px;
}

.button-header {
    width:270px
}

.button-container button {
    flex-grow: 1;
    min-width: 50px;
    min-height: 50px;
    margin-left: 5px;
    margin-right: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: box-shadow 0.3s, transform 0.3s;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%; /* Schaal de achtergrondafbeelding naar 70% van de knopgrootte */
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .button-container button {
        margin-right: 5px;
    }
}


    .button-container button:hover, .button-addproducts:hover, .button-mycustomerinfo:hover {
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.15);
        transform: translateY(2px);
    }

    .button-container .green-button {
        position: relative;
        background-image: url('/images/waarborg-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
        background-color: #fff;
        border: solid;
        border-width: 0.1px;
        border-color: #A4A826; /* Groene achtergrondkleur */
        color: #fff; /* Witte tekstkleur */
        padding: 1px 2px; /* Binnenafstand aanpassen */
        margin-left: 5px;
       /* margin-right: 35px;*/
        margin-top: 5px;
        margin-bottom: 5px;
        cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
        box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
    }

.button-container .orange-button {
    position: relative;
    background-image: url('/images/waarborg-icon.svg'); /* Groene achtergrond, zwarte afbeelding */

    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    border: none; /* Geen rand */
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}

.button-container .black-button {
    position: relative;
    background-image: url('/images/waarborg-icon.svg'); /* Zwarte achtergrond, witte afbeelding */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #72705D;
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}

.button-container .checkin-button {
    position: relative;
    background-image: url('/images/persoon-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
    background-color: #A4A826; /* Groene achtergrondkleur */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #A4A826; /* Groene achtergrondkleur */
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}

.button-container .inchecken-button {
    background-image: url('/images/persoon-icon.svg'); /* Zwarte achtergrond, witte afbeelding */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #72705D;
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}

.button-container .payd-button {
    position: relative;
    background-image: url('/images/betalen-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
    background-color: #A4A826; /* Groene achtergrondkleur */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #A4A826; /* Groene achtergrondkleur */
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}
.button-container .tobepaid-button {
    position: relative;
    background-image: url('/images/betalen-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
    background-color: #A4A826; /* Groene achtergrondkleur */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #A4A826; /* Groene achtergrondkleur */
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}

        .button-container .payd-button::after, .button-container .checkin-button::after, .button-container .green-button::after {
            content: '';
            background-image: url('/images/check-icon.svg'); /* Vervang dit pad door het daadwerkelijke pad naar check-icon.svg */
            background-size: 35% auto; /* De afbeelding neemt 25% van de breedte in beslag en past de hoogte automatisch aan */
            background-repeat: no-repeat;
            background-position: top right; /* Plaats de afbeelding in de rechterbovenhoek */
            position: absolute;
            top: 0;
            right: 0;
            width: 100%; /* Zorg ervoor dat het de hele breedte van de .payd-button inneemt */
            height: 100%; /* Zorg ervoor dat het de hele hoogte van de .payd-button inneemt */
        }

.button-container .orange-button::after, .button-container .tobepaid-button::after, .completeaction::after {
    content: '';
    background-image: url('/images/alert-icon.svg');
    background-size: 35% auto;
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

 .completeaction::after {
    background-size: 20% auto;

}






.button-container .pay-button {
    background-image: url('/images/betalen-icon.svg'); /* Zwarte achtergrond, witte afbeelding */
    background-color: #fff;
    border: solid;
    border-width: 0.1px;
    border-color: #72705D;
    color: #fff; /* Witte tekstkleur */
    padding: 1px 2px; /* Binnenafstand aanpassen */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
}


.button-addproducts, .button-mycustomerinfo, .button-removecustomerinfo {
    position: absolute;
    right: 15%;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center;
    border: solid;
    border-width: 0.1px;
    border-color: #A4A826; /* Groene achtergrondkleur */
    color: #fff; /* Witte tekstkleur */
    margin-left: 5px;
    /* margin-right: 35px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer; /* Wijzigen in een handpictogram bij aanwijzen */
    box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.15);
    float: right;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .button-mycustomerinfo, .button-addproducts {
        float: right;
        margin-top: -10%;
        right: -5%;
    }
}

.button-addproducts {
    background-image: url('/images/producten-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
}

.button-mycustomerinfo {
    background-image: url('/images/persoon-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
}

.button-removecustomerinfo {
    background-image: url('/images/bin-icon.svg'); /* Groene achtergrond, zwarte afbeelding */
}


.button-mycustomerinfo.small, .button-removecustomerinfo.small {
    position: relative;
    min-width: 50px;
    width: 60%;
    min-height: 50px;
    height: 30%;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .button-mycustomerinfo.small, .button-removecustomerinfo.small {
        margin-top: 4%;
        margin-right: 4%;
    }
}

.modal {
    display: none;
    position: fixed;
    width: 30%;
    height: 30%;
    background-color: rgba(164, 168, 38);
    margin: 10px;
}




.modal-content {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    padding: 20px;
    margin: 0px 0px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 600px) {
    .modal {
        position: center;
        top: 30%;
        left: 0%;
        width: 95%;
        height: 30%;
        margin: 5%;
    }

    .modal-content {
        margin: 0px 0px;
    }

    element.style {
        top: 355.766px;
        left: -235px;
        display: block;
    }
}

.guest-section {
    background-color:#fff;
    margin: 5px;
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    text-transform: lowercase;
    background-color: #f8f8f8;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .form-row > div {
        flex: 1;
        margin-right: 10px; /* Adjust the spacing between form elements */
    }

.form-control{
    background-color:none;
}
.form-row {
    position: relative;
    min-height: 100px; /* Stel de hoogte in op een waarde die voldoende ruimte biedt voor de popup */
}

.guestlist {
    display: none;
    position: absolute;
    --bs-gutter-x:0rem;
    z-index: 1; 
}

.guestlist-content {
    background-color: #fff;
    position: relative;
    /* Verplaats de top- en left-waarden naar 0 om uitgelijnd te zijn met de knop */
    top: 0;
    left: 0;
    width: 100%; /* Maak de breedte 100% */
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}



.myCheckinList {
    display: none;
    position: fixed;
    text-align:center;
    top: 20%;
    left: 25%;
    width: 50%;
    height: 30%;
    background-color: rgba(164, 168, 38, 0.7);
    margin: 10px;
    z-index: 5;
}

.checkinlist-content {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    padding: 20px;
    margin: 0, 20px, 0, 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

input {
    width: 100%;
    margin: 10px 0;
}

.message-popup {
    display: none;
    position: fixed;
    text-align:center;
    color:#fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #A4A826;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.overlay-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.checkinlist-content {
    text-align: left;
}

    .checkinlist-content h3 {
        color: #333; /* Title color */
    }

    .checkinlist-content ul {
        list-style-type: none;
        padding: 0;
    }

    .checkinlist-content li:nth-child(odd) {
        background-color: #f2f2f2; /* Odd row color */
    }

    .checkinlist-content li:nth-child(even) {
        background-color: #e6e6e6; /* Even row color */
    }



.selected-img {
    position: relative;
    text-align: center; /* Center de tekst binnen de afbeelding */
}

.selected-img-text{
    padding-bottom: 20%;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
   .selected-img-text{
       padding-bottom: 99%;
       position:absolute; 
   }
}

.action-buttons {
    position: absolute;
    bottom: 5%;
    left: 35%; /* Plaats de linkerkant van de knoppen in het midden van de afbeelding */
    transform: translateX(-25%); /* Centreer de knoppen */
    
    
   
    
}

.action-button {
    position: relative;
    min-width: 150px;
    height: 45px;
    color: black;
    margin-bottom: 10px;
    font-family: "Open Sans", Arial, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-decoration: none;
    line-height: 1.2;
    background-color: #fff;
    border: 4px solid transparent; /* Begin met een transparante rand */
    transition: background-color 0.3s, border-color 0.3s; /* Vloeiende overgang voor de achtergrondkleur en randkleur */
    padding: 7px 6px 6px 6px;
    align-content: center;
}

    /* Algemene stijl voor ::after van .action-button */
    .action-button::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 3px;
        border: 2px solid transparent; /* Begin met een transparante rand */
        background-color: transparent; /* Begin met een transparante achtergrondkleur */
    }


 .action-button:hover {
        background-color: rgba(164, 168, 38);
        border-color: #fff;
    }

    .action-button.active {
        position: relative;
    }

        .action-button.active::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            border: 2px solid #72705D;
            background-color: #72705D;
        }

 

#google_translate_element {
    display: inline-block;
}

.paymentpopup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.paymentpopup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 50px solid #ccc;
    border-color: rgba(164, 168, 38, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

    .paymentpopup-container p {
        margin-bottom: 10px;
    }

    .paymentpopup-container button {
        margin-right: 10px;
    }

.logo {
    top:0px;
}

.language-selector {
    background-color: black;
    color: rgba(255,255,255,.55);
    height: fit-content;
    margin-top: 5px;
}

.fixed-table {
    table-layout: fixed;
    width: 100%;
}

    .fixed-table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (max-width: 600px) {
    .details-responsive td {
        width: 50%;
        display: block;
    }
}