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


   
   
    .myDuty {
        border-color: black;
        border-style: solid;
        width: 100%;
    }

    .modalDutyCard{
        height:500px;
        padding:10px;
       
    }

    .dutyImageContainer{
        text-align:center;
    }

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

     .arrowDutyTimes{
          font-size: 15px !important;
     }

    .modalDutyCardActivities{
       
        margin-top:20px;
        height:350px;
      
  
        overflow:hidden;
        overflow-y:auto;
      
    }

    .modalDutyName{
        font-size:25px;
        font-weight:bold;
    }

    .modalStartTime{
        margin-top:18px;
        font-size:18px;
    }

    .modalEndTime{
    
        font-size:18px;
    }

    .modalArrow{
      margin-top:200px;
         margin-bottom:60px;
    }

    .dutyExchangeCard .dutyExchangeCardTable {
        padding: 15px;
    }

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

    .dutyExchangeCard {
        -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;
        width: 30%;
        min-width: 640px;
        margin-left: auto;
        margin-right: auto;
        height: auto;
           margin-bottom: 50px;
           border-radius:5px;
        background-color: #fcfcfc;
        overflow:hidden;

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

    .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 2px 40px 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%;
        width: 500px;
        overflow: hidden;
        /*grid-template-rows: 30px 100px 100px 10px 100px 100px 200px 50px;
        grid-template-columns: 300px 80px 300px;
        grid-template-areas: 
            "header header header" 
            "body body body" 
            "body body body"
            "puffer puffer puffer"
            "duty1 arrow duty2"
            "duty1 arrow duty2"
            "duty1 arrow duty2"            
            "footer1 footer1 footer2";*/
        .chooserHeader {
            padding: 10px;
            width: 100%;
            display: block;
            position: relative;
            align-self: center;
            text-align: right;
            background-color: yellow;
            font-size: 25px;
        }

        .chooserBody {
            background-color: orange;
            padding: 10px;
            align-self: center;
            grid-area: body;
            height: 100%;
            margin: 0px;
        }

        .chooserDuty1 {
            background-color: white;
            width: 100%;
            font-size: 20px;
            margin: 10px;
            padding: 10px;
            grid-area: duty1;
            height: auto;
        }

        .chooserDuty2 {
            background-color: white;
            margin: 10px;
            font-size: 20px;
            padding: 10px;
            align-self: center;
            grid-area: duty2;
            height: 100%;
        }

        .splitter {
            background-color: whitesmoke;
            padding-top: 150px;
            height: 100%;
            grid-area: arrow;
            font-size: 20px;
            text-align: center;
        }

        .noDutyText {
            height: 100%;
            margin-top: 70px;
            padding: 10px;
            font-size: 18px;
            text-align: center;
            grid-area: duty2;
        }

        .chooserFooter1 {
            position: relative;
        }

        .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: 1500px;
        margin-left: 670px;
    }

     .new{
                
                background-color:lightblue;
                position:absolute;
                width:100px;
                margin-top:10px;
                overflow:hidden;
                padding:10px;
                /*bottom:30px;*/
                
                font-weight:bold;
           
     }

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

    .deal {
        padding: 0px;
        margin: 15px;
        /*margin-left:80px;*/
        background-color: white;
        height: 250px;
        /*width:500px;*/
        overflow: hidden;


          .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;
        }

           .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: 80%;
        
        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;
    }

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


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

                .header {
                    font-size: 20px;
                    /*height: 40px;*/
                    overflow: hidden;
                    width: 200px;
                    background-color: transparent;
                 
                }

                .subheader {
                    font-weight: bold;
                    /*margin-top:20px;*/
                }
            }



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

                .approved {
                    color: green;
                }

                .exchange {
                    color: blue;
                }

                .refuse {
                    color: darkred;
                }
            }
        }

      

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

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

            .dateMiddle {
               background-color:white;               
                font-size: 18px;
            }
           
        }

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

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

       .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;
    }

    .gridContainer {
        display: grid;
        grid-template-rows: 50px 50px 50px;
        grid-template-columns: 100px 300px 400px;
        grid-template-areas: "text1 content1 duty" "text2 content2 duty" "text3 content3 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;
        }

        .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;
            }*/
        }
    }
    //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;
        }

        .dutyExchangeModalDimmer {
            z-index: 4000;
            opacity: 1;
            position: fixed;
            width: 100%;
            background-color: dimgray;
            height: 100%;
            top: 0px;
            margin: 5% auto;
            left: 0;
            right: 0;
        }

        .dutyExchangeModal {
            padding: auto;
            z-index: 4000;
            background-color: white;
            position: relative;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            height: 80%;
            background-color: whitesmoke;
            text-align: center;
            display: block;
            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%;
                padding: 20px;
                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) {

        

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

        .dutyExchangeCard{
            width:100%;
            min-width: unset;
        }

        .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%;
        }
    }
}