@charset "UTF-8";


#property-file-list                                                  { margin: 128px 0px 53px; padding: 5px; background-color: #eeeeee; }
/*
#property-file-list                                                  { border-radius: 5px; }
#property-file-list                                                  { box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -ms-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); }
*/

#property-file-list .nofiles                                         { margin: 5px 0; border: none; padding: 10px;  background-color: #ffffff; font-size: 12px; line-height: 20px; }

#property-file-list .file                                            { margin: 5px; border: none; padding: 10px;  background-color: #ffffff; cursor: pointer; }
#property-file-list .file                                            { display: flex; display: -ms-flexbox; flex-direction: row; -ms-flex-direction: row; }
#property-file-list .file .image                                     { position: relative; flex: 0 0 calc(20% - 20px); width: calc(20% - 20px); margin: 10px 10px 10px 0; border: none;}
#property-file-list .file .image::before                             { content:""; display: block; padding-top: 75%; }
#property-file-list .file .image span.unread                         { display: inline-block; margin: 0 0 5px 0; padding: 0 5px; line-height: 20px; font-size: 12px; color: #ffffff; background-color: #ff4444; position: relative;}
#property-file-list .file .image img                                 { position: absolute; top: 0; right: 0; bottom: 0; left: 0;  margin: auto; border: none; max-width: 100%; max-height: 100%;  z-index: 0;}
#property-file-list .file .info1                                     { flex: 0 0 45%; width: 45%; margin: 0; padding: 0; }
#property-file-list .file .info1 span                                { display: block; text-align: left; }
#property-file-list .file .info1 span.category                       { display: inline-block; margin: 0 0 5px 0; padding: 0 5px; line-height: 20px; font-size: 12px; color: #34495e; background-color: #d0e3f0; }
#property-file-list .file .info1 span.subject                        { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#property-file-list .file .info1 span.created                        { line-height: 30px; font-size: 14px; color: #888888; }
#property-file-list .file .info2                                     { flex: 0 0 35%; width: 35%; margin: 0; padding: 0 0 0 5px; }
#property-file-list .file .info2 span                                { display: block; text-align: right; font-size: 14px; color: #888888; }
#property-file-list .file .info2 span.timecard                       { display: inline-block; margin: 0 0 0 auto; padding: 0 10px; color: #444444; background-color:gold; }

#property-file-grid                                                  { margin: 168px 0px 40px; padding: 5px; background-color: #eeeeee; }
#property-file-grid .file                                            { position: relative; display: inline-block; margin: 5px; border: none; padding: 10px; background-color: #ffffff; vertical-align: top; cursor: pointer; }
@media screen and (max-width:  600px)                                { #property-file-grid .file { width: calc(50% - 10px); } }
@media screen and (min-width:  600px) and (max-width:1200px)         { #property-file-grid .file { width: calc(34% - 18px); } }
@media screen and (min-width: 1200px)                                { #property-file-grid .file { width: calc(25% - 20px); } }
#property-file-grid .file .image                                     { position: relative; display: block; width: 100%; margin: 0 0 10px; border: none; }
#property-file-grid .file .image::before                             { content:""; display: block; padding-top: 75%; }
#property-file-grid .file .image img                                 { position: absolute; top: 0; right: 0; bottom: 0; left: 0;  margin: auto; border: none; max-width: 100%; max-height: 100%; }
#property-file-grid .file .image span.unread                         { position: absolute; bottom: 0; left: 0; padding: 0 5px; line-height: 20px; font-size: 12px; color: #ffffff; background-color: #ff4444; }
#property-file-grid .file .category                                  { position: absolute; top: 0; left: 0; padding: 0 5px; line-height: 20px; font-size: 12px; color: #34495e; background-color: #d0e3f0; }
#property-file-grid .file table                                      { width: 100%; margin: 0; border: none; border-collapse: collapse; }
#property-file-grid .file table td                                   { white-space: normal; word-break: break-all; }
#property-file-grid .file table td.subject                           { font-size: 16px; }
#property-file-grid .file table td.created                           { font-size: 14px; color: #888888; }
#property-file-grid .file table td.contractorname                    { font-size: 14px; color: #888888; text-align: left;  }
#property-file-grid .file table td.username                          { font-size: 14px; color: #888888; text-align: right; }
#property-file-grid .file table td.timecard span                     { font-size: 14px; color: #444444; padding: 2px 10px; background-color: gold; text-align: left; }
#property-file-grid .file table td.subject span                      { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#folder-name                                                         { position: relative; right: 0; left: 0; margin: 0; padding: 0; background-color: #d7dbdf; font-size: 0; vertical-align: middle; }
#folder-name                                                         { display: flex; display: -ms-flexbox; flex-direction: row; -ms-flex-direction: row; }
#folder-name > div                                                   { padding: 0 10px; color: #34495e; line-height: 30px; vertical-align: middle; white-space: nowrap; }
#folder-name > div.image                                             { flex: 0 0 40px; margin: 5px 0 5px 10px; padding: 0; }
#folder-name > div.image                                             { background-image: url('../../img/ContractorMyPage/iconfolder/folder-blue.png'); background-position: 0 -30px; background-repeat: no-repeat; }
#folder-name > div.name                                              { flex: 1 1 auto; line-height: 40px; font-size: 18px; width: auto; overflow: hidden; text-overflow: ellipsis; }
#folder-name > div.sortorder                                         { flex: 0 0 30px; line-height: 40px; font-size: 16px; padding-right: 5px; color: #007bff; cursor: pointer; }
#folder-name > div.sortitem                                          { flex: 0 0 60px; line-height: 40px; font-size: 14px; padding-left:  5px; color: #007bff; cursor: pointer; }
#folder-name > div.viewmode                                          { flex: 0 0 30px; margin: 5px; background-color: #ffffff; font-size: 20px; cursor: pointer; }
#folder-name.th > div.fa-th                                          { color: #ffffff; background-color: #34495e; }
#folder-name.list > div.fa-list                                      { color: #ffffff; background-color: #34495e; }

#property-file-upload-button-area                                    { position: fixed; bottom: 0; width: 100%; margin: 0; text-align: center; overflow: visible; }
#property-file-upload-button-area                                    { transition: top 0.5s }
#property-file-upload-button-area .backgroundmask                    { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; opacity: 0; }
#property-file-upload-button-area .backgroundmask                    { transition: opacity 0.3s ease 0s; }
#property-file-upload-button-area .togglebutton                      { position: absolute; right: 0; bottom: 7vh; left: 0; width: 60%; margin: 0 auto; border: none; padding: 0; background-color: #2980b9; cursor: pointer; }
#property-file-upload-button-area .togglebutton                      { border-radius: 10px 10px 0 0; }
#property-file-upload-button-area .togglebutton                      { box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -moz-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); -ms-box-shadow: 0px 2px 5px 0px rgba(128,128,128,1.0); }
#property-file-upload-button-area .togglebutton                      { transition: bottom 0.3s ease 0s; }
#property-file-upload-button-area .togglebutton i                    { margin: 0 20px 0 0; color: #ffffff; font-size: 25px; line-height: 70px; vertical-align: middle; }
#property-file-upload-button-area .togglebutton span                 { color: #ffffff; font-size: 18px; line-height: 70px; vertical-align: middle; }
#property-file-upload-button-area .actions                           { position: absolute; right: 0; bottom: 7vh; left: 0; height: 0; }
#property-file-upload-button-area .actions                           { transition: height 0.3s ease 0s; }
#property-file-upload-button-area .actions .action                   { margin: 0; border-top: 2px solid #aaaaaa; font-size: 20px; line-height: 80px; color: #2980b9; background-color: #d0e3f0; cursor: pointer; }
#property-file-upload-button-area .actions .action                   { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#property-file-upload-button-area .actions .cancel                   { font-size: 14px; line-height: 50px; }
#property-file-upload-button-area .actions .action i                 { margin: 0 20px 0 0; }
#property-file-upload-button-area .actions input                     { display: none; }

#property-file-upload-button-area.open                               { top: 0; transition: top 0.5s }
#property-file-upload-button-area.open .backgroundmask               { opacity: 0.7;  }
#property-file-upload-button-area.open .togglebutton                 { bottom: calc(216px - 7vh); }
#property-file-upload-button-area.open .actions                      { height: 216px; }

#app.upmove #property-file-upload-button-area                        { animation: UpAnime   0.5s forwards; }
#app.downmove #property-file-upload-button-area                      { animation: DownAnime 0.5s forwards; }