@media screen {

    #mediathek                            { color: #333;
                                            background-color: #FFFFFF;
                                            box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2) !important;
                                            padding: 2% 4% 50px !important;
                                            /*width: 950px !important;*/
                                            font-weight: 300;
/*
                                            height:82%;
                                            overflow: auto;
*/
                                          }
    #mediathek a                          { outline:0; }
    #mediathek table                      { width:100%; border-collapse: collapse; border:0; }
    #mediathek table td                   { padding:2px 6px 2px 6px; }

/*
    #mediathek table td                   { padding:5px; }
*/
    #mediathek .label td                  { padding:5px 10px; }

    #mediathek .head                      { background-color:#F7F9FB; border-bottom:1px solid #000000; }
    #mediathek .head_space                { width:20px; }
    #mediathek .head_type                 { text-align:center; font-style: italic; font-size:0.8em;  }
    #mediathek .head_filename             { text-align:left; font-style: italic; font-size:0.8em;  }
    #mediathek .head_date                 { text-align:center; font-style: italic; font-size:0.8em;  }
    #mediathek .head_filesize             { text-align:center; font-style: italic; font-size:0.8em;  }
    #mediathek .head_author               { text-align:left; font-style: italic; font-size:0.8em;  }
    #mediathek .head_sharedto             { text-align:left; font-style: italic; font-size:0.8em;  }
    #mediathek .head_icon                 { text-align:center; font-family: tiacsymbolregular; font-size: 60px; font-weight: normal; line-height: 30px; height:30px; }
    #mediathek .head_menu                 { text-align:center; font-size:0.8em; padding:0; background-color:#333333; }
    #mediathek .head_menu div             { float:left; border-right:1px solid #FFFFFF; padding: 5px 0; line-height:20px; }
    #mediathek .head_menu div a           { color:#FFFFFF; text-decoration:none; display: grid; justify-content: center; }
    #mediathek .head_menu .checked_menu   { width:50px; }
    #mediathek .head_menu .checked .outer-check{ border-color: #80d52b; }
    #mediathek .head_menu .checked .inner-check{ background-color: #80d52b; }
    #mediathek .head_menu div.button      { padding:6px 0; }

    #mediathek .outer-check               { display: inline-grid;  border-radius: 2px; width: 18px; border: 2px solid #aaa; padding: 2px; font-size: 0px; line-height: 0px;}
    #mediathek .inner-check               { display: inline-block; border-radius: 1px; width: 10px; height: 10px; background-color: #aaa5; font-size: 0px; line-height: 0px;}
    #mediathek .info .checked .outer-check{ border-color: #60a917; }
    #mediathek .info .checked .inner-check{ background-color: #60a917; }

    #mediathek .info .mark                { width:50px; }
    #mediathek .info .mark a              { text-decoration: none; color:#e4e9ed; display:grid; justify-content: center; outline:0; }
    #markMenu div                         { float:left; border:0; }
    #markMenu a, #markMenu a:hover        { color:#FFFFFF; text-decoration:none; font-size:13px; border:0; outline: 0; }
    #markMenu .tiacButton                 { padding:5px 10px; border-left:1px solid #FFFFFF; }
    #markMenu .tiacSymbol                 { color: #FFFFFF; font-family: tiacsymbolregular; font-size: 60px; font-weight: normal; line-height: 30px; height:30px; margin: 0 auto; width: 100%; }
    #markMenu .tiacText                   { color: #FFFFFF; clear:both; }
    #mediathek .type                      { width: 80px; }
    #mediathek .type a                    { text-decoration: none; display:block; }
    #mediathek .type div a                { color: #C10000; font-family: tiacsymbolregular; font-size: 100px; font-weight: normal; line-height: 38px; overflow: hidden; }
    #mediathek .filename                  { font-weight: 400; vertical-align: top; text-align:left; }
    #mediathek .info a,
    #mediathek .desc a                    { text-decoration: none; color:#000000; display:block; word-break: break-all; }
    #mediathek .date                      { font-weight: 400; vertical-align: top; white-space: nowrap; }
    #mediathek .filesize                  { font-weight: 400; vertical-align: top; white-space: nowrap; }
    #mediathek .author                    { font-weight: 400; vertical-align: top; white-space: nowrap; text-align:left; }
    #mediathek .sharedto                  { font-weight: 400; vertical-align: top; white-space: nowrap; text-align:left; }
    #mediathek .icon                      { width:60px; white-space: nowrap; }
    #mediathek .icon div                  { font-family: tiacsymbolregular; font-size: 50px; font-weight: normal; line-height: 15px; float: left; width:20px; }
    #mediathek .icon div a                { text-decoration: none; color: #495967; }
    #mediathek .desc                      { font-size:0.8em; text-align:left; }

    #mediathek tr.bez                     { border-bottom: 1px solid #000000; }
    #mediathek tr.label td                { background-color: #E4E9ED; font-weight: 400; }

    #mediathek .edit_area input           { font-family: Lato; font-size:0.9em; border: 1px solid black; color:#333333; }
    #mediathek .edit_area button          { font-family: tiacsymbolregular; font-size: 30px; background:none; border:0; }

    #uploadDialog                         { display:none; }
    #uploadDialog td                      { text-align: left; }
    #uploadDialog td.label                { width:120px; }
    #ul_desc                              { width:100%; border:1px solid #333333; padding: 0 5px; }
    #ul_folder                            { width:100%; border:1px solid #333333; padding: 0 2px; }
    #ul_date_begin, #ul_date_end          { border:1px solid #333333; padding: 0 5px; }

    /*#uploadDialog label.filebutton        { width:120px; height:40px; overflow:hidden; position:relative; background-color:#333333; padding:5px 10px; color:#fff; }*/
    #uploadDialog label span input        { z-index: 999; line-height: 0; font-size: 50px; position: absolute;
                                            top: -2px;
                                            left: -700px;
                                            opacity: 0;
                                            filter: alpha(opacity = 0);
                                            -ms-filter: "alpha(opacity=0)";
                                            cursor: pointer;
                                            _cursor: hand;
                                            margin: 0;
                                            padding:0;
                                            width:0;
                                            height:0;
                                          }

    /*#uploadDialog .button_upload          { padding:5px 10px; background-color:#333333; text-decoration: none; color:#fff; border:0; font-family: lato; font-weight:300; }*/

    /*#uploadButton                         { padding:5px 10px; background-color:#333333; text-decoration: none; color:#fff; }*/
    #uploadButton .tiacSymbol             { font-family: tiacsymbolregular; font-size: 80px; font-weight: normal; position: relative; top:22px; line-height:10px; }

    #dialog-confirm-delete p              { font-size:0.8em; padding:5px 15px 5px 15px; }
    .ui-dialog-title                      { margin-left:10px !important; }

    #mediathek .actionShare               { padding:0 15px; display:block; }
    #mediathek .actionDelete              { padding:0 15px; display:block; }

    #userlist                     { transition:width 500ms ease 0s; width:0; height:100%; line-height:15px; margin:auto; color:#ffffff; border-top-left-radius:20px; margin-top: 10px; position:absolute; right:0; top:0; background-color:black; }
    .userlist-open                { transition:width 500ms ease 0s; width:500px !important; max-width: 100%;}
    #userlist .header             { padding:15px; }
    #userlist .header h2          { font-weight:300; font-size: 1.6em; color:#c6c6c6; }
    #userlist a                   { text-decoration:none; }
    #userlist .tiacicon           { line-height: 15px; color:#ffffff; }
    #userlist .first              {  }
    #userlist .list               { float:left; width:100%; }
    #userlist .demo_show          { display:block; }
    #userlist .demo_hide          { display:none; }
    #userlist .human              { float:left; width:100%; height:45px; border-bottom:1px solid #555555; border-right:1px solid #555555; cursor:pointer;}
    #userlist .share              { background-color:green; }
    #userlist .all_share          { float:left; width:100%; height:45px; line-height:45px; text-align: center; border-bottom:1px solid #555555; border-top:1px solid #555555; border-left:1px solid #555555; border-right:1px solid #555555; cursor:pointer;}
    #userlist .photo              { position:relative; top:0; width:30px; height:45px; float:left; overflow:hidden; text-align:center; }
    #userlist .photo > span       { display: block; width: 1000px; margin-left: -485px; }
    #userlist .photo > span > img { display: inline-block; height: 45px; }
    #userlist .photo .tiacicon    {  position:absolute; opacity: 0.8; top: 26px;}
    #userlist .photo .tiacicon.male   { font-size: 126px; left: -7px; }
    #userlist .photo .tiacicon.female { font-size: 118px; left: -7px }
    #userlist .offline img        { opacity: 0.3; moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                                    filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
                                    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
                                    filter: gray; /* IE6-9 */
    }
    #userlist .offline span       { color:#3D3D3D; }

    #userlist .details            { text-align:left; padding: 10px 0px 5px 35px; line-height: 30px; font-weight:300; color: #eee; }
    #userlist .tiacicon           { font-family:tiacsymbolregular; width:100%; height:15px; font-size:2.5em; color:#ffffff; }

    #userlist .social .chat:before      { content:'\00EA'; color:#8CB83C; }
    #userlist .social .video:before     { content:'\00F0'; color:#3d3d3d; }
    /*#userlist .social .video:before     { content:'\00F0'; color:#8CB83C; }*/
    #userlist .social .email:before     { content:'\00EC'; color:#555555; }
    #userlist .social .facebook:before  { content:'\00EB'; color:#3B5998; }
    #userlist .social .twitter:before   { content:'\00EE'; color:#00CAFB; }
    #userlist .social .offline:before   { color:#3d3d3d; }
    #userlist .social .online           { cursor:pointer; }

    #userlist .overlay            { position:absolute; top: unset; left: unset; height:10px; width:20px; margin-bottom:0; background-color:#ffffff; color:#000000;
                                      font-family: tiacsymbolregular; font-size:40px;
                                      border-top-left-radius:3px;
                                      opacity: 0.8; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    }


    #userlist .sidebar-button              { font-family: tiacsymbolregular; font-size:50px; width: 20px; height:20px; float:left; vertical-align: top; padding-right:10px; cursor:pointer; transition: all 0.3s ease-out 0s;}
    #userlist .complete-button:hover,
    #userlist .complete-info-button:hover  { color: green; }
    #userlist .close-button:hover          { color: red; }
    #userlist .info-button:hover           { color: yellow; }
    #userlist .line-button                 { width:90px; height:25px; position:relative; right:0; }

    .clearfix                              { clear:both; }

    #userlist_outer                        { height: calc(100% - 9.6rem - 180px); }

    .info-share                            { width:16px;}
    .info-share img                        { cursor:pointer; width:16px; }

}

@media only screen and (max-width: 600px) {
    #mediathek table.list tr > td:nth-child(2), #mediathek table.list tr > td:nth-child(6) {
        display: none;
    }
    #mediathek {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}