﻿body {
    height: 100%;
    background-color: whitesmoke;
    margin-top: 50px;



     .smartphoneLinks{
       
        display:none;
    }

     .modal-body{
        
    }
     .dutyImageContainer{
         overflow-y:auto;
         max-height:600px;
     }

    .linkCard {
        /*-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: white;
        height: 80px;
        width: 180px;
        border-bottom: solid;
          border-radius:5px;
        /*margin-bottom: 10px;*/
        overflow: hidden;
        font-size: 15px;
        padding-top: 30px;
        cursor: pointer;
        margin-left: auto;
        margin-right: auto;

        .icon {
            display: none;
            font-size: 50px;
            text-align: center;
        }

        .title {
            position: relative;
            text-align: center;
            bottom: 0px;
        }

        .count {
            position: absolute;
            text-align: center;
            font-size: 30px;
            margin-left: 160px;
            margin-top: 10px;
        }
    }

    .menuTabs {
        z-index: 50;
        top: 100px;
        position: fixed;

        .tab {
            /*float:left;*/
            height: 30px;
            width: 200px;
            /*border-top:solid;
            border-left:solid;
            border-right:solid;
            border-bottom:solid;
            border-width:1px;*/
            position: relative;
            overflow: hidden;
            margin: 10px;
            /*background-color:#dbdbdb;*/
            /*-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);*/
            cursor: pointer;
            /*-webkit-transition: 0.5s ease;
           -moz-transition: 0.5s ease;
           -o-transition: 0.5s ease;
            transition: 0.5s ease;*/
            .tabHeader {
                font-size: 15px;
                margin: 10px;
            }
        }

        .tab.active {
            /*background-color:dimgray;*/
            color: black;
            font-weight: bold;
        }

        .tab:hover {
            /*background-color:whitesmoke;*/
        }

        .tab.active:hover {
            /*background-color:whitesmoke;*/
            /*color:white;*/
        }
    }

    .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);
    }

    .imageContainer {
        height: 500px;
        overflow-y: scroll;
        -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);
    }

    .width100 {
        width: 100%;
    }

     //Hier kommt die Smartphone-Ansicht
    @media only screen and (max-width:767px) {

    .smartphoneLinks{
       
        padding-bottom:20px;
        border-bottom:dashed;
        border-bottom-width:1px;
        display:block;
        margin-bottom:30px;
    }

        .dutyImageContainer{
         overflow-y:auto;
         max-height:450px;
     }

        .linkCard{
            width:60px;
            overflow:hidden;
             padding-top: 10px;
  font-size:14px;

            .title{
                
            }
            .count{
                font-size:20px;
                margin-left:55px;
                margin-top:-20px;
            }
        }
    }



}
