body {
    height: 100%;
    background-color: whitesmoke;
    margin-top: 50px;

    .search{
       
        /*background-color:white;*/
        padding:20px;
        /*padding-top:20px;*/
        margin-left:auto;
        margin-right:auto;
        margin-bottom:40px;
        width:100%;
        height:auto;
        overflow:hidden;
        /*border-top:solid;*/
        /*border-bottom:solid;*/
        border-width:2px;
        border-color:#dddddd;
        /*border-radius:5px;*/
    }

    .buttonSearchContainer{

         display: grid;
               
        grid-template-columns: 100px auto;
        
        .searchButton {
            grid-column: 1 / span 6;
             grid-row: 0 / span 4;
            justify-self: center;
            align-self: center;
            width: 200px;
        }
    }

    .searchContainer {
        display: grid;
               
        grid-template-columns: 100px auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 15px;
        border-radius: 5px;
        margin-bottom:30px;
       
            .title {
                  justify-self: left;
            }

            .item {
               justify-self: left;
            }
        

        
      

    }

    .dutyExchangeOfferCard .dutyExchangeOfferCardTable {
        padding: 15px;
    }

    .dutyImageContainer {
        text-align: center;
    }

    .collapsible {
        background-color: transparent;
        position: absolute;
        color: black;
        cursor: pointer;
        width: 90%;
        border: none;
        top: 120px;
        border-bottom: solid;
        border-bottom-color: #838383;
        border-bottom-width: 1px;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .active, .collapsible:hover {
        /*font-size:16px;*/
    }


    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: transparent;
        border: none;
        /*border-bottom:solid;
  border-bottom-width:1px;*/
    }


    .offersStatus {
        margin-left: auto;
        margin-right: auto;
        font-size: 20px;
        margin-top: 20px;
        color: dimgray;
        padding-top: 30px;
        text-align: center;
        /*border-top-color: dimgray;
        border-top: solid;
        border-top-width: 1px;*/
    }

    .header {
         background-color: #4d4d4d;        
      color:white;
        position: relative;
        
        width: 300px;
        margin-top: 10px;
        padding: 10px;
        height: 40px;
    }

    .checkbox {
        height: 20px;
        width: 20px;
    }

    .radioButton {
        height: 20px;
        width: 20px;
        text-align: center;
    }

    .radioButtonLabel {
        margin-left: 5px;
    }

    .endTimeGroup {
        background-color: whitesmoke;
        width: auto;
    }

    th {
        background-color: whitesmoke !important;
    }

    .firstColumnWidth {
        width: 250px !important;
    }

    .description{
        color:dimgrey;
        font-size:15px;
        font-style:italic;
        margin-bottom   :50px; 
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }

    .dutyExchangeOfferCard {
        -webkit-box-shadow: 0px 20px 38px -14px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
        box-shadow: 0px 2px 40px 0px rgba(0,0,0,0.75);
        display: block;
        background-color: #fcfcfc;
        overflow: hidden;
        border-radius:5px;
        margin-top: 50px;
        margin-bottom: 50px;
        height:690px;

        .chooserBodyFooter {
            left: 0;
            bottom:0;
            padding: 5px;
            position: absolute;
            text-align: right;
            width: 100%;
            background-color: whitesmoke;
        }
    }

    .dutyOfferLinks {
        /*-webkit-box-shadow: 0px 20px 38px -14px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
        box-shadow: 0px 2px 40px 0px rgba(0,0,0,0.75);*/
        /*background-color:whitesmoke;*/
        margin-left: 10px;
        height: 500px;
        margin-top: 50px;


      
    }

    


    .dutyExchangeRequestsCard {
        margin-top: 40px;
        height: 580px;
        margin-bottom: 50px;
        background-color: #fcfcfc;
    }

    .selectedFilter {
        width: 400px;
        margin-bottom: 30px;
    }

    .seachCard {
        /*margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: 350px;*/
    }

    .actualDuty {
        color: black;
        /*font-weight: bold;*/
        /*background-color: lightblue;*/
        /*height: 40px;*/
        width: 80%;
        /*padding: 10px;*/
    }



    .tableFixHead {
        overflow-y: auto;
        height: 300px;
        margin-top: 10px;
    }

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        background-color: transparent;
    }

    .chooseMenu {
        -webkit-box-shadow: 0px 20px 38px -14px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
        display: grid;
        background-color: #fcfcfc;
        opacity: 1;
        left: 10px;
        top: 160px;
        position: fixed;
        z-index: 1000;
        height: 80%;
        overflow: hidden;
        grid-template-rows: 30px 300px 10px 200px 50px;
        grid-template-columns: 300px 80px 300px;
        grid-template-areas: "header header header" "body1 body1 body1" "puffer puffer puffer" "body2 body2 body2" "footer1 footer1 footer2";

        .chooserHeader {
            padding: 10px;
            align-self: center;
            text-align: right;
            grid-area: header;
            font-size: 25px;
        }

        .chooserBody1 {
            background-color: white;
            padding: 10px;
            align-self: center;
            grid-area: body1;
            height: 100%;
            margin: 10px;
        }

        .chooserBody2 {
            background-color: white;
            padding: 10px;
            align-self: center;
            grid-area: body2;
            height: 100%;
            margin: 10px;
        }

        .chooserFooter1 {
            /*background-color:white;*/
            align-self: flex-end;
            /*background-color:#4d4d4d;*/
            grid-area: footer1;
            text-align: right;
            padding: 5px;
        }

        .chooserFooter2 {
            /*background-color:white;*/
            align-self: flex-end;
            /*background-color:#4d4d4d;*/
            grid-area: footer2;
            text-align: right;
            padding: 5px;
        }
    }


    .card {
        background-color: white;
        cursor: pointer;
        overflow: hidden;
        width: 50%;

        .cardHeader {
            height: 50px;
            padding: 5px;
            margin: 10px;
            top: 0;
            left: 25px;
            right: 25px;
            font-size: 20px;
            position: relative;
        }

        .cardBody {
            padding: 10px;
            overflow: hidden;
            overflow-y: auto;
            position: relative;


            div {
                margin: 10px;

                .text {
                    width: 200px;
                }
            }
        }

        .cardFooter {
            height: 50px;
            padding-right: 5px;
            left: 25px;
            margin-right: 25px;
            bottom: 0px;
            text-align: right;
            position: relative;
        }
    }



    .card.exchange {
        position: relative;
        background-color: transparent;
    }


    .dealContainer {
        width: 1100px;
        /*background-color:green;*/
        margin-left: 670px;
    }

    .deal {
        padding: 0px;
        margin-bottom: 30px;
        margin-left: 15px;
        /*background-color:white;*/
        height: 250px;
        /*width:100%;*/
        /*width:500px;*/
        overflow: hidden;
    }


    .dealHeader {
        position: absolute;
        -webkit-box-shadow: 0px 8px 38px -14px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
        box-shadow: 0px 1px 35px -14px rgba(0,0,0,0.75);
        background-color: rgba(255, 255, 255, 0.5);
        width: 50%;
        overflow: hidden;
        opacity: 1;
        font-weight: bold;
        text-align: center;
        font-size: 12px;
        padding: 10px;
        border-radius: 5px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .dealItemFooter {
        position: absolute;
        left: 5px;
        width: auto;
        opacity: 0.9;
        height: 50px;
        bottom: 10px;
        text-align: center;
        padding-top: 8px;
        border-radius: 2px 0px 0px 2px;
    }

    .dealItemForThree {
        background-color: white;
        padding: 10px;
        margin: 0px;
        float: left;
        height: 250px;
        width: 20%;
        overflow: hidden;
        padding-top: 50px;
    }

    .dealItemForTwo {
        background-color: white;
        padding: 10px;
        margin: 0px;
        float: left;
        height: 250px;
        width: 40%;
        overflow: hidden;
        padding-top: 50px;
    }

    .shadow {
        -webkit-box-shadow: 0px 8px 38px -14px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
        box-shadow: 0px 1px 35px -14px rgba(0,0,0,0.75);
    }

    .header.shadow.cardDate {
        position: absolute;
        font-weight: bold;
        top: 0px;
        width: 140px;
    }

    .status {
        position: relative;
        text-align: right;
        margin-right: 5px;
        bottom: -20px;
        font-size: 40px;
        opacity: 0.4;
        pointer-events: none;
        grid-row: 5;

        .approved {
            color: green;
        }

        .exchange {
            color: blue;
        }

        .refuse {
            color: darkred;
        }
    }

    .dutyInfos {
        display: grid;
        margin-top: 10px;
        grid-template-rows: 40px 20px 15px 15px 40px;

        .header {
            font-size: 20px !important;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: auto;
            background-color: transparent;
        }

        .subheader {
            font-size: 15px;
            font-weight: bold;
        }
    }

    .dealChanger {
        float: left;
        width: 20%;
        padding: 10px;
        height: 250px;
        text-align: center;
        background-color: whitesmoke;

        .arrow {
            margin-top: 70px;
            bottom: auto;
            font-size: 30px;
            text-align: center;
            color: black;
        }
    }



    .dealcomplete {
        background-color: rgba(153, 204, 153, 0.8);
    }


    .gridContainer {
        display: grid;
        grid-template-rows: 50px 50px 50px 50px 50px;
        grid-template-columns: 100px 300px 400px;
        grid-template-areas: "text1 content1 duty" "text2 content2 duty" "text3 content3 duty" "text4 content4 duty" "text5 content5 duty";

        .text1 {
            align-self: center;
            grid-area: text1;
        }

        .content1 {
            align-self: center;
            grid-area: content1;
        }

        .text2 {
            align-self: center;
            grid-area: text2;
        }

        .content2 {
            align-self: center;
            grid-area: content2;
        }

        .text3 {
            align-self: center;
            grid-area: text3;
        }

        .content3 {
            align-self: center;
            grid-area: content3;
        }

        .text4 {
            align-self: center;
            grid-area: text4;
        }

        .content4 {
            align-self: center;
            grid-area: content4;
        }

        .text5 {
            align-self: center;
            grid-area: text5;
        }

        .content5 {
            align-self: center;
            grid-area: content5;
        }

        .currentDuty {
            width: 150px;
            margin: 0px !important;
            margin-left: 10px !important;
            float: left;
            grid-area: duty;



            .header {
                font-size: 25px;
            }
            /*.yourDuty{
            border:solid;
            grid-area: yourDuty;
            align-self:center;         
            
            .header{
                font-size:25px;
            }*/
        }
    }

    .arrowDutyTimes {
        font-size: 15px !important;
    }
    //Allgemeine Ansicht für Desktop-Anwendungen
    @media only screen and (min-width:1026px) {


        .pdfModalLayer {
            opacity: 0.5;
            z-index: 1000;
            background-color: black;
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .pdfViewer {
            padding: auto;
            z-index: 2000;
            background-color: white;
            position: fixed;
            top: 0px;
            margin: 5% auto;
            left: 0;
            right: 0;
            width: 85%;
            height: 80%;
            overflow: hidden;
            -webkit-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);

            .pdfViewerHeader {
                padding: 10px;
                text-align: center;
                font-size: 20px;
            }

            .pdfViewerContent {
                width: 100%;
                height: 90%;
                border: solid;
                margin-left: auto;
                margin-right: auto;
                overflow-y: scroll;
                border-width: 1px;
                background-color: #727272;
                text-align: center;

                .imageContainer {
                    width: 80%;
                }
            }

            .pdfViewerFooter {
                height: 40px;
                width: 100%;
                padding-top: 2px;
                background-color: whitesmoke;
                bottom: 0;
                position: absolute;
                text-align: center;
                margin-top: 2px;
            }
        }
    }
    //Hier kommmt die Tablet-Ansicht
    @media only screen and (min-width:768px) and (max-width:1025px) {
        .pdfModalLayer {
            opacity: 0.5;
            z-index: 1000;
            background-color: black;
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .pdfViewer {
            padding: auto;
            z-index: 2000;
            background-color: whitesmoke;
            position: fixed;
            top: 20px;
            margin: 5% auto;
            left: 0;
            right: 0;
            width: 95%;
            height: 80%;
            overflow: hidden;
            -webkit-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);

            .pdfViewerHeader {
                padding: 10px;
                text-align: center;
                font-size: 20px;
            }

            .pdfViewerContent {
                width: 100%;
                height: 100%;
                overflow: scroll;
                margin-bottom: 20px;
                border: solid;
                border-width: 1px;
                overflow-y: scroll;

                .imageContainer {
                    width: 100%;
                }
            }

            .pdfViewerFooter {
                height: 40px;
                width: 100%;
                padding-top: 2px;
                background-color: whitesmoke;
                bottom: 0;
                position: absolute;
                text-align: center;
                margin-top: 2px;
            }
        }
    }
    //Hier kommt die Smartphone-Ansicht
    @media only screen and (max-width:767px) {

        .firstColumnWidth {
        width: auto !important;
    }

        .seachCard {
            width: 100%;
        }

        .dutyExchangeOfferCard {
            width: 100%;
            height: auto;
        }

        .dutyExchangeRequestsCard {
            width: 100%;
            height: auto;
            margin-left: 0px;
        }

        .selectedFilter {
            width: 100%;
        }

        .deal {
            padding: 0px;
            margin-bottom: 30px;
            margin-left: 15px;
            margin-right: 15px;
            /*background-color:white;*/
            height: 250px;
            /*width:100%;*/
            /*width:500px;*/
            overflow: hidden;
        }

        .subheader {
            font-size: 15px;
        }

        .pdfModalLayer {
            opacity: 0.5;
            z-index: 1000;
            background-color: black;
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .pdfViewer {
            padding: auto;
            z-index: 2000;
            background-color: white;
            position: fixed;
            top: 0;
            margin: 5% auto;
            left: 0;
            right: 0;
            width: 95%;
            height: 95%;
            overflow: hidden;
            -webkit-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);
            box-shadow: 0px 5px 32px 1px rgba(0,0,0,0.75);

            .pdfViewerHeader {
                padding: 5px;
                text-align: center;
                font-size: 12px;
            }

            .pdfViewerContent {
                width: 100%;
                height: 100%;
                border: solid;
                border-width: 1px;
                overflow-y: scroll;
                overflow-x: hidden;
                border-width: 1px;
                background-color: #727272;
                text-align: center;

                .imageContainer {
                    width: 100%;
                }
            }

            .pdfViewerFooter {
                height: 40px;
                width: 100%;
                padding-top: 2px;
                background-color: whitesmoke;
                bottom: 0;
                position: absolute;
                text-align: center;
                margin-top: 2px;
            }
        }

        .card {
            background-color: white;
            cursor: pointer;
            overflow: hidden;
            width: 100%;
        }
    }
}