@charset "UTF-8"; /* ---------- モーダル共通 ----------*/ .modal { position: fixed; display: block; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } .modal { transition: opacity 0.3s ease 0s; pointer-events: none; } .modal .modal-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(0,0,0, 0.8); } .modal .modal-layer { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; } .modal .modal-layer { transition: top 0.3s ease 0s; } .modal .modal-layer .frame { position: absolute; top: 88px; right: 30px; bottom: 80px; left: 30px; margin: auto; background-color: #ffffff; overflow: auto; } .modal .modal-layer .frame .modal-header { position: relative; display: block; margin: 0; border: none; padding: 10px 20px; line-height: 20px; color: #ffffff; background-color: #34495e; text-align: center; } .modal .modal-layer .frame .modal-header { border-radius: 0; } .modal .modal-layer .frame .modal-header span { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 20px; line-height: 20px; text-align: center; cursor: pointer; } .modal .modal-layer .frame .modal-search { width: 100%; margin: 0; padding: 0 50px; vertical-align: middle; background-color: #eeeeee; } .modal .modal-layer .frame .modal-search { display: flex; display: -ms-flexbox; flex-flow: row nowrap; -ms-flex-flow: row nowrap; } .modal .modal-layer .frame .modal-search input { flex: 1 1 auto; display: block; height: 30px; margin: 5px 0 5px 5px; border: 1px solid #34495e; border-right: none; font-size: 16px; } .modal .modal-layer .frame .modal-search input { border-radius: 5px 0 0 5px; } .modal .modal-layer .frame .modal-search button { flex: 0 0 40px; display: block; height: 30px; margin: 5px 0 5px 0; border: none; background: none; background-color: #34495e; text-align: center; vertical-align: middle; } .modal .modal-layer .frame .modal-search button { border-radius: 0 5px 5px 0; } .modal .modal-layer .frame .modal-search button span { color: #ffffff; font-size: 16px; line-height: 26px; } .modal .modal-layer .frame .header-table { border: none; border-top: 1px solid #34495e; border-bottom: 1px solid #34495e; overflow: hidden; } .modal .modal-layer .frame .header-table table { width: 100%; margin: 0; border: none; border-collapse: collapse; } .modal .modal-layer .frame .header-table table thead tr td { padding: 0; font-size: 14px; line-height: 28px; text-align: left; vertical-align: middle; color: #34495e; background-color: #eeeeee; } .modal .modal-layer .frame .header-table table thead tr td span { margin: 0; padding: 0 5px; font-size: 14px; line-height: 28px; vertical-align: middle; cursor: pointer; } .modal .modal-layer .frame .header-table table thead tr td span i { margin: 0 0 0 5px; } .modal .modal-layer .frame .data-table { position: absolute; top: 112px; bottom: 60px; width: 100%; border: none; padding: 0; overflow-y: auto; overflow-x: hidden; } .modal .modal-layer .frame .data-table table { width: 100%; margin: 0; border: none; border-collapse: collapse; } .modal .modal-layer .frame .button-area { position: absolute; right: 0; bottom: 0; left: 0; border: none; border-top: 1px solid #34495e; padding: 10px 20px; background-color: #ffffff; text-align: center; } .modal .modal-layer .frame .button-area button { display: block; width: 50%; margin: 0 auto; border: none; padding: 0; line-height: 39px; color: #ffffff; background-color: #34495e; } .modal .modal-layer .frame .button-area button { border-radius: 5px; } .modal.on { opacity: 1; pointer-events: auto; } .modal.on .modal-layer { top: 0; } /* ---------- 利用規約同意モーダル ----------*/ #agreement-modal .frame .modal-header { position: absolute; top :0; right: 0; left: 0; border: none; border-bottom: 1px solid #34495e; padding: 0 20px; background-color: #ffffff; text-align: left; } #agreement-modal .frame .modal-header { font-size: 20px; line-height: 40px; white-space: nowrap; background-color: #34495e; } #agreement-modal .frame .message-area { margin: 41px auto 60px auto; padding: 20px; } #agreement-modal .frame .message-area .message { display: block; margin: 30px; font-size: 20px; line-height: 30px; white-space: normal; color: #000000; } #agreement-modal .frame .message-area .link { display: block; margin-top: 40px; font-size: 23px; line-height: 30px; white-space: nowrap; color: #007bff; text-align: center; } #agreement-modal .frame .message-area .subcomment { display: block; margin-top: 10px; font-size: 18px; line-height: 30px; white-space: nowrap; text-align: center; } #agreement-modal .frame .button-area { border: none; background: none; } #agreement-modal .frame .button-area .question { display: block; margin-bottom: 40px; font-size: 20px; line-height: 30px; white-space: nowrap; text-align: center; } #agreement-modal .frame .button-area button { display: inline-block; width: 35%; margin: 0 15px; } #agreement-modal .frame .button-area button.cancel { background-color: #e2b13c; } #agreement-modal .frame .button-area button.cancel { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); } #agreement-modal .frame .button-area button.submit { background-color: #043f6e; } #agreement-modal .frame .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } /* ---------- 確認モーダル ----------*/ #confirm-modal { display: flex; justify-content: center; align-items: center; } #confirm-modal .frame { top :0; bottom: 0; max-height: 200px; } #confirm-modal .frame .modal-header { position: absolute; top :0; right: 0; left: 0; border: none; border-bottom: 1px solid #34495e; padding: 0 20px; background-color: #ffffff; text-align: left; } #confirm-modal .frame .modal-header { font-size: 20px; line-height: 40px; white-space: nowrap; background-color: #34495e; } #confirm-modal .frame .message-area { margin: 41px auto 60px auto; padding: 20px; } #confirm-modal .frame .message-area .message { display: block; font-size: 20px; line-height: 25px; white-space: normal; color: #000000; } #confirm-modal .frame .message-area .comment { display: block; font-size: 16px; line-height: 21px; white-space: normal; color: #555555; } #confirm-modal .frame .button-area { border: none; background: none; } #confirm-modal .frame .button-area button { display: inline-block; width: 35%; margin: 0 15px; } #confirm-modal .frame .button-area button.cancel { background-color: #e2b13c; } #confirm-modal .frame .button-area button.cancel { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); } #confirm-modal .frame .button-area button.submit { background-color: #043f6e; } #confirm-modal .frame .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } #confirm-modal .frame.warning .modal-header { border-bottom: 1px solid #cc4444; background-color: #cc4444; } #confirm-modal .frame.warning .modal-header { background-color: #882222; } #confirm-modal .frame.warning .message-area .message { color: #cc4444; } #confirm-modal .frame.warning .message-area .comment { color: #ee6666; } #confirm-modal .frame.warning .button-area button.cancel { background-color: #043f6e; } #confirm-modal .frame.warning .button-area button.cancel { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } #confirm-modal .frame.warning .button-area button.submit { background-color: #882222; } #confirm-modal .frame.warning .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#cc6666), to(#882222)); } /* ---------- ユーザ選択モーダル ----------*/ #user-select-modal .frame { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } #user-select-modal .frame .usertype-check { width: 100%; margin: 0; padding: 0 30px 10px; text-align: center; vertical-align: middle; background-color: #eeeeee; } #user-select-modal .frame .usertype-check label { margin: 0 50px 0 0; font-size: 14px; line-height: 25px; white-space: nowrap; vertical-align: middle; cursor: pointer; } #user-select-modal .frame .usertype-check label input { width: 16px; height: 16px; margin: 0 10px 0 0; white-space: nowrap; vertical-align: middle; cursor: pointer; } #user-select-modal .frame .usertype-check label:last-child { margin: 0; } #user-select-modal .frame .header-table { overflow: visible; } #user-select-modal .frame table thead tr td.check { width: 40px; height: 47px; padding: 9px 5px 8px 5px; text-align: center; } #user-select-modal .frame table thead tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; vertical-align: middle; } #user-select-modal .frame table thead tr td.kanjiname { width: 29%; } #user-select-modal .frame table thead tr td.kananame { width: 29%; } #user-select-modal .frame table thead tr td.corporatename { width: auto; } #user-select-modal .frame table tbody tr td.check { width: 40px; text-align: center; } #user-select-modal .frame table tbody tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; } #user-select-modal .frame table tbody tr td.kanjiname { width: 29%; font-size: 14px; } #user-select-modal .frame table tbody tr td.kananame { width: 29%; font-size: 12px; } #user-select-modal .frame table tbody tr td.corporatename { width: auto; font-size: 12px; } #user-select-modal .frame .data-table { position: initial; top: initial; bottom: initial; flex-grow: 1; } #user-select-modal .frame .data-table table tbody tr td { min-height: 40px; border-bottom: 1px solid #ffffff; padding: 9px 5px 8px 5px; font-size: 14px; line-height: 16px; text-align: left; vertical-align: middle; color: #34495e; background-color: #dddddd; } #user-select-modal .frame .data-table table tbody tr td.norecords { padding: 10px; background-color: #ffffff; } #user-select-modal .frame .button-area { position: initial; top: initial; bottom: initial; } /* ---------- 部署選択モーダル ----------*/ #depertment-select-modal .frame { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } #depertment-select-modal .frame .usertype-check { width: 100%; margin: 0; padding: 0 30px 10px; text-align: center; vertical-align: middle; background-color: #eeeeee; } #depertment-select-modal .frame .usertype-check label { margin: 0 50px 0 0; font-size: 14px; line-height: 25px; white-space: nowrap; vertical-align: middle; cursor: pointer; } #depertment-select-modal .frame .usertype-check label input { width: 16px; height: 16px; margin: 0 10px 0 0; white-space: nowrap; vertical-align: middle; cursor: pointer; } #depertment-select-modal .frame .usertype-check label:last-child { margin: 0; } #depertment-select-modal .frame .header-table { overflow: visible; } #depertment-select-modal .frame table thead tr td.check { width: 40px; height: 47px; padding: 9px 5px 8px 5px; text-align: center; } #depertment-select-modal .frame table thead tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; vertical-align: middle; } #depertment-select-modal .frame table thead tr td.name { width: 29%; } #depertment-select-modal .frame table thead tr td.basename { width: auto; } #depertment-select-modal .frame table tbody tr td.check { width: 40px; text-align: center; } #depertment-select-modal .frame table tbody tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; } #depertment-select-modal .frame table tbody tr td.name { width: 29%; font-size: 14px; } #depertment-select-modal .frame table tbody tr td.basename { width: auto; font-size: 12px; } #depertment-select-modal .frame .data-table { position: initial; top: initial; bottom: initial; flex-grow: 1; } #depertment-select-modal .frame .data-table table tbody tr td { min-height: 40px; border-bottom: 1px solid #ffffff; padding: 9px 5px 8px 5px; font-size: 14px; line-height: 16px; text-align: left; vertical-align: middle; color: #34495e; background-color: #dddddd; } #depertment-select-modal .frame .data-table table tbody tr td.norecords { padding: 10px; background-color: #ffffff; } #depertment-select-modal .frame .button-area { position: initial; top: initial; bottom: initial; } /* ---------- 工程表選択モーダル ----------*/ #process-select-modal .frame table thead tr td.check { width: 40px; text-align: center; } #process-select-modal .frame table thead tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; vertical-align: middle; } #process-select-modal .frame table thead tr td.processname { width: auto; } #process-select-modal .frame table tbody tr td.check { width: 40px; text-align: center; } #process-select-modal .frame table tbody tr td.check input { width: 13px; height: 13px; margin: 9px 9px 8px; } #process-select-modal .frame table tbody tr td.processname { width: auto; font-size: 12px; } #process-select-modal .frame .data-table table tbody tr td { min-height: 40px; border-bottom: 1px solid #ffffff; padding: 9px 5px 8px 5px; font-size: 14px; line-height: 16px; text-align: left; vertical-align: middle; color: #34495e; background-color: #dddddd; } #process-select-modal .frame .data-table table tbody tr td.norecords { padding: 10px; background-color: #ffffff; } /* ---------- ファイルアップロードモーダル ----------*/ #file-upload-modal .frame .data-table { top: 0; } #file-upload-modal .frame .data-table table { margin: 0 0 20px 0; } #file-upload-modal .frame table tbody tr th { width: 1%; padding: 0 20px; font-size: 16px; line-height: 30px; text-align: left; vertical-align: top; white-space: nowrap; } #file-upload-modal .frame table tbody tr td { position: relative; padding: 0 20px 0 0; font-size: 14px; vertical-align: top; } #file-upload-modal .frame table tbody tr.image td { position: relative; width: 100%; margin: 0; border: none; padding: 20px; } #file-upload-modal .frame table tbody tr.image td::before { content:""; display: block; padding-top: 75%; } #file-upload-modal .frame table tbody tr.image td div { position: relative; } #file-upload-modal .frame table tbody tr.image td img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: none; max-width: calc(100% - 20px); max-height: calc(100% - 20px); } #file-upload-modal .frame table tbody tr td span { display: block; padding: 4px; line-height: 22px; font-size: 16px; } #file-upload-modal .frame table tbody tr.label td p { width: 50px; height: 20px; margin: 0 0 0 110px; padding: 0 5px; text-align: center; color: #ffffff; height: 20px; line-height: 20px; font-size: 14px; border-radius: 3px; background-color: #aaaaaa; } #file-upload-modal .frame table tbody tr.label td p.create { background-color: #4444bb; } #file-upload-modal .frame table tbody tr.label td p.update { background-color: #bb4444; } #file-upload-modal .frame table tbody tr.subject td span { padding: 1px 0; } #file-upload-modal .frame table tbody tr.subject td input[type=text] { display: block; width: 100%; line-height: 20px; border: 1px solid #aaaaaa; background-color: #fffff8; font-size: 16px; } #file-upload-modal .frame table tbody tr.folder td span { display: inline; line-height: 30px; font-size: 16px; } #file-upload-modal .frame table tbody tr.folder td span.to-photo-folder { color: #e95e4f; } #file-upload-modal .frame table tbody tr.folder td button { position: absolute; top: 0; right: 20px; border: none; padding: 0 10px; line-height: 30px; color: #ffffff; background-color: #2980b9; } #file-upload-modal .frame table tbody tr.folder td button { border-radius: 5px; } #file-upload-modal .frame table tbody tr.comment th button { display: block; width: 60px; margin: 0 0 10px 0; padding: 3px; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; font-size: 16px; white-space: nowrap; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } #file-upload-modal .frame table tbody tr.comment th button[name=presetphrase] { color: #ffffff; background-color: #f0ad4e; border-color: #eea236; } #file-upload-modal .frame table tbody tr.comment th button[name=clearcomment] { color: #333333; background-color: #ffffff; border-color: #cccccc; letter-spacing: -1px; } #file-upload-modal .frame table tbody tr.comment td textarea { width: 100%; height: 150px; border: 1px solid #cccccc; color: #333333; background: none; background-color: #ffffff; border-radius: 4px; text-align: left; font-size: 16px; resize: none; } #file-upload-modal .frame .button-area { border: none; border-top: 1px solid #dddddd; background: none; } #file-upload-modal .frame .button-area button { display: inline-block; width: 35%; margin: 0 15px; } #file-upload-modal .frame .button-area button.cancel { background-color: #e2b13c; } #file-upload-modal .frame .button-area button.cancel { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); } #file-upload-modal .frame .button-area button.submit { background-color: #043f6e; } #file-upload-modal .frame .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } /* ---------- フォルダ選択モーダル ----------*/ #folder-select-modal .folder-list { position: absolute; top: 40px; right: 0; bottom: 60px; left: 0; padding: 20px; overflow: auto; } #folder-select-modal .folder { position: relative; margin: 0 0 5px; padding: 0; border: none; background-color: #b2d2e6; white-space: nowrap; overflow-x: auto; cursor: pointer; } #folder-select-modal .folder:last-child { margin: 0; } #folder-select-modal .folder span { display: inline-block; margin: 20px 10px; line-height: 30px; vertical-align: top; } #folder-select-modal .folder .icon { position: relative; width: 40px; height: 30px; color: #aaccff; } #folder-select-modal .folder .icon { background-image: url('../../img/ContractorMyPage/iconfolder/folder-blue.png'); background-position: top left; background-repeat: no-repeat; } #folder-select-modal > .folder.open > .icon { background-position: bottom left; } #folder-select-modal .folder .icon .count { position: absolute; right: -2px; bottom: -2px; margin: auto; padding: 0 5px; line-height: 18px; font-size: 12px; font-weight: bold; color: #ffffff; background-color: #4444ff; } #folder-select-modal .folder .icon .count { border-radius: 10px; } #folder-select-modal .folder .name { font-size: 16px; white-space: nowrap; /* max-width: calc(100% - 70px); */ } #folder-select-modal .folder .nums { font-size: 16px; white-space: nowrap; } #folder-select-modal .folder .folder { margin: 0; background-color: #d0e3f0; border-top: 1px solid #ffffff; } #folder-select-modal .folder .folder span { margin: 10px 10px; } #folder-select-modal .folder .folder span.line { position: relative; width: 40px; color: #000000; font-size: 20px; text-align: center; } /* ---------- 項目選択モーダル ----------*/ #item-select-modal .item-list { position: absolute; top: 40px; right: 0; bottom: 60px; left: 0; padding: 20px; overflow: auto; } #item-select-modal .item { margin: 0; padding: 0; border: none; white-space: nowrap; overflow-x: auto; cursor: pointer; } #item-select-modal .item:last-child { border: none; } #item-select-modal .item.selected { background-color: #dddddd; } #item-select-modal .item input[type=radio] { display: inline-block; margin: 20px 0px 20px 10px; height: 30px; vertical-align: top; } #item-select-modal .item span { display: inline-block; margin: 20px 0px 20px 10px; line-height: 30px; vertical-align: top; } /* ---------- コメント入力モーダル ----------*/ #comment-input-modal .frame { max-height: 250px; } #comment-input-modal .comment { position: absolute; top: 40px; right: 0; bottom: 60px; left: 0; padding: 10px; } #comment-input-modal .comment textarea { display: block; width: 100%; height: 100%; border: 1px solid #34495e; resize: none; } /* ---------- テキスト入力モーダル ----------*/ #text-input-modal .frame { max-height: 220px; } #text-input-modal .input-area { position: absolute; top: 40px; right: 0; bottom: 60px; left: 0; padding: 30px 10px; } #text-input-modal .input-area input[type=text] { display: block; width: 100%; line-height: 50px; font-size: 25px; color: #444444; border-radius: 4px; } #text-input-modal .input-area .text { display: block; width: 100%; line-height: 50px; font-size: 25px; color: #444444; border-radius: 4px; border: 2px solid #444444; } #text-input-modal .input-area .message { display: block; color: #444444; text-align: left; font-size: 14px; } #text-input-modal .input-area .errormessage { display: block; color: #cc4444; text-align: left; font-size: 14px; } #text-input-modal .button-area button:disabled { opacity: 0.5; } #text-input-modal .frame.invalid .input-area input[type=text] { border-color: #cc4444; outline-color: #cc4444; } /* ---------- テキストエリア入力モーダル ----------*/ #textarea-input-modal .frame { max-height: 420px; } #textarea-input-modal .input-area { position: absolute; top: 40px; right: 0; bottom: 60px; left: 0; padding: 10px; } #textarea-input-modal .input-area { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } #textarea-input-modal .input-area .message { display: block; flex-grow: 0; color: #444444; text-align: left; font-size: 14px; height: 25px; } #textarea-input-modal .input-area textarea { display: block; flex-grow: 1; width: 100%; line-height: 20px; font-size: 20px; color: #444444; border-radius: 4px; resize: none; } #textarea-input-modal .input-area .errormessage { display: block; flex-grow: 0; color: #cc4444; text-align: left; font-size: 14px; height: 25px; } #textarea-input-modal .button-area button:disabled { opacity: 0.5; } #textarea-input-modal .frame.invalid .input-area textarea { border-color: #cc4444; outline-color: #cc4444; } /* ---------- 日報入力モーダル ----------*/ #timecard-input-modal .frame { max-height: 450px; } #timecard-input-modal .modal-header { background-color: #ffffff; } #timecard-input-modal .modal-header .date { padding: 0; line-height: 50px; font-size: 20px; text-align: center; } #timecard-input-modal .modal-header .typetime { display: flex; margin: 10px 0; } #timecard-input-modal .modal-header .typetime .type { flex: 1 1 50%; margin: 0 20px 0 60px; padding: 0 10px; font-size: 20px; line-height: 40px; color: #ffffff; white-space: nowrap; } #timecard-input-modal .modal-header .typetime .time { flex: 1 1 50%; margin: 0 60px 0 20px; padding: 0 10px; font-size: 40px; line-height: 40px; color: #ffffff; white-space: nowrap; } #timecard-input-modal .comment { width: 80%; height: 180px; margin: 0 auto; border-width: 2px; border-style: solid; } #timecard-input-modal .comment th { border-width: 2px; border-style: solid; font-size: 14px; height: 20px; } #timecard-input-modal .comment textarea { display: block; width: 100%; height: 100%; border: none; resize: none; font-size: 18px; } #timecard-input-modal .comment textarea { outline: none; } #timecard-input-modal .button-area { position: initial; border: none; } #timecard-input-modal .button-area button { margin: 10px auto; } #timecard-input-modal .button-area button { border-radius: 7px; } #timecard-input-modal .frame button[name=decision] { color: #ffffff; } #timecard-input-modal .frame button[name=cancel] { border: 2px solid #cccccc; color: #000000; } #timecard-input-modal .frame button[name=cancel] { background: -moz-linear-gradient(top,#eeeeee 0%,#cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); } #timecard-input-modal .frame.enter .date, #timecard-input-modal .frame.enter .time { color: #2980b9; } #timecard-input-modal .frame.enter .type { background-color: #2980b9; } #timecard-input-modal .frame.enter .comment { border-color: #2980b9; background-color: #dfecf4; } #timecard-input-modal .frame.enter .comment th { border-color: #2980b9; color: #2980b9; } #timecard-input-modal .frame.enter button[name=decision] { background-color: #2980b9; } #timecard-input-modal .frame.enter button[name=decision] { background: -moz-linear-gradient(top,#4ba2db 0%,#2980b9); background: -webkit-gradient(linear, left top, left bottom, from(#4ba2db), to(#2980b9)); } #timecard-input-modal .frame.exit .date, #timecard-input-modal .frame.exit .time { color: #e95e4f; } #timecard-input-modal .frame.exit .type { background-color: #e95e4f; } #timecard-input-modal .frame.exit .comment { border-color: #e95e4f; background-color: #fbe4e2; } #timecard-input-modal .frame.exit .comment th { border-color: #e95e4f; color: #e95e4f; } #timecard-input-modal .frame.exit button[name=decision] { background-color: #e95e4f; } #timecard-input-modal .frame.exit button[name=decision] { background: -moz-linear-gradient(top,#fb7f6f 0%,#e95e4f); background: -webkit-gradient(linear, left top, left bottom, from(#fb7f6f), to(#e95e4f)); } /* ---------- 日報詳細モーダル ----------*/ #timecard-detail-modal .frame { max-height: 450px; } #timecard-detail-modal .date-header { margin: 20px 0; background-color: #ffffff; } #timecard-detail-modal .date-header .date { width: 70%; margin: 10px auto; padding: 0; line-height: 25px; font-size: 16px; text-align: center; color: #ffffff; background-color: #34495e; } #timecard-detail-modal .date-header .date { border-radius: 5px; } #timecard-detail-modal .corporatename { margin: 0px 20px 20px; font-size: 18px; line-height: 20px; } #timecard-detail-modal .card { margin: 0 20px; border: none; border-top: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; } #timecard-detail-modal .card .typetime { margin: 10px 0; padding: 0 10px; } #timecard-detail-modal .card .typetime .type { display: inline-block; width: 70px; margin: 0 30px 0 0; padding: 0 10px; font-size: 16px; line-height: 30px; color: #ffffff; text-align: center; white-space: nowrap; } #timecard-detail-modal .card .typetime .time { display: inline-block; margin: 0; padding: 0 10px; font-size: 18px; line-height: 30px; color: #ffffff; white-space: nowrap; } #timecard-detail-modal .card .comment { min-height: 120px; margin: 0; padding: 0 10px; font-size: 18px; line-height: 20px; white-space: normal; word-break: break-all; overflow: hidden; } #timecard-detail-modal .enter .typetime .type { background-color: #2980b9; } #timecard-detail-modal .enter .typetime .time { color: #2980b9; } #timecard-detail-modal .exit { border-top: none; } #timecard-detail-modal .exit .typetime .type { background-color: #e95e4f; } #timecard-detail-modal .exit .typetime .time { color: #e95e4f; } /* ---------- 掲示板詳細モーダル ----------*/ #notices-detail-modal .data-table { top: 40px; padding: 20px; } #notices-detail-modal .data-table .content { display: block; border-bottom: 1px solid #dddddd; padding: 20px 0; color: #000000; } #notices-detail-modal .data-table .content:last-child { border: none; } #notices-detail-modal .data-table .content label { display: block; margin: 0; text-align: left; font-size: 12px; line-height: 15px; } #notices-detail-modal .data-table .content span { display: block; margin: 0; text-align: left; font-size: 12px; line-height: 15px; } /* ---------- お知らせ詳細モーダル ----------*/ #informations-detail-modal .data-table { top: 40px; padding: 20px; } #informations-detail-modal .data-table .content { display: block; border-bottom: 1px solid #dddddd; padding: 20px 0; color: #000000; } #informations-detail-modal .data-table .content:last-child { border: none; } #informations-detail-modal .data-table .content label { display: block; margin: 0; text-align: left; font-size: 12px; line-height: 15px; } #informations-detail-modal .data-table .content span { display: block; margin: 0; text-align: left; font-size: 12px; line-height: 15px; } /* ---------- 既読ユーザ一覧モーダル ----------*/ #readed-users-modal .data-table { top: 40px; padding: 20px; } #readed-users-modal .data-table .content { display: block; border-bottom: 1px solid #dddddd; padding: 20px 0; color: #000000; } #readed-users-modal .data-table .content:last-child { border: none; } #readed-users-modal .data-table .content span { display: block; margin: 0; text-align: left; font-size: 12px; line-height: 15px; } /* ---------- 建築進捗履歴ファイルアップロードモーダル ----------*/ #wbsfile-upload-modal .frame { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; margin: auto; background-color: #ffffff; overflow: auto; border-radius: 5px; } #wbsfile-upload-modal .frame .dialog-header { position: absolute; top: 0px; width: 100%; height: 46px; padding: 10px; border-bottom: 1px solid #e5e5e5; } #wbsfile-upload-modal .frame .dialog-header h4 { font-size: 18px; } #wbsfile-upload-modal .frame .data-table { position: absolute; top: 46px; bottom: 55px; width: 100%; padding: 5px 10px; overflow: auto; } #wbsfile-upload-modal .frame .data-table table { margin: 0; } #wbsfile-upload-modal .frame table thead td { padding: 0; } #wbsfile-upload-modal .frame table thead td div { position: relative; margin: 0 auto; border: none; padding: 0; } #wbsfile-upload-modal .frame table thead td div img { position: absolute; top: 0; right: 0; bottom: 0; left : 0; margin: auto; border: none; padding: 0; cursor: pointer; } #wbsfile-upload-modal .frame table tbody tr th { width: 1%; padding: 10px 5px; white-space: nowrap; vertical-align: top; font-size: 14px; } #wbsfile-upload-modal .frame table tbody tr td { padding: 0; font-size: 14px; vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr td span { display: block; padding: 4px; line-height: 22px; } #wbsfile-upload-modal .frame table tbody tr.subject td span { padding: 1px 0; } #wbsfile-upload-modal .frame table tbody tr.subject td input[type=text] { display: block; width: 100%; line-height: 20px; border: 1px solid #cccccc; background: none; background-color: #ffffff; border-radius: 4px; padding: 6px 12px; font-size: 16px; text-align: left; } #wbsfile-upload-modal .frame table tbody tr.authority td select { width: 100%; border: 1px solid #cccccc; color: #333333; background: none; background-color: #ffffff; border-radius: 4px; font-size: 16px; } #wbsfile-upload-modal .frame table tbody tr.checkitem td select { width: 100%; border: 1px solid #cccccc; color: #333333; background: none; background-color: #ffffff; border-radius: 4px; font-size: 16px; } #wbsfile-upload-modal .frame table tbody tr.visible td div { display: inline; margin: 0 20px 0 0; vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.visible td div input { vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.visible td div label { display: inline; margin: 0 0 0 5px; vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.nonconformity td div { display: inline; margin: 0 20px 0 0; vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.nonconformity td div input { vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.nonconformity td div label { display: inline; margin: 0 0 0 5px; vertical-align: middle; } #wbsfile-upload-modal .frame table tbody tr.improvements th { letter-spacing: -1px; } #wbsfile-upload-modal .frame table tbody tr.improvements td button { display: block; width: 140px; margin: 5px 0; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; font-weight: 400; text-align: center; white-space: nowrap; background: none; cursor: pointer; } #wbsfile-upload-modal .frame table tbody tr.improvements td button { user-select: none; border-radius: 4px; } #wbsfile-upload-modal .frame table tbody tr.improvements td button { color: #ffffff; background-color: #f0ad4e; border-color: #eea236; } #wbsfile-upload-modal .frame table tbody tr.improvements td button * { display: inline; margin: 0 3px; padding: 0; line-height: 24px; } #wbsfile-upload-modal .frame table tbody tr.improvements td input[type=file] { display: none; } #wbsfile-upload-modal .frame table tbody tr.improvements td div.imagebox { position: relative; display: inline-block; width: 64px; height: 64px; margin: 5px 5px 0 0; border: none; padding: 0; } #wbsfile-upload-modal .frame table tbody tr.improvements td div.imagebox img { position: absolute; display: block; top:0; right: 0; bottom: 0; left: 0; margin: auto; } #wbsfile-upload-modal .frame table tbody tr.comment th button { display: block; width: 60px; margin: 0 0 10px 0; padding: 3px; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } #wbsfile-upload-modal .frame table tbody tr.comment th button[name=presetphrase] { color: #ffffff; background-color: #f0ad4e; border-color: #eea236; } #wbsfile-upload-modal .frame table tbody tr.comment th button[name=clearcomment] { color: #333333; background-color: #ffffff; border-color: #cccccc; } #wbsfile-upload-modal .frame table tbody tr.comment td textarea { width: 100%; height: 150px; border: 1px solid #cccccc; color: #333333; background: none; background-color: #ffffff; border-radius: 4px; text-align: left; font-size: 16px; resize: none; } #wbsfile-upload-modal .frame .data-table hr { margin: 30px 20px 0; height: 1px; border: none; background-color: #aaaaaa; } #wbsfile-upload-modal .frame .button-area { border: none; border-top: 1px solid #dddddd; background: none; } #wbsfile-upload-modal .frame .button-area button { display: inline-block; width: 35%; margin: 0 15px; } #wbsfile-upload-modal .frame .button-area button.cancel { background-color: #e2b13c; } #wbsfile-upload-modal .frame .button-area button.cancel { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); } #wbsfile-upload-modal .frame .button-area button.submit { background-color: #043f6e; } #wbsfile-upload-modal .frame .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } /* ---------- 受発注ファイルアップロードモーダル ----------*/ #cbpfile-upload-modal .frame .data-table { top: 0; } #cbpfile-upload-modal .frame .data-table table { margin: 0 0 20px 0; } #cbpfile-upload-modal .frame table tbody tr th { width: 1%; padding: 0 20px; font-size: 14px; line-height: 30px; text-align: left; vertical-align: top; white-space: nowrap; } #cbpfile-upload-modal .frame table tbody tr td { position: relative; padding: 0 20px 0 0; font-size: 14px; vertical-align: top; } #cbpfile-upload-modal .frame table tbody tr.image td { position: relative; width: 100%; margin: 0; border: none; padding: 20px; } #cbpfile-upload-modal .frame table tbody tr.image td::before { content:""; display: block; padding-top: 75%; } #cbpfile-upload-modal .frame table tbody tr.image td div { position: relative; } #cbpfile-upload-modal .frame table tbody tr.image td img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: none; max-width: calc(100% - 20px); max-height: calc(100% - 20px); } #cbpfile-upload-modal .frame table tbody tr td span { display: block; padding: 4px; line-height: 22px; } #cbpfile-upload-modal .frame table tbody tr.label td p { width: 50px; height: 20px; margin: 0 0 0 110px; padding: 0 5px; text-align: center; color: #ffffff; height: 20px; line-height: 20px; font-size: 14px; border-radius: 3px; background-color: #aaaaaa; } #cbpfile-upload-modal .frame table tbody tr.label td p.create { background-color: #4444bb; } #cbpfile-upload-modal .frame table tbody tr.label td p.update { background-color: #bb4444; } #cbpfile-upload-modal .frame table tbody tr.subject td span { padding: 1px 0; } #cbpfile-upload-modal .frame table tbody tr.subject td input[type=text] { display: block; width: 100%; line-height: 20px; border: 1px solid #aaaaaa; background-color: #fffff8; } #cbpfile-upload-modal .frame table tbody tr.folder td span { display: inline; line-height: 30px; } #cbpfile-upload-modal .frame table tbody tr.folder td span.to-photo-folder { color: #e95e4f; } #cbpfile-upload-modal .frame table tbody tr.folder td button { position: absolute; top: 0; right: 20px; border: none; padding: 0 10px; line-height: 30px; color: #ffffff; background-color: #2980b9; } #cbpfile-upload-modal .frame table tbody tr.folder td button { border-radius: 5px; } #cbpfile-upload-modal .frame table tbody tr.comment th button { display: block; width: 60px; margin: 0 0 10px 0; padding: 3px; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; font-size: 16px; white-space: nowrap; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } #cbpfile-upload-modal .frame table tbody tr.comment th button[name=presetphrase] { color: #ffffff; background-color: #f0ad4e; border-color: #eea236; } #cbpfile-upload-modal .frame table tbody tr.comment th button[name=clearcomment] { color: #333333; background-color: #ffffff; border-color: #cccccc; letter-spacing: -1px; } #cbpfile-upload-modal .frame table tbody tr.comment td textarea { width: 100%; height: 150px; border: 1px solid #cccccc; color: #333333; background: none; background-color: #ffffff; border-radius: 4px; text-align: left; font-size: 16px; resize: none; } #cbpfile-upload-modal .frame .button-area { border: none; border-top: 1px solid #dddddd; background: none; } #cbpfile-upload-modal .frame .button-area button { display: inline-block; width: 35%; margin: 0 15px; } #cbpfile-upload-modal .frame .button-area button.cancel { background-color: #e2b13c; } #cbpfile-upload-modal .frame .button-area button.cancel { background: -moz-linear-gradient(top,#fbd478 0%,#e2b13c); background: -webkit-gradient(linear, left top, left bottom, from(#fbd478), to(#e2b13c)); } #cbpfile-upload-modal .frame .button-area button.submit { background-color: #043f6e; } #cbpfile-upload-modal .frame .button-area button.submit { background: -moz-linear-gradient(top,#445a6e 0%,#043f6e); background: -webkit-gradient(linear, left top, left bottom, from(#445a6e), to(#043f6e)); } #ordercorporate-detail-modal .frame .data-table { top: 40px; bottom: 60px; padding: 2em; } #ordercorporate-detail-modal .frame .data-table .content { margin: 0 0 2em; } #ordercorporate-detail-modal .frame .data-table .content:last-child { margin: 0; } #ordercorporate-detail-modal .frame .data-table .content label { display: block; margin: 0; color: #aaaaaa; } #ordercorporate-detail-modal .frame .data-table .content span { display: block; margin: 0; padding: 0 0 0 1em; } /* ---------- 日付選択モーダル ----------*/ #date-select-modal .modal-layer .frame { top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 300px; height: 530px; } #date-select-modal .calendar { padding: 20px; background-color: #ffffff; } #date-select-modal .calendar .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } #date-select-modal .calendar .calendar-header .prev-month, #date-select-modal .calendar .calendar-header .next-month { background: none; border: 1px solid #ddd; border-radius: 4px; padding: 8px 12px; cursor: pointer; color: #666; transition: all 0.2s ease; } #date-select-modal .calendar .calendar-header .prev-month:hover, #date-select-modal .calendar .calendar-header .next-month:hover { background-color: #f5f5f5; border-color: #999; color: #333; } #date-select-modal .calendar .calendar-header .current-month { font-size: 18px; font-weight: bold; color: #333; text-align: center; flex: 1; } #date-select-modal .calendar .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 10px; } #date-select-modal .calendar .calendar-weekdays .weekday { padding: 10px 5px; text-align: center; font-weight: bold; color: #666; background-color: #f8f9fa; border: 1px solid #e9ecef; font-size: 14px; } #date-select-modal .calendar .calendar-weekdays .weekday:first-child { color: #dc3545; } #date-select-modal .calendar .calendar-weekdays .weekday:last-child { color: #007bff; } #date-select-modal .calendar .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } #date-select-modal .calendar .calendar-days .calendar-day { padding: 12px 5px; text-align: center; cursor: pointer; border: 1px solid #e9ecef; background-color: #ffffff; transition: all 0.2s ease; font-size: 14px; min-height: 40px; display: flex; align-items: center; justify-content: center; } #date-select-modal .calendar .calendar-days .calendar-day:hover { background-color: #f8f9fa; border-color: #007bff; } #date-select-modal .calendar .calendar-days .calendar-day.other-month { color: #ccc; background-color: #f8f9fa; cursor: default; } #date-select-modal .calendar .calendar-days .calendar-day.other-month:hover { background-color: #f8f9fa; border-color: #e9ecef; } #date-select-modal .calendar .calendar-days .calendar-day.today { background-color: #e3f2fd; border-color: #2196f3; color: #1976d2; font-weight: bold; } #date-select-modal .calendar .calendar-days .calendar-day.selected { background-color: #007bff; border-color: #007bff; color: #ffffff; font-weight: bold; } #date-select-modal .calendar .calendar-days .calendar-day.selected:hover { background-color: #0056b3; border-color: #0056b3; } #date-select-modal .calendar .calendar-days .calendar-day:nth-child(7n+1) { color: #dc3545; } #date-select-modal .calendar .calendar-days .calendar-day:nth-child(7n) { color: #007bff; } #date-select-modal .calendar .calendar-days .calendar-day.other-month:nth-child(7n+1), #date-select-modal .calendar .calendar-days .calendar-day.other-month:nth-child(7n) { color: #ccc; } #date-select-modal .calendar .calendar-days .calendar-day.selected:nth-child(7n+1), #date-select-modal .calendar .calendar-days .calendar-day.selected:nth-child(7n) { color: #ffffff; } #date-select-modal .button-area { padding: 5px; text-align: center; border-top: 1px solid #e5e5e5; background-color: #f8f9fa; } #date-select-modal .button-area button { background-color: #043f6e; color: #ffffff; border: none; padding: 5px; font-size: 14px; cursor: pointer; outline: none; } @media (max-width: 768px) { #date-select-modal .calendar { padding: 15px; } #date-select-modal .calendar .calendar-header .current-month { font-size: 16px; } #date-select-modal .calendar .calendar-days .calendar-day { padding: 8px 3px; font-size: 12px; min-height: 35px; } #date-select-modal .calendar .calendar-weekdays .weekday { padding: 8px 3px; font-size: 12px; } }