.wrapper {
    margin-top: 5vh;
}

.dataTables_filter {
    float: right;
}

.table-hover > tbody > tr:hover {
    background-color: lighten(cyan, 40%);
}

.body-content {
    margin-top: 15% !important;
}

.searchInput {
    border: 1px solid #929292;
    border-radius: 10px;
    padding: 10px 0px 10px 15px;
}

.SeacrhP {
    font-size: 16px;
    font-family: poppins;
    font-weight: 500;
    line-height: 27px
}

.departure {
    margin: 4px 0;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}

.First-parag {
    margin-top: 1%;
    font-family: poppins;
    font-weight: 500;
    font-size: 19px;
    line-height: 33px
}

.Second-parag {
    margin-bottom: 1%;
    font-family: poppins;
    font-weight: 400;
    font-size: 13px;
    line-height: 27px
}

.SearchReference {
    display: block;
}

.StyleButton {
    width: 33%;
    height: 32px;
    background: #ECECEC;
    border-radius: 10px;
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    margin: 10px;
    border: #f5f5f5;
}

.ShowPagination {
    margin: 15px 0;
    font-family: Poppins;
    /*    text-align: center;
*/
}

.searchButton {
    background-color: #FF6600;
    font-family: poppins;
    border: 10px, 0px, 10px, 0px;
    cursor: pointer;
    -webkit-appearance: button;
    border-radius: 10px;
    width: 100%;
    border: unset;
    color: white;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0em;
    margin-top: 2%;
}

.FlexSeacrh {
    display: block;
    border: 1px solid #929292;
    border-radius: 10px;
    padding: 10px 20px 13px 20px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
}

.responsiveCol {
    word-spacing: 0px
}

.RespHVol {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.responsiveHeader {
    width: 100%;
}

.Thead-table {
    background-color: #FF6600;
    color: #FFFFFF;
    font-family: poppins;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
}

.table > thead > tr > th {
    border-bottom: unset;
    border-top: unset;
}

.DivRef {
    display: block;
    width: 100%;
    border: 1px solid #929292;
    border-radius: 10px;
    padding: 10px 30px 10px 30px;
    margin-right: auto;
    margin-left: auto;
}

.addInfo {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.paragInfo {
    font-family: Poppins;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.phone {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: center;
    color: #FF6600
}

.paragInfo {
    font-family: Poppins;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.information {
    padding: 5px 20px 5px 20px;
    border-radius: 10px;
    border: 2px solid #ECECEC
}

@media only screen and (min-width: 768px) {
    .phone {
        font-size: 20px;
    }

    .paragInfo {
        font-size: 16px;
    }

    .addInfo {
        font-size: 16px;
    }

    .paragInfo {
        font-size: 16px;
    }

    .SeacrhP {
        font-size: 18px;
    }

    .Second-parag {
        font-size: 18px;
    }

    .First-parag {
        font-size: 22px;
    }

    .RefSearch {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .DivRef {
        width: 50%;
        border: 1px solid #929292;
        border-radius: 10px;
        padding: 10px 30px 10px 30px;
        margin-right: auto;
        margin-left: auto;
    }

    .responsiveCol {
        word-spacing: 16px
    }

    .ShowPagination {
        margin: 20px 0;
        font-family: Poppins;
    }

    .FlexSeacrh {
        display: block;
        width: 33%;
        border: 1px solid #929292;
        border-radius: 10px;
        padding: 10px 20px 13px 20px;
        margin-right: auto;
        margin-left: auto;
        /*        background-color: lightblue;
*/
    }

    .searchButton {
        background-color: #FF6600;
        font-family: poppins;
        border: 10px, 0px, 10px, 0px;
        cursor: pointer;
        -webkit-appearance: button;
        border-radius: 10px;
        width: 100%;
        border: unset;
        color: white;
        font-family: Poppins;
        font-size: 16px;
        font-weight: 500;
        line-height: 27px;
        letter-spacing: 0em;
        margin-top: 2%;
    }

    .StyleButton {
        width: 33%;
        height: 48px;
        background: #ECECEC;
        border-radius: 10px;
        font-family: Poppins;
        font-style: normal;
        font-weight: 400;
        font-size: 23px;
        margin: 10px;
        border: #f5f5f5;
    }

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

    .responsiveHeader {
        width: 100%;
    }

    .Flex {
        display: flex;
    }

    .body-content {
        padding-left: unset !important;
        padding-right: unset !important;
        margin-top: 4% !important;
    }

    .departure {
        font-weight: bold;
        font-family: Poppins;
        font-size: 22px
    }
}

.StyleButton:hover {
    /*background: #0DA16C;*/

    background: #f60;
    color: #FFFFFF
}

thead {
    background: #ddd;
}

.table td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.highlight {
    background: lighten(yellow,30%);
}

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

    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr,
        tfoot tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
    }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

    .table td:nth-child(1) {
        background: #FF6600;
        height: 100%;
        top: 0;
        left: 0;
        font-weight: 600;
        border-bottom: unset;
        border-top: unset;
        color: #FFFFFF;
        font-size: 16px;
        border-radius: 10px 10px 0px 0px;
    }
    /*
	Label the data
	*/
    td:nth-of-type(1):before {
        content: "Hotel";
    }

    td:nth-of-type(2):before {
        content: "Flug";
        font-family: Poppins;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0em;
        text-align: left;
    }

    td:nth-of-type(3):before {
        content: "Abfahrt vom Hotel";
        font-family: Poppins;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0em;
        text-align: left;
    }

    /* td:nth-of-type(4):before {
        content: "e";
    }

    td:nth-of-type(5):before {
        content: "Flight Time";
    }*/

    /* td:nth-of-type(3):before {
        content: "Email";
    }

    td:nth-of-type(4):before {
        content: "Phone";
    }

    td:nth-of-type(5):before {
        content: "Date";
    }

    td:nth-of-type(6):before {
        content: "Salary";
    }

    .dataTables_length {
        display: none;
    }*/
}