/* * This combined file was created by the DataTables downloader builder: * https://datatables.net/download * * To rebuild or modify this file with the latest versions of the included * software please visit: * https://datatables.net/download/#bs5/jszip-3.10.1/dt-2.2.2/b-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/r-3.0.4 * * Included libraries: * JSZip 3.10.1, DataTables 2.2.2, Buttons 3.2.2, HTML5 export 3.2.2, Print view 3.2.2, ColReorder 2.0.4, Responsive 3.0.4 */ :root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 9, 10, 11;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{display:inline-block;box-sizing:border-box;content:"";border-top:5px solid transparent;border-left:10px solid rgba(0, 0, 0, 0.5);border-bottom:5px solid transparent;border-right:0px solid transparent}table.dataTable tr.dt-hasChild td.dt-control:before{border-top:10px solid rgba(0, 0, 0, 0.5);border-left:5px solid transparent;border-bottom:0px solid transparent;border-right:5px solid transparent}table.dataTable tfoot:empty{display:none}html.dark table.dataTable td.dt-control:before,:root[data-bs-theme=dark] table.dataTable td.dt-control:before,:root[data-theme=dark] table.dataTable td.dt-control:before{border-left-color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before{border-top-color:rgba(255, 255, 255, 0.5);border-left-color:transparent}div.dt-scroll{width:100%}div.dt-scroll-body thead tr,div.dt-scroll-body tfoot tr{height:0}div.dt-scroll-body thead tr th,div.dt-scroll-body thead tr td,div.dt-scroll-body tfoot tr th,div.dt-scroll-body tfoot tr td{height:0 !important;padding-top:0px !important;padding-bottom:0px !important;border-top-width:0px !important;border-bottom-width:0px !important}div.dt-scroll-body thead tr th div.dt-scroll-sizing,div.dt-scroll-body thead tr td div.dt-scroll-sizing,div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,div.dt-scroll-body tfoot tr td div.dt-scroll-sizing{height:0 !important;overflow:hidden !important}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before{position:absolute;display:block;bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{position:absolute;display:block;top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>th.dt-ordering-asc,table.dataTable thead>tr>th.dt-ordering-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc,table.dataTable thead>tr>td.dt-ordering-asc,table.dataTable thead>tr>td.dt-ordering-desc{position:relative;padding-right:30px}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order{position:absolute;right:12px;top:0;bottom:0;width:12px}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{left:0;opacity:.125;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc{cursor:pointer}table.dataTable thead>tr>th.dt-orderable-asc:hover,table.dataTable thead>tr>th.dt-orderable-desc:hover,table.dataTable thead>tr>td.dt-orderable-asc:hover,table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(0, 0, 0, 0.05);outline-offset:-2px}table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled span.dt-column-order:after,table.dataTable thead>tr>th.sorting_asc_disabled span.dt-column-order:before,table.dataTable thead>tr>td.sorting_desc_disabled span.dt-column-order:after,table.dataTable thead>tr>td.sorting_asc_disabled span.dt-column-order:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dt-scroll-body>table.dataTable>thead>tr>th,div.dt-scroll-body>table.dataTable>thead>tr>td{overflow:hidden}:root.dark table.dataTable thead>tr>th.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>th.dt-orderable-desc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(255, 255, 255, 0.05)}div.dt-processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-22px;text-align:center;padding:2px;z-index:10}div.dt-processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dt-processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(13, 110, 253);background:rgb(var(--dt-row-selected));animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dt-processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dt-processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th,table.dataTable td{box-sizing:border-box}table.dataTable th.dt-type-numeric,table.dataTable th.dt-type-date,table.dataTable td.dt-type-numeric,table.dataTable td.dt-type-date{text-align:right}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable th.dt-empty,table.dataTable td.dt-empty{text-align:center;vertical-align:top}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}/*! Bootstrap 5 integration for DataTables * * ©2020 SpryMedia Ltd, all rights reserved. * License: MIT datatables.net/license/mit */table.table.dataTable{clear:both;margin-bottom:0;max-width:none;border-spacing:0}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:none}table.table.dataTable>:not(caption)>*>*{background-color:var(--bs-table-bg)}table.table.dataTable>tbody>tr{background-color:transparent}table.table.dataTable>tbody>tr.selected>*{box-shadow:inset 0 0 0 9999px rgb(13, 110, 253);box-shadow:inset 0 0 0 9999px rgb(var(--dt-row-selected));color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.table.dataTable>tbody>tr.selected a{color:rgb(9, 10, 11);color:rgb(var(--dt-row-selected-link))}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05)}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1).selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.95);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95)}table.table.dataTable.table-hover>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075)}table.table.dataTable.table-hover>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.975);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975)}div.dt-container div.dt-layout-start>*:not(:last-child){margin-right:1em}div.dt-container div.dt-layout-end>*:not(:first-child){margin-left:1em}div.dt-container div.dt-layout-full{width:100%}div.dt-container div.dt-layout-full>*:only-child{margin-left:auto;margin-right:auto}div.dt-container div.dt-layout-table>div{display:block !important}@media screen and (max-width: 767px){div.dt-container div.dt-layout-start>*:not(:last-child){margin-right:0}div.dt-container div.dt-layout-end>*:not(:first-child){margin-left:0}}div.dt-container div.dt-length label{font-weight:normal;text-align:left;white-space:nowrap}div.dt-container div.dt-length select{width:auto;display:inline-block;margin-right:.5em}div.dt-container div.dt-search{text-align:right}div.dt-container div.dt-search label{font-weight:normal;white-space:nowrap;text-align:left}div.dt-container div.dt-search input{margin-left:.5em;display:inline-block;width:auto}div.dt-container div.dt-paging{margin:0}div.dt-container div.dt-paging ul.pagination{margin:2px 0;flex-wrap:wrap}div.dt-container div.dt-row{position:relative}div.dt-scroll-head table.dataTable{margin-bottom:0 !important}div.dt-scroll-body{border-bottom-color:var(--bs-border-color);border-bottom-width:var(--bs-border-width);border-bottom-style:solid}div.dt-scroll-body>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dt-scroll-body>table>tbody>tr:first-child{border-top-width:0}div.dt-scroll-body>table>thead>tr{border-width:0 !important}div.dt-scroll-body>table>tbody>tr:last-child>*{border-bottom:none}div.dt-scroll-foot>.dt-scroll-footInner{box-sizing:content-box}div.dt-scroll-foot>.dt-scroll-footInner>table{margin-top:0 !important;border-top:none}div.dt-scroll-foot>.dt-scroll-footInner>table>tfoot>tr:first-child{border-top-width:0 !important}@media screen and (max-width: 767px){div.dt-container div.dt-length,div.dt-container div.dt-search,div.dt-container div.dt-info,div.dt-container div.dt-paging{text-align:center}div.dt-container .row{--bs-gutter-y: 0.5rem}div.dt-container div.dt-paging ul.pagination{justify-content:center !important}}table.dataTable.table-sm>thead>tr th.dt-orderable-asc,table.dataTable.table-sm>thead>tr th.dt-orderable-desc,table.dataTable.table-sm>thead>tr th.dt-ordering-asc,table.dataTable.table-sm>thead>tr th.dt-ordering-desc,table.dataTable.table-sm>thead>tr td.dt-orderable-asc,table.dataTable.table-sm>thead>tr td.dt-orderable-desc,table.dataTable.table-sm>thead>tr td.dt-ordering-asc,table.dataTable.table-sm>thead>tr td.dt-ordering-desc{padding-right:20px}table.dataTable.table-sm>thead>tr th.dt-orderable-asc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-orderable-desc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-ordering-asc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-ordering-desc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-orderable-asc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-orderable-desc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-ordering-asc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-ordering-desc span.dt-column-order{right:5px}div.dt-scroll-head table.table-bordered{border-bottom-width:0}div.table-responsive>div.dt-container>div.row{margin:0}div.table-responsive>div.dt-container>div.row>div[class^=col-]:first-child{padding-left:0}div.table-responsive>div.dt-container>div.row>div[class^=col-]:last-child{padding-right:0}:root[data-bs-theme=dark]{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255} @keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dataTables_wrapper{position:relative}div.dt-buttons{position:initial}div.dt-buttons .dt-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border-radius:.75em;box-shadow:3px 4px 10px 1px rgba(0, 0, 0, 0.8);text-align:center;z-index:2003;overflow:hidden}div.dt-button-info h2{padding:2rem 2rem 1rem 2rem;margin:0;font-weight:normal}div.dt-button-info>div{padding:1em 2em 2em 2em}div.dtb-popover-close{position:absolute;top:6px;right:6px;width:22px;height:22px;text-align:center;border-radius:3px;cursor:pointer;z-index:2003}button.dtb-hide-drop{display:none !important}div.dt-button-collection-title{text-align:center;padding:.3em .5em .5em;margin-left:.5em;margin-right:.5em;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div.dt-button-collection-title:empty{display:none}span.dt-button-spacer{display:inline-block;margin:.5em;white-space:nowrap}span.dt-button-spacer.bar{border-left:1px solid rgba(0, 0, 0, 0.3);vertical-align:middle;padding-left:.5em}span.dt-button-spacer.bar:empty{height:1em;width:1px;padding-left:0}div.dt-button-collection .dt-button-active{padding-right:3em}div.dt-button-collection .dt-button-active:after{position:absolute;top:50%;margin-top:-10px;right:1em;display:inline-block;content:"✓";color:inherit}div.dt-button-collection .dt-button-active.dt-button-split{padding-right:0}div.dt-button-collection .dt-button-active.dt-button-split:after{display:none}div.dt-button-collection .dt-button-active.dt-button-split>*:first-child{padding-right:3em}div.dt-button-collection .dt-button-active.dt-button-split>*:first-child:after{position:absolute;top:50%;margin-top:-10px;right:1em;display:inline-block;content:"✓";color:inherit}div.dt-button-collection .dt-button-active-a a{padding-right:3em}div.dt-button-collection .dt-button-active-a a:after{position:absolute;right:1em;display:inline-block;content:"✓";color:inherit}div.dt-button-collection span.dt-button-spacer{width:100%;font-size:.9em;text-align:center;margin:.5em 0}div.dt-button-collection span.dt-button-spacer:empty{height:0;width:100%}div.dt-button-collection span.dt-button-spacer.bar{border-left:none;border-bottom:1px solid rgba(0, 0, 0, 0.1);padding-left:0}@media print{table.dataTable tr>*{box-shadow:none !important}}div.dt-buttons div.btn-group{position:initial}div.dt-buttons span.dt-button-spacer.empty{margin:1px}div.dt-buttons span.dt-button-spacer.bar:empty{height:inherit}div.dt-buttons .btn.processing{color:rgba(0, 0, 0, 0.2)}div.dt-buttons .btn.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:" ";border:2px solid rgb(40, 40, 40);border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}div.dropdown-menu.dt-button-collection{margin-top:4px;width:200px}div.dropdown-menu.dt-button-collection .dt-button{position:relative}div.dropdown-menu.dt-button-collection .dt-button.dropdown-toggle::after{position:absolute;right:12px;top:14px}div.dropdown-menu.dt-button-collection div.dt-button-split{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:stretch}div.dropdown-menu.dt-button-collection div.dt-button-split a:first-child{min-width:auto;flex:1 0 50px;padding-right:0}div.dropdown-menu.dt-button-collection div.dt-button-split button:last-child{min-width:33px;flex:0;background:transparent;border:none;line-height:1rem;color:var(--bs-dropdown-link-color);padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);overflow:visible}div.dropdown-menu.dt-button-collection div.dt-button-split button:last-child:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}div.dropdown-menu.dt-button-collection.fixed{position:fixed;display:block;top:50%;left:50%;margin-left:-75px;border-radius:5px;background-color:white;padding:.5em}div.dropdown-menu.dt-button-collection.fixed.two-column{margin-left:-200px}div.dropdown-menu.dt-button-collection.fixed.three-column{margin-left:-225px}div.dropdown-menu.dt-button-collection.fixed.four-column{margin-left:-300px}div.dropdown-menu.dt-button-collection.fixed.columns{margin-left:-409px}@media screen and (max-width: 1024px){div.dropdown-menu.dt-button-collection.fixed.columns{margin-left:-308px}}@media screen and (max-width: 640px){div.dropdown-menu.dt-button-collection.fixed.columns{margin-left:-203px}}@media screen and (max-width: 460px){div.dropdown-menu.dt-button-collection.fixed.columns{margin-left:-100px}}div.dropdown-menu.dt-button-collection.fixed>:last-child{max-height:100vh;overflow:auto}div.dropdown-menu.dt-button-collection.two-column>:last-child,div.dropdown-menu.dt-button-collection.three-column>:last-child,div.dropdown-menu.dt-button-collection.four-column>:last-child{display:block !important;column-gap:8px}div.dropdown-menu.dt-button-collection.two-column>:last-child>*,div.dropdown-menu.dt-button-collection.three-column>:last-child>*,div.dropdown-menu.dt-button-collection.four-column>:last-child>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dropdown-menu.dt-button-collection.two-column{width:400px}div.dropdown-menu.dt-button-collection.two-column>:last-child{padding-bottom:1px;column-count:2}div.dropdown-menu.dt-button-collection.three-column{width:450px}div.dropdown-menu.dt-button-collection.three-column>:last-child{padding-bottom:1px;column-count:3}div.dropdown-menu.dt-button-collection.four-column{width:600px}div.dropdown-menu.dt-button-collection.four-column>:last-child{padding-bottom:1px;column-count:4}div.dropdown-menu.dt-button-collection .dt-button{border-radius:0}div.dropdown-menu.dt-button-collection.columns{width:auto}div.dropdown-menu.dt-button-collection.columns>:last-child{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;width:818px;padding-bottom:1px}div.dropdown-menu.dt-button-collection.columns>:last-child .dt-button{min-width:200px;flex:0 1;margin:0}div.dropdown-menu.dt-button-collection.columns.dtb-b3>:last-child,div.dropdown-menu.dt-button-collection.columns.dtb-b2>:last-child,div.dropdown-menu.dt-button-collection.columns.dtb-b1>:last-child{justify-content:space-between}div.dropdown-menu.dt-button-collection.columns.dtb-b3 .dt-button{flex:1 1 32%}div.dropdown-menu.dt-button-collection.columns.dtb-b2 .dt-button{flex:1 1 48%}div.dropdown-menu.dt-button-collection.columns.dtb-b1 .dt-button{flex:1 1 100%}@media screen and (max-width: 1024px){div.dropdown-menu.dt-button-collection.columns>:last-child{width:612px}}@media screen and (max-width: 640px){div.dropdown-menu.dt-button-collection.columns>:last-child{width:406px}div.dropdown-menu.dt-button-collection.columns.dtb-b3 .dt-button{flex:0 1 32%}}@media screen and (max-width: 460px){div.dropdown-menu.dt-button-collection.columns>:last-child{width:200px}}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999}@media screen and (max-width: 767px){div.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:.5em}div.dt-buttons a.btn{float:none}}div.dt-button-info{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color-translucent)}:root[data-bs-theme=dark] div.dropdown-menu.dt-button-collection.fixed{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color-translucent)} body.dtcr-dragging{overflow-x:hidden}table.dtcr-cloned.dataTable{position:absolute !important;background-color:rgba(255, 255, 255, 0.7);z-index:202;border-radius:4px}table.dataTable tbody tr td.dtcr-moving{background-color:rgba(127, 127, 127, 0.15)}table.dataTable tbody tr td.dtcr-moving-first{border-left:1px solid #0d6efd}table.dataTable tbody tr td.dtcr-moving-last{border-right:1px solid #0d6efd}html.dark table.dtcr-cloned.dataTable{background-color:rgba(33, 33, 33, 0.9)} table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{margin-right:.5em;display:inline-block;box-sizing:border-box;content:"";border-top:5px solid transparent;border-left:10px solid rgba(0, 0, 0, 0.5);border-bottom:5px solid transparent;border-right:0px solid transparent}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control.arrow-right::before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control.arrow-right::before{border-top:5px solid transparent;border-left:0px solid transparent;border-bottom:5px solid transparent;border-right:10px solid rgba(0, 0, 0, 0.5)}table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before{border-top:10px solid rgba(0, 0, 0, 0.5);border-left:5px solid transparent;border-bottom:0px solid transparent;border-right:5px solid transparent}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control{padding-left:.333em}table.dataTable.dtr-column>tbody>tr>td.dtr-control,table.dataTable.dtr-column>tbody>tr>th.dtr-control,table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{display:inline-block;box-sizing:border-box;content:"";border-top:5px solid transparent;border-left:10px solid rgba(0, 0, 0, 0.5);border-bottom:5px solid transparent;border-right:0px solid transparent}table.dataTable.dtr-column>tbody>tr>td.dtr-control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>th.dtr-control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>td.control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>th.control.arrow-right::before{border-top:5px solid transparent;border-left:0px solid transparent;border-bottom:5px solid transparent;border-right:10px solid rgba(0, 0, 0, 0.5)}table.dataTable.dtr-column>tbody>tr.dtr-expanded td.dtr-control:before,table.dataTable.dtr-column>tbody>tr.dtr-expanded th.dtr-control:before,table.dataTable.dtr-column>tbody>tr.dtr-expanded td.control:before,table.dataTable.dtr-column>tbody>tr.dtr-expanded th.control:before{border-top:10px solid rgba(0, 0, 0, 0.5);border-left:5px solid transparent;border-bottom:0px solid transparent;border-right:5px solid transparent}table.dataTable>tbody>tr.child{padding:.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul.dtr-details{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:.5em 0}table.dataTable>tbody>tr.child ul.dtr-details>li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul.dtr-details>li:last-child{padding-bottom:0;border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:fit-content;max-height:75%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:.5em;box-shadow:0 12px 30px rgba(0, 0, 0, 0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:2.5em}div.dtr-modal div.dtr-modal-content h2{margin-top:0}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0, 0, 0, 0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}html.dark table.dataTable>tbody>tr>td.dtr-control:before,html[data-bs-theme=dark] table.dataTable>tbody>tr>td.dtr-control:before{border-left-color:rgba(255, 255, 255, 0.5) !important}html.dark table.dataTable>tbody>tr>td.dtr-control.arrow-right::before,html[data-bs-theme=dark] table.dataTable>tbody>tr>td.dtr-control.arrow-right::before{border-right-color:rgba(255, 255, 255, 0.5) !important}html.dark table.dataTable>tbody>tr.dtr-expanded>td.dtr-control:before,html.dark table.dataTable>tbody>tr.dtr-expanded>th.dtr-control:before,html[data-bs-theme=dark] table.dataTable>tbody>tr.dtr-expanded>td.dtr-control:before,html[data-bs-theme=dark] table.dataTable>tbody>tr.dtr-expanded>th.dtr-control:before{border-top-color:rgba(255, 255, 255, 0.5) !important;border-left-color:transparent !important;border-right-color:transparent !important}html.dark table.dataTable>tbody>tr.child ul.dtr-details>li,html[data-bs-theme=dark] table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom-color:rgb(64, 67, 70)}html.dark div.dtr-modal div.dtr-modal-display,html[data-bs-theme=dark] div.dtr-modal div.dtr-modal-display{background-color:rgb(33, 37, 41);border:1px solid rgba(255, 255, 255, 0.15)}div.dtr-bs-modal table.table tr:first-child td{border-top:none}table.dataTable.table-bordered th.dtr-control.dtr-hidden+*,table.dataTable.table-bordered td.dtr-control.dtr-hidden+*{border-left-width:1px} /*! * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker) * * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) */ .datepicker { border-radius: 4px; direction: ltr; } .datepicker-inline { width: 220px; } .datepicker-rtl { direction: rtl; } .datepicker-rtl.dropdown-menu { left: auto; } .datepicker-rtl table tr td span { float: right; } .datepicker-dropdown { top: 0; left: 0; padding: 4px; } .datepicker-dropdown:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0, 0, 0, 0.15); border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; } .datepicker-dropdown:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-top: 0; position: absolute; } .datepicker-dropdown.datepicker-orient-left:before { left: 6px; } .datepicker-dropdown.datepicker-orient-left:after { left: 7px; } .datepicker-dropdown.datepicker-orient-right:before { right: 6px; } .datepicker-dropdown.datepicker-orient-right:after { right: 7px; } .datepicker-dropdown.datepicker-orient-bottom:before { top: -7px; } .datepicker-dropdown.datepicker-orient-bottom:after { top: -6px; } .datepicker-dropdown.datepicker-orient-top:before { bottom: -7px; border-bottom: 0; border-top: 7px solid rgba(0, 0, 0, 0.15); } .datepicker-dropdown.datepicker-orient-top:after { bottom: -6px; border-bottom: 0; border-top: 6px solid #fff; } .datepicker table { margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .datepicker table tr td, .datepicker table tr th { text-align: center; width: 30px; height: 30px; border-radius: 4px; border: none; } .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { background-color: transparent; } .datepicker table tr td.old, .datepicker table tr td.new { color: #777777; } .datepicker table tr td.day:hover, .datepicker table tr td.focused { background: #eeeeee; cursor: pointer; } .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { background: none; color: #777777; cursor: default; } .datepicker table tr td.highlighted { color: #000; background-color: #d9edf7; border-color: #85c5e5; border-radius: 0; } .datepicker table tr td.highlighted:focus, .datepicker table tr td.highlighted.focus { color: #000; background-color: #afd9ee; border-color: #298fc2; } .datepicker table tr td.highlighted:hover { color: #000; background-color: #afd9ee; border-color: #52addb; } .datepicker table tr td.highlighted:active, .datepicker table tr td.highlighted.active { color: #000; background-color: #afd9ee; border-color: #52addb; } .datepicker table tr td.highlighted:active:hover, .datepicker table tr td.highlighted.active:hover, .datepicker table tr td.highlighted:active:focus, .datepicker table tr td.highlighted.active:focus, .datepicker table tr td.highlighted:active.focus, .datepicker table tr td.highlighted.active.focus { color: #000; background-color: #91cbe8; border-color: #298fc2; } .datepicker table tr td.highlighted.disabled:hover, .datepicker table tr td.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.highlighted:hover, .datepicker table tr td.highlighted.disabled:focus, .datepicker table tr td.highlighted[disabled]:focus, fieldset[disabled] .datepicker table tr td.highlighted:focus, .datepicker table tr td.highlighted.disabled.focus, .datepicker table tr td.highlighted[disabled].focus, fieldset[disabled] .datepicker table tr td.highlighted.focus { background-color: #d9edf7; border-color: #85c5e5; } .datepicker table tr td.highlighted.focused { background: #afd9ee; } .datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted.disabled:active { background: #d9edf7; color: #777777; } .datepicker table tr td.today { color: #000; background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today:focus, .datepicker table tr td.today.focus { color: #000; background-color: #ffc966; border-color: #b37400; } .datepicker table tr td.today:hover { color: #000; background-color: #ffc966; border-color: #f59e00; } .datepicker table tr td.today:active, .datepicker table tr td.today.active { color: #000; background-color: #ffc966; border-color: #f59e00; } .datepicker table tr td.today:active:hover, .datepicker table tr td.today.active:hover, .datepicker table tr td.today:active:focus, .datepicker table tr td.today.active:focus, .datepicker table tr td.today:active.focus, .datepicker table tr td.today.active.focus { color: #000; background-color: #ffbc42; border-color: #b37400; } .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today[disabled]:hover, fieldset[disabled] .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today[disabled]:focus, fieldset[disabled] .datepicker table tr td.today:focus, .datepicker table tr td.today.disabled.focus, .datepicker table tr td.today[disabled].focus, fieldset[disabled] .datepicker table tr td.today.focus { background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today.focused { background: #ffc966; } .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active { background: #ffdb99; color: #777777; } .datepicker table tr td.range { color: #000; background-color: #eeeeee; border-color: #bbbbbb; border-radius: 0; } .datepicker table tr td.range:focus, .datepicker table tr td.range.focus { color: #000; background-color: #d5d5d5; border-color: #7c7c7c; } .datepicker table tr td.range:hover { color: #000; background-color: #d5d5d5; border-color: #9d9d9d; } .datepicker table tr td.range:active, .datepicker table tr td.range.active { color: #000; background-color: #d5d5d5; border-color: #9d9d9d; } .datepicker table tr td.range:active:hover, .datepicker table tr td.range.active:hover, .datepicker table tr td.range:active:focus, .datepicker table tr td.range.active:focus, .datepicker table tr td.range:active.focus, .datepicker table tr td.range.active.focus { color: #000; background-color: #c3c3c3; border-color: #7c7c7c; } .datepicker table tr td.range.disabled:hover, .datepicker table tr td.range[disabled]:hover, fieldset[disabled] .datepicker table tr td.range:hover, .datepicker table tr td.range.disabled:focus, .datepicker table tr td.range[disabled]:focus, fieldset[disabled] .datepicker table tr td.range:focus, .datepicker table tr td.range.disabled.focus, .datepicker table tr td.range[disabled].focus, fieldset[disabled] .datepicker table tr td.range.focus { background-color: #eeeeee; border-color: #bbbbbb; } .datepicker table tr td.range.focused { background: #d5d5d5; } .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:active { background: #eeeeee; color: #777777; } .datepicker table tr td.range.highlighted { color: #000; background-color: #e4eef3; border-color: #9dc1d3; } .datepicker table tr td.range.highlighted:focus, .datepicker table tr td.range.highlighted.focus { color: #000; background-color: #c1d7e3; border-color: #4b88a6; } .datepicker table tr td.range.highlighted:hover { color: #000; background-color: #c1d7e3; border-color: #73a6c0; } .datepicker table tr td.range.highlighted:active, .datepicker table tr td.range.highlighted.active { color: #000; background-color: #c1d7e3; border-color: #73a6c0; } .datepicker table tr td.range.highlighted:active:hover, .datepicker table tr td.range.highlighted.active:hover, .datepicker table tr td.range.highlighted:active:focus, .datepicker table tr td.range.highlighted.active:focus, .datepicker table tr td.range.highlighted:active.focus, .datepicker table tr td.range.highlighted.active.focus { color: #000; background-color: #a8c8d8; border-color: #4b88a6; } .datepicker table tr td.range.highlighted.disabled:hover, .datepicker table tr td.range.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.highlighted:hover, .datepicker table tr td.range.highlighted.disabled:focus, .datepicker table tr td.range.highlighted[disabled]:focus, fieldset[disabled] .datepicker table tr td.range.highlighted:focus, .datepicker table tr td.range.highlighted.disabled.focus, .datepicker table tr td.range.highlighted[disabled].focus, fieldset[disabled] .datepicker table tr td.range.highlighted.focus { background-color: #e4eef3; border-color: #9dc1d3; } .datepicker table tr td.range.highlighted.focused { background: #c1d7e3; } .datepicker table tr td.range.highlighted.disabled, .datepicker table tr td.range.highlighted.disabled:active { background: #e4eef3; color: #777777; } .datepicker table tr td.range.today { color: #000; background-color: #f7ca77; border-color: #f1a417; } .datepicker table tr td.range.today:focus, .datepicker table tr td.range.today.focus { color: #000; background-color: #f4b747; border-color: #815608; } .datepicker table tr td.range.today:hover { color: #000; background-color: #f4b747; border-color: #bf800c; } .datepicker table tr td.range.today:active, .datepicker table tr td.range.today.active { color: #000; background-color: #f4b747; border-color: #bf800c; } .datepicker table tr td.range.today:active:hover, .datepicker table tr td.range.today.active:hover, .datepicker table tr td.range.today:active:focus, .datepicker table tr td.range.today.active:focus, .datepicker table tr td.range.today:active.focus, .datepicker table tr td.range.today.active.focus { color: #000; background-color: #f2aa25; border-color: #815608; } .datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.today:hover, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today[disabled]:focus, fieldset[disabled] .datepicker table tr td.range.today:focus, .datepicker table tr td.range.today.disabled.focus, .datepicker table tr td.range.today[disabled].focus, fieldset[disabled] .datepicker table tr td.range.today.focus { background-color: #f7ca77; border-color: #f1a417; } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:active { background: #f7ca77; color: #777777; } .datepicker table tr td.selected, .datepicker table tr td.selected.highlighted { color: #fff; background-color: #777777; border-color: #555555; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.selected:focus, .datepicker table tr td.selected.highlighted:focus, .datepicker table tr td.selected.focus, .datepicker table tr td.selected.highlighted.focus { color: #fff; background-color: #5e5e5e; border-color: #161616; } .datepicker table tr td.selected:hover, .datepicker table tr td.selected.highlighted:hover { color: #fff; background-color: #5e5e5e; border-color: #373737; } .datepicker table tr td.selected:active, .datepicker table tr td.selected.highlighted:active, .datepicker table tr td.selected.active, .datepicker table tr td.selected.highlighted.active { color: #fff; background-color: #5e5e5e; border-color: #373737; } .datepicker table tr td.selected:active:hover, .datepicker table tr td.selected.highlighted:active:hover, .datepicker table tr td.selected.active:hover, .datepicker table tr td.selected.highlighted.active:hover, .datepicker table tr td.selected:active:focus, .datepicker table tr td.selected.highlighted:active:focus, .datepicker table tr td.selected.active:focus, .datepicker table tr td.selected.highlighted.active:focus, .datepicker table tr td.selected:active.focus, .datepicker table tr td.selected.highlighted:active.focus, .datepicker table tr td.selected.active.focus, .datepicker table tr td.selected.highlighted.active.focus { color: #fff; background-color: #4c4c4c; border-color: #161616; } .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.highlighted.disabled:hover, .datepicker table tr td.selected[disabled]:hover, .datepicker table tr td.selected.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.selected:hover, fieldset[disabled] .datepicker table tr td.selected.highlighted:hover, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected.highlighted.disabled:focus, .datepicker table tr td.selected[disabled]:focus, .datepicker table tr td.selected.highlighted[disabled]:focus, fieldset[disabled] .datepicker table tr td.selected:focus, fieldset[disabled] .datepicker table tr td.selected.highlighted:focus, .datepicker table tr td.selected.disabled.focus, .datepicker table tr td.selected.highlighted.disabled.focus, .datepicker table tr td.selected[disabled].focus, .datepicker table tr td.selected.highlighted[disabled].focus, fieldset[disabled] .datepicker table tr td.selected.focus, fieldset[disabled] .datepicker table tr td.selected.highlighted.focus { background-color: #777777; border-color: #555555; } .datepicker table tr td.active, .datepicker table tr td.active.highlighted { color: #fff; background-color: #337ab7; border-color: #2e6da4; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.active:focus, .datepicker table tr td.active.highlighted:focus, .datepicker table tr td.active.focus, .datepicker table tr td.active.highlighted.focus { color: #fff; background-color: #286090; border-color: #122b40; } .datepicker table tr td.active:hover, .datepicker table tr td.active.highlighted:hover { color: #fff; background-color: #286090; border-color: #204d74; } .datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active { color: #fff; background-color: #286090; border-color: #204d74; } .datepicker table tr td.active:active:hover, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active:active:focus, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active:active.focus, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.active.focus, .datepicker table tr td.active.highlighted.active.focus { color: #fff; background-color: #204d74; border-color: #122b40; } .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.highlighted.disabled:hover, .datepicker table tr td.active[disabled]:hover, .datepicker table tr td.active.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.active:hover, fieldset[disabled] .datepicker table tr td.active.highlighted:hover, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.highlighted.disabled:focus, .datepicker table tr td.active[disabled]:focus, .datepicker table tr td.active.highlighted[disabled]:focus, fieldset[disabled] .datepicker table tr td.active:focus, fieldset[disabled] .datepicker table tr td.active.highlighted:focus, .datepicker table tr td.active.disabled.focus, .datepicker table tr td.active.highlighted.disabled.focus, .datepicker table tr td.active[disabled].focus, .datepicker table tr td.active.highlighted[disabled].focus, fieldset[disabled] .datepicker table tr td.active.focus, fieldset[disabled] .datepicker table tr td.active.highlighted.focus { background-color: #337ab7; border-color: #2e6da4; } .datepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; margin: 1%; cursor: pointer; border-radius: 4px; } .datepicker table tr td span:hover, .datepicker table tr td span.focused { background: #eeeeee; } .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { background: none; color: #777777; cursor: default; } .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover { color: #fff; background-color: #337ab7; border-color: #2e6da4; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td span.active:focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.focus, .datepicker table tr td span.active:hover.focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:hover.focus { color: #fff; background-color: #286090; border-color: #122b40; } .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover { color: #fff; background-color: #286090; border-color: #204d74; } .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active { color: #fff; background-color: #286090; border-color: #204d74; } .datepicker table tr td span.active:active:hover, .datepicker table tr td span.active:hover:active:hover, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active:hover.active:hover, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled:hover.active:hover, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active:hover.active:focus, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled:hover.active:focus, .datepicker table tr td span.active:active.focus, .datepicker table tr td span.active:hover:active.focus, .datepicker table tr td span.active.disabled:active.focus, .datepicker table tr td span.active.disabled:hover:active.focus, .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active:hover.active.focus, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled:hover.active.focus { color: #fff; background-color: #204d74; border-color: #122b40; } .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover.disabled:hover, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active.disabled:hover.disabled:hover, .datepicker table tr td span.active[disabled]:hover, .datepicker table tr td span.active:hover[disabled]:hover, .datepicker table tr td span.active.disabled[disabled]:hover, .datepicker table tr td span.active.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td span.active:hover, fieldset[disabled] .datepicker table tr td span.active:hover:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active:hover.disabled:focus, .datepicker table tr td span.active.disabled.disabled:focus, .datepicker table tr td span.active.disabled:hover.disabled:focus, .datepicker table tr td span.active[disabled]:focus, .datepicker table tr td span.active:hover[disabled]:focus, .datepicker table tr td span.active.disabled[disabled]:focus, .datepicker table tr td span.active.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td span.active:focus, fieldset[disabled] .datepicker table tr td span.active:hover:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active:hover.disabled.focus, .datepicker table tr td span.active.disabled.disabled.focus, .datepicker table tr td span.active.disabled:hover.disabled.focus, .datepicker table tr td span.active[disabled].focus, .datepicker table tr td span.active:hover[disabled].focus, .datepicker table tr td span.active.disabled[disabled].focus, .datepicker table tr td span.active.disabled:hover[disabled].focus, fieldset[disabled] .datepicker table tr td span.active.focus, fieldset[disabled] .datepicker table tr td span.active:hover.focus, fieldset[disabled] .datepicker table tr td span.active.disabled.focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus { background-color: #337ab7; border-color: #2e6da4; } .datepicker table tr td span.old, .datepicker table tr td span.new { color: #777777; } .datepicker .datepicker-switch { width: 145px; } .datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker tfoot tr th { cursor: pointer; } .datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker tfoot tr th:hover { background: #eeeeee; } .datepicker .prev.disabled, .datepicker .next.disabled { visibility: hidden; } .datepicker .cw { font-size: 10px; width: 12px; padding: 0 2px 0 5px; vertical-align: middle; } .input-group.date .input-group-addon { cursor: pointer; } .input-daterange { width: 100%; } .input-daterange input { text-align: center; } .input-daterange input:first-child { border-radius: 3px 0 0 3px; } .input-daterange input:last-child { border-radius: 0 3px 3px 0; } .input-daterange .input-group-addon { width: auto; min-width: 16px; padding: 4px 5px; line-height: 1.42857143; border-width: 1px 0; margin-left: -5px; margin-right: -5px; }/*! * Timepicker Component for Twitter Bootstrap * * Copyright 2013 Joris de Wit * * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */.bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .input-group-addon{cursor:pointer}.bootstrap-timepicker .input-group-addon i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:4px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:42px;margin:0;text-align:center;padding:4px 6px}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}}@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%,70%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,.3);background:#fff;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom,#eee,#ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-ms-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:rgba(255,255,255,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{-webkit-transform:scale(1.05,1.05);-moz-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);-o-transform:scale(1.05,1.05);transform:scale(1.05,1.05);-webkit-filter:blur(8px);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-moz-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-ms-animation:passing-through 3s cubic-bezier(.77,0,.175,1);-o-animation:passing-through 3s cubic-bezier(.77,0,.175,1);animation:passing-through 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-moz-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-ms-animation:slide-in 3s cubic-bezier(.77,0,.175,1);-o-animation:slide-in 3s cubic-bezier(.77,0,.175,1);animation:slide-in 3s cubic-bezier(.77,0,.175,1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;-moz-animation:pulse 6s ease infinite;-ms-animation:pulse 6s ease infinite;-o-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:rgba(255,255,255,.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(to bottom,#666,#444);position:absolute;top:0;left:0;bottom:0;width:0;-webkit-transition:width 300ms ease-in-out;-moz-transition:width 300ms ease-in-out;-ms-transition:width 300ms ease-in-out;-o-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-ms-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(to bottom,#be2626,#a92222);padding:.5em 1.2em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:'';position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}/* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } }/* * Container style */ .ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; } /* * Scrollbar rail styles */ .ps__rail-x { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 15px; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; /* please don't change 'position' */ position: absolute; } .ps__rail-y { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 15px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; /* please don't change 'position' */ position: absolute; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { display: block; background-color: transparent; } .ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { opacity: 0.6; } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: #eee; opacity: 0.9; } /* * Scrollbar thumb styles */ .ps__thumb-x { background-color: #aaa; border-radius: 6px; transition: background-color .2s linear, height .2s ease-in-out; -webkit-transition: background-color .2s linear, height .2s ease-in-out; height: 6px; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; /* please don't change 'position' */ position: absolute; } .ps__thumb-y { background-color: #aaa; border-radius: 6px; transition: background-color .2s linear, width .2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out; width: 6px; /* please don't change 'position' */ position: absolute; } .ps:not(.ps__rtl) .ps__thumb-y { right: 2px; } .ps.ps__rtl .ps__thumb-y { left: 2px; } .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background-color: #999; height: 11px; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: #999; width: 11px; } /* MS supports */ @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important; } }.awesomplete [hidden] { display: none; } .awesomplete .visually-hidden { position: absolute; clip: rect(0, 0, 0, 0); } .awesomplete { display: inline-block; position: relative; } .awesomplete > input { display: block; } .awesomplete > ul { position: absolute; left: 0; z-index: 1; min-width: 100%; box-sizing: border-box; list-style: none; padding: 0; margin: 0; background: #fff; } .awesomplete > ul:empty { display: none; } .awesomplete > ul { border-radius: .3em; margin: .2em 0 0; background: hsla(0,0%,100%,.9); background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); border: 1px solid rgba(0,0,0,.3); box-shadow: .05em .2em .6em rgba(0,0,0,.2); text-shadow: none; } @supports (transform: scale(0)) { .awesomplete > ul { transition: .3s cubic-bezier(.4,.2,.5,1.4); transform-origin: 1.43em -.43em; } .awesomplete > ul[hidden], .awesomplete > ul:empty { opacity: 0; transform: scale(0); display: block; transition-timing-function: ease; } } /* Pointer */ .awesomplete > ul:before { content: ""; position: absolute; top: -.43em; left: 1em; width: 0; height: 0; padding: .4em; background: white; border: inherit; border-right: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .awesomplete > ul > li { position: relative; padding: .2em .5em; cursor: pointer; } .awesomplete > ul > li:hover { background: hsl(200, 40%, 80%); color: black; } .awesomplete > ul > li[aria-selected="true"] { background: hsl(205, 40%, 40%); color: white; } .awesomplete mark { background: hsl(65, 100%, 50%); } .awesomplete li:hover mark { background: hsl(68, 100%, 41%); } .awesomplete li[aria-selected="true"] mark { background: hsl(86, 100%, 21%); color: inherit; }.atwho-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;color:#000;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:11110!important}.atwho-view .atwho-header{padding:5px;margin:5px;cursor:pointer;border-bottom:solid 1px #eaeff1;color:#6f8092;font-size:11px;font-weight:700}.atwho-view .atwho-header .small{color:#6f8092;float:right;padding-top:2px;margin-right:-5px;font-size:12px;font-weight:400}.atwho-view .atwho-header:hover{cursor:default}.atwho-view .cur{background:#36F;color:#fff}.atwho-view .cur small{color:#fff}.atwho-view strong{color:#36F}.atwho-view .cur strong{color:#fff;font:700}.atwho-view ul{list-style:none;padding:0;margin:auto;max-height:200px;overflow-y:auto}.atwho-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}.atwho-view small{font-size:smaller;color:#777;font-weight:400}@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; src: local("Open Sans Light"), local("OpenSans-Light"), url("fonts/opensans/opensans-light.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url("fonts/opensans/opensans.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; src: local("Open Sans Bold"), local("OpenSans-Bold"), url("fonts/opensans/opensans-bold.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter/inter-regular.woff2") format("woff2"), url("fonts/inter/inter-regular.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter/inter-500.woff2") format("woff2"), url("fonts/inter/inter-500.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter/inter-600.woff2") format("woff2"), url("fonts/inter/inter-600.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter/inter-700.woff2") format("woff2"), url("fonts/inter/inter-700.woff") format("woff"); } .navbar-nav .nav-link { padding: 21px 15px !important; color: #4e5e6a; } .navbar-nav .nav-item #user-dropdown { padding: 17px 14px !important; } .navbar-nav .nav-item .dropdown-toggle:after { display: none !important; } .navbar-nav .form-check { margin-left: 1em; } .navbar-nav .form-check .form-check-label, .navbar-nav .form-check .form-check-input { color: #4e5e6a; cursor: pointer; } .navbar-nav .sidebar-toggle-btn { padding-left: 0.8rem !important; } .navbar-custom { background: #fff; top: 0; right: 0; left: 250px; min-height: 66px; border-bottom: 1px solid #f1f1f5; padding: 0; } .logo-collapsed { display: none; } .language-dropdown { height: 300px; overflow-y: scroll; min-width: 170px; } .sidebar { width: 250px; z-index: 1005; bottom: 0; margin-top: 0; position: fixed; top: 0; font-size: 15px; font-weight: 400; background: #fff; border-right: 1px solid #f1f1f5; } .sidebar-brand { padding: 12px 20px; width: 250px; height: 66px; position: fixed; text-align: center; z-index: 999; border-bottom: 1px solid rgba(0, 0, 0, 0.0588235294); background-color: #fff; } .brand-logo-mini { display: none; } .brand-logo-mini img { max-width: 32px; } .sidebar-scroll { margin-top: 65px; background: #FFF; } .sidebar-menu { padding: 10px 0; list-style: none; margin: 0; } .sidebar-menu li { position: relative; margin: 0; } .sidebar-menu li a { text-decoration: none; position: relative; display: block; padding: 9px 18px; margin: 0 10px; border-radius: 3px; color: #7b8190; z-index: 2; align-items: center; -moz-transition: color 250ms ease-in-out, background-color 250ms ease-in-out; -o-transition: color 250ms ease-in-out, background-color 250ms ease-in-out; -webkit-transition: color 250ms ease-in-out, background-color 250ms ease-in-out; transition: color 250ms ease-in-out, background-color 250ms ease-in-out; } .sidebar-menu li a span { margin-left: 10px; } .sidebar-menu li a:active, .sidebar-menu li a:hover, .sidebar-menu li a:focus { color: #383c40; background-color: #f9f9f9; } .sidebar-menu li ul { list-style: none; position: relative; padding: 0; margin: 0; max-height: 0; overflow: hidden; z-index: 1; -webkit-transition: max-height 300ms ease; -moz-transition: max-height 300ms ease; -o-transition: max-height 300ms ease; transition: max-height 300ms ease; } .sidebar-menu li ul li a { padding: 9px 27px; color: #7b8190; } .sidebar-menu li ul li a:hover { color: #383c40; } .sidebar-menu li ul li a svg { margin-top: -3px; } .sidebar-menu li.active > a { color: #fff !important; background-color: #6690F4; } .sidebar-menu .badge { float: right; margin-top: 2px !important; padding: 3px 6px; } .sidebar-menu .expand.open ul { max-height: 1000px; } #sidebar-menu li.expand.open > a::before { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 2px; position: absolute; right: 1.5rem; transition: all 0.2s ease-out; transform: rotate(-135deg); top: 1.4rem; } #sidebar-menu li.expand > a::before { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 2px; transform: rotate(45deg); position: absolute; top: 1.2rem; right: 1.5rem; transition: all 0.2s ease-out; } @media print { .print-peview { color: #000; } a[href]:after { content: none !important; } html, body { background-color: #fff; color: #000; } } @media screen and (max-width: 1400px) { /* Timeline */ #timeline::before { left: 0px !important; margin-left: 0 !important; margin-top: 2.85rem !important; } #timeline .post-content { float: left; width: 100% !important; padding: 0 0 0 30px !important; margin: 0 0 20px !important; } #timeline .post-content:nth-child(odd) .post-date { text-align: left !important; } #timeline .post-content:nth-child(odd) .post-date:before { left: -20px; top: 8px; width: 20px; height: 2px; float: left !important; } #timeline > .post-content:first-child { padding-top: 60px !important; } .container.store-page { max-width: 1440px; } } @media screen and (max-width: 991px) { .task-title-left { display: none; } .task-title-right { display: block !important; } .comment-avatar { padding: 0 !important; } .comment-container { margin: 15px 15px !important; } } @media (min-width: 991px) { .sidebar-toggled { min-height: 1420px; } .sidebar-toggled .sidebar-scroll { overflow: visible !important; } .sidebar-toggled .navbar-custom { left: 70px; } .sidebar-toggled .sidebar { position: absolute; overflow: visible; width: 70px !important; height: 1420px; } .sidebar-toggled .brand-logo { display: none; } .sidebar-toggled .brand-logo-mini { display: block; } .sidebar-toggled .sidebar-menu li a { padding: 9px 15px; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; } .sidebar-toggled .sidebar-menu li a .menu-text { display: none; padding-left: 35px; } .sidebar-toggled .sidebar-menu li a span { margin-left: 0; } .sidebar-toggled .sidebar-menu li:hover { width: 250px; background-color: #FFF; -webkit-transition: none; transition: none; border-radius: 3px; } .sidebar-toggled .sidebar-menu li:hover > a { width: 240px; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .sidebar-toggled .sidebar-menu li:hover .menu-text { display: inline; } .sidebar-toggled .sidebar-menu li:hover ul { display: block; padding-left: 0; max-height: 1000px; -webkit-box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, 0.075); box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, 0.075); } .sidebar-toggled .sidebar-menu li:hover ul .menu-text { padding-left: 0; display: inline; } .sidebar-toggled .sidebar-menu li ul { display: none; left: 70px; position: absolute; width: 180px; height: auto !important; background-color: #fff; color: #7b8190; } .sidebar-toggled .sidebar-menu li ul li { width: 180px; } .sidebar-toggled .sidebar-menu li ul li:hover { background-color: #fff; } .sidebar-toggled .sidebar-menu li ul li a { color: #7b8190 !important; margin: 0; padding: 10px 20px; } .sidebar-toggled .sidebar-menu li ul li a:hover { color: #383c40 !important; } .sidebar-toggled .sidebar-menu li ul:hover li { width: 180px; } .sidebar-toggled .sidebar-menu li ul svg { display: none; } .sidebar-toggled .sidebar-menu li .badge { display: none; } .sidebar-toggled .sidebar-menu li.expand.open > a::before { display: none !important; } .sidebar-toggled .sidebar-menu li.expand > a::before { display: none !important; } .sidebar-toggled .page-container { margin-left: 70px; } .sidebar-toggled .sidebar-brand { padding: 20px; width: 70px; } .sidebar-toggled .logo { display: none; } .sidebar-toggled .logo-collapsed { display: block; } .subscription-details-view .file-grid-view-container, .invoice-details-view .file-grid-view-container, .order-details-view .file-grid-view-container, .contract-details-view .file-grid-view-container { max-width: 126px; } .install-pwa-button { display: none !important; } } @media (max-width: 990px) { .sidebar { z-index: 1050; } .sidebar .sidebar-brand { width: 70px !important; padding: 15px; box-shadow: none !important; } .sidebar .sidebar-scroll { border-top: 1px solid #eef6f9; } .sidebar .sidebar-toggle-btn { float: right; display: inline-block !important; margin: 18px 5px 0 0; } .sidebar-off { left: -250px; transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; } .navbar { left: 0; } .page-container { margin-left: 0px !important; } .sidebar-toggled .sidebar-off { left: 0; } #pre-loader .app-loader { right: 44% !important; } } @media (min-width: 768px) and (max-width: 1024px) { .widget-container.col-sm-6 { width: 50% !important; } } @media (max-width: 767px) { html { font-size: 16px; /* Base font size for mobile */ } body { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */ } .hidden-xs { display: none !important; } .brand-logo-mini { display: block; } /* Improve typography for better mobile reading */ h1 { font-size: 2rem; line-height: 1.2; } h2 { font-size: 1.75rem; line-height: 1.25; } h3 { font-size: 1.5rem; line-height: 1.3; } h4 { font-size: 1.25rem; line-height: 1.35; } h5 { font-size: 1.1rem; line-height: 1.4; } h6 { font-size: 1rem; line-height: 1.45; } p, li, td, th, label, input, textarea, select, button, .btn { font-size: 1rem; /* Minimum readable font size */ line-height: 1.6; } #page-content:not(.no-padding) { padding: 15px !important; } .content-sidebar { display: block !important; width: 100% !important; padding-left: 0 !important; } .content-sidebar .list-group { margin-bottom: 15px; } .message-view { display: block !important; padding-left: 0 !important; } #pre-loader .app-loader { right: 38% !important; } .box-content.avatar { display: none !important; } .modal-mask { width: 100% !important; } .modal-dialog { margin: 0; } table.dataTable tbody td { padding-top: 15px; padding-bottom: 15px; } .rise-chat-wrapper { width: 100% !important; left: 0 !important; right: 0 !important; height: 450px !important; bottom: 0 !important; } .nizu-chat-body-web.full-height { height: 413px !important; } .nizu-chat-body-web.long { height: 412px !important; } .custom-toolbar .navbar-collapse.show { overflow-y: auto; } .custom-toolbar .dataTables_filter { float: left; margin-left: 0; } .custom-toolbar div.DTTT_container:first-child:not(.mr15) { float: left !important; margin: 0; } .custom-toolbar div.DTTT_container:last-child { margin-bottom: 10px; } .open .dropdown-menu { margin-right: 0 !important; } #timeline:before { background-image: linear-gradient(to top, #E5E9EC 0.5%, #f2f4f6 1%, #f2f4f6 99%); } .kanban-col { width: 200px !important; margin: 0 10px; } .kanban-col-title { padding: 10px !important; margin-bottom: 10px !important; } .kanban-item { padding: 5px 8px !important; width: 200px !important; margin: 0 0px 6px 0 !important; } .dataTables_filter label { margin: 0; } .custom-toolbar .DTTT_container:last-child { margin-bottom: 0; } .mini-modal { width: 100% !important; } .custom-toolbar .navbar-collapse { padding: 15px 0 0 0; } .kanban-filters-container { padding: 15px !important; } .cart-item-details-container { width: 280px !important; } .init-cart-icon { z-index: 9 !important; } .client-widget-section { /*padding: 0 !important;*/ padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; } /* mobile view datatable */ .toolbar-left-top, .datatable-export { display: none; } .mr15.DTTT_container { margin-right: 0 !important; float: none !important; text-align: center; } .dt-container .dataTables_filter input { margin-left: 0; } .proposal-preview-container, .contract-preview-container { padding: 10px !important; } .invoice-preview-container { padding: 10px !important; } .item-search-box-section { margin-top: 5px; width: 100%; } .item-search-box-section .item-search-box { width: 100% !important; } .item-categories-filter-section { margin-top: 15px; width: 100%; } .item-categories-filter-section .w200 { width: 100% !important; } .user-dropdown-menu .company-switch-option { display: block !important; } .user-dropdown-menu .company-switch-option .nav-link { display: none; } .user-dropdown-menu .company-switch-option .hidden-xs { display: block !important; } .user-dropdown-menu .company-switch-option .dropdown-menu { position: unset !important; display: block; box-shadow: none; margin-top: 0; } .filter-section-left, .filter-section-right, .filter-section-flex-row { flex: none !important; width: 100%; display: block !important; } #task-table_wrapper .filter-form .filter-item-box, #project-table_wrapper .filter-form .filter-item-box, #ticket-table_wrapper .filter-form .filter-item-box { width: 100%; } #task-table_wrapper .filter-form .filter-item-box .filter-multi-select, #project-table_wrapper .filter-form .filter-item-box .filter-multi-select, #ticket-table_wrapper .filter-form .filter-item-box .filter-multi-select { width: 100%; } #task-table_wrapper .filter-form .filter-item-box .filter-multi-select .dropdown-toggle, #project-table_wrapper .filter-form .filter-item-box .filter-multi-select .dropdown-toggle, #ticket-table_wrapper .filter-form .filter-item-box .filter-multi-select .dropdown-toggle { width: 98%; } #task-table_wrapper .filter-form .filter-item-box .w200, #project-table_wrapper .filter-form .filter-item-box .w200, #ticket-table_wrapper .filter-form .filter-item-box .w200 { width: 98%; } #task-table_wrapper .filter-form .filter-item-box .btn-group.filter, #project-table_wrapper .filter-form .filter-item-box .btn-group.filter, #ticket-table_wrapper .filter-form .filter-item-box .btn-group.filter { width: 98%; } #task-table_wrapper .filter-form .datepicker-custom-selector, #project-table_wrapper .filter-form .datepicker-custom-selector, #ticket-table_wrapper .filter-form .datepicker-custom-selector { width: 98%; } .h373 { height: auto !important; } .h379 { height: auto !important; } #all_tasks_overview-widget, #my_tasks_overview-widget, #leads-overview-widget { height: auto !important; } #all_tasks_overview-widget .position-absolute, #my_tasks_overview-widget .position-absolute, #leads-overview-widget .position-absolute { position: unset !important; padding-top: 10px; } #all_tasks_overview-widget .position-absolute span.me-5, #my_tasks_overview-widget .position-absolute span.me-5, #leads-overview-widget .position-absolute span.me-5 { margin-right: 0 !important; } .details-view-wrapper.d-flex { display: block !important; } .details-view-wrapper.d-flex .details-view-right-section { width: auto; margin-left: 0 !important; } div.dt-container div.dataTables_paginate ul.pagination { justify-content: space-around !important; } .dt-container .datatable-tools .mini-list-pagination-container { padding: 0 !important; border-top: 1px solid #f1f1f5; margin-top: 15px; } .cart-grid-item-buttons { visibility: visible !important; opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } .cart-grid-item-image-container::before { background-color: rgba(0, 0, 0, 0.2) !important; } } @media (min-width: 576px) and (max-width: 767px) { .sidebar-toggle-btn-li { display: block !important; } } @media (max-width: 576px) { .public-navbar .navbar-collapse { border-top: 1px solid #eef6f9; } .public-navbar .navbar-collapse .navbar-nav { flex-direction: row; float: right; } .public-navbar .navbar-collapse .navbar-nav li { display: inline-block; } .public-navbar .navbar-toggler { padding: 21px 15px; } #file-manager-sidebar { display: none !important; } #view-details-button { display: none; } .folder-item .item-name { display: block; width: 75%; } .file-manager-more-menu { display: inline !important; } #file-manager-items-box { padding-right: 0 !important; } .rise-cart-wrapper { height: 450px !important; bottom: 84px !important; top: unset !important; box-shadow: 0px -5px 10px -5px rgba(0, 0, 0, 0.2) !important; z-index: 100 !important; } .rise-chat-wrapper:not(.rise-cart-wrapper) { width: 100% !important; height: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; z-index: 1060 !important; box-shadow: none !important; } .rise-chat-wrapper:not(.rise-cart-wrapper) .nizu-chat-body-web { height: calc(100vh - 164px) !important; } .rise-chat-wrapper:not(.rise-cart-wrapper) .nizu-chat-body-web.full-height { height: calc(100vh - 142px) !important; } .init-chat-icon { bottom: 100px !important; } .init-cart-icon { right: 20px !important; } .move-cart-icon { top: 70px !important; right: 42.5% !important; } .public-view .mobile-bottom-menu { display: none !important; } .public-view .init-chat-icon { bottom: 20px !important; } .public-view .rise-cart-wrapper { bottom: 0 !important; } .public-view .move-cart-icon { top: 155px !important; } #place-order-form .add-item-btn, #invoice-details-section .add-item-btn, #estimate-details-section .add-item-btn { margin-bottom: 20px; } .app-alert.animate { bottom: 70px !important; } .global-search-modal .modal-dialog { padding: 15px; } .global-search-modal .modal-dialog .modal-content { border-radius: 7px !important; } .global-search-modal .modal-dialog .modal-content .modal-body.search-modal { height: auto !important; min-height: unset !important; } .global-search-modal .modal-dialog .modal-content .modal-body.search-modal .col-sm-3 { padding: 0 !important; border-bottom: 1px solid #f1f1f5 !important; } .global-search-modal .modal-dialog .modal-content .modal-body.search-modal .col-sm-3 .select2-container .select2-chosen { padding: 6px 8px !important; } #project-tasks_list-section .priority-badge { display: block !important; } .timesheet-activity-container { width: 100%; display: block; overflow-y: auto; } .timesheet-activity-container .timesheet-activity-heatmap { table-layout: fixed; } .timesheet-activity-container .timesheet-activity-heatmap .heatmap-label { width: 200px !important; } .timesheet-activity-container .timesheet-activity-heatmap td, .timesheet-activity-container .timesheet-activity-heatmap th { width: 35px !important; height: 35px !important; } } @media screen and (max-width: 500px) { /*invoices*/ #invoice-total-section, #estimate-total-section, #order-total-section, #contract-total-section, #proposal-total-section { width: 100% !important; } tr.invoice-preview-header-row img { width: 100% !important; } tr.invoice-preview-header-row td.hidden-invoice-preview-row { width: 0 !important; } tr.invoice-preview-header-row td.invoice-info-container { width: 55% !important; } .invoice-preview, .contract-preview, .proposal-preview { min-width: 100% !important; } .invoice-preview-container { padding: 10px; } .invoice-preview-container table th, .invoice-preview-container table td { padding: 8px 5px !important; } .invoice-preview-container .ribbon { left: -5px !important; top: -15px !important; width: 90px !important; height: 90px !important; } .invoice-preview-container .ribbon span.badge { width: 90px !important; left: -20px !important; top: 15px !important; } .process-order-preview { min-width: 100% !important; } } @media (max-width: 500px) { html, body { font-size: 15px !important; -webkit-font-smoothing: unset !important; } .navbar-nav .sidebar-toggle-btn { padding-left: 4px !important; } .navbar-nav .nav-item #user-dropdown { padding-right: 8px !important; } .nav-item .nav-link .user-name { display: none !important; } .nav-item .dropdown-toggle:after { display: none; } #timeline-content #post-form-container .avatar { display: none !important; } #timeline-content #timeline:before { display: none; } #timeline-content #timeline .post-content { padding: 0 !important; margin-bottom: 0 !important; } #timeline-content #timeline .post-content .card { margin-bottom: 0 !important; } #timeline-content #timeline .post-content .post-date span { display: none; } #timeline-content #timeline .post-content .post-date:before { display: none; } .details-view-status-section .title-button-group .btn { margin: 0.65rem 0.65rem 0.65rem 0 !important; } .title-button-group { margin-bottom: 5px !important; display: inline-block !important; width: auto !important; } .title-button-group .dropdown { display: grid !important; } .title-button-group .btn { margin: 0.65rem 0 !important; } .title-button-group.hidden-xs { display: none !important; } .hidden-sm { display: none !important; } .scrollable-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: inherit; white-space: nowrap; width: 100%; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .scrollable-tabs::-webkit-scrollbar { display: none; } .sm-details-page .page-container { margin-top: 0 !important; } .reports-tabs .scrollable-tabs { padding-left: 15px !important; width: 95%; } .reports-tabs .scrollable-tabs .dropdown-menu.show { position: fixed !important; top: 30px; left: 20px !important; } .project-activity-section { margin-bottom: 50px !important; } .move-chat-icon { right: 45% !important; } .project-details-view { padding: 0 !important; } #project-tasks_list-section .js-task { display: none; } #project-tasks_list-section .task-labels { float: left !important; margin-left: 0 !important; } #project-tasks_list-section .task-labels .badge { margin-top: 5px !important; } .task-view-modal-body .container-fluid { padding: 0; } .modal { overflow: hidden; } .modal .modal-content { border-radius: 0; } .modal-footer { padding: 15px !important; } .sidebar-toggled .sidebar { width: 100%; } .sidebar-toggled .sidebar .sidebar-toggle-btn { margin: 0; padding: 21px 15px; color: #4e5e6a; } .card { box-shadow: none !important; -webkit-box-shadow: none !important; } .navbar-custom { background-color: transparent; } .fixed-top { position: relative; } .fixed-top.shadow-sm { box-shadow: none !important; } .page-container { margin-top: 10px !important; } .scrollable-page { margin-bottom: 72px; } body.sidebar-toggled { overflow: hidden !important; } .mobile-bottom-menu .dropdown-menu .dropdown-divider { display: none; } .mobile-bottom-menu .dropdown-menu .dropdown-item { border: none !important; } .mobile-bottom-menu .dropdown-menu .dropdown-item.btn-success, .mobile-bottom-menu .dropdown-menu .dropdown-item.btn-danger, .mobile-bottom-menu .dropdown-menu .dropdown-item.btn-primary { color: #fff; } .xs-full-width-button .title-button-group { width: 100% !important; } .xs-full-width-button .title-button-group .float-start, .xs-full-width-button .title-button-group .float-end { width: 100% !important; } .xs-full-width-button .title-button-group .btn { width: 100% !important; } .xs-full-width-button .title-button-group.events-title-button { margin-right: 0 !important; padding: 0 15px; } .filter-section-right .filter-item-box { width: 100% !important; padding-right: 10px; } .filter-section-right .filter-item-box .dt-search { width: 100% !important; } .filter-section-right .filter-item-box .dt-search .form-control { width: 100% !important; margin-left: 0; } .filter-section-right #gantt_view_selector_section .select2-container { width: 100% !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box) { display: flex !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box).bookmarked-filter-button-wrapper { display: inline-block !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box).reload-button-container { float: right; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box).smart-filter-dropdown-box { display: inline-block !important; width: 80%; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box).smart-filter-dropdown-box .smart-filter-dropdown-container .smart-filter-dropdown { width: 100% !important; text-align: left; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box).smart-filter-dropdown-box .smart-filter-dropdown-container .smart-filter-dropdown::after { position: absolute; right: 12px; margin-top: 9px; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box) .btn-group { width: 100% !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box) .dropdown.filter-multi-select { width: 100% !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box) .dropdown.filter-multi-select .dropdown-toggle { width: 100% !important; } .filter-section-left .filter-item-box:not(.show-hide-filter-button-box) .select2-container { width: 100% !important; } .filter-section-left .filter-item-box.show-hide-filter-button-box { float: right !important; } #kanban-filters .filter-section-left .filter-item-box.smart-filter-dropdown-box { width: auto !important; } .payment-received-chart .payment-chart-button-section { float: unset !important; } .payment-received-chart .payment-chart-button-section .select2-container { width: 100% !important; } .payment-received-chart .payment-chart-button-section .select2-container .select2-choice { width: 100% !important; display: inline-block; margin: 5px 0 !important; } .payment-received-chart .payment-chart-button-section #payment-chart-date-range-selector { width: 100%; } .payment-received-chart .payment-chart-button-section #payment-chart-date-range-selector .btn-group { width: 100% !important; margin-left: 0 !important; } .filter-form .filter-item-box { display: block !important; margin: 10px 0 !important; } .filter-form .filter-item-box .select2-container, .filter-form .filter-item-box .datepicker-custom-selector { width: 100% !important; } .filter-form .filter-item-box .filter-multi-select { width: 100% !important; } .filter-form .filter-item-box .filter-multi-select .dropdown-toggle { width: 100% !important; } .filter-form .filter-item-box.btn-group { display: flex !important; } .filter-form .filter-item-box .btn-group { width: 100%; } .filter-form .filter-item-box .btn-group .dynamic-range-filter { width: 100%; } .filter-form .filter-item-box .btn-group .dynamic-range-filter .dropdown-toggle { width: 100%; } .filter-form .filter-item-box .btn-group.filter { width: 100% !important; } .filter-form .filter-item-box.save-filter-box { width: 48% !important; margin-right: 12px !important; } .filter-form .filter-item-box.save-filter-box .btn { width: 100% !important; } .filter-form .filter-item-box.filter-cancel-box { width: 48% !important; margin: 0 !important; } .filter-form .filter-item-box.filter-cancel-box .btn { width: 100% !important; } .filter-form .save-filter-box, .filter-form .filter-cancel-box { display: inline-block !important; width: unset !important; margin: 0 5px 0 0 !important; } #kanban-filters .custom-filter-search { width: 100% !important; } .navbar-custom { border: none; } .sidebar .sidebar-scroll { border-top-color: #f1f1f5 !important; } .sidebar #left-menu-topbar-button-container .nav-link { padding: 21px 15px !important; } #calendar-filter-dropdown .dropdown-menu, .dynamic-range-filter .dropdown-menu { width: 100%; } .dataTable.nowrap td { white-space: normal !important; } .details-view-container .info-section { text-align: left !important; margin-top: 15px; } .details-view-container .p15 { padding: 0 !important; } .details-view-container #page-content { padding: 0 !important; } .details-view-container .table-responsive { padding: 0 !important; } .invoice-preview-container { border: none !important; box-shadow: none !important; } .preview-editor-button-group { display: grid !important; padding: 0 !important; } .preview-editor-button-group .btn { margin: 0 0 10px 0 !important; } .tab-pane .chart-date-range-button .btn-group { width: 100% !important; margin: 0 !important; } .dashboard-edit-section #widget-container-area { position: unset; width: auto; padding-right: 0; } .dashboard-edit-section #widget-row-container { margin-left: 0; } .dashboard-edit-section #widget-row-container .page-title { display: grid; } .dashboard-edit-section #widget-row-container .page-title .title-button-group { display: grid !important; } #file-manger-title-bar { padding-bottom: 0 !important; } #file-manger-title-bar .title-button-group .btn:not(#view-details-button) { display: block; margin: 15px !important; } .grid-button .grid-button-xs .btn { width: 47%; } .grid-button .grid-button-xs .btn:first-child { margin-right: 15px !important; } #gantt-filters .filter-section-right .btn { width: 100%; margin-left: 0 !important; margin-top: 10px; } .w-100-xs { width: 100%; } .m0-xs { margin: 0 !important; } .modal { z-index: 1060; } .summation-section { margin-bottom: 10px; } table.dataTable tbody tr.active td a, table.dataTable tbody tr.active td .text-default { color: #fff !important; } table.dataTable.xs-hide-dtr-control.dtr-inline.collapsed tbody tr td.dtr-control { padding-left: 10px !important; } table.dataTable.xs-hide-dtr-control.dtr-inline.collapsed tbody tr td.dtr-control:before { display: none !important; } table.dataTable.no-title thead th { display: none; } .datatable-tools .datatable-export .dt-buttons { margin-top: -5px; margin-bottom: 0 !important; } .datatable-tools .col-md-3 { border-bottom: 1px solid #f1f1f5; margin-bottom: 20px; padding-bottom: 20px; } .datatable-tools .dt-info { padding-top: 5px !important; } .xs-full-width { padding: 0 !important; } .xs-full-width .card { border: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .xs-full-width .card.xs-no-bottom-margin { margin-bottom: 0 !important; padding-bottom: 15px !important; } .xs-full-width .card { border: none !important; } .xs-full-width .ticket-comments-section { padding: 0 !important; } .xs-full-width .ticket-comments-section #comment-form-container .p15 { padding: 0 !important; } .xs-full-width#page-content { padding: 0 !important; } .xs-full-width .modal-body { padding: 0 !important; } .xs-full-width .modal-body .title-button-group { margin: 0 !important; float: unset !important; } .round-btn-xs { padding: 6px 9px !important; } .ticket-comment-container { margin: 10px !important; } .ticket-comment-container .avatar-sm { height: 30px; width: 30px; } .bootstrap-timepicker-widget.dropdown-menu.open { z-index: 1060 !important; } #client-settings-form .form-switch .form-check-input { margin-left: 10px !important; } input, select, textarea { font-size: 16px !important; } .note-editor .note-editable { font-size: 16px !important; } .list-status-border { border-left: 5px solid !important; } .note-editor .note-toolbar .note-btn-group { margin-right: 0; } .note-editor .note-toolbar .note-btn-group .btn-fullscreen, .note-editor .note-toolbar .note-btn-group .btn-codeview { display: none; } .note-editor .note-toolbar .note-btn-group.note-font .note-btn:last-child { display: none !important; } .table-responsive { overflow-x: unset !important; } #client-summary .box .box-content { display: block; border-bottom: 1px solid #f1f1f5; } #client-summary .box .box-content:last-child { border-bottom: none; } #client-summary .box .box-content .pt-3 { padding-top: 10px !important; } #client-summary .box .box-content .pb-3 { padding-bottom: 10px !important; } #client-summary .box .box-content .b-r { border-right: none !important; } .invoice-overview-widget .xs-column-reverse { flex-direction: column-reverse; } .invoice-overview-widget .xs-column-reverse .pe-4 { padding-right: 0 !important; } .invoice-overview-widget .xs-column-reverse .b-r { border-right: none !important; } .invoice-overview-widget .xs-column-reverse .widget-right-section { width: auto !important; border-bottom: 1px solid #f1f1f9; padding-bottom: 15px; margin-bottom: 5px; margin-left: 0; padding-left: 0 !important; } .invoice-overview-widget .xs-column-reverse .widget-right-section .text-end { text-align: start !important; } .invoice-overview-widget .xs-column-reverse .widget-right-section .mt40 { margin-top: 15px !important; } .card-header .card-header-button { float: unset !important; margin-top: 15px !important; } .card-header .card-header-button a:first-child { padding-left: 0 !important; } .todo-page .todo-input-box { margin: 0 auto 15px !important; } .todo-page #todo-table_wrapper .filter-item-box { margin: 5px 0 5px 0 !important; } #todo-table_wrapper .datatable-tools .col-md-12:first-child { display: none; } #todo-table_wrapper .filter-section-right .filter-item-box { padding-right: 0 !important; } #compact-details-page .xs-full-width .container-fluid { padding: 0 !important; } #compact-details-page .navigate-back, #compact-details-page .reply-button { padding: 10px 10px 10px 0 !important; } .ticket-title-section .page-title h1 { padding: 15px 15px 15px 0 !important; } .ticket-status-section .ticket-assigned-to { float: right !important; } .dt-container .dt-paging a { padding: 8px 11px !important; } .dt-container .dt-paging.disabled:not(:first-child):not(:last-child) a { padding: 8px 0 !important; } .dt-container .dt-paging .pagination { margin-top: 15px !important; } .bookmarked-filter-button-container { display: block !important; } .bookmarked-filter-button-container.scrollable-container { overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 100%; } .bookmarked-filter-button-container.scrollable-container::-webkit-scrollbar { display: none; } .app-popover .custom-popover-button-area .col-md-6 { width: 50% !important; } .editor-preview { max-width: 100% !important; min-width: auto !important; padding: 0 !important; } .rise-chat-footer textarea { height: 56px !important; } .xs-pt-2 { padding-top: 0.5rem !important; } } @media (max-width: 590px) { .navbar-expand .navbar-nav .dropdown-menu { position: fixed; top: 62px; width: 100%; border-radius: 0; } .navbar-expand .navbar-nav .notification-dropdown { height: 80%; } .navbar-expand .navbar-nav .notification-dropdown #notificaion-popup-list { max-height: calc(100vh - 216px); overflow-y: auto; } .footer { position: absolute; padding-bottom: 5px !important; } .footer .float-start { float: none !important; } .footer .float-end { display: flex; float: none !important; justify-content: center; } .sidebar { bottom: 84px !important; } .sidebar .sidebar-scroll { height: calc(100vh - 149px) !important; } .summary-widget .card-body { height: auto !important; overflow: unset !important; } .summary-widget .card-body .list-group-item { padding: 10px !important; } #invoice-overview-container { height: auto !important; } #invoice-overview-container .position-absolute { position: unset !important; margin-top: 20px; } } @media screen and (max-width: 530px) { .comment-image-box { width: 100% !important; } .cart-item-details-container { width: 150px !important; } .message-send-button { display: inline !important; } } @media screen and (max-width: 440px) { .custom-toolbar .DTTT_container .w200, .custom-toolbar .DTTT_container .w150, .custom-toolbar .DTTT_container .w100, .custom-toolbar .DTTT_container .w175, .custom-toolbar .DTTT_container .btn, .custom-toolbar .DTTT_container .dropdown { width: 100%; } .find-more-items-btn { width: 100%; margin-top: 10px; } } @media screen and (max-width: 430px) { .page-title .title-button-group .select2-container { width: 100%; } .page-title .title-button-group #calendar-filter-dropdown .DTTT_container { width: 180px; } } @media screen and (max-width: 430px) and (max-width: 400px) { .page-title .title-button-group #calendar-filter-dropdown .DTTT_container { width: 100px !important; } } @media screen and (max-width: 430px) { .page-title .title-button-group .add-btn { display: block; } #event-calendar .fc-header-toolbar { display: block; text-align: center; } #event-calendar .fc-header-toolbar .fc-button-group { float: left; } #event-calendar .fc-header-toolbar .fc-today-button { float: right; } #event-calendar .fc-header-toolbar .fc-button-group:last-child { float: none; margin-top: 15px; } .g-recaptcha { margin-left: -25px; -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); -moz-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } .grid-button .projects-page { padding-bottom: 15px; } .grid-button .projects-page h1 { padding-bottom: 5px !important; } .grid-button .project-details-view .tab-title { padding-bottom: 15px; } .grid-button .items-page-title, .grid-button .contracts-page-title, .grid-button .estimate-page-title, .grid-button .proposal-page-title, .grid-button .notes-page-title, .grid-button .time-card-page-title, .grid-button .tickets-page-title, .grid-button .expenses-page-title { padding-bottom: 15px; } .grid-button .leaves-page-title { padding-bottom: 15px; } .grid-button .leaves-page-title h1 { padding-bottom: 10px !important; } .grid-button .invoices-details-view, .grid-button .ticket-view-title { padding-bottom: 15px !important; } .grid-button .invoices-details-view h1, .grid-button .ticket-view-title h1 { padding-bottom: 10px; } .grid-button .invoices-details-view .title-button-group .dropdown, .grid-button .ticket-view-title .title-button-group .dropdown { display: unset !important; } .grid-button .timesheet-buttons { width: 100%; } .grid-button .timesheet-buttons .full-width-date-range-selector { width: 100%; text-align: center; margin: 15px 0; } .grid-button .timesheet-buttons .full-width-date-range-selector .btn-group { width: 100% !important; margin: 0 !important; } .grid-button .timesheet-buttons .select2-container { width: 100%; margin-bottom: 15px; margin-left: 0 !important; } .grid-button .timesheet-buttons .timesheet-chart-project-dropdown, .grid-button .timesheet-buttons .timesheet-activity-project-dropdown { margin-right: 0 !important; } .grid-button .tab-title, .grid-button .page-title, .grid-button .title-tab:not(.my-tasks):not(.all-tasks-kanban):not(.leads-title-section) { width: 100%; } .grid-button .tab-title .title-button-group, .grid-button .page-title .title-button-group, .grid-button .title-tab:not(.my-tasks):not(.all-tasks-kanban):not(.leads-title-section) .title-button-group { width: 100% !important; margin: 0 !important; } .grid-button #reload-kanban-button { width: 100%; } .grid-button .dt-container .w-filter-right { width: 100%; } .grid-button .dt-container .w-filter-right #contact-table_filter { margin-left: 8px; } .grid-button .dt-container .w-filter-right .DTTT_container { margin-left: 15px; } .grid-button .dt-container .w-filter-right .DTTT_container.btn-group { width: 100%; margin-left: 0 !important; padding-left: 15px; } .grid-button .dt-container .w-filter-right div.dataTables_filter input { margin-left: 15px !important; } .grid-button .income-vs-expenses-chart-button { width: 100%; } .grid-button .income-vs-expenses-chart-button .select2-container { width: 100%; margin: 15px 0; } .grid-button .income-vs-expenses-chart-button #yearly-chart-date-range-selector { width: 100%; text-align: center; } .grid-button .proposal-preview-button .accept-reject-button, .grid-button .contract-preview-button .accept-reject-button { margin-top: 20px !important; } .grid-button .proposal-preview-button .grid-button-group, .grid-button .contract-preview-button .grid-button-group { float: none !important; display: inline-block; width: 100%; margin-top: 10px; margin-right: 0 !important; } .grid-button .proposal-preview-button .grid-button-group .btn-success, .grid-button .contract-preview-button .grid-button-group .btn-success { margin-right: 2px !important; width: 49%; } .grid-button .proposal-preview-button .grid-button-group .btn-danger, .grid-button .contract-preview-button .grid-button-group .btn-danger { width: 49%; margin-right: 0 !important; } .grid-button .proposal-preview-button .grid-button-group .float-start, .grid-button .contract-preview-button .grid-button-group .float-start { width: 50%; text-align: center; } .grid-button .proposal-preview-button .grid-button-group .float-start .btn, .grid-button .contract-preview-button .grid-button-group .float-start .btn { width: 98%; margin-top: 10px; } .grid-button .proposal-preview-button .grid-button-group .float-end, .grid-button .contract-preview-button .grid-button-group .float-end { width: 50%; } .grid-button .proposal-preview-button .grid-button-group .float-end .btn, .grid-button .contract-preview-button .grid-button-group .float-end .btn { width: 98%; } .todo-page .w-filter-right { width: 100%; } .todo-page .w-filter-right #todo-table_filter input { margin-left: 15px; } .todo-page .w-filter-right .DTTT_container { margin-left: 15px; } .todo-page .w-filter-right .DTTT_container .btn-group { width: 100%; } .grid-button.all-tasks-view .title-button-group, .grid-button.all-tasks-kanban-view .title-button-group, .grid-button.leads-view .title-button-group { padding-bottom: 10px; } #project-milestones-section .dt-container .w-filter-right, #project-files-section .dt-container .w-filter-right, #project-timesheets-section .dt-container .w-filter-right, #project-invoices-section .dt-container .w-filter-right, #project-payments-section .dt-container .w-filter-right, #project-expenses-section .dt-container .w-filter-right, #project-contracts-section .dt-container .w-filter-right, #project-tickets-section .dt-container .w-filter-right, #lead-contacts .dt-container .w-filter-right, #lead-estimate-requests .dt-container .w-filter-right, #lead-files .dt-container .w-filter-right, #monthly-orders .dt-container .w-filter-right, #yearly-orders .dt-container .w-filter-right, #monthly-payments .dt-container .w-filter-right, #yearly-payments .dt-container .w-filter-right, #custom-payments .dt-container .w-filter-right, #client-projects-list .dt-container .w-filter-right { width: 100%; } #project-milestones-section .dt-container .w-filter-right .DTTT_container, #project-files-section .dt-container .w-filter-right .DTTT_container, #project-timesheets-section .dt-container .w-filter-right .DTTT_container, #project-invoices-section .dt-container .w-filter-right .DTTT_container, #project-payments-section .dt-container .w-filter-right .DTTT_container, #project-expenses-section .dt-container .w-filter-right .DTTT_container, #project-contracts-section .dt-container .w-filter-right .DTTT_container, #project-tickets-section .dt-container .w-filter-right .DTTT_container, #lead-contacts .dt-container .w-filter-right .DTTT_container, #lead-estimate-requests .dt-container .w-filter-right .DTTT_container, #lead-files .dt-container .w-filter-right .DTTT_container, #monthly-orders .dt-container .w-filter-right .DTTT_container, #yearly-orders .dt-container .w-filter-right .DTTT_container, #monthly-payments .dt-container .w-filter-right .DTTT_container, #yearly-payments .dt-container .w-filter-right .DTTT_container, #custom-payments .dt-container .w-filter-right .DTTT_container, #client-projects-list .dt-container .w-filter-right .DTTT_container { margin-left: 15px; } #project-milestones-section .dt-container .w-filter-right div.dataTables_filter input, #project-files-section .dt-container .w-filter-right div.dataTables_filter input, #project-timesheets-section .dt-container .w-filter-right div.dataTables_filter input, #project-invoices-section .dt-container .w-filter-right div.dataTables_filter input, #project-payments-section .dt-container .w-filter-right div.dataTables_filter input, #project-expenses-section .dt-container .w-filter-right div.dataTables_filter input, #project-contracts-section .dt-container .w-filter-right div.dataTables_filter input, #project-tickets-section .dt-container .w-filter-right div.dataTables_filter input, #lead-contacts .dt-container .w-filter-right div.dataTables_filter input, #lead-estimate-requests .dt-container .w-filter-right div.dataTables_filter input, #lead-files .dt-container .w-filter-right div.dataTables_filter input, #monthly-orders .dt-container .w-filter-right div.dataTables_filter input, #yearly-orders .dt-container .w-filter-right div.dataTables_filter input, #monthly-payments .dt-container .w-filter-right div.dataTables_filter input, #yearly-payments .dt-container .w-filter-right div.dataTables_filter input, #custom-payments .dt-container .w-filter-right div.dataTables_filter input, #client-projects-list .dt-container .w-filter-right div.dataTables_filter input { margin-left: 15px !important; } #project-milestones-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-files-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-timesheets-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-invoices-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-payments-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-expenses-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-contracts-section .dt-container .w-filter-right .DTTT_container.btn-group, #project-tickets-section .dt-container .w-filter-right .DTTT_container.btn-group, #lead-contacts .dt-container .w-filter-right .DTTT_container.btn-group, #lead-estimate-requests .dt-container .w-filter-right .DTTT_container.btn-group, #lead-files .dt-container .w-filter-right .DTTT_container.btn-group, #monthly-orders .dt-container .w-filter-right .DTTT_container.btn-group, #yearly-orders .dt-container .w-filter-right .DTTT_container.btn-group, #monthly-payments .dt-container .w-filter-right .DTTT_container.btn-group, #yearly-payments .dt-container .w-filter-right .DTTT_container.btn-group, #custom-payments .dt-container .w-filter-right .DTTT_container.btn-group, #client-projects-list .dt-container .w-filter-right .DTTT_container.btn-group { width: 100%; margin-left: 0 !important; padding-left: 15px; } #user-roles-table_wrapper .w-filter-right, #invoice-table_wrapper .w-filter-right { width: 100%; } #user-roles-table_wrapper .w-filter-right #user-roles-table_filter, #invoice-table_wrapper .w-filter-right #user-roles-table_filter { margin-left: 8px; } #user-roles-table_wrapper .w-filter-right .DTTT_container, #invoice-table_wrapper .w-filter-right .DTTT_container { margin-left: 15px; } #user-roles-table_wrapper .w-filter-right .DTTT_container .btn-group, #invoice-table_wrapper .w-filter-right .DTTT_container .btn-group { width: 100%; } #user-roles-table_wrapper .w-filter-right div.dataTables_filter input, #invoice-table_wrapper .w-filter-right div.dataTables_filter input { margin-left: 15px !important; } .gantt-view .custom-toolbar { margin-right: 0 !important; } .gantt-view .custom-toolbar .select2-container { width: 100%; margin: 10px 0 0 0 !important; } .gantt-view .custom-toolbar .gantt-status-filter { width: 100%; margin: 10px 0 0 0 !important; } .gantt-view .custom-toolbar .gantt-status-filter .dropdown-menu { width: 100%; } .leads-details-view .title-button-group .btn { float: left !important; margin-bottom: 20px !important; } .clients-project-page-title { margin-top: 6px !important; } .select2-container .select2-choice .select2-chosen { text-align: left; } } @media (max-width: 400px) { .user-badge { display: none; } } @media screen and (max-width: 400px) { .custom-toolbar .custom-filter-search { width: 120px !important; } .project-activity-logs-container ul { padding-left: 16px !important; } .comment-form-container { padding: 0; } .comment-avatar { padding-left: 5px; } #project-timer-box .dropdown-menu { right: auto; left: 0; } .checkbox-blank, .checkbox-checked, .checkbox-un-checked { margin-right: 10px; } } @media screen and (max-width: 385px) { .cart-item-details-container { width: 75px !important; } } @media screen and (max-width: 363px) { #event-calendar div.fc-right div.fc-button-group { margin-top: 5px !important; } } @media screen and (max-width: 300px) { .cart-item-details-container { width: 50px !important; } #notificaion-popup-list, #messages-popup-list { max-height: 400px !important; overflow-y: scroll !important; } .invoice-preview-container { padding: 0; } .dataTables_filter input { width: 120px !important; } .task-link-btn { display: none; } } @media screen and (max-width: 250px) { .invoice-preview-container table th, .invoice-preview-container table td { padding: 5px 0 !important; } } @media screen and (max-width: 885px) { #file-details-box { display: none; } } @media (min-width: 768px) and (max-width: 1400px) { .col-md-3.widget-container { width: 50%; } } @media screen and (max-width: 1140px) { .ticket-details-container .comment-container .comment-image-box, .invoice-details-container .comment-container .comment-image-box { width: auto; } .ticket-details-container .details-view-right-section, .invoice-details-container .details-view-right-section { width: 300px; } } /*margin, padding, height and width*/ .m0 { margin: 0 !important; } .m5 { margin: 5px !important; } .mt5 { margin-top: 5px; } .margin-top-5 { margin-top: -5px; } .mt-50 { margin-top: -50px !important; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .ml15 { margin-left: 15px !important; } .ml-20 { margin-left: -20px; } .mt8 { margin-top: 8px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mr15 { margin-right: 15px !important; } .mb15 { margin-bottom: 15px; } .mb20 { margin-bottom: 20px; } .ml10 { margin-left: 10px !important; } .mr10 { margin-right: 10px; } .mb0 { margin-bottom: 0 !important; } .mt50 { margin-top: 50px !important; } .mt0 { margin-top: 0 !important; } .mlr10 { margin-left: 10px !important; margin-right: 10px !important; } .p0 { padding: 0 !important; } .p5 { padding: 5px; } .p10 { padding: 10px; } .p15 { padding: 15px; } .p20 { padding: 20px !important; } .p30 { padding: 30px !important; } .pb5 { padding-bottom: 5px; } .pb0 { padding-bottom: 0 !important; } .pb10 { padding-bottom: 10px; } .pb15 { padding-bottom: 15px; } .pb20 { padding-bottom: 20px; } .pb50 { padding-bottom: 50px; } .pl10 { padding-left: 10px; } .pl15 { padding-left: 15px !important; } .pr10 { padding-right: 10px; } .pr15 { padding-right: 15px !important; } .pt10 { padding-top: 10px !important; } .pt5 { padding-top: 5px !important; } .pt0 { padding-top: 0px !important; } .pl0 { padding-left: 0 !important; } .pr0 { padding-right: 0 !important; } .mr0 { margin-right: 0 !important; } .w25 { width: 25px; } .w80 { width: 80px; } .w100 { width: 100px; } .w125 { width: 125px; } .w150 { width: 150px; } .w175 { width: 175px; } .w200 { width: 200px; } .w250 { width: 250px !important; } .w300 { width: 300px; } .w400 { width: 400px; } .min-w150 { min-width: 150px; } .w5p { width: 5%; } .w10p { width: 10%; } .w15p { width: 15%; } .w20p { width: 20%; } .w25p { width: 25%; } .w30p { width: 30%; } .w50p { width: 50%; } .w60p { width: 60% !important; } .w70p { width: 70%; } .w80p { width: 80%; } .w90p { width: 90%; } .w100p { width: 100% !important; } .max-w500 { max-width: 500px; } .h100p { height: 100%; } .mb5 { margin-bottom: 5px; } .p3 { padding: 3px; } .ml20 { margin-left: 20px !important; } .h370 { height: 370px !important; } .pr5 { padding-right: 5px; } .ml298 { margin-left: 298px; } .mr5 { margin-right: 5px; } .w70 { width: 70px; } .ml30 { margin-left: 30px; } .pt15 { padding-top: 15px; } .w75p { width: 75%; } .ml5 { margin-left: 5px; } .pl5 { padding-left: 5px; } .w50 { width: 50px; } .w85 { width: 85px; } .mb30 { margin-bottom: 30px; } .mw100p { max-width: 100%; } .ml2 { margin-left: 2px; } .mb10 { margin-bottom: 10px !important; } .mb8 { margin-bottom: 8px !important; } .w35p { width: 35%; } .ml35 { margin-left: 35px; } .pb100 { padding-bottom: 100px; } .w35 { width: 35px; } .w35p { width: 35%; } .h7 { height: 7px !important; } .w40p { width: 40%; } .h373 { height: 373px; } .pl30 { padding-left: 30px !important; } .pt20 { padding-top: 20px !important; } .pt30 { padding-top: 30px !important; } .wh10 { height: 10px !important; width: 10px !important; } .pt35 { padding-top: 35px !important; } .w140 { width: 140px; } .w-filter-right { width: calc(100% - 140px); } .h379 { height: 379px; } .h377 { height: 377px !important; } .bottom-15 { bottom: 15px; } .w86p { width: 86%; } .max-w250 { max-width: 250px; } .w350 { width: 350px; } .ml25 { margin-left: 25px !important; } .w250 { width: 250px !important; } .mt40 { margin-top: 40px !important; } .end10 { right: 10px !important; } .w95p { width: 95% !important; } .max-w900 { max-width: 900px; } /*x-editable*/ .editable-container .select2-container { min-width: 110px; } .editable-click { border-bottom-color: transparent; } a.editable-click { border-bottom-color: transparent; } a.editable-click:hover { border-bottom-color: transparent; } /*datatable*/ table.dataTable { border-collapse: collapse; box-sizing: border-box; } .dataTable:not(.js-selection-mode) td:hover { background: #f9f9f9; } .dataTable:not(.js-selection-mode) tbody tr:hover td { background: #f9f9f9 !important; } .dataTable:not(.js-selection-mode).no-hover tr:hover td, .dataTable:not(.js-selection-mode).no-hover tbody tr:hover { background: transparent !important; } .dataTable:not(.js-selection-mode) tbody tr { border-color: #f1f1f5 !important; color: #4e5e6a; } .dataTable:not(.js-selection-mode) tbody tr.active td, .dataTable:not(.js-selection-mode) tbody tr.active:hover td { background: #6690F4 !important; color: #fff !important; cursor: default; } .dataTable:not(.js-selection-mode) tbody tr.active .badge { color: #00b393; background-color: #fff !important; } .dataTable:not(.js-selection-mode) tbody tr.active a.link { color: #fff; } .dataTable:not(.js-selection-mode) tbody tr:hover td { background: #f9f9f9; } table.dataTable { border-bottom: 1px solid #f1f1f5; } table.dataTable tbody td:first-child { padding-left: 15px !important; } table.dataTable thead th { border-top: 1px solid #f1f1f5; padding: 15px 20px 15px 10px !important; color: #4e5e6a; } table.dataTable thead th:first-child { padding-left: 15px !important; } table.dataTable thead th.dt-orderable-asc.dt-ordering-asc .dt-column-order::after, table.dataTable thead th.dt-orderable-asc.dt-ordering-asc .dt-column-order::before, table.dataTable thead th.dt-orderable-asc.dt-ordering-desc .dt-column-order::after, table.dataTable thead th.dt-orderable-asc.dt-ordering-desc .dt-column-order::before, table.dataTable thead th.dt-orderable-desc.dt-ordering-asc .dt-column-order::after, table.dataTable thead th.dt-orderable-desc.dt-ordering-asc .dt-column-order::before, table.dataTable thead th.dt-orderable-desc.dt-ordering-desc .dt-column-order::after, table.dataTable thead th.dt-orderable-desc.dt-ordering-desc .dt-column-order::before { content: ""; background-color: #4e5e6a; transition: opacity 0.2s ease, visibility 0.2s ease; height: 13px; width: 10px; } table.dataTable thead th.dt-orderable-asc.dt-ordering-asc .dt-column-order::after, table.dataTable thead th.dt-orderable-desc.dt-ordering-asc .dt-column-order::after { display: none; } table.dataTable thead th.dt-orderable-asc.dt-ordering-asc .dt-column-order::before, table.dataTable thead th.dt-orderable-desc.dt-ordering-asc .dt-column-order::before { bottom: 38%; opacity: 1; mask: url("../images/arrow-up.svg") no-repeat center; -webkit-mask: url("../images/arrow-up.svg") no-repeat center; } table.dataTable thead th.dt-orderable-asc.dt-ordering-desc .dt-column-order::before, table.dataTable thead th.dt-orderable-desc.dt-ordering-desc .dt-column-order::before { display: none; } table.dataTable thead th.dt-orderable-asc.dt-ordering-desc .dt-column-order::after, table.dataTable thead th.dt-orderable-desc.dt-ordering-desc .dt-column-order::after { top: 38%; opacity: 1; mask: url("../images/arrow-down.svg") no-repeat center; -webkit-mask: url("../images/arrow-down.svg") no-repeat center; } table.dataTable thead th.dt-orderable-asc.dt-type-numeric, table.dataTable thead th.dt-orderable-desc.dt-type-numeric { text-align: left; } table.dataTable thead th.dt-orderable-asc:hover, table.dataTable thead th.dt-orderable-desc:hover { outline: none !important; } table.dataTable.stripe tbody tr.odd { background-color: #fff; } table.dataTable.row-border tbody th, table.dataTable.row-border tbody td { border: 1px solid #f1f1f5; background-color: #fff; } table.dataTable.display tbody th, table.dataTable.display tbody td { border-top: 1px solid #f1f1f5; background-color: #fff; color: #4e5e6a; } table.dataTable.display tfoot th, table.dataTable.display tfoot td { border-top: 1px solid #f1f1f5; background-color: #fff; } table.dataTable.b-b-only tbody th, table.dataTable.b-b-only tbody td { border: none; border-bottom: 1px solid #f1f1f5; } table.dataTable tbody th, table.dataTable tbody td { padding: 12px 10px !important; } table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control { padding-left: 35px !important; position: relative; } table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control:before { content: ""; background-color: #4e5e6a; mask: url("../images/chevron-right.svg") no-repeat center; -webkit-mask: url("../images/chevron-right.svg") no-repeat center; transition: all 0.2s ease-out; position: absolute; top: 40%; left: 10px; height: 10px; width: 10px; margin-right: 0 !important; border: none !important; } table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control .text-break-space { display: block; width: 230px; white-space: break-spaces; } table.dataTable.dtr-inline.collapsed tbody tr td.dtr-control.file-name-section { display: flex; align-items: center; } table.dataTable.dtr-inline.collapsed tbody tr td.child { background: #f9f9f9; } table.dataTable.dtr-inline.collapsed tbody tr.dt-hasChild td.dtr-control:before { content: ""; background-color: #4e5e6a; mask: url("../images/chevron-down.svg") no-repeat center; -webkit-mask: url("../images/chevron-down.svg") no-repeat center; transition: all 0.2s ease-out; position: absolute; left: 12px; height: 10px; width: 10px; border: none !important; } table.dataTable.dtr-inline.collapsed tbody tr.active td.dtr-control:before { background-color: #fff !important; } table.dataTable.dtr-inline.collapsed tbody tr.active td.dtr-control:after { background-color: #fff !important; } table.dataTable.hide-dtr-control.dtr-inline.collapsed tbody tr td.dtr-control { padding-left: 10px !important; } table.dataTable.hide-dtr-control.dtr-inline.collapsed tbody tr td.dtr-control:before { display: none !important; } table.dataTable.no-header-top-border thead th { border-top: none !important; } table.dataTable.no-body-top-bottom-border tbody tr:first-child td { border-top: none !important; } table.dataTable.no-body-top-bottom-border tbody tr:last-child td { border-bottom: none !important; } table.dataTable .dt-orderable-asc .dt-column-order, table.dataTable .dt-orderable-desc .dt-column-order { right: 2px !important; } table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after, table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before { visibility: hidden; opacity: 0; content: ""; background-color: #4e5e6a; height: 12px; width: 12px; } table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before { mask: url("../images/chevron-up.svg") no-repeat center; -webkit-mask: url("../images/chevron-up.svg") no-repeat center; } table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after { mask: url("../images/chevron-down.svg") no-repeat center; -webkit-mask: url("../images/chevron-down.svg") no-repeat center; } table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover .dt-column-order::after, table.dataTable .dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover .dt-column-order::before, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover .dt-column-order::after, table.dataTable .dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc):hover .dt-column-order::before { visibility: visible; opacity: 1; } table.dataTable > tbody > tr.child ul.dtr-details > li { border-color: #f1f1f5; } .datatable-tools { margin-top: 15px !important; } .datatable-tools .dt-length { float: left; } .datatable-tools:last-child { margin: 15px 0 !important; } .datatable-tools input[type=radio], .datatable-tools input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .datatable-export a { display: inline-block; box-shadow: none !important; border: 1px solid #f1f1f5; margin: 0 -2px; padding: 6px 10px; color: #4e5e6a; } .datatable-export a:hover { background: #f1f1f5; } table.dataTable tfoot th, table.dataTable tfoot td { padding: 10px; } button.DTTT_button, div.DTTT_button { background: #fff; border-color: #f1f1f5 !important; text-decoration: none; } a.DTTT_button { background: #fff; border-color: #f1f1f5 !important; text-decoration: none; } a.DTTT_button:focus { background: #fff; border-color: #f1f1f5 !important; text-decoration: none; } a.DTTT_button:hover { background: #f1f1f5; } div.DTTT_container { margin-bottom: 15px; position: relative; float: right; } table.dataTable thead .sorting { background-image: none; } .dt-search { float: none; margin: 0; } .dt-search input { border-radius: 5px; border: 1px solid #f1f1f5; box-shadow: none; padding: 7px 25px 7px 10px; outline: none; font-weight: normal; background: url("../images/search.png") no-repeat 96% 45% #fff; width: 200px !important; transition: all 0.5s; height: 32px; } .datatable-search, .custom-filter-search { border-radius: 5px; border: 1px solid #f1f1f5; box-shadow: none; padding: 7px 10px; outline: none; font-weight: normal; background: url("../images/search.png") no-repeat 96% 45% #fff; width: 200px !important; transition: all 0.5s; height: 32px; } .dt-search input:focus, .datatable-search:focus, .custom-filter-search:focus { border-color: #f0f0f0; background-color: #f0f0f0; } .dt-container .dt-paging .dt-paging-button { background: #fff !important; border-radius: 5px; } .dt-container .dt-paging .dt-paging-button.disabled .page-link { background-color: transparent !important; } .dt-container .dt-paging .dt-paging-button .page-link { border: 1px solid transparent; color: #4e5e6a !important; padding: 0.5em 1em; border-radius: 5px; } .dt-container .dt-paging .dt-paging-button .page-link:hover { background: none; border: 1px solid #f1f1f5; border-radius: 5px; } .dt-container .dt-paging .dt-paging-button .page-link:focus { box-shadow: none; } .dt-container .dt-paging .dt-paging-button.active .page-link { background: none; border: 1px solid #f1f1f5; color: #4e5e6a !important; cursor: default; border-radius: 5px; } .dt-container .dt-paging .dt-paging-button.page-item:not(:first-child) .page-link { margin-left: 0px !important; } .dt-container .dt-processing { height: 60px; } .dt-container .datatable-tools .pagination { margin: 2px 0; white-space: nowrap; justify-content: flex-end; } .dt-container .datatable-tools .select2-container { background: 0 0; box-shadow: none; border: none; padding: 0; } .dt-container .dt-buttons .buttons-excel, .dt-container .dt-buttons .buttons-print { color: #4e5e6a; } .dt-info { color: #4e5e6a !important; opacity: 0.6; } .select2-container .select2-choice { height: 35px; background: #f9f9f9 !important; border-radius: 5px; } table.dataTable.no-padding td { padding: 0 !important; } #message-table td:first-child { padding-left: 0 !important; } .no-thead thead { display: none; } td .progress { box-shadow: none !important; height: 8px; margin: 10px 10px 10px 10px; } .dataTable .badge { display: inline-block; padding: 4px 5px; margin-bottom: 2px; } table.header-style { width: 100%; } .filter-multi-select.open, .filter-multi-select:focus, .filter-multi-select:active { border-color: #f1f1f5 !important; } .dropdown-toggle { border-color: #f1f1f5 !important; } .filter-multi-select .dropdown-menu, .dynamic-range-filter .dropdown-menu { padding: 4px; } .filter-multi-select .list-group-item, .dynamic-range-filter .list-group-item { padding: 6px 10px; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 2px solid #fff !important; } .filter-multi-select .list-group-item:not(.active):hover, .dynamic-range-filter .list-group-item:not(.active):hover { background-color: #f1f1f5; } .filter-multi-select .caret:after, .dynamic-range-filter .caret:after { color: #9699a8; float: right; margin-top: 9px !important; margin-left: 6px; } .filter-multi-select .dropdown-toggle, .dynamic-range-filter .dropdown-toggle { color: #4e5e6a; border-color: #f1f1f5 !important; text-align: left; } .filter-multi-select .dropdown-toggle:hover, .filter-multi-select .dropdown-toggle:focus, .dynamic-range-filter .dropdown-toggle:hover, .dynamic-range-filter .dropdown-toggle:focus { background: transparent; } .dt-print-view { overflow: auto !important; height: auto !important; background-color: #fff !important; } .dt-print-view h1 { text-align: center; color: #000 !important; } .dt-print-view table.dataTable thead th { background-color: #fff; color: #000; border-color: #f1f1f5 !important; } .dt-print-view table.dataTable.display tbody tr:hover td { background-color: #f1f1f5 !important; } .dt-print-view table.dataTable.display tbody td { background-color: #fff; color: #000; border-color: #f1f1f5 !important; } /*table*/ .table-responsive { width: 100%; max-width: 100%; border: none !important; } td.option a, .action-option { cursor: pointer; min-width: 28px; background: #fff; color: #9699a8; border-radius: 5px; display: inline-block; position: relative; vertical-align: middle; text-align: center; margin: 0 5px; padding: 2px 0 3px 0; border: 1px solid #f1f1f5; } td.option a.square-btn, .action-option.square-btn { border-radius: 5px; padding: 5px 8px !important; } .dtr-details { width: 100%; } .dtr-details li.text-right, .dtr-details li.text-left, .dtr-details li.text-center { text-align: left !important; } .dtr-details .edit:not(.dropdown-item), .dtr-details .delete:not(.dropdown-item) { cursor: pointer; min-width: 28px; background: #fff; color: #9699a8; border-radius: 50%; display: inline-block; position: relative; vertical-align: central; text-align: center; margin: 0 5px; padding: 3px 0px; border: 1px solid #f1f1f5; } .dtr-details .edit:not(.dropdown-item):hover, .dtr-details .delete:not(.dropdown-item):hover { background: #0abb87; color: #fff; border: 1px solid #0abb87; } .dtr-details .delete:not(.dropdown-item):hover { background: #fd1361; color: #fff; border: 1px solid #fd1361; } .select-member-field a.delete, .send-invitation-form .delete, .automation-form .delete, .calendar-ids-form .delete-post-dropzone, .edit-image-file .delete-saved-file, .external-tickets-embedded-code, .conversion-rate-form .delete, .copy-file-link { cursor: pointer; min-width: 28px; background: #fff; color: #9699a8; border-radius: 50%; display: inline-block; position: relative; vertical-align: central; text-align: center; margin: 0 5px; padding: 2px 0 2.5px 0; border: 1px solid #f1f1f5; } tr.child ul.dtr-details > li { display: table; width: 100%; } .dtr-title { display: table-cell; padding: 0.5em 0; } .dtr-data { display: table-cell; text-align: right; padding: 0.5em 0; } td.option a:hover, .external-tickets-embedded-code:hover, .action-option:hover, .copy-file-link:hover { background: #0abb87; color: #fff; border: 1px solid #0abb87; } td.option a:hover.light, .external-tickets-embedded-code:hover.light, .action-option:hover.light, .copy-file-link:hover.light { background: #f1f1f5; color: #9699a8; border: 1px solid #f1f1f5; } td.dropdown-option button { cursor: pointer; min-width: 28px; background: #fff; color: #9699a8; display: inline-block; position: relative; vertical-align: central; text-align: center; border: 1px solid #f1f1f5; transition: 0.2s; padding: 5px 9px; } td.dropdown-option button:hover, td.dropdown-option button:focus, td.dropdown-option button:active { background-color: #2ac2d4 !important; color: #fff !important; border-color: #2ac2d4 !important; } td.option a.delete:hover { background: #fd1361; color: #fff; border: 1px solid #fd1361; } .select-member-field a.delete:hover, .send-invitation-form .delete:hover, .automation-form .delete:hover, .calendar-ids-form .delete-post-dropzone:hover, .edit-image-file .delete-saved-file:hover, .conversion-rate-form .delete:hover { background: #fd1361; color: #fff; border: 1px solid #fd1361; } .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border: 1px solid #f1f1f5; } /*full calendar*/ #calendar-filter-dropdown .DTTT_container { margin: 0; } .fc-button-group .fc-button-primary, .fc-toolbar-chunk .fc-button-primary { color: #4e5e6a !important; } .fc-daygrid-dot-event { padding: 0 !important; } .fc-icon { font-size: 1.65rem !important; } .custom-toolbar .select2-container .select2-choice { background-color: #fff !important; border-color: #f1f1f5 !important; } .custom-toolbar .dropdown-toggle { background-color: #fff !important; } .fc-button { border-radius: 5px !important; border-color: #f1f1f5 !important; background: #fff !important; height: auto !important; padding: 5px 10px !important; } .fc-button:hover { background: #E6E6E6 !important; } .fc-button:focus { outline: none; box-shadow: none !important; } .fc-state-active { background-color: #f1f1f5 !important; box-shadow: none !important; } .fc-event { border-radius: 0 !important; } .fc-content { cursor: pointer; padding: 5px; } .fc-day-grid-event .fc-time { display: none; } .fc-icon { line-height: 0.6 !important; height: 17px !important; } .fc-button { color: #4e5e6a !important; } .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 15px !important; } .fc-col-header-cell-cushion, .fc-daygrid-day-number { color: #4e5e6a !important; } .fc-theme-standard .fc-list-empty { background-color: #f9f9f9 !important; } .fc-theme-standard .fc-list { border-color: #f1f1f5 !important; } .calender-mobile-view .fc-header-toolbar { display: block !important; text-align: center; } .calender-mobile-view .fc-header-toolbar .fc-button-group { float: left; } .calender-mobile-view .fc-header-toolbar .fc-button-group:last-child { float: none; margin-top: 10px; } .calender-mobile-view .fc-header-toolbar .fc-today-button { float: right; } .calender-mobile-view .fc-header-toolbar .fc-toolbar-title { font-size: 1.3rem; margin: 10px 0; } @media (min-width: 500px) { .calender-mobile-view #event-calendar { height: 482px !important; } } .calender-mobile-view .fc-scrollgrid-sync-table { height: auto !important; } .select2-results .select2-highlighted { background-color: #6690F4; } /*dropzone*/ .dropzone { border: 1px dashed #ccc !important; border-radius: 5px; } .dropzone.dz-drag-hover { background-color: rgba(0, 0, 0, 0.02); } .dropzone .dz-image { background: #eee; border-radius: 2px !important; } .dz-started { padding: 0 !important; } .upload-thumbnail-sm { height: 80px; width: 80px; border: none !important; background: url("../images/filepreview.jpg") #eee no-repeat center center; outline: none; } .upload-progress-sm { height: 80px; width: 80px; height: 10px; border-radius: 0px; } #pre-loader { position: fixed; width: 100%; height: 100%; background-color: #f9f9f9; z-index: 10; } /*post dropzone*/ .post-dropzone { background: #fff; border-radius: 5px; } .post-dropzone.dz-drag-hover { border: 1px dashed #337ab7; } .post-dropzone.dz-drag-hover * { opacity: 0.2; } .post-dropzone .preview:hover img { opacity: 0.2; } .post-dropzone .delete { width: 24px; height: 24px; margin-left: -24px; font-size: 1.8rem; cursor: pointer; color: #fff; position: absolute; opacity: 0.8; display: inline-block; margin-top: 0; text-align: center; line-height: 20px; } .post-dropzone .preview:hover img { opacity: 0.5; } .post-dropzone .preview:hover .delete { opacity: 1; background-color: #000; } .post-dropzone .preview:hover .copy-link { display: inline-block !important; background-color: #000; } .post-dropzone .copy-link { width: inherit; cursor: pointer; color: #fff; position: absolute; display: none; text-align: center; line-height: 23px; bottom: -1px; background: #f0f0f0; } /*datepicker*/ .datepicker.dropdown-menu { border-radius: 5px; border: 1px solid #f1f1f5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .datepicker.datepicker-dropdown::before { border-bottom-color: rgba(0, 0, 0, 0.1); } .datepicker table tr td, .datepicker table tr th, .datepicker table tr td span { border-radius: 0; } .datepicker table tr td.disabled { opacity: 0.6; } .week-view tr:hover .day:not(.active) { background-color: #f1f1f5 !important; } .datepicker-custom-list .list-group-item { padding: 6px 15px; cursor: pointer !important; border: none !important; } .datepicker-custom-list .list-group-item:not(.active):hover { background-color: #f5f5f5; } .datepicker-custom-selector { background: #fff; border-color: #f1f1f5 !important; color: #4e5e6a; text-align: left; } .datepicker-custom-selector .dropdown-toggle { float: right; } .datepicker-custom-selector .dropdown-toggle:after { color: #9699a8; } .datepicker-custom-selector:hover, .datepicker-custom-selector:focus { border-color: #f1f1f5; } /*timepicker*/ .bootstrap-timepicker-widget table td input { display: inline-block; } /*scrollbar*/ .mCS-minimal-dark .mCSB_dragger .mCSB_dragger_bar { opacity: 0.5 !important; } .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical { margin-right: -2px; } #sidebar .mCSB_2_scrollbar { margin-right: -6px; } .sidebar-toggled .sidebar-scroll .ps__rail-x, .sidebar-toggled .sidebar-scroll .ps__rail-y { display: none; } /* magnificPopup */ .mfp-counter { top: 6px !important; cursor: auto; right: 10px !important; } .mfp-bg { z-index: 1061 !important; } .mfp-wrap { z-index: 1062 !important; } .full-width-mfp-content { max-width: none !important; } /*crop-box*/ .crop-box { position: relative; height: 400px; width: 100%; background: #fff; overflow: hidden; background-repeat: no-repeat; background-position: center; cursor: move; } .crop-box .thumb-box { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; box-sizing: border-box; box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5); background: none repeat scroll 0% 0% transparent; } .crop-box .spinner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; line-height: 400px; background: rgba(0, 0, 0, 0.7); } /*awesomplete*/ .awesomplete { display: block; } .awesomplete ul { z-index: 10; text-align: left; background: #fff; border-color: #f1f1f5; } .awesomplete mark, .awesomplete li[aria-selected=true] mark, .awesomplete li:hover mark { background: transparent; padding: 0; } .awesomplete ul li { padding: 5px 8px; } .awesomplete ul li[aria-selected=true] { background: #6690F4; } .awesomplete ul li[aria-selected=false]:hover { background: #f1f1f5; } .atwho-view .cur, .note-hint-group .active, .note-hint-item:hover { background-color: #1d2c48 !important; transition: all 0.1s ease-in-out; } .note-hint-item { line-height: 1.4 !important; padding: 5px !important; } .note-hint-popover { border-radius: 0; padding: 0 !important; } .note-children-container { padding: 0 !important; } /*note-editor*/ .note-editor, .note-editor .note-toolbar, .note-editor .note-statusbar .note-resizebar, .note-editor .note-toolbar .btn { border-color: #f1f1f5 !important; } .note-editor .dropdown-toggle::after { display: none; } .note-editor.fullscreen { background: #fff; } .note-editor .dropdown-item { padding: 0 !important; } .note-editor .dropdown-item a { padding: 10px 20px; display: block; } .note-editor .dropdown-line-height { min-width: 90px !important; } .note-editor .note-toolbar { padding: 0 !important; border-bottom: 1px solid; } .note-editor .note-toolbar .note-btn-group { margin: 0 !important; } .note-editor .note-toolbar .note-btn-group .note-btn { border: none !important; } .note-editor .note-toolbar .note-btn-group .note-btn.btn-sm { padding: 6px 10px; } .note-editor .note-toolbar .note-btn-group .note-btn.btn-sm:hover, .note-editor .note-toolbar .note-btn-group .note-btn.btn-sm:active, .note-editor .note-toolbar .note-btn-group .note-btn.btn-sm:focus { border-radius: 0 !important; } .note-editor.note-frame { border-top-left-radius: 5px; border-top-right-radius: 5px; } .note-editor.note-frame .note-statusbar { border-color: #f1f1f5 !important; border-radius: 0 !important; } .note-btn-group .note-btn i { pointer-events: none; } .note-btn-group .note-btn .note-icon-caret { pointer-events: none; } .DTTT_container .input-daterange .btn { white-space: nowrap; } .DTTT_container .input-daterange .form-control { width: auto; } .DTTT_container .input-daterange .input-group-addon { margin-left: -5px !important; } .DTTT_container .btn.active { border-color: #f1f1f5 !important; } .DTTT_container .btn:hover, .DTTT_container .btn:active, .DTTT_container .btn:focus { border-color: #f1f1f5 !important; } div.dt-container div.dt-processing { top: 40% !important; } div.dt-container div.dt-processing.card { border: none; box-shadow: none !important; background: transparent; } div.dt-container div.dt-processing div:last-child div { background: #6690F4 !important; } div.dt-container div.dt-info { padding-top: 8px; margin-left: 15px; float: left; } #subscription-item-section table.dataTable thead th { border-top: none !important; } #subscription-total-section table.dataTable tbody td { border-top: none !important; } .filter-section-container .select2-choice, .datatable-tools .select2-choice, .timesheet-buttons .select2-choice, .item-categories-filter-section .select2-choice, .payment-received-chart .select2-choice { background: transparent !important; border-color: #f1f1f5 !important; border-radius: 5px; color: unset !important; } .filter-section-container input[type=radio], .filter-section-container input[type=checkbox], .datatable-tools input[type=radio], .datatable-tools input[type=checkbox], .timesheet-buttons input[type=radio], .timesheet-buttons input[type=checkbox], .item-categories-filter-section input[type=radio], .item-categories-filter-section input[type=checkbox], .payment-received-chart input[type=radio], .payment-received-chart input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .non-round-option-button { border-radius: 4px !important; padding: 4px 10px !important; } #task-table_wrapper .filter-collapse-button, #project-table_wrapper .filter-collapse-button, #ticket-table_wrapper .filter-collapse-button { display: none; } .custom-date-range-lable { padding: 8px 14px 5px 10px !important; border: 1px solid #f1f1f5; } .custom-date-range-dropdown .list-group { list-style-type: none; } .custom-date-range-dropdown .dropdown-toggle { margin: -4px -6px 0; padding: 7px 12px 6px 10px !important; border: 1px solid #f1f1f5; } .mfp-iframe-holder .mfp-content { max-width: 100%; } .mfp-iframe-scaler iframe { background: #fff; color: #000; } .input-daterange .btn { width: auto; white-space: nowrap; } .input-daterange .input-group-addon { margin-right: 0px; } .bootstrap-timepicker-widget.dropdown-menu.open { z-index: 1056; } .note-popover.popover { position: absolute; } .fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .fc-theme-standard td, .fc-theme-standard th { border-color: #f1f1f5 !important; } .fc .fc-scrollgrid { border-color: #f1f1f5 !important; } .select2-drop { border-radius: 0 0 6px 6px; } .select2-drop-active { border-color: #f1f1f5; } .select2-search input { border-color: #f1f1f5; } .select2-container .select2-choice .select2-search-field input { border-color: #f1f1f5 !important; background: #f9f9f9 !important; } .select2-container-multi .select2-choices { border-color: #f9f9f9 !important; background: #f9f9f9 !important; } .dz-image-preview img[alt$=".png"] { background: #fff; } .tox .tox-tbtn { color: #4e5e6a !important; } .tox .tox-tbtn svg { fill: #4e5e6a !important; } .tox .tox-tbtn.tox-tbtn--enabled { background: #f0f0f0 !important; } .tox .tox-tbtn:not(.tox-tbtn--bespoke):active { background: #f0f0f0 !important; } .tox .tox-collection--list .tox-collection__item--active { background-color: #6690F4 !important; } .tox .tox-tbtn--bespoke { background: url("../images/type.png") no-repeat 10% !important; width: 36px !important; } .tox .tox-tbtn--bespoke .tox-tbtn__select-label { color: transparent !important; } .tox.tox-tinymce { border: 1px solid #f1f1f5; border-radius: 5px !important; } .tox .tox-statusbar { border-color: #f1f1f5 !important; } .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary { background-image: repeating-linear-gradient(#f1f1f5 0 1px, transparent 1px 39px) !important; } .tox .tox-edit-area::before { border: none !important; } .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -10px rgba(34, 47, 62, 0.07) !important; } .tox .tox-tbtn:focus::after { box-shadow: none !important; } #ticket-reminders table.dataTable { border-bottom: none !important; } #ticket-reminders table.dataTable tbody tr:last-child td { border-bottom: none !important; } .details-view-right-section table.dataTable .dt-empty { display: none; } #client-details-page-contact-table { border-bottom: none !important; } #client-details-page-contact-table tbody tr:last-child td:first-child { border-bottom-left-radius: 5px; } #client-details-page-contact-table tbody tr:last-child td:last-child { border-bottom-right-radius: 5px; } .no-display-length .datatable-tools .col-md-12:first-child { display: none; } .message-view .datatable-tools .col-md-3 { width: 35% !important; } .message-view .datatable-tools .col-md-9 { width: 65% !important; } .iti { width: 100% !important; } .iti .iti__dropdown-content { padding: 5px; border: 1px solid #f1f1f5 !important; } .iti .iti__dropdown-content .iti__search-input { padding: 6px 10px 6px 30px !important; outline: none !important; border: 1px solid #f1f1f5 !important; } .iti .iti__dropdown-content .iti__country-list { margin-top: 5px; } @keyframes spin { 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes slidedown { from { top: -100%; } to { top: 0; } } @-webkit-keyframes slidedown { from { top: -100%; } to { top: 0; } } @keyframes line { 0% { width: 35px; left: 0%; } 50% { width: 100px; left: 25%; } 100% { left: 88%; width: 35px; } } @-webkit-keyframes line { 0% { width: 35px; left: 0%; } 50% { width: 100px; left: 25%; } 100% { left: 88%; width: 35px; } } @-webkit-keyframes blink { 50% { opacity: 1; } } /*animated clock*/ @keyframes animatedClockSecRotate { 0% { transform: rotate(0deg) translate(0, -2px); } 100% { transform: rotate(360deg) translate(0, -2px); } } @-webkit-keyframes animatedClockSecRotate { 0% { transform: rotate(0deg) translate(0, -2px); } 100% { transform: rotate(360deg) translate(0, -2px); } } @-webkit-keyframes slideInRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @-webkit-keyframes slideOutRight { from { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes slideInLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-in-right { animation: slideInRight 0.3s ease-out forwards; } .slide-out-right { animation: slideOutRight 0.3s ease-out forwards; } .slide-out-left { animation: slideOutLeft 0.3s ease-out forwards; } .slide-in-left { animation: slideInLeft 0.3s ease-out forwards; } @keyframes pulse { 0%, 100% { transform: scale(0.9); opacity: 1; } 50% { transform: scale(1); opacity: 0.8; } } @keyframes dotMove { 0% { left: 5%; opacity: 0; } 10% { opacity: 1; } 90% { left: 90%; opacity: 1; } 100% { left: 90%; opacity: 0; } } @keyframes dashMove { to { background-position: 12px 0; } } html, body { background-color: #f9f9f9; color: #4e5e6a; font-family: "Inter", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; height: 100%; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; overflow: hidden; overflow-x: hidden; --bs-body-color: #4e5e6a; } h1, h2, h3, h4 { font-weight: normal; } h1, h2, h3 { margin: 10px 0; } h4, h5, h6 { margin: 10px 0; } h4 { font-size: 18px; } h5 { font-weight: 600; } blockquote { background: rgba(242, 242, 242, 0.42); margin: 0; padding: 10px 20px; border-left: 5px solid #f1f1f5; } pre { display: block; padding: 9.5px; line-height: 1.42857143; color: #4e5e6a; word-break: break-all; background-color: #f9f9f9; border-radius: 5px; border: none; margin: 0; white-space: normal; } .invisible { visibility: hidden; } a { color: #29689e; text-decoration: none; } a:hover, a:active, a:focus { text-decoration: none; } a:active { outline: none; } a.dark { color: #4e5e6a; } a.dark:hover { color: #000; } .dark { color: #4e5e6a; } .strong { font-weight: 600 !important; } .text-off { opacity: 0.6; } .uppercase { text-transform: uppercase; } p { margin-bottom: 0.65rem; } small { font-size: 0.825em; } .hide { display: none !important; } .avatar { display: inline-block; white-space: nowrap; } .avatar.primary-contact img { border: 2px solid #6690F4; } .avatar-lg { width: 125px; height: 125px; } .avatar-md { width: 80px; height: 80px; } .avatar-sm { width: 50px; height: 50px; } .avatar-xs { width: 30px; height: 30px; } .avatar-xxs { width: 25px; height: 25px; } .avatar img { height: auto; max-width: 100%; border-radius: 50%; } i.online { height: 12px; width: 12px; background: #42b72a; border-radius: 50%; display: inline-block; position: relative; border: 2px solid #fff; } .avatar i.online { margin-left: -12px; top: 11px; } .box { display: table; table-layout: fixed; border-spacing: 0; width: 100%; } .box-content { display: table-cell; vertical-align: top; height: 100%; float: none; overflow-x: hidden; } .box.fit .box-content { width: 100%; } .clickable { cursor: pointer; } .not-clickable { cursor: default !important; } /*border*/ .b-a { border: 1px solid #f1f1f5 !important; } .b-t { border-top: 1px solid #f1f1f5; } .b-r { border-right: 1px solid #f1f1f5; } .b-b { border-bottom: 1px solid #f1f1f5 !important; } .b-l { border-left: 1px solid #f1f1f5; } .b-turquoise { border-color: #00b393 !important; } .b-bold { border-width: 2px; } .b-water { border-color: rgba(255, 255, 255, 0.2) !important; } .no-border { border: none !important; } .b-white { border-color: #fff !important; } .b-silver { border-color: #e2e4e7 !important; } .border-circle { border-radius: 50% !important; } .border-start { border-color: #f1f1f5 !important; } .border-end { border-color: #f1f1f5 !important; } .border-top { border-color: #f1f1f5 !important; } .border-bottom { border-color: #f1f1f5 !important; } .bg-success .border-end { border-color: rgba(255, 255, 255, 0.1) !important; } .bg-success .border-top { border-color: rgba(255, 255, 255, 0.1) !important; } .no-border-top-radius { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } /*button*/ .btn.round { border-radius: 50px; } .btn-sm { font-size: 0.8em; } .btn-lg { padding: 10px 16px; font-size: 1.3em; line-height: 1.3333333; } .send-message-btn { padding: 0 0.2rem; } .btn-default { background-color: #fff; border: 1px solid #f1f1f5; color: #4e5e6a; } .btn-default:hover { background-color: #E6E6E6; border-color: #E6E6E6; } .btn-default:active, .btn-default:focus { border-color: #E6E6E6 !important; background-color: #E6E6E6 !important; } .btn-primary { border-color: #6690F4; background-color: #6690F4; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #4076f2; border-color: #4076f2; color: #fff; } .btn-success { background: #0abb87; border-color: #0abb87; } .btn-success:hover, .btn-success:active, .btn-success:focus { background: #08976d; border-color: #08976d; color: #fff; } .btn-info { background: #38a4f8; border: 1px solid #38a4f8; } .btn-info:hover, .btn-info:active, .btn-info:focus { background: #098DF4 !important; border-color: #098DF4 !important; color: #fff; } .btn-warning { color: #111; background: #ffb822; border-color: #ffb822; } .btn-warning:hover, .btn-warning:active, .btn-warning:focus { color: #212529; background: #fbaa00; border-color: #fbaa00; } .btn-danger { background: #f5325c; border-color: #f5325c; } .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background: #fd1361 !important; border-color: #fd1361 !important; color: #fff !important; } .btn.active { box-shadow: none; background: #f1f1f5; cursor: default; outline: none; } .btn.active:focus { box-shadow: none; background: #f1f1f5; cursor: default; outline: none; } .filter .btn-default:hover { background: #E6E6E6; border-color: #f1f1f5; } .filter .btn-default.active:hover { background: #E6E6E6; } .btn-transparent { background-color: transparent; border: 2px solid #fff; color: #fff; } .btn-transparent:hover { background-color: #fff; } .load-more { position: relative; border: none; width: 100%; border-radius: 50px; } .load-more.spinning-btn.spinning:before { right: 15px !important; } .option { padding: 1.5rem 1rem !important; text-align: center; } @media (max-width: 400px) { .option { text-align: right !important; } } .option svg { margin-top: -2px !important; } .delete-button { padding: 0 5px; color: #a1a3a5; border-color: #a1a3a5; } .delete-button svg { margin-top: 0 !important; } .spinning-btn { position: relative; } .spinning-btn.spinning { padding-right: 35px; } .spinning-btn.spinning:before { content: ""; width: 20px; height: 20px; border-radius: 50%; right: 6px; position: absolute; border: 2px solid #fff; border-right: 2px solid #6690F4; animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; } .download-loader.spinning-btn.spinning { padding-right: 30px; } .download-loader.spinning-btn.spinning:before { right: unset; } .download-loader-lg.spinning-btn.spinning:before { margin-top: 5px; } .search-box .spinning-btn { display: flex; } .search-box .spinning-btn.spinning:before { top: -36px; animation: spin 0.35s infinite linear; -webkit-animation: spin 0.35s infinite linear; } .icon { width: 20px; height: 20px; } .icon-14 { width: 14px; height: 14px; } .icon-16 { width: 16px; height: 16px; } .icon-18 { width: 18px; height: 18px; } .icon-20 { width: 20px; height: 20px; } .icon-22 { width: 22px; height: 22px; } .icon-32 { width: 32px; height: 32px; } .icon-40 { width: 40px; height: 40px; } .btn-outline-light { color: #4e5e6a !important; } @media (max-width: 400px) { .add-member-button { border: none; padding-right: 0 !important; } } .title-button-group { float: right; } .title-button-group .dropdown svg { margin-top: -3px; } .btn-close:focus { box-shadow: none; } /*font-size*/ .font-11 { font-size: 11px !important; } .font-14 { font-size: 14px !important; } .font-16 { font-size: 16px !important; } .font-18 { font-size: 18px !important; } .font-20 { font-size: 20px !important; } .font-22 { font-size: 22px !important; } .font-normal { font-size: 1em !important; } /*card*/ .card { border: 1px solid #f1f1f5; margin-bottom: 20px; transition: all 1s; } .card .card-header { background-color: #fff; border-color: #f1f1f5; padding: 12px 16px; } .card .card-header h6 { margin-top: 8px; } .card .card-header:first-child { border-radius: 5px 5px 0 0; } .card table .badge { margin-top: 8px; } .card table p { margin-bottom: 0 !important; } .card .card-body { padding: 15px; } .card .nav-tabs { border: none; border-bottom: 1px solid #f1f1f5; } .card-footer { background-color: #f5f5f5; border-top: 1px solid #fff; padding: 10px 15px; } .bg-white .card-header { background-color: #fff; color: inherit; font-weight: 600; border-color: #f1f1f5; padding: 12px 16px; } .bg-white .card-header svg { margin-top: -1px; } .clock-in-out-card .clock-in-out-card { margin-bottom: 0 !important; box-shadow: none !important; } .project-members-section .card-title { margin-bottom: 0 !important; } /*widget*/ .dashboard-icon-widget .card-body { padding: 27px; } .widget-icon { float: left; background-color: #4466F2; height: 55px; width: 55px; display: flex; border-radius: 5px; align-items: center; justify-content: center; text-align: center; } .widget-icon .icon { width: 2rem; height: 2rem; color: #fff; } .widget-details { text-align: right; position: absolute; right: 20px; } .widget-details h1 { margin: 0; color: #000; font-size: 1.6rem; font-weight: 600; margin-bottom: 8px; } .widget-details span { color: #4e5e6a; } .cover-widget h1 { margin: 0; } .cover-widget .b-t, .cover-widget .b-r { border-color: rgba(0, 0, 0, 0.1); } .star-icon { padding: 5px 10px; color: #ffb822; } .star-icon:hover { color: #ffb822 !important; } .form-widget { margin-bottom: 25px; } .widget-title { padding: 10px 0px; } .form-widget .progress { height: 5px; } /*bg*/ .default-bg { background-color: #f9f9f9; } .bg-danger { background-color: #f5325c !important; color: #fff; } .bg-white { background: #fff !important; } .bg-off-white { background: #f2f4f6; } .bg-info { background-color: #38a4f8 !important; } .bg-primary { background-color: #6690F4 !important; color: #fff; } .bg-success { background-color: #485BBD !important; color: #fff; } .bg-dark-success { background-color: #6690F4; color: #fff; } .bg-coral { background-color: #FD397A; } .bg-orange { background-color: #ffb822; } .text-off { opacity: 0.6; } .white-link { color: #fff; } .white-link:hover { color: #fff; } .color-sky { color: #22B9FF !important; } .color-plum { color: #6610f2 !important; } /*color tag*/ .color-tag { display: inline-block; width: 15px; height: 15px; margin: 2px 10px 0 0; transition: all 300ms ease; -moz-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; } .color-tag.clickable:hover { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); } .color-tag.active { border-radius: 50%; } /*text-color*/ .text-primary { color: #6690F4 !important; } .text-info { color: #38a4f8 !important; } .text-danger { color: #f5325c !important; } .text-warning { color: #ffb822 !important; } .text-default { color: #4e5e6a !important; } /*form*/ label { font-weight: normal; max-width: 100%; margin-bottom: 5px; } .form-group { margin-bottom: 15px; } .form-group .app-loader { margin: -12px auto; width: 50px; height: 50px; left: 45%; } .form-group .app-loader .loading { width: 30px; height: 30px; } .form-signin { width: 100%; max-width: 450px; margin: 5% auto; } @media (max-width: 767px) { .form-signin { width: 90%; } } .form-signin .form-control { height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .input-group-addon { padding: 6px 15px; } .general-form .form-control { box-sizing: border-box; border: 1px solid #f1f1f5; border-color: #f9f9f9; background-color: #f9f9f9; color: #4e5e6a; box-shadow: none; transition: background 0.5s; } .general-form textarea { height: 75px; } .general-form textarea:focus { box-shadow: none; } .general-form .select2 { width: 100%; } .general-form .mini { max-width: 200px; } .general-form.white .form-control { border-color: #fff; background-color: #fff; } .general-form.white .form-group .row > label { margin-top: 5px; padding: 0 20px; } .general-form.white .select2-container .select2-choice { background-color: #fff !important; border-color: #fff !important; } .general-form.white .select2-container-multi.form-control { border-color: #fff !important; } .general-form.white .select2-container-multi.form-control .select2-choices { background: #fff !important; border: #fff !important; border-radius: 5px; } .general-form.white .select2-container-multi.form-control .select2-choices .select2-search-field input { background: #fff !important; border-color: #fff !important; } .form-control { height: 35px; } .has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { box-shadow: none; color: #ec5855; display: block; margin-top: 5px; margin-bottom: 10px; } .general-form .has-error .form-control { box-shadow: none; color: #ec5855; } .general-form .form-control.white { background-color: #fff; } .general-form .form-control:focus, .general-form .form-control.white:focus { border-color: #f0f0f0; background-color: #f0f0f0; } .general-form .input-group-addon { border-color: #f9f9f9; background: #f9f9f9; border-radius: 5px; } .form-control:focus { box-shadow: none; } .form-check-input { margin-right: 3px; margin-top: 2px; padding: 7px; } .file-upload { position: relative; overflow: hidden; margin: 10px; } .file-upload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .dashed-row .form-group { border-bottom: 1px dashed #f1f1f5; padding-bottom: 15px; } .dashed-row .form-group:last-child { border-bottom: none; padding-bottom: 0px; } .dashed-row .form-group .row label:first-child { padding: 0 20px; } .dashed-row .bd { border-bottom: 1px dotted #f1f1f5; } .select2-with-searchbox { padding-bottom: 5px; } /*bootstrap modal*/ .modal-content { border: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .modal-backdrop.in { filter: alpha(opacity=20); opacity: 0.2; } .modal-dialog { -webkit-transition: width 500ms ease; -moz-transition: width 500ms ease; -o-transition: width 500ms ease; transition: width 500ms ease; } .mini-modal { width: 300px !important; } body.modal-open { margin-right: 0px !important; } .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0px !important; } .modal-header { border-bottom: 1px solid #f1f1f5; padding: 16px 34px 16px 23px; } .modal-header .modal-title { margin-top: 0; } .modal-footer { border-top: 1px solid #f1f1f5; padding: 15px 30px; } .modal-footer .btn + .btn { margin-left: 10px; } .close { font-weight: normal; } .draggable { cursor: move; } /*tab*/ .nav-tabs { background: #fff; border: 1px solid #f1f1f5; border-radius: 5px 5px 0 0; } .nav-tabs .nav-link { border: none; margin-bottom: 0 !important; } .nav-tabs li { float: left; margin-bottom: -1px; } .nav-tabs li a { padding: 18px 15px 20px; margin-right: 0; border-radius: 0; color: inherit; line-height: 1.39; } .nav-tabs li a:not(.active):hover { background: transparent; border-color: transparent !important; color: #4e5e6a; } .nav-tabs li a.active::after { width: calc(100% - 28px) !important; left: 14px !important; background-color: #4e5e6a; transform: scaleX(1) !important; } .nav-tabs li:not(.title-tab) a::after { display: block; background-color: #4e5e6a; content: ""; left: 0; bottom: 0; width: 0; height: 2px; position: absolute; transform: scaleX(0); transform-origin: center; transition: transform 0.3s; } .nav-tabs li:not(.title-tab) a:not(.active):hover::after { width: calc(100% - 28px) !important; left: 14px !important; transform: scaleX(1); } .nav-tabs li .active, .nav-tabs li.active { font-weight: 600; border-radius: 0; cursor: default; color: #4e5e6a !important; border-bottom: 1px solid #f1f1f5 !important; background-color: transparent !important; border-color: transparent !important; } .nav-tabs li .active:focus, .nav-tabs li.active:focus { outline: none; } .nav-tabs.title li a { padding: 20px 15px; } .nav-tabs.title .title-button-group { margin-top: 3px; } .nav-tabs.title .tab-title { margin-left: auto; } .tab-title { border-bottom: 1px solid #f1f1f5; } .tab-title h4 { margin: 2px 0 0 0; padding: 15px; float: left; } .tab-title .title-button-group { float: right; margin: 0 10px 0; } .tab-title .btn { margin: 0.75rem 0.4rem; } .nav li, .nav li a { position: relative; display: block; } .nav .title-tab h4 { margin-top: 10px; margin-bottom: 10px; } .badge.up { position: relative; top: -10px; padding: 3px 6px; margin-left: -10px; margin-top: 0; } /*page*/ .page-container { height: 100%; margin-top: 65px; margin-left: 250px; } .public-page-container { margin-top: 65px; margin-left: 0; } .page-content { padding: 10px; } .page-wrapper { padding: 25px; } .page-title { background: #fff; border-bottom: 1px solid #f1f1f5; color: #4e5e6a; border-radius: 5px 5px 0 0; } .page-title h1 { font-size: 1.4em; margin: 0; padding: 20px 16px; float: left; } .page-title h1 svg { margin-top: -4px; } .page-title h4 { padding: 8px 16px; float: left; } .page-title .btn { margin: 16px 5px; } .page-title .btn svg { margin-top: -3px; } .page-title .title-button-group { margin: 0px 15px 0px 15px; } /*timeline*/ #timeline { list-style: none; width: 100%; min-height: 100%; margin: 0 auto; position: relative; overflow: hidden; } #timeline:before { content: ""; height: 100%; left: 50%; position: absolute; z-index: 0; top: 10px; margin-left: -5px; width: 10px; border-radius: 5px; background-image: linear-gradient(to top, #E5E9EC 0.1%, #f2f4f6 1%, #f2f4f6 99%); } #timeline .post-content { display: block; width: 50%; position: relative; padding-top: 40px; } #timeline .post-content:nth-child(odd) { float: left; clear: left; padding-right: 20px; } #timeline .post-content:nth-child(even) { float: right; clear: right; padding-left: 20px; } #timeline .post-content:nth-child(2n) { margin-top: 10px; } #timeline .post-content .post-date span { background: #6690F4; color: #fff; padding: 3px 10px 5px; border-radius: 25px; } #timeline .post-content .post-date:before { background: #f2f4f6; content: ""; left: -20px; top: 10px; position: relative; width: 20px; height: 2px; } #timeline .post-content:nth-child(odd) .post-date { text-align: right; } #timeline .post-content:nth-child(odd) .post-date:before { background: #f2f4f6; content: ""; margin-right: -40px; top: 10px; position: relative; width: 20px; height: 2px; float: right; } .timeline-images img { width: 100%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } .timeline-images img:hover { -webkit-filter: grayscale(100%); } .timeline-images span.more { padding: 5px 5px; background-color: #000; color: #fff; margin-top: 0px; position: absolute; width: 80px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 5px solid #22B9FF; margin-left: -80px; } .timeline-images .file-mockup { width: 100%; height: 455px; background: #E5E9EC; color: #77879D; text-align: center; display: table; table-layout: fixed; border-spacing: 0; transition: all 500ms ease; } .timeline-images .file-mockup:hover { cursor: pointer; filter: grayscale(100%); } .timeline-images .file-mockup .mt-12 { margin-top: 12rem !important; } .message-more { width: 40px !important; margin-left: -40px !important; border-bottom-left-radius: 22px; } .comment-image-box { width: 400px; } /*note*/ .notepad { position: relative; line-height: 30px !important; } .notepad:before { content: ""; position: absolute; width: 0px; top: 0; bottom: 0; } .notepad textarea { border: none; background-color: transparent; height: 100%; line-height: 30px; min-height: 200px; padding: 0 10px; } .notepad-title { border: none !important; padding-left: 7px; border-left: 5px solid #6690F4 !important; } .notepad .select2-choices { border-color: transparent; } /*details list*/ .details-list { list-style: none; margin: 0; padding: 0; } .details-list li { padding: 5px; } .details-list li span { display: inline-block; min-width: 120px; } /*message*/ .message-row { padding: 8px 15px; } .unread { border-left: 3px solid #6690F4; } .message-row.unread strong, .message-row.unread span { color: #6690F4; } .content-sidebar { width: 200px; } .content-sidebar .list-group .list-group-item { border-radius: 0 !important; border: none !important; background: transparent; color: #4e5e6a; } .content-sidebar .list-group-item:hover, .content-sidebar .list-group-item.active { background: rgba(0, 0, 0, 0.02); border-radius: 4px !important; } #message-details-section .dropdown { position: absolute; right: 12px; margin-top: 18px; } ins { color: #00b393; text-decoration: none; } .kanban-filters-container { padding: 15px 15px 0 15px; } .comment-form-container { padding: 15px; } #task-comment-form-container .comment-form-container { padding: 15px 0; } svg:not(.gantt) { margin-top: -3px; pointer-events: none; } /*dropdown-menu*/ .dropdown-menu { border: none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); min-width: 12rem; margin-top: 7px; } .dropdown-menu .list-group-item:not(.inline-loader) { border: none !important; padding: 10px 15px; } .dropdown-menu #my-open-timers-container .list-group-item { border: 1px solid rgba(127, 127, 127, 0.2) !important; } .dropdown .dropdown-toggle:not(.caret):after { display: none; } .dropdown-item { padding: 0.7rem 1.25rem; color: #4e5e6a; } .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus { color: #4e5e6a; background-color: #F8F9FA; } .dropdown-user .dropdown-menu { margin-right: 15px; } .comment-dropdown, .reply-dropdown { position: relative; right: 20px; display: none; } .comment-like-top { position: relative; right: 40px; display: none; } .comment-container { margin: 15px 0; } .comment-container:hover .comment-dropdown, .comment-container:hover .comment-like-top { display: block; } .reply-container { margin: 15px 0; } .reply-container:hover .reply-dropdown { display: block; } .title-tab .btn { margin: 2px 5px; } .white-link { color: #fff; } .project_and_clock_status_widget { border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.04) !important; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.04) !important; } #clock-status-widget { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /*sticky note*/ .sticky-note { outline: none; height: 265px; padding: 5px; border: none; color: #000; background: rgb(255, 246, 179); width: 100%; } /*check box*/ .checkbox-blank { width: 20px; height: 20px; display: inline-block; float: left; border: 2px solid rgba(166, 166, 166, 0.2); border-radius: 5px; } .checkbox-blank:hover { background-color: #fff; } .checkbox-checked { background: url("../images/check_mark.png") no-repeat center center; width: 20px; height: 20px; display: inline-block; float: left; border: none; } .checkbox-un-checked { background: url("../images/checkbox-un-checked.png") no-repeat center center; width: 20px; height: 20px; display: inline-block; float: left; } /*modal mask*/ .modal-mask { position: relative; top: 0; left: 0; background-color: #fff; } .circle-done { margin: 10px auto; width: 80px; height: 80px; border-radius: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 5px rgba(220, 230, 235, 0.5); text-align: center; font-size: 30px; padding: 10px; color: #6690F4; } .circle-done i { display: inline-block; max-width: 0%; overflow: hidden; } .circle-done.ok svg { height: 40px; width: 40px; margin-top: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*social-link*/ .social-link { width: 35px; height: 35px; margin: 0 10px 10px 0; padding: 6px 8px; text-align: center; border-radius: 50%; color: #fff; background-color: transparent; border: 2px solid #fff; transition: all 300ms ease; display: inline-block; text-decoration: none; } .social-link:focus { color: #fff; } .social-link:hover, .social-link:active, .social-link:focus { text-decoration: none; } .social-link:hover { color: rgba(0, 0, 0, 0.5); background-color: #fff; } .social-link:hover.custom-svg path, .social-link:hover.custom-svg circle, .social-link:hover.custom-svg rect { fill: rgba(0, 0, 0, 0.5); } /*alert*/ .alert { border: 0; } .alert .progress { background-color: transparent; box-shadow: none !important; height: 3px; border-radius: 0; margin: 19px 0px -15px -13px; } .alert .progress-bar { box-shadow: none !important; background-color: rgba(0, 0, 0, 0.3); } .app-alert-message { display: inline-block; margin-right: 5px; max-width: 350px; min-width: 165px; } .app-alert.animate { bottom: 0; position: fixed; z-index: 100; border-radius: 2px; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1); opacity: 0.25; right: -350px; } .app-alert.alert-info { background-color: #38a4f8; color: #fff; } .app-alert.alert-success { background-color: #485BBD; color: #fff; } .app-alert.alert-danger { background-color: #f5325c; color: #fff; } .app-alert.alert-warning { background-color: #ffb822; color: #fff; } .app-alert a { color: #4e5e6a; } /*progress-bar*/ .progress.thin { height: 3px; } .alert-warning { background-color: #fcefc8; } .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .permission-list { margin: 0; padding: 0 15px; } .permission-list li { margin-bottom: 15px; border-bottom: 1px solid #f1f1f5; list-style-type: none; } .permission-list li h5 { display: inline-block; margin-left: 3px; } .animated-clock { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #f5325c; } .animated-clock-sec { position: relative; width: 2px; height: 8px; top: 4px; left: 7px; background: #f5325c; border-radius: 2px; animation: animatedClockSecRotate 5s linear infinite; } .comment-file p { max-width: 270px; } .comment-file .comment-image-box { width: 200px; } /* fs modal*/ .app-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 5000; } .app-modal.full-content .app-modal-sidebar { display: none; } .app-modal.full-content .expand { display: none; } .app-modal.full-content .compress { display: block; } .app-modal.full-content.has-sidebar .app-modal-next-button { right: 20px; } .app-modal.full-content.has-sidebar .app-modal-zoom-in-button { right: 120px; } .app-modal.full-content.has-sidebar .app-modal-zoom-out-button { right: 70px; } .app-modal.has-sidebar .app-modal-next-button { right: 370px; } .app-modal.has-sidebar .app-modal-zoom-in-button { right: 470px; } .app-modal.has-sidebar .app-modal-zoom-out-button { right: 420px; } .app-modal .round-button { position: absolute; cursor: pointer; color: #fff; z-index: 1; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 40px; height: 40px; text-align: center; padding: 7px; } .app-modal .round-button svg { margin: 5px; } .app-modal .round-button:hover { background-color: rgba(0, 0, 0, 0.4); } .app-modal .compress, .app-modal .expand, .app-modal .app-modal-zoom-in-button, .app-modal .app-modal-zoom-out-button { top: 10px; } .app-modal .app-modal-zoom-in-button { right: 115px; } .app-modal .app-modal-zoom-out-button { right: 65px; } .app-modal .compress, .app-modal .expand { right: 20px; } .app-modal .app-modal-previous-button, .app-modal .app-modal-next-button { top: 50%; padding: 10px; width: 50px; height: 50px; } .app-modal .app-modal-previous-button { left: 20px; } .app-modal .app-modal-next-button { right: 20px; } .app-modal.loading .app-modal-previous-button, .app-modal.loading .app-modal-next-button { display: none; } .app-modal .disabled { cursor: not-allowed; opacity: 0.5; } .app-modal .expand { display: block; right: 370px !important; } .app-modal .compress { display: none; } .app-modal.loading .app-modal-sidebar { border-color: #fff; } .app-modal.loading .expand { display: none; } .app-modal-fixed-close-button { position: absolute; z-index: 1; right: 15px !important; background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 50%; text-align: center; padding: 2px !important; height: 40px; width: 40px; top: 10px !important; font-size: 22px !important; } .app-modal-body { width: 100%; height: 100%; background-color: #fff; display: table; table-layout: fixed; border-spacing: 0; } .app-modal-close { font-size: 30px; padding: 10px; cursor: pointer; position: absolute; right: 20px; top: -5px; } .app-modal-content { display: flex; justify-content: center; align-items: center; height: 100%; background: #000; } .app-modal-content .app-modal-content-area { text-align: center; } .app-modal-content .app-modal-content-area.scrollable { max-height: 100vh; overflow-y: scroll; width: 100%; } .app-modal-content img { max-width: 100%; max-height: 100%; } .app-modal-content.fit-window-height img { max-height: 100vh !important; } .app-modal-sidebar { width: 350px; border-left: 1px solid #f1f1f5; height: 100%; display: table-cell; vertical-align: top; } .app-modal-sidebar .avatar-md { width: 45px; height: 45px; } /* milestone */ .milestone { width: 100px; text-align: center; border: 1px solid #f1f1f5; padding-bottom: 5px; border-radius: 5px; } .milestone .badge { width: 100%; display: inherit; padding: 10px 0; font-size: 1em; border-radius: 5px 5px 0 0; margin-top: 0 !important; } .milestone h1 { margin: 0; } /*notification*/ .list-group-item { border: none; padding: 10px 15px; } .list-group-item.active { background: #6690F4; } .unread-notification { background-color: #edeff5 !important; } /*estimate form*/ #estimate-form-editable .sortable-ghost td { border-top: 2px dashed #7988a2 !important; border-bottom: 2px dashed #7988a2 !important; } #estimate-form-editable .sortable-ghost td * { opacity: 0; } #estimate-form-preview table.dataTable.b-b-only tbody td { border: none; } .estimate_request_form.list-group-item { border: 1px solid #f1f1f5 !important; } .list-container .b-b:last-child { border-bottom: none; } .box-title { position: relative; margin: -15px 15px 10px; text-align: center; font-weight: 700; } .box-title span { display: inline-block; position: relative; z-index: 11; background: #fff; padding: 0 12px; } .box-title:after { content: ""; width: 100%; height: 1px; display: inline-block; position: absolute; top: 10px; left: 0; z-index: 10; background-color: #f1f1f5; } .invoice-styles .item { border: 5px solid #f1f1f5; float: left; margin: 0 15px 15px 0; transition: 300ms all; opacity: 0.5; } .invoice-styles .active, .invoice-styles .item:hover { opacity: 1; cursor: pointer; opacity: 1; } .invoice-styles .selected-mark { position: absolute; display: inline-block; color: #7988a2; -webkit-transition: all 300ms; transition: all 300ms; margin-top: 80px; margin-left: 100px; } .invoice-styles .selected-mark svg { height: 25px; width: 25px; } #notificaion-popup-list, #messages-popup-list { max-height: 400px; overflow-y: scroll; } .help-page-container { padding-top: 50px; } .help-search-box-container { max-width: 600px; margin: 30px auto 60px; text-align: center; } .help-search-box-container h2 { margin: 20px 0; } .help-category-box { cursor: pointer; text-align: center; color: #4e5e6a; transition: all 0.5s; } .help-category-box .anchor { color: #29689e; text-transform: lowercase; } .help-category-box:hover { cursor: pointer; background: #F8F9FA; } .help-search-box { background: url(../images/search.png) no-repeat 15px 50% #fff; padding: 15px 15px 15px 40px; height: auto; border: 1px solid #f1f1f5; border-radius: 5px; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; box-shadow: none; transition: background 0.5s; width: 100% !important; } .help-search-box:focus { background-color: #f0f0f0; border: 1px solid #f0f0f0; } .help-search-box.searching { background-image: url("../images/loader.gif") !important; } #help-left-panel { min-height: 350px; } #help-page-content { padding: 20px 30px; } .view-container { max-width: 1060px; margin: auto; } .view-container-large { max-width: 1200px; margin: auto; } .public-navbar { font-weight: bold; border-bottom: 1px solid #f1f1f5; } .note-group-select-from-files .note-form-label { display: none !important; } .popover { font-size: 1em; } .popover-content { padding: 15px; } .app-popover { position: absolute; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); z-index: 9999; min-width: 180px; } .app-popover .confirmation-title { padding: 10px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .app-popover .app-popover-body { padding: 15px; } .app-popover .app-popover-arrow { top: -6px; border-color: transparent; transform: rotate(225deg); border: solid transparent; height: 12px; width: 12px; position: absolute; pointer-events: none; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-top-color: transparent; border-left-color: transparent; left: 10px; } .app-popover .app-popover-arrow.bottom-arrow { bottom: -6px; top: unset; transform: rotate(45deg); } .app-popover .list-group-item.active { color: #fff; } .todo-input-box { max-width: 700px; margin: 10px auto 30px; } .todo-input-box input { padding: 10px 15px; height: auto; border: 1px solid #f1f1f5; border-radius: 5px; box-shadow: none; transition: background 0.5s; } .todo-input-box input:focus { background-color: #f0f0f0; border: 1px solid #f0f0f0; } .todo-input-box button { padding: 10px 15px !important; border-radius: 0 5px 5px 0 !important; margin-left: 1px; } .navbar-left a i { -moz-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; } /*kanban*/ .kanban-container { margin-top: 0; margin-bottom: 0; padding: 0px; padding-top: 15px; padding-bottom: 15px; background: #f2f4f6; border: 1px solid #f2f4f6; border-top: none; } .kanban-col { list-style-type: none; float: left; margin: 0 15px; width: 305px; transition: all 0.3s ease; } .kanban-col.kanban-col-collapsed { width: 30px; cursor: pointer; margin-left: 5px; } .kanban-col.kanban-col-collapsed .kanban-col-title { background-color: #ffffff; border-radius: 5px; writing-mode: sideways-lr; text-orientation: mixed; padding: 10px 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); display: flex; height: 275px; justify-content: space-between; } .kanban-col.kanban-col-collapsed .kanban-col-title .collapse-kanban-column { display: none !important; } .kanban-col .kanban-col-title { padding: 15px; background: #fff; color: #4e5e6a; margin-bottom: 15px; margin-right: 3px; border-radius: 5px; text-align: right; } .kanban-col .kanban-col-title .status-title { float: left; } .kanban-col .kanban-col-title .collapse-kanban-column { cursor: pointer; padding: 10px; display: none; } .kanban-col .kanban-col-title:hover .collapse-kanban-column { display: inline; } .kanban-col .kanban-item-list { max-height: 730px; height: 730px; overflow: hidden; } .kanban-col .kanban-item-list .kanban-item { padding: 10px; margin: 0 3px 10px 0; background-color: #fff; cursor: default; display: table; color: #4e5e6a; width: 300px; border-radius: 5px; } .kanban-col .kanban-item-list .kanban-item:before, .kanban-col .kanban-item-list .kanban-item:after { display: table; content: " "; } .kanban-col .kanban-item-list .kanban-item:after { clear: both; } .kanban-col .kanban-item-list .kanban-item:hover, .kanban-col .kanban-item-list .kanban-item:active, .kanban-col .kanban-item-list .kanban-item:focus { text-decoration: none; color: #1d2c48; background: #f9f9f9; } .kanban-col .kanban-item-list .kanban-item .avatar { float: left; } .kanban-col .kanban-item-list .kanban-item .avatar img { height: 22px; width: 22px; margin-right: 10px; } .kanban-col .kanban-item-list .kanban-item .meta { margin-top: 10px; } .kanban-col .kanban-input .form-control { padding: 10px; height: auto; margin-bottom: 10px; width: 99%; background-color: #fff; border-radius: 0; } .kanban-sortable-ghost { box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); } .kanban-sortable-chosen { opacity: 0.2; box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); } .rise-chat-wrapper { width: 430px; height: calc(100% - 170px); background: #fff; z-index: 10; position: fixed; top: 86px; right: 20px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 30px 0px; animation: slideInRight 0.3s ease-in-out; } .rise-chat-wrapper.full-screen { width: auto !important; height: auto !important; top: 66px !important; right: 0 !important; bottom: 0 !important; left: 250px !important; z-index: 11; } .rise-chat-wrapper .message-row { border-bottom: 1px solid #f1f1f5; cursor: pointer; } .rise-chat-wrapper .message-row .time { font-size: 0.7em; width: 60px; text-align: right; } .rise-chat-wrapper .message-row:hover { background: #f0f0f0; } .rise-chat-wrapper .nav-tabs li .active, .rise-chat-wrapper .nav-tabs li.active { border-bottom: none !important; } .rise-chat-wrapper .chat-topbar, .rise-chat-wrapper .rise-chat-header { height: 62px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f1f5; cursor: default; } .rise-chat-wrapper .chat-topbar .chat-topbar-btn, .rise-chat-wrapper .rise-chat-header .chat-topbar-btn { cursor: pointer; padding: 10px; position: absolute; } .rise-chat-wrapper .chat-topbar .chat-topbar-btn.chat-back, .rise-chat-wrapper .rise-chat-header .chat-topbar-btn.chat-back { left: 10px; } .rise-chat-wrapper .chat-topbar .chat-topbar-btn.chat-close, .rise-chat-wrapper .rise-chat-header .chat-topbar-btn.chat-close { right: 10px; } .rise-chat-wrapper .chat-topbar .chat-topbar-btn.more-options, .rise-chat-wrapper .rise-chat-header .chat-topbar-btn.more-options { right: 50px; } .rise-chat-header { border-bottom: 1px solid #f1f1f5; } .rise-chat-header .nav-tabs > li { display: table-cell; float: none; width: 100%; } .chat-tab { display: flex; justify-content: space-around; } .chat-tab .btn.active, .chat-tab .btn:hover, .chat-tab .btn:focus, .chat-tab .btn:active { background-color: transparent !important; color: #6690F4; } .chat-title { text-align: center; padding: 15px 7px; font-weight: 700; } .chat-bars { width: 30px; text-align: center; cursor: pointer; opacity: 0.5; } .chat-back { opacity: 0.7; cursor: pointer; width: 40px; padding: 20px 10px; } .chat-bars:hover, .chat-back:hover { opacity: 1; } .nizu-chat-body-web { height: auto; overflow-y: scroll; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .nizu-chat-body-web.full-height { height: 413px; } .nizu-chat-body-web.long { height: 412px; } .rise-chat-footer { background: #fff; width: 100%; bottom: 0; position: absolute; border-top: 1px solid #f1f1f5; border-radius: 0 0 5px 5px; } .rise-chat-footer.footer-buttons-section { box-shadow: rgba(9, 14, 21, 0.06) 0px 0px 25px 0px; } .rise-chat-footer.footer-buttons-section .btn { padding: 15px !important; } .rise-chat-footer .post-file-dropzone-scrollbar { margin-top: -90px; } .rise-chat-footer textarea { width: 100%; padding: 15px; border: none; height: 52px; resize: none; } .rise-chat-footer textarea:focus { outline: none; } .rise-chat-footer .help-block { height: 0px; display: none !important; } .rise-chat-footer .chat-message-textarea { display: flex; } .rise-chat-footer .chat-button-section { padding: 4px; margin-top: -4px; } .rise-chat-footer .chat-button-section .upload-file-button { margin-right: 5px !important; } .rise-chat-footer .chat-button-section svg { width: 18px; height: 18px; } .rise-chat-footer .stop-recording { display: inline-block; width: 11px; height: 11px; } .rise-chat-footer .btn { padding: 8px 10px; margin: 0 !important; border: 0; text-align: center; } .rise-chat-footer .recording-text { display: none; } .chat-msg { padding: 8px 10px; display: inline-block; max-width: 75%; text-align: left; word-break: break-word; } .chat-msg img { max-width: 100%; } .chat-other { padding: 2px 10px; } .chat-other .avatar { float: left; margin-top: 2px; } .chat-other .chat-msg { border-radius: 0 10px 10px 10px; background-color: #f0f0f0; } .chat-other.single-message { padding-bottom: 10px; } .chat-other.single-message .chat-msg { border-radius: 15px; } .chat-other.first-message .chat-msg { border-radius: 15px 15px 15px 2px; } .chat-other.first-message .avatar .avatar-link { display: none; } .chat-other.middle-message .chat-msg { border-radius: 2px 15px 15px 2px; } .chat-other.middle-message .avatar .avatar-link { display: none; } .chat-other.last-message { padding-bottom: 10px; } .chat-other.last-message .chat-msg { border-radius: 2px 15px 15px 15px; } .chat-me { text-align: right; padding-right: 10px; margin-top: 2px; } .chat-me:nth-last-of-type(1):not(:nth-last-child(1)) { padding-bottom: 10px; } .chat-me.single-message { padding-bottom: 10px; } .chat-me.single-message .chat-msg { border-radius: 15px; } .chat-me.first-message .chat-msg { border-radius: 15px 15px 2px 15px; } .chat-me.middle-message .chat-msg { border-radius: 15px 2px 2px 15px; } .chat-me.last-message { padding-bottom: 10px; } .chat-me.last-message .chat-msg { border-radius: 15px 2px 15px 15px; } .chat-me .chat-msg { border-radius: 15px 0 15px 15px; background-color: #6d81f5; color: #fff; } .chat-me .chat-msg a { color: #fff; } .init-chat-icon { width: 50px; height: 50px; background-color: #fff; z-index: 10; position: fixed; bottom: 20px; right: 20px; box-shadow: 0px 3px 4px 4px rgba(0, 0, 0, 0.1); border-radius: 50%; text-align: center; padding: 15px; cursor: pointer; } .init-chat-icon.has-message { background-color: #f5325c; color: #fff; } .text-line-through { text-decoration: line-through; } .checklist-items a.delete-checklist-item, .reminders a.delete-reminder, .delete-dependency-task, .delete-dependency-task:hover { color: #a1a3a5; } .confirmed-by-logo { color: #0abb87; } .confirmed-by-logo svg { height: 30px; width: 30px; margin-top: 10px; } .rejected-by-logo { color: #f5325c; } .rejected-by-logo svg { height: 30px; width: 30px; margin-top: 10px; } .message-images .file-mockup { height: 100px; margin-bottom: 5px; } .chat-no-messages svg { margin-top: 100px; color: #f1f1f5; margin-bottom: 10px; } table.dataTable td.dataTables_empty { padding: 15px 10px !important; } .unread-comments-of-tasks i { padding: 5px; color: #6690F4; } .widget { border: 1px solid #f1f1f5; } .widget:hover { cursor: move; } .row-controller { flex: 2; position: relative; } .row-controller .move { position: absolute; top: 0; left: 0; cursor: move; } .row-controller .delete { position: absolute; bottom: 0; left: 0; cursor: pointer; color: #f5325c; } .add-column-drop { border: 1px dashed #f1f1f5; } .dashed_border { border: 1px dashed #f1f1f5; } .widget-row { margin-bottom: 15px; padding: 15px; display: flex; } .row-container { flex: 100; } .dashboard-dropdown .dropdown-toggle { padding: 10px 12px; background: #fff; border-radius: 50%; box-shadow: -3px 7px 15px rgba(0, 0, 0, 0.1); transition: 0.3s; width: 40px; height: 40px; } .dashboard-view .open .dropdown-toggle { background-color: #f5f5f5 !important; } .grid-bg { background: #f5f5f5; transition: 0.5s all; } .column-grid-link:hover .grid-bg { background: #1ccacc; color: #fff; } .custom-widget .custom-widget-title { background-color: #fff; color: inherit; font-weight: bold; padding: 10px 15px; border-bottom: 1px solid #f1f1f5; border-radius: 0px; } #widget-container-area { position: fixed; width: 308px; top: 90px; padding-right: 30px; } .projects-row { border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; } .projects-row .progress { height: 10px; margin: 20px 15px; box-shadow: none !important; } .widget-todo-input-box { margin: 15px auto; max-width: 100%; padding: 0 15px; } .widget-todo-input-box input { background: #f9f9f9; border: none; padding: 8px 14px; } .widget-todo-input-box input:focus { background: #f0f0f0; border: none; } .widget-todo-input-box .input-group { border-bottom: 1px solid #f1f1f5; } .widget-todo-input-box button { padding: 8px 14px; } .overflow-y-scroll { overflow-y: scroll; } .overflow-x-hidden { overflow-x: hidden; } .active-team-members-list .message-row { border-bottom: 1px solid #f1f1f5; } .dashbaord-header-area .color-tag { margin: 3px 0 0 0; width: 15px; height: 15px; border-radius: 2px; } .dashbaord-header-area a:hover .color-tag { transform: scale(1.5); } #widget-row-container .error, #widget-container-area .error { background-color: #ffecec !important; border: 1px solid #fdd9d9; } #widget-row-area .dropdown-toggle:after { display: none; } .checklist-items .move { line-height: 18px; cursor: ns-resize; } .ganttview-vtheader-group-name, .ganttview-vtheader-series-row { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .move-icon { margin-right: 15px !important; cursor: ns-resize; opacity: 0.3; } .checkbox-blank-sm, .checkbox-checked-sm { border: 1px solid #cecece; height: 13px; width: 13px; border-radius: 50%; cursor: pointer; margin-top: 4px; } .checkbox-checked-sm svg { height: 11px; width: 11px; position: relative; top: -4px; } .kanban-item-list a:hover .checkbox-blank-sm, .checkbox-checked-sm { visibility: visible !important; } .kanban-item-checked { background-color: #f9f9f9; } .td-checkbox { width: 50px; background: #f0f0f0 !important; padding: 0 !important; } .td-checkbox a { height: 30px; width: 35px; background: #fff; float: right; border-bottom-left-radius: 15px; border-top-left-radius: 15px; } .td-checkbox .checkbox-blank { margin-right: 0; margin: 5px 10px; } .td-checkbox .checkbox-blank:hover { background-color: initial; cursor: pointer; } .notificatio-plate-title-area { padding: 0 8px 7px 8px; } .notificatio-plate-title-area .dot { padding: 0 3px; } .color-white { color: #fff !important; } #invoice-total-section, #estimate-total-section, #order-total-section, #contract-total-section, #proposal-total-section { width: 450px; } .invoice-preview-container { padding: 30px; border-radius: 5px; border: 1px solid #f1f1f5; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03); -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03) !important; } .badge { display: inline-block; padding: 4px 5px; font-weight: normal; font-size: 0.85em; margin-top: 5px; } .badge a:hover, .badge a:active, .badge a:focus { color: #fff !important; } .badge.badge-light a:hover, .badge.badge-light a:active, .badge.badge-light a:focus { color: #29689e !important; } .badge.large { padding: 5px 10px; font-size: 1em; } .badge.bg-transparent { background-color: transparent !important; color: #4e5e6a !important; border: 1px solid #f1f1f5 !important; } .badge.badge-default { background-color: #fff !important; color: #2D313E !important; border: 1px solid #f1f1f5 !important; padding: 4px 5px; } .badge-light { background-color: #f1f1f5; color: #4e5e6a; } a.badge:hover { color: #fff !important; } .comment-avatar { padding-left: 15px; } .dropdown-user span.hidden-xs { /* hidden-xs has block display on summernote/summernote-bs3.css */ display: inline-block !important; } .font-normal { font-weight: normal; } .truncate-ellipsis { display: table; table-layout: fixed; width: 65%; white-space: nowrap; } .truncate-ellipsis span { display: table-cell; overflow: hidden; text-overflow: ellipsis; } .ticket-template-label { text-align: center; width: 100%; } .ticket-template-search { width: 80% !important; margin: auto; } #ticket-template-table td:first-child { border-top: 1px solid #f1f1f5; } .template-row { padding: 8px 0; } .float-none { float: none !important; } .keyboard-shortcut-info-icon { padding: 4px 12px; color: #4e5e6a; } #left-menu-preview .sidebar { top: auto; bottom: auto; position: inherit; width: 100%; } #left-menu-preview .sidebar-brand { display: none; } #left-menu-preview .sidebar-scroll { margin-top: 0; overflow-y: unset !important; } .client-widget-section { padding: 0 15px; } .client-dashboard-help-message { padding: 15px 20px 0; } #excel-preview-container .box-title:after { top: 10px; } .lead-migration-contacts { margin: 15px; border: 1px solid #f1f1f5; border-radius: 5px; } .lead-migration-contacts .settings-anchor { padding: 15px !important; margin: 0; } .lead-migration-contacts .settings-anchor::after { margin-top: 5px !important; } .lead-kanban-item a.invisible { padding: 5px; margin-top: -5px; } .lead-kanban-item:hover .invisible { visibility: visible; } .bill-from span { display: block; } #menu-item-list-2 .left-menu-item:hover .invisible { visibility: visible !important; } #menu-item-list-2 .invisible i { padding: 0 5px; } #menu-item-list-2 .left-menu-item:first-child:hover .invisible .make-sub-menu { visibility: hidden; } table .error { background-color: #ffbfbf !important; } .help-page-container .table { color: #4e5e6a; --bs-table-color: $light-default-text-color; } .footer { width: 100%; text-align: center; background: #fff; display: inline-block; border-top: 1px solid #f1f1f5; } .footer a { padding: 10px; } .editable-input .editable-date { border-radius: 2px; border: 1px solid #f1f1f5; padding: 5px; } .editable-input .editable-date table tr td, .editable-input .editable-date table tr th, .editable-input .editable-date table tr td span { border-radius: 0; } .editable-input .editable-date .datepicker { width: auto; } .editable-input .editable-date th.prev .icon-arrow-left, .editable-input .editable-date th.next .icon-arrow-right { font-style: normal; } .search-modal { padding: 8px 20px; } .search-modal .select2-choice { background-color: #fff !important; border: 1px solid #fff !important; } .search-modal .help-search-box { padding: 6px 8px; background: none; border: none; } .search-modal .help-search-box.searching { background-image: none !important; } .search-modal .help-search-box:focus { background-color: #fff; border: 1px solid #fff; } .task-view-modal-body .popover-content { max-width: 300px !important; } .task-view-modal-body .editable-container .editable-buttons { display: block; margin-left: 0; margin-top: 10px; } .task-view-modal-body .editable-container .editable-buttons .editable-submit, .task-view-modal-body .editable-container .editable-buttons .editable-cancel { width: 49%; } .sub-task-icon { background: #f0f0f0; padding: 1px 3px; border-radius: 50%; } .task-preview { max-width: 1000px; min-width: 400px; margin: auto; } .icon-tag { padding: 10px 15px; border-radius: 5px; height: 40px; width: 44px; } .icon-tag:hover { background-color: #f5f5f5; } .icon-palet .active { background-color: #f5f5f5; } .badge-white { background-color: #fff; color: #4e5e6a; } #keyboard-shortcut-modal-form .bg-white { padding: 4px 10px; color: #4e5e6a; font-weight: bold !important; border: 1px solid #f1f1f5; } .profile-image-upload { vertical-align: top; margin-left: -45px; } .sortable-file-row { display: table; } .sortable-file-row .sortable-file { height: auto; width: 150px; border-radius: 5px; } .table-cell { display: table-cell; } .cart-grid-item { position: relative; overflow: hidden; border-radius: 5px; } .cart-grid-item .cart-grid-item-image-container { position: relative; overflow: hidden; height: 200px; } .cart-grid-item .cart-grid-item-image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: 1; transition: background-color 0.5s ease-in-out; } .cart-grid-item .cart-grid-item-image { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform 1s ease; } .cart-grid-item .cart-grid-item-buttons { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(100%); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 9; width: 100%; } .cart-grid-item .cart-grid-rate { padding: 5px 10px; position: absolute; top: 0px; background: #fff; border-bottom-right-radius: 15px; cursor: default; } .cart-grid-item:hover .cart-grid-item-image-container .cart-grid-item-image { transform: scale(1.1); } .cart-grid-item:hover .cart-grid-item-buttons { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); } .cart-grid-item:hover .cart-grid-item-image-container::before { background-color: rgba(0, 0, 0, 0.2); } .cart-grid-item .cart-grid-item-image .cart-grid-item-details div a, .cart-item-details { display: table-cell; vertical-align: middle; } .cart-grid-item .cart-grid-item-image .cart-grid-item-details div a .item-quantity-input-box, .cart-item-details .item-quantity-input-box { height: 28px; } .cart-grid-item .cart-grid-item-image .cart-grid-item-details div a .item-quantity-btn, .cart-item-details .item-quantity-btn { margin-top: -4px; } .cart-item-row { cursor: default !important; display: flex; } .cart-item-row:hover { background: transparent !important; } .cart-item-image-container { height: 50px; width: 50px; } .cart-item-image-container .cart-item-image { background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; width: 100%; border-radius: 5px; } .text-wrap-ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .rise-cart-body { height: calc(100% - 66px); overflow-y: scroll; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .init-cart-icon, .rise-cart-wrapper { transition: 0.3s; } .cart-badge { top: -45px !important; margin-left: 8px !important; } .rise-cart-wrapper { width: 480px; } .cart-item-quantity-btn { color: #a1a3a5; } .process-order-preview { max-width: 1000px; min-width: 400px; margin: auto; } .event-deadline-border { border-right: 3px solid #f5325c !important; } .popover-body { min-width: 150px; padding: 15px; } .popover-body .select2-container { max-width: 200px; } .popover table { width: 100%; } .display-flex { display: flex; } .vertical-align-center { display: table-cell; vertical-align: middle; } .cart-item-quantity { text-align: center; padding: 5px 7px; line-height: 1; } .cart-item-details-container { width: 210px; } .cart-item-details-container .box { table-layout: auto; } .cart-total { display: block !important; } .fast-line { position: absolute; top: 0; height: 2px; width: 100px; background: #25ccce; border-radius: 4px; -webkit-animation: line 0.7s linear infinite; animation: line 0.7s linear infinite; } .typing-indicator span { height: 3px; width: 3px; float: right; margin-left: 4px; margin-top: 10px; background-color: #4e5e6a; display: block; border-radius: 50%; opacity: 0.2; } .typing-indicator span:nth-of-type(1) { -webkit-animation: 1s blink infinite 0.3333s; animation: 1s blink infinite 0.3333s; } .typing-indicator span:nth-of-type(2) { -webkit-animation: 1s blink infinite 0.6666s; animation: 1s blink infinite 0.6666s; } .typing-indicator span:nth-of-type(3) { -webkit-animation: 1s blink infinite 0.9999s; animation: 1s blink infinite 0.9999s; } .move-chat-icon { bottom: 460px; right: 45%; } .gantt .bar-wrapper.no-drag.active .bar { fill: #b8c2cc !important; } .gantt .handle { fill: #f1f1f1 !important; } .gantt .today-highlight { fill: #dce0ff !important; } .gantt .weekends-highlight { opacity: 0.5; fill: #e3f1ff !important; } .gantt .bar, .gantt .handle, .gantt .path-line { transition: 0.2s !important; } .gantt .parent-group-arrow, .gantt .regular-arrow, .gantt .parent-task-arrow { stroke: transparent; } .gantt .gt-blocked-task:not(.gt-group-task) { stroke: #999; } .gantt .parent-task-icon { fill: #000; } .gantt .child-task-icon { fill: #fff; } .gantt-container .gantt-task-popup { min-width: 180px; padding: 10px; font-size: 1em; } .gantt-container .popup-wrapper { box-shadow: -3px 7px 15px rgba(0, 0, 0, 0.1) !important; } .gantt-status-filter .mr15, .gantt-status-filter .DTTT_container, .gantt-status-filter .btn { margin: 0 !important; } .gantt-status-filter .DTTT_container { float: none !important; } .item-rate-badge { background-color: #AD159E; } .edit-image-file { height: 70px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 5px; border: 1px solid #f1f1f5; } .edit-image-file .delete-saved-file { top: 7px; left: 78px; min-width: 25px; padding: 3px 4px; display: none; } .edit-image-file .copy-file-link { top: 41px; left: 42px; min-width: 25px; padding: 3px 4px; display: none; } .edit-image-file:hover .delete-saved-file, .edit-image-file:hover .copy-file-link { display: unset; } .move-cart-icon { bottom: 460px; right: 42.5% !important; } .task-view-right-section { padding-left: 35px; } .no-outline { outline: none; } .hidden-input-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .item-search-box { border: 1px solid #f1f1f5; } .profile-image-direct-upload { margin-top: 35px; margin-left: -5px; } /*chart*/ .chart-circle { width: 130px; background: #fff; border-radius: 50%; height: 130px; padding: 10px; margin: 0 auto; } .chart-circle canvas { width: 110px !important; height: 110px !important; text-align: center; align-items: center; align-self: center; display: inline-block !important; } /*settings*/ .settings { border-bottom: none; } .settings .settings-anchor { font-size: 1.15em; padding: 10px 0; cursor: pointer; } .settings .settings-anchor:first-child { padding-bottom: 15px; padding-top: 0px; } .settings .settings-anchor:not(.collapsed):not(.hide-collapse)::after { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 2px; transform: rotate(-135deg); float: right; margin-top: 10px; transition: all 0.2s ease-out; } .settings .settings-anchor:not(.hide-collapse):after { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 2px; transition: all 0.2s ease-out; transform: rotate(45deg); float: right; margin-top: 10px; } .settings.nav-tabs { border: none; } .help-catagory.list-group .list-group-item { border-radius: 0 !important; border: none !important; background: transparent; color: #4e5e6a; } .help-catagory.list-group .list-group-item:hover, .help-catagory.list-group .list-group-item.active { border-left: 2px solid #4e5e6a !important; text-indent: -2px; background: rgba(0, 0, 0, 0.02); } .nav-tabs.vertical { background-color: transparent; } .nav-tabs.vertical li { float: none; } .no-bg { background: unset !important; } /*loader*/ .circle-loader { margin: 10px auto; width: 80px; height: 80px; border-radius: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 2px rgba(220, 230, 235, 0.5); border-top-color: #6690F4; animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; } .app-loader { width: 90px; height: 90px; margin: 30px auto; position: absolute; bottom: 45px; right: 5px; padding: 10px; border-radius: 50%; background: transparent; } .app-loader .loading { width: 70px; height: 70px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 2px #6690F4; border-top-color: #fff; animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; display: inline-block; } .table-loader .loading { width: 50px; height: 50px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 2px #6690F4; border-top-color: #fff; animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; display: inline-block; } #pre-loader .app-loader { bottom: 45%; right: 56%; } .ani-width { transition: width 50ms; } .ani-rotate-180:hover { transform: rotate(180deg); transition: all 300ms ease-out 0ms; } .inline-loader { width: 20px; height: 20px; border-radius: 50% !important; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 2px #6690F4 !important; border-top-color: #fff !important; animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; display: inline-block; padding: 0 !important; align-self: center; } .inline-loader:hover { background-color: #fff !important; } .loader-container.inline-loader { width: 20px !important; height: 20px !important; display: block; margin: 0 auto; } .loader-container.inline-loader:hover { background-color: #fff !important; } .inline-block { display: inline-block; } .block { display: block; } .form-control-sm { font-size: 1em; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } .icon-fill-secondary { fill: #595D6E; } .icon-fill-warning { fill: #ffb822; } .text-right { text-align: right !important; } .text-center { text-align: center; } .text-left { text-align: left; } .custom-modal-lg { max-width: 900px; transition: all 300ms ease !important; } @media (max-width: 991px) { .custom-modal-lg { max-width: 500px; margin: auto; } } .import-client-app-modal .modal-dialog { transition: 500ms ease !important; } /*scroll bar*/ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3019607843); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.4); } ::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.4); } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.4); } .sidebar-scroll::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.4); } .progress-bar-success { background-color: #0abb87; } .comment-container .estimate-comment-dropdown, .comment-container .proposal-comment-dropdown { display: none; } .comment-container:hover .estimate-comment-dropdown, .comment-container:hover .proposal-comment-dropdown { display: block !important; } .sidebar-toggled #pre-loader .app-loader { right: 50%; } .bg-all-white { background-color: #fff !important; } .contract-preview-container { padding: 100px; } .contract-preview-container .note-editor.note-frame, .contract-preview-container .note-editor.note-airframe { border: none; } .signature-image { width: 100%; } .comment-highlight { border: 2px solid #6690F4 !important; border-radius: 5px; } .comment-highlight .comment-container { margin-bottom: 0 !important; border-bottom: none !important; } .bg-all-white { background-color: #fff !important; } .proposal-preview-container { padding: 100px; } .proposal-preview-container .note-editor.note-frame, .proposal-preview-container .note-editor.note-airframe { border: none; } .note-background { background-color: #FEFFCE !important; } .popover { max-width: 580px !important; } .popover-arrow { display: none !important; } input[type=color] { width: 200px; height: 22px; padding: 5px; border: 1px solid #f1f1f5; border-radius: 2px; } .font-12 { font-size: 12px !important; } .invoice-payment-button .btn { margin-bottom: 15px; } .sub-task-filter-kanban-active, .sub-task-filter-active { background-color: #6690F4; color: #fff; padding: 1px 2px; border-radius: 5px; } .sub-task-filter-kanban-active { padding: 0 2px; } .brand-logo img { max-width: 250px; max-height: 40px; } .bg-transparent-white { background: rgba(255, 255, 255, 0.9215686275) !important; padding: 0 5px; border-radius: 10px; } .priority-badge { color: #fff !important; display: inline-block; height: 22px; width: 22px; text-align: center; padding: 0 !important; } .input-color { width: 50px !important; height: 15px !important; padding: 0 !important; border: none !important; } .input-color.active { overflow: hidden; border-radius: 20px !important; } input[type=color]::-webkit-color-swatch { border: none; } .project-overview-widget { padding: 40px 25px 45px; } .project-overview-widget .progress-outline { border: 2px solid #39B691; border-radius: 25px; padding: 5px; } .project-overview-widget .progress-outline .progress { margin: auto; border-radius: 25px; background-color: transparent; height: 22px; } .project-overview-widget .progress-outline .progress .progress-bar { background-color: rgba(19, 174, 130, 0.4) !important; font-size: 14px; } .reminder-modal .modal-dialog { max-width: 430px; margin: 0 0 auto auto; } .reminder-modal .modal-header { padding-top: 20px; padding-bottom: 20px; } .reminder-modal .modal-content { border-radius: 0; } .max-logo-size { max-width: 300px; max-height: 100px; } .circle-progress { position: relative; margin: 20px 15px 0 0; float: left; text-align: center; } .circle-progress-overflow { position: relative; overflow: hidden; width: 80px; height: 40px; margin-bottom: -15px; } .circle-progress-bar { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50%; box-sizing: border-box; border: 5px solid #f1f1f5; } .missed-reminder { border-left: 2px solid #f5325c; display: inline-block; padding-left: 10px; border-radius: 10px; } .bottom-15 { bottom: 15px !important; } .b-r-2 { border-right: 2px solid #f1f1f5; } .widget-progress-bar { height: 7px; margin-top: 6px; } .bottom-25 { bottom: 25px !important; } .message-send-button { padding: 8px !important; } .message-send-button svg { transform: rotate(45deg); margin-right: 5px; } .btn-group .btn.active { border-color: #f1f1f5 !important; background-color: #f1f1f5; } .btn-group.filter, .btn-group #dynamic-range-dropdown { height: 35px; } .email-template-form .modal-body { padding: 1rem; } .widget-box { display: flex; flex-direction: column; justify-content: space-between; } .avatar-group { display: flex; align-items: center; padding: 5px 20px 25px; } .avatar-group .user-avatar { position: relative; z-index: 0; margin-left: -10px; border: 2px solid #fff; transition: all 0.3s ease; cursor: pointer; } .avatar-group .user-avatar:first-child { margin-left: 0; } .avatar-group .user-avatar.avatar-circle { border-radius: 50%; } .avatar-group .user-avatar.avatar-30 img { width: 100%; max-width: 30px; height: 30px; border-radius: 50%; display: flex; } .avatar-group .user-avatar:hover { z-index: 1; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } #all-timesheet-users-summary { height: 67px; } /*pills tab*/ .nav-pills { background: #fff; border-radius: 5px; border: 1px solid #f1f1f5 !important; } .nav-pills li { float: left; margin: 10px 0 10px 10px; } .nav-pills li a { padding: 10px 20px; margin-right: 0; border-radius: 5px; color: inherit; line-height: 1.42857143; } .nav-pills li .active, .nav-pills li.active { font-weight: bold; border: none; background: #f9f9f9 !important; color: #20446f !important; cursor: default; } .nav-pills li .active:focus, .nav-pills li.active:focus { outline: none; } .custom-bg-modal.modal-dialog { background: #f9f9f9; } .custom-bg-modal.modal-dialog .modal-content { background: #f9f9f9; height: auto; box-shadow: none; } .custom-bg-modal.modal-dialog .modal-content .modal-header, .custom-bg-modal.modal-dialog .modal-content .modal-footer { border-color: rgba(212, 217, 231, 0.3607843137); } table.dataTable tbody td.reminder-title-section { padding-left: 0 !important; } table.dataTable tbody td.reminder-option-section { padding-right: 0 !important; } table.dataTable.js-selection-mode .batch-operation-selected td { background-color: rgba(0, 75, 255, 0.1411764706) !important; } table.dataTable.js-selection-mode .batch-operation-selected td:hover { background: rgba(0, 75, 255, 0.1411764706) !important; } table.dataTable.js-selection-mode tbody tr { cursor: pointer; } table.dataTable.js-selection-mode .badge.clickable { cursor: default; } .filter-section-container { padding: 10px 15px; } .filter-section-flex-row { display: flex; } .filter-section-left { flex: 1; } .filter-section-right { flex: 0 0 auto; text-align: right; } .filter-item-box { display: inline-block; margin: 5px; } .filter-form { border-top: 1px solid #f1f1f5; padding-top: 10px; margin-top: 10px; } .smart-filter-list-group { list-style-type: none; border-radius: 0; } .smart-filter-dropdown-container .search-filter { margin: 0 10px 10px 10px; width: 280px; border-color: #f1f1f5; } .smart-filter-dropdown-container .smart-filter-dropdown { min-width: 200px; } .smart-filter-item.active:hover, .smart-filter-item.active:focus { color: #fff; } .dropdown-divider { border-color: #f1f1f5 !important; } .public-page-container #pre-loader .app-loader { right: 49%; } .navbar-toggler { border: none !important; } .navbar-toggler:focus { box-shadow: none !important; } .access-list { padding-bottom: 15px; } .access-list .list-group-item { padding: 10px 10px 0px 10px; } #folder-context-menu { display: none; } #file-manager-container { min-height: 200px; } .files-and-folders-list { list-style-type: none; padding: 0; } .folder-thumb-area, file-thumb-area { display: inline-block; } .selected-folder-item { background: #f9f9f9; } .folder-item-content { padding: 10px; display: inline-block; border-radius: 4px; cursor: pointer; width: 100%; margin-bottom: 2px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; } .folder-item-content:hover { background: #f5f5f5; -webkit-transition: color 100ms ease-in-out, background-color 100ms ease-in-out; transition: color 100ms ease-in-out, background-color 100ms ease-in-out; } .folder-item-content.focus { background-color: #f5f5f5; } .icon-wrapper { margin-top: 2px; } .bold-folder-icon { color: #FFCE6A; fill: #FFCE6A; } .bold-file-icon { color: #7FB6FF; fill: #7FB6FF; } .files-icon { position: relative; left: 88px; top: 70px; } .no-file-selected { background-color: rgba(0, 0, 0, 0.01); height: 250px; width: 250px; border-radius: 50%; margin: 50% auto; } .no-file-selected-icon { height: 80px; width: 80px; opacity: 0.2; } .no-file-selected-text { position: absolute; left: -70px; margin-top: 10px; } .file-manager-preview-section { margin: 10px 0 25px; } .file-manager-preview-section img { max-width: 100%; border-radius: 4px; } .file-manager-preview-section video { border-radius: 4px; } .file-manager { padding: 0 55px; } .file-manager .file-manager-anchor { cursor: pointer; } .file-manager .file-manager-anchor:not(.collapsed)::after { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 3px; transform: rotate(45deg); float: left; margin-top: 5px; margin-left: -20px; transition: all 0.2s ease-out; } .file-manager .file-manager-anchor:after { content: " "; border: solid; border-width: 0 0.075rem 0.075rem 0; display: inline-block; padding: 3px; transition: all 0.2s ease-out; transform: rotate(-45deg); float: left; margin-top: 6px; margin-left: -20px; } .file-manager .sub-folder { margin-bottom: 0; } .file-manager .folder-list { cursor: pointer; padding: 5px; } .file-manager .select-folder-for-move.active { color: #f5325c; } .record-start-btn { padding: 6px 9px; border-radius: 50%; } .record-end-btn { padding: 11px; border-radius: 50%; } .stop-recording { width: 12px; height: 12px; background: #fd1361; border-radius: 2px; } .recording-text { animation: recording-animation 1s infinite; } @keyframes recording-animation { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } .audio-container { position: absolute; width: 40px; height: 40px; overflow: hidden; border-radius: 50px; top: 22px; margin-left: 20px; } .audio-container audio { position: relative; top: -7px; left: -6px; } .audio-preview .preview { width: 80px !important; margin-right: 5px; } .audio-preview .preview .upload-thumbnail-sm { background: none; } .audio { display: block; margin: 15px 0; } .file-highlight { border: 1px solid #e38d15; border-radius: 27px; animation: filescale 1s alternate ease-in; } @keyframes filescale { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .saved-file-item-container .audio-container { top: 15px; margin-left: 37px; } .saved-file-item-container.saved-recording-file .edit-image-file { background-color: #c6ccd2; } .file-list-view { cursor: pointer; min-width: 28px; background: #fff; color: #a1a3a5; border-radius: 4px; display: inline-block; position: relative; vertical-align: middle; text-align: center; margin: 5px; padding: 2.5px 0 2.5px 0; border: 1px solid #f1f1f5; } .file-list-view.file-download:hover { background: #f5325c !important; color: #fff !important; border: 1px solid #f5325c !important; } .file-list-view:hover { background: #0abb87 !important; color: #fff !important; border: 1px solid #0abb87 !important; } .other-saved-file-container { top: 13px; margin-left: 35px; border: 1px solid #f1f3f4; background: #f1f3f4; padding: 10px 9px; border-radius: 50%; position: absolute; } .saved-file-info { position: absolute; width: 45px; background: #7988a2; border-top-left-radius: 4px; border-bottom-right-radius: 10px; top: 6px; color: #fff; z-index: 1; line-height: 20px; text-align: center; } .file-manager-preview-section .text-white { color: #4e5e6a !important; text-align: center; border: 1px solid #f1f1f5; border-radius: 5px; padding: 15px; } .file-manager-preview-section .text-white a { display: block; padding-top: 10px; } .file-manager-more-menu { position: absolute; right: 26px; margin-top: 13px; border: 1px solid rgba(221, 230, 233, 0.48); padding: 7px 8px; border-radius: 50%; display: none; } #file-manager-items-box { padding-right: 15px; } .file-manager-details-box { display: block !important; width: 100%; } .profile-image-upload.file-upload { position: absolute; } .ptb20 { padding: 20px 0; } .sticky-details-section.stick { position: fixed; top: 85px; } #expense-tabs.nav-pills { background-color: #f0f0f0; } .contract-preview, .proposal-preview { max-width: 900px; min-width: 400px; margin: auto; } .contract-preview table, .proposal-preview table { width: 100%; margin-top: 40px; } .contract-preview td, .contract-preview th, .proposal-preview td, .proposal-preview th { padding: 10px; } .contract-preview .signature-image, .proposal-preview .signature-image { width: auto !important; } #invoice-list-table_wrapper .input-group { display: inline-block; } #invoice-list-table_wrapper .input-group .form-control { height: 35px; } .mobile-bottom-menu { z-index: 99; box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08); pointer-events: auto; will-change: transform; -webkit-transform: translate3d(0, 0, 0); touch-action: manipulation; overscroll-behavior: contain; } .mobile-bottom-menu .menu-item { padding: 21px 20px 40px; color: #4e5e6a; pointer-events: auto; } .mobile-bottom-menu .menu-item:hover .icon, .mobile-bottom-menu .menu-item.active .icon, .mobile-bottom-menu .menu-item.focus .icon { color: #000; transform: scale(1.1); transition: all 0.2s ease-in-out; } .mobile-bottom-menu .menu-item svg { pointer-events: auto; } .mobile-bottom-menu .quick-add-dropdown, .mobile-bottom-menu .mobile-function-button-dropdown { width: 100%; position: fixed !important; transform: unset !important; inset: auto !important; bottom: 84px !important; left: 0 !important; right: 0 !important; } .mobile-bottom-menu #mobile-function-button .dropdown .dropdown-toggle { padding: 21px 20px 40px; } .mobile-bottom-menu #mobile-function-button .home-btn { padding: 21px 20px 40px; } .mobile-bottom-menu #mobile-function-button:hover .icon, .mobile-bottom-menu #mobile-function-button.active .icon, .mobile-bottom-menu #mobile-function-button.focus .icon { color: #000 !important; transform: scale(1.1); transition: all 0.2s ease-in-out; } .dropdown-toggle::after { margin-left: 0.45em; } .smart-filter-dropdown.dropdown-toggle::after { margin-left: 0.45em; } .message-dropdown .card, .notification-dropdown .card { border: none; } #generate_password { margin-left: 0; border: 1px solid #f1f1f5; background-color: #fff; } .global-search-modal .modal-content { border-radius: 40px !important; } .sidebar-scroll::-webkit-scrollbar { width: 0px !important; } .btn-transparent:hover { color: #4e5e6a; } .no-box-shadow { box-shadow: none !important; } ::placeholder { color: #999999 !important; opacity: 1; } ::-ms-input-placeholder { color: #999999 !important; } .dt-print-view tfoot tr:first-child { display: none; } @media print { .dt-print-view tfoot { display: table-row-group; } } .highlight-toolbar { background-color: #f9f9f9; padding: 5px 20px; border-radius: 0 15px 15px 0; margin-left: -15px; } #proposal-editor .card, #contract-editor .card { box-shadow: none !important; } .selection-handler-dropdown-btn.active { background-color: #6690F4 !important; color: #fff; cursor: pointer; } .selection-handler-dropdown-btn.active:active, .selection-handler-dropdown-btn.active:focus { background-color: #4076f2 !important; color: #fff; } #load-kanban.js-selection-mode .kanban-item { cursor: pointer; } #load-kanban.js-selection-mode .kanban-item.batch-operation-selected { background-color: rgba(0, 75, 255, 0.1411764706) !important; } .cursor-default { cursor: default; } .notes-grid-container .card { border: 0 !important; height: 265px; } .notes-grid-container .file-list-view { border: 1px solid rgba(69, 69, 69, 0.1215686275) !important; background: none; } .notes-grid-container .file-list-view:first-child { margin-left: 0 !important; } .notes-grid-container .badge.clickable { cursor: auto !important; } .notes-grid-text-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .notes-grid-text-ellipsis button { display: none; } .webkit-line-clamp-8 { -webkit-line-clamp: 8; } .webkit-line-clamp-7 { -webkit-line-clamp: 7; } .webkit-line-clamp-6 { -webkit-line-clamp: 6; } .webkit-line-clamp-5 { -webkit-line-clamp: 5; } .webkit-line-clamp-4 { -webkit-line-clamp: 4; } .webkit-line-clamp-3 { -webkit-line-clamp: 3; } .webkit-line-clamp-2 { -webkit-line-clamp: 2; } .note-color-tag { height: 10px; width: 10px; display: inline-block; border-radius: 5px; margin-right: 5px; } .note-grid-card .file-list-view { margin: 5px 10px 0 0; } .empty-input-tag { background-color: rgba(255, 220, 220, 0.5882352941) !important; } .automation-form .badge { padding: 5px 10px; border-radius: 12px; } .automation-form .badge:hover { color: #4e5e6a !important; } .white-space-normal { white-space: normal; } .condition-field-expected_value_1:not(.empty-input-tag, .single-input-tag) { margin-right: 0 !important; padding: 2px !important; border: 1px dashed #f1f1f5; background-color: #fff !important; } .condition-field-expected_value_1:not(.empty-input-tag, .single-input-tag).badge { white-space: normal; } .condition-field-expected_value_1:not(.empty-input-tag, .single-input-tag) .badge { line-height: 20px; margin: 2px !important; padding: 2px 10px !important; } .condition-field-expected_value_1.single-input-tag { white-space: normal; } .condition-type-container { margin-top: 5px; min-width: 50px; } .blank-operator-container { margin-top: 5px; } .rich-text-container table td { border: 1px solid #f1f1f5; padding: 5px; } .sortable-items.sortable .update-checklist-item-status-checkbox { display: none; } .sortable-items.sortable .item-sort-icon { display: block !important; } .sortable-items.sortable .move-icon-checked { color: #0abb87 !important; opacity: 1; } .sortable-items .list-group-item:last-child { margin-bottom: 10px; } .details-view-status-section span.badge { margin-right: 5px; } .details-view-status-section span.badge svg { margin-right: 5px; margin-top: -2px; } .support-type-label { border: 1px solid #f1f1f5; border-radius: 20px; padding: 10px; text-align: center; } .list-group.info-list .list-group-item { border-top: 1px solid #f1f1f5; padding: 10px 0; } .list-group.info-list .list-group-item:first-child { border-top: none; padding-top: 0; } .list-group.info-list .list-group-item:last-child { padding-bottom: 0; } .pin-comment-preview:not(:last-child) { display: block; border-bottom: 1px solid #f1f1f5; margin-bottom: 8px; } .pin-comment-preview:not(:last-child):nth-last-of-type(1) { border-bottom: none; margin-bottom: 0; } .list-status-border { border-left: 3px solid !important; } .box-wrapper { display: flex; } .box-wrapper .box-avatar { flex-shrink: 0; display: grid; align-items: center; margin-right: 10px; } .box-wrapper .box-avatar.hover { position: relative; } .box-wrapper .box-avatar.hover::after { content: ""; background: url("../images/plus.png") no-repeat center center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #4e5e6a; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border: 1px solid #f1f1f5; box-shadow: 0 0 0.2em #444; height: 32px; width: 32px; border-radius: 50%; background-color: #fff !important; } .box-wrapper .box-avatar.hover:hover::after { opacity: 1; } .box-wrapper .box-label { width: 100%; display: grid; align-items: center; } .box-wrapper .box-label .badge, .box-wrapper .box-label .circle-badge { margin: 5px 5px 0 0 !important; } .box-wrapper .box-label .badge.badge-default, .box-wrapper .box-label .circle-badge.badge-default { margin: 0 !important; } .dt-hasChild .box-wrapper .box-avatar.hover::after { background: url("../images/minus.png") no-repeat center center; } .add-reminder-btn { display: inline-block; margin-bottom: 15px; } .reminders-card .card-body { padding-bottom: 0; } .form-switch { padding-left: 0 !important; } .form-switch .form-check-input { margin-left: 0 !important; } .form-check-input:checked { background-color: #6690F4 !important; border-color: #6690F4 !important; } #pwa-install-message-iphone { display: none; position: fixed; background-color: #6690F4; color: #fff; height: 100%; top: 0; padding: 100px 30px; z-index: 1032; } #pwa-install-message-iphone h4 { font-weight: bold; } #pwa-install-message-iphone .install-message { margin-top: 20px; margin-bottom: 20px; } .mobile-mirror { width: 350px; } .mobile-mirror .nav-tabs { border-radius: 0 !important; } .mobile-mirror .card { border-left: none !important; } .mobile-mirror .hidden-xs { display: none; } .mobile-mirror .more-options-btn, .mobile-mirror .back-btn { padding: 18px; } .mobile-mirror .filter-section-left .filter-item-box.smart-filter-dropdown-box { display: inline-block !important; width: 80%; } .mobile-mirror .filter-section-left .filter-item-box.smart-filter-dropdown-box .smart-filter-dropdown-container .smart-filter-dropdown { width: 100% !important; text-align: left; } .mobile-mirror .filter-section-left .filter-item-box.smart-filter-dropdown-box .smart-filter-dropdown-container .smart-filter-dropdown::after { position: absolute; right: 12px; margin-top: 9px; } .mobile-mirror .filter-section-left .filter-item-box.show-hide-filter-button-box { float: right !important; } .mobile-mirror .filter-section-left .scrollable-container { overflow-x: auto; overflow-y: hidden; flex-wrap: inherit; white-space: nowrap; width: 100%; } .mobile-mirror .filter-section-left .scrollable-container::-webkit-scrollbar { height: 6px; } .mobile-mirror .filter-section-left .scrollable-container::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.4); } .mobile-mirror .filter-section-left .scrollable-container::-webkit-scrollbar-thumb:active { background: rgba(128, 128, 128, 0.4); } .mobile-mirror .filter-section-left .scrollable-container::-webkit-scrollbar-thumb { background: #f1f1f5; } .mobile-mirror .filter-section-right .filter-item-box { width: 100%; padding-right: 10px; } .mobile-mirror .filter-section-right .filter-item-box .dt-search { width: 100%; margin-bottom: 0; } .mobile-mirror .filter-section-right .filter-item-box .dt-search input.form-control { width: 100% !important; margin-left: 0; } .mobile-mirror .filter-form .filter-item-box { display: block !important; margin: 10px 0 !important; } .mobile-mirror .filter-form .filter-item-box .select2-container, .mobile-mirror .filter-form .filter-item-box .datepicker-custom-selector { width: 100% !important; } .mobile-mirror .filter-form .filter-item-box .filter-multi-select { width: 100% !important; } .mobile-mirror .filter-form .filter-item-box .filter-multi-select .dropdown-toggle { width: 100% !important; } .mobile-mirror .filter-form .filter-item-box.btn-group { display: flex !important; } .mobile-mirror .filter-form .filter-item-box .btn-group { width: 100%; } .mobile-mirror .filter-form .filter-item-box .btn-group .dynamic-range-filter { width: 100%; } .mobile-mirror .filter-form .filter-item-box .btn-group .dynamic-range-filter .dropdown-toggle { width: 100%; } .mobile-mirror .filter-form .filter-item-box .btn-group.filter { width: 100% !important; } .mobile-mirror .filter-form .filter-item-box.save-filter-box { width: 48% !important; margin-right: 12px !important; } .mobile-mirror .filter-form .filter-item-box.save-filter-box .btn { width: 100% !important; } .mobile-mirror .filter-form .filter-item-box.filter-cancel-box { width: 48% !important; margin: 0 !important; } .mobile-mirror .filter-form .filter-item-box.filter-cancel-box .btn { width: 100% !important; } .mobile-mirror .filter-form .save-filter-box, .mobile-mirror .filter-form .filter-cancel-box { display: inline-block !important; width: unset !important; margin: 0 5px 0 0 !important; } .mobile-mirror .more-options-btn .dropdown-menu { border-radius: 5px; } .mobile-mirror .more-options-btn .dropdown-menu .btn-default { border: none !important; } .mobile-mirror .datatable-tools .datatable-export .dt-buttons { margin-top: -5px; margin-bottom: 0 !important; } .mobile-mirror .datatable-tools .col-md-3 { border-bottom: 1px solid #f1f1f5; margin-bottom: 20px; padding-bottom: 20px; } .mobile-mirror .datatable-tools .dt-info { padding-top: 5px !important; } .mobile-mirror .datatable-tools .dt-paging ul.pagination { justify-content: center !important; } .mobile-mirror table.dataTable tbody td { padding: 0 !important; } .mobile-mirror table.dataTable tbody td .box-wrapper .box-label { padding: 10px; } .mobile-mirror table.dataTable tbody tr.child td.child { padding: 12px 10px !important; } .mobile-mirror table.dataTable.no-title thead th { display: none; } .details-view-right-section { width: 350px; margin-left: 20px; } .back-action-btn { display: block; padding: 10px 10px 10px 5px; color: #4e5e6a; font-weight: bold; } .compact-view-active.sidebar-toggled .sidebar .sidebar-brand { width: 70px; } .compact-view-active.sidebar-toggled .navbar { left: 70px; } .compact-view-active.sidebar-toggled .compact-view-left-panel { left: 70px; } .compact-view-active.sidebar-toggled #compact-details-page { margin-left: 420px; } .compact-view-active .navbar { left: 350px; } .compact-view-active .sidebar { width: 0; } .compact-view-active .sidebar .sidebar-brand { width: 350px; } .compact-view-active .page-container { margin-left: 0; } .compact-view-active .filter-section-flex-row { display: block; } .compact-view-active .modal .filter-section-flex-row { display: flex; } .compact-view-active .datatable-export { display: none; } .compact-view-active .dt-info { float: right !important; } .compact-view-active .compact-view-left-panel { position: fixed; left: 0; z-index: 1000; height: calc(100vh - 66px); } .compact-view-active .compact-view-left-panel .scrollable-table { height: calc(100vh - 185px); overflow-y: auto; } .compact-view-active .compact-view-left-panel .xs-no-bottom-margin { margin-bottom: 0 !important; } .compact-view-active .compact-view-left-panel .datatable-tools { position: fixed; bottom: 0; background: #fff; padding: 10px; width: 350px; margin: 0 !important; border: 1px solid #f1f1f5; } .compact-view-active .compact-view-left-panel .datatable-tools .col-md-12:first-child { display: none; } .compact-view-active .compact-view-left-panel .datatable-tools .dt-paging .dt-paging-button .page-link { padding: 7px 10px !important; } .compact-view-active .compact-view-left-panel .datatable-tools .dt-paging .dt-paging-button .page-link.ellipsis, .compact-view-active .compact-view-left-panel .datatable-tools .dt-paging .dt-paging-button .page-link.previous, .compact-view-active .compact-view-left-panel .datatable-tools .dt-paging .dt-paging-button .page-link.next { padding: 7px 8px !important; } .compact-view-active .compact-view-left-panel .nav-tabs li a::after { height: 0 !important; } .compact-view-active .compact-view-left-panel .nav-tabs li a.active { cursor: pointer; } .compact-view-active .compact-view-left-panel .nav-tabs li a .compact-view-back-btn { margin-right: 5px; } .compact-view-active #compact-details-page { margin-left: 350px; } .compact-view-active .dataTable:not(.js-selection-mode) tbody tr.active td a, .compact-view-active .dataTable:not(.js-selection-mode) tbody tr.active td .text-default { color: #fff !important; } .compact-view-active .dt-container .dataTables_paginate .paginate_button a { padding: 8px 10px; } .compact-view-active .dt-container .dataTables_paginate .paginate_button.disabled:not(:first-child):not(:last-child) a { padding: 8px 0 !important; } .compact-view-active .bookmarked-filter-button-container { display: block !important; } .compact-view-active .hide-on-compact-view { display: none; } .hide-status-checkbox .checkbox-blank, .hide-status-checkbox .checkbox-checked { display: none; } .text-muted { color: #4e5e6a !important; } .app-modal-open .hide-under-modal { display: none; } .js-cookie-button.collapsed svg { transform: rotate(90deg); } .js-cookie-button svg { transition: all 0.2s ease-out; } .client-view-tickets-card { min-height: 512px; } .first-child-no-top-style:first-child { border-top: none !important; padding-top: 0 !important; } .editor-preview { max-width: 800px; min-width: 400px; margin: auto; padding: 20px 50px; border-radius: 5px; } .hidden-input-field { height: 1px; width: 1px; border: none; outline: none; } .no-card-style .card { border: none !important; box-shadow: none !important; border-radius: 0 !important; } .sticky-top { position: sticky !important; top: 0; z-index: 1000; background: #fff; padding: 10px; } .max-height-width-logo { max-width: 250px; max-height: 40px; } #todo-list-widget-table .filter-item-box { margin: 5px 0 5px 0 !important; } #todo-list-widget-table .datatable-tools .col-md-12:first-child { display: none; } #todo-list-widget-table .datatable-tools .col-md-12 .pagination { justify-content: center; } #todo-table.sortable .update-todo-status-checkbox { display: none; } #todo-table.sortable .move-icon { display: block !important; } .position-fixed-top { position: fixed !important; top: 0; left: 0; z-index: 1000; padding: 10px 15px 10px; width: 100%; pointer-events: auto; } .details-view-top-button { transition: all 200ms ease; } .details-view-top-button.position-fixed-top { background-color: #fff; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08); } .details-view-top-button .reply-button { padding: 10px; float: right; font-weight: bold; } .z-100 { z-index: 100; } .bookmarked-filter-button-container { display: inline; } .step-confirmation-container .spinning-btn.spinning { padding-right: 20px; } .step-confirmation-container .spinning-btn.spinning:before { content: ""; width: 17px; height: 17px; right: 2px; } .timesheet-activity-heatmap { width: 100%; caption-side: bottom; border-spacing: 3px; border-collapse: unset; } .timesheet-activity-heatmap .heatmap-label { width: 200px; text-align: left; padding-left: 10px; } .timesheet-activity-heatmap tr:hover td { background-color: #f5f5f5; } .timesheet-activity-heatmap td, .timesheet-activity-heatmap th { width: 35px; height: 35px; text-align: center; border: transparent; background-color: #f9f9f9; } .timesheet-activity-heatmap .weekends-highlight { background-color: #F0F8FF; } .flex-item-row { display: flex; align-items: center; margin-bottom: 5px; border: 1px solid #f1f1f5 !important; border-radius: 5px !important; word-break: break-word; word-wrap: break-word; } .wrapper-resizable { background-color: transparent; position: absolute; z-index: 10; transition: background 0.5s; border-radius: 5px 0 0 5px; } .wrapper-resizable.resizable-left { width: 4px; cursor: ew-resize; top: 0; left: -2px; bottom: 0; } .wrapper-resizable.resizable-bottom { height: 4px; cursor: ns-resize; bottom: -2px; left: 0; right: 0; } .wrapper-resizable.resizable-right { width: 4px; cursor: ew-resize; top: 0; right: -2px; bottom: 0; } .wrapper-resizable.resizable-top { height: 4px; cursor: ns-resize; top: -2px; left: 0; right: 0; } .wrapper-resizable:hover { background: rgba(102, 144, 244, 0.5); } .resizing-left .resizable-left { background: rgba(102, 144, 244, 0.5); } .resizing-bottom .resizable-bottom { background: rgba(102, 144, 244, 0.5); } .resizing-right .resizable-right { background: rgba(102, 144, 244, 0.5); } .resizing-top .resizable-top { background: rgba(102, 144, 244, 0.5); } .widget-card h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 14px !important; } .estimate-request-widget { height: 242px; } .estimate-request-widget .estimate-request-widget-header { position: relative; height: 70px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .estimate-request-widget .estimate-request-widget-header .dash-track { flex: 1; height: 2px; margin: 0 12px; position: relative; overflow: hidden; } .estimate-request-widget .estimate-request-widget-header .dash-track::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(77, 94, 106, 0.25) 33%, rgba(77, 94, 106, 0) 0%); background-size: 12px 2px; background-repeat: repeat-x; animation: dashMove 0.5s linear infinite; } .estimate-request-widget .estimate-request-widget-header .dash-track .dot { position: absolute; top: 50%; left: 15%; transform: translateY(-50%); width: 10px; height: 10px; background: #4e5e6a; border-radius: 50%; box-shadow: 0 0 8px rgba(77, 94, 106, 0.85); animation: dotMove 2.5s linear infinite; z-index: 4; } .pulse-icon { animation: pulse 1.8s ease-in-out infinite; } .widget-container .client-invoice-overview-widget .widget-right-section h3 { font-size: 1.6rem !important; } .widget-left-section { display: flex; flex-direction: column; flex: 1 1 auto; } .widget-right-section { margin-left: auto; } .event-reminder-section { max-width: 430px; } .hide-dt-empty .dt-empty { display: none; } /* ==================== IOS26-UI:START ==================== */ /* ===================================================================== iOS 26 "Liquid Glass" — design tokens + ambient page canvas --------------------------------------------------------------------- The shared vocabulary for the iOS 26 restyle of the core UI (_card, _button, _list, _title, _tabs, _search). Modelled on the App/Plugin Store page (app/Views/plugins/index.php), which is the reference implementation of the look. Everything is a CSS custom property so the runtime dark theme (assets/css/color/1E202D.css, injected into by setThemeColor() in general_helper.js) can be answered by re-declaring the tokens once on `body.color-1E202D` instead of duplicating every rule. Rebuilding ---------- These partials are @import-ed at the end of assets/scss/style.scss, so the normal dev-tools build regenerates them into the served bundle: helper('dev_tools'); write_css($css); // the $css/$scss arrays are in write_scss($scss); // app/Views/includes/head.php In assets/css/app.all.css the compiled result sits at the end, between the IOS26-UI:START and IOS26-UI:END markers. Cascade note ------------ These partials are imported at the END of style.scss on purpose: they restyle base components that style.scss itself defines earlier, so they must come after to win on equal specificity. The dark theme sheet loads at RUNTIME (after app.all.css) and uses !important liberally, so every dark rule here needs `body.color-1E202D` + !important — deliberate, not cargo cult. ===================================================================== */ :root { /* surfaces */ --ios26-surface: rgba(255, 255, 255, .62); --ios26-surface-strong: rgba(255, 255, 255, .78); --ios26-surface-soft: rgba(255, 255, 255, .38); --ios26-fill: rgba(17, 24, 39, .05); --ios26-fill-hover: rgba(17, 24, 39, .08); /* strokes */ --ios26-edge: rgba(255, 255, 255, .65); --ios26-hairline: rgba(17, 24, 39, .08); --ios26-hairline-strong: rgba(17, 24, 39, .12); /* ink */ --ios26-text: #1d1d1f; --ios26-muted: #6e6e73; /* accent — NIZU primary, not Apple blue, so the app stays on brand */ --ios26-accent: #6690F4; --ios26-accent-strong: #4076f2; --ios26-accent-ring: rgba(102, 144, 244, .22); --ios26-accent-soft: rgba(102, 144, 244, .12); /* geometry */ --ios26-radius-xl: 24px; --ios26-radius-lg: 18px; --ios26-radius: 14px; --ios26-radius-sm: 10px; --ios26-pill: 999px; /* material */ --ios26-blur: blur(24px) saturate(170%); --ios26-blur-sm: blur(18px) saturate(150%); --ios26-inset: inset 0 1px 0 rgba(255, 255, 255, .7); --ios26-shadow-1: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .07); --ios26-shadow-2: 0 2px 6px rgba(17, 24, 39, .06), 0 18px 44px rgba(17, 24, 39, .13); /* motion */ --ios26-spring: cubic-bezier(.34, 1.32, .5, 1); --ios26-ease: cubic-bezier(.2, .8, .2, 1); } body.color-1E202D { --ios26-surface: rgba(44, 48, 58, .62); --ios26-surface-strong: rgba(44, 48, 58, .84); --ios26-surface-soft: rgba(255, 255, 255, .04); --ios26-fill: rgba(255, 255, 255, .07); --ios26-fill-hover: rgba(255, 255, 255, .13); --ios26-edge: rgba(255, 255, 255, .10); --ios26-hairline: rgba(255, 255, 255, .09); --ios26-hairline-strong: rgba(255, 255, 255, .16); --ios26-text: #eef0f6; --ios26-muted: #aeb4cc; --ios26-accent: #5b73e8; --ios26-accent-strong: #4a61d8; --ios26-accent-ring: rgba(91, 115, 232, .32); --ios26-accent-soft: rgba(91, 115, 232, .18); --ios26-inset: inset 0 1px 0 rgba(255, 255, 255, .06); --ios26-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .38); --ios26-shadow-2: 0 2px 8px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .5); } /* --------------------------------------------------------------------- Ambient canvas. Glass only reads as glass when there is something behind it. The app's flat #f9f9f9 body gives a translucent card nothing to refract, so the page gets three very faint colour washes — fixed, so they don't move with scroll and don't fight the content. --------------------------------------------------------------------- */ body { background-image: radial-gradient(1100px 620px at 6% -10%, rgba(102, 144, 244, 0.1), transparent 62%), radial-gradient(950px 560px at 100% -4%, rgba(191, 90, 242, 0.07), transparent 58%), radial-gradient(900px 700px at 50% 118%, rgba(48, 209, 88, 0.05), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } body.color-1E202D { background-image: radial-gradient(1100px 620px at 6% -10%, rgba(88, 103, 221, 0.2), transparent 62%), radial-gradient(950px 560px at 100% -4%, rgba(191, 90, 242, 0.13), transparent 58%), radial-gradient(900px 700px at 50% 118%, rgba(48, 209, 88, 0.07), transparent 60%); } /* Users who ask the OS for less motion get none of the spring animations. */ @media (prefers-reduced-motion: reduce) { .card, .btn, .list-group-item, .nav-tabs li a { transition: none !important; } } /* ===================================================================== iOS 26 — cards (.card / .card-header / .card-body / .card-footer) --------------------------------------------------------------------- Replaces the flat 1px/5px card with a frosted panel: soft 18px corners, a translucent surface over the ambient canvas from _ios26.scss, a hairline instead of a border, and elevation instead of an outline. Corner clipping --------------- A rounded card whose first/last child paints its own background (a table wrapper, a list group, a header) shows square corners poking past the radius. `overflow: hidden` on .card would fix it but would also clip every dropdown menu opened inside a card, so the radius is inherited by the edge children instead. Bootstrap's `.rounded-top-0` / `.border-top-0` utilities are !important and still win — that is what keeps the list views' card flush under the tab bar above it. ===================================================================== */ .card { border: 1px solid var(--ios26-edge); border-radius: var(--ios26-radius-lg); background: var(--ios26-surface); -webkit-backdrop-filter: var(--ios26-blur); backdrop-filter: var(--ios26-blur); box-shadow: var(--ios26-inset), var(--ios26-shadow-1); margin-bottom: 22px; transition: box-shadow 0.3s var(--ios26-ease), border-color 0.3s var(--ios26-ease); /* the tab strip inside a card is a divider, not a boxed control */ } .card > .card-header:first-child, .card > .card-body:first-child, .card > .table-responsive:first-child, .card > .list-group:first-child, .card > .tab-content:first-child, .card > img:first-child { /* let the edge children round with the card (see header comment) */ border-top-left-radius: inherit; border-top-right-radius: inherit; } .card > .card-footer:last-child, .card > .card-body:last-child, .card > .table-responsive:last-child, .card > .list-group:last-child, .card > .tab-content:last-child, .card > img:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .card .card-header { background: transparent; border-bottom: 1px solid var(--ios26-hairline); padding: 15px 20px; color: var(--ios26-text); font-weight: 600; letter-spacing: -0.01em; } .card .card-header h1, .card .card-header h2, .card .card-header h3, .card .card-header h4, .card .card-header h5, .card .card-header h6 { letter-spacing: -0.015em; color: inherit; } .card .card-body { padding: 18px 20px; } .card .nav-tabs { border: none; border-bottom: 1px solid var(--ios26-hairline); } /* `.bg-white .card-header` earlier in style.scss forces #fff; this wins by coming later at the same specificity. */ .bg-white .card-header { background-color: transparent; border-color: var(--ios26-hairline); color: var(--ios26-text); } .card-footer { background: var(--ios26-surface-soft); border-top: 1px solid var(--ios26-hairline); padding: 13px 20px; } /* A card sitting inside another card (widgets, embedded panels) must not stack a second layer of blur and shadow on the first. */ .card .card { background: var(--ios26-surface-soft); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--ios26-hairline); } /* ---------------------------------------------------------- dark theme assets/css/color/1E202D.css forces .card / .card-body / .card-footer to the flat theme colour with !important, so these need the extra `body.color-1E202D` specificity AND !important to answer it. */ body.color-1E202D .card { background: var(--ios26-surface) !important; border-color: var(--ios26-edge) !important; box-shadow: var(--ios26-inset), var(--ios26-shadow-1); } body.color-1E202D .card .card-header { background-color: transparent !important; border-color: var(--ios26-hairline) !important; color: var(--ios26-text); } body.color-1E202D .card-body { background-color: transparent !important; } body.color-1E202D .card-footer { background-color: var(--ios26-surface-soft) !important; border-color: var(--ios26-hairline) !important; } body.color-1E202D .card .card { background: var(--ios26-surface-soft) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--ios26-hairline) !important; } /* ===================================================================== iOS 26 — buttons (.btn and the .btn-* variants) --------------------------------------------------------------------- Capsule shape, semibold label, a top-light gradient over whatever colour the variant already sets, a colour-matched glow, and a spring press. Deliberately geometry-light --------------------------- Only the radius changes; padding, font-size and line-height are left alone. Buttons sit in table cells, toolbars and title bars all over the app, so any size change would reflow layouts that have nothing to do with this restyle. The fills are done with `background-image`, not `background-color`, so each variant keeps its own semantic colour (and the runtime dark theme keeps being able to recolour it with !important) while still gaining the gloss. One rule covers every filled variant. ===================================================================== */ .btn { border-radius: var(--ios26-pill); font-weight: 600; letter-spacing: -0.01em; transition: transform 0.18s var(--ios26-spring), box-shadow 0.22s var(--ios26-ease), background-color 0.22s var(--ios26-ease), border-color 0.22s var(--ios26-ease), color 0.22s var(--ios26-ease); } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ios26-accent-ring); } /* ------------------------------------------------------------ filled */ .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary, .btn-dark { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(17, 24, 39, 0.13); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-dark:hover, .btn-dark:focus, .btn-dark:active { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 62%); border-color: transparent; } /* colour-matched glow per variant */ .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(102, 144, 244, 0.32); } .btn-success { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(10, 187, 135, 0.3); } .btn-info { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(56, 164, 248, 0.3); } .btn-warning { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 14px rgba(255, 184, 34, 0.32); } .btn-danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 5px 14px rgba(245, 50, 92, 0.3); } /* ------------------------------------------------------- glass/default `.btn-default:active/:focus` in style.scss is !important, so beating it needs !important too — same specificity, later in the file. */ .btn-default { background-color: var(--ios26-surface-strong); border: 1px solid var(--ios26-hairline); color: var(--ios26-text); -webkit-backdrop-filter: var(--ios26-blur-sm); backdrop-filter: var(--ios26-blur-sm); box-shadow: var(--ios26-inset), 0 1px 2px rgba(17, 24, 39, 0.05); } .btn-default:hover { background-color: var(--ios26-surface); border-color: var(--ios26-hairline-strong); color: var(--ios26-text); } .btn-default:active, .btn-default:focus { background-color: var(--ios26-fill) !important; border-color: var(--ios26-hairline-strong) !important; color: var(--ios26-text); } .btn-light, .btn-outline-light, .btn-outline-secondary, .btn-outline-default { border-color: var(--ios26-hairline); box-shadow: var(--ios26-inset), 0 1px 2px rgba(17, 24, 39, 0.05); } .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-default:hover, .btn-outline-default:focus, .btn-outline-default:active { border-color: var(--ios26-hairline-strong); } /* the "selected" state of a toggle/filter button reads as a filled pill */ .btn.active { background: var(--ios26-fill); box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.1); color: var(--ios26-text); } .btn.active:focus { background: var(--ios26-fill); box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.1); } /* ------------------------------------------------------------ grouped A capsule per button inside a segmented group or an input group would read as separate controls, so grouped buttons drop back to a soft rectangle and only the outer corners keep a radius. */ .btn-group > .btn, .btn-group-vertical > .btn, .input-group > .btn { border-radius: 0; } .btn-group > .btn:active, .btn-group-vertical > .btn:active, .input-group > .btn:active { transform: none; } .btn-group > .btn:first-child, .input-group > .btn:first-child { border-top-left-radius: var(--ios26-radius-sm); border-bottom-left-radius: var(--ios26-radius-sm); } .btn-group > .btn:last-child, .input-group > .btn:last-child { border-top-right-radius: var(--ios26-radius-sm); border-bottom-right-radius: var(--ios26-radius-sm); } .btn-group-vertical > .btn:first-child { border-top-left-radius: var(--ios26-radius-sm); border-top-right-radius: var(--ios26-radius-sm); } .btn-group-vertical > .btn:last-child { border-bottom-left-radius: var(--ios26-radius-sm); border-bottom-right-radius: var(--ios26-radius-sm); } /* ---------------------------------------------------------- dark theme */ body.color-1E202D .btn-default { background-color: var(--ios26-surface-strong) !important; border-color: var(--ios26-hairline) !important; color: var(--ios26-text) !important; } body.color-1E202D .btn-default:hover, body.color-1E202D .btn-default:active, body.color-1E202D .btn-default:focus { background-color: var(--ios26-fill-hover) !important; border-color: var(--ios26-hairline-strong) !important; color: var(--ios26-text) !important; } body.color-1E202D .btn-light, body.color-1E202D .btn-outline-light, body.color-1E202D .btn-secondary, body.color-1E202D .btn-outline-default { border-color: var(--ios26-hairline) !important; } body.color-1E202D .btn-primary, body.color-1E202D .btn-info { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 16px rgba(88, 103, 221, 0.4); } body.color-1E202D .btn.active { background: var(--ios26-fill-hover) !important; color: var(--ios26-text); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); } /* ===================================================================== iOS 26 — lists (.list-group / .list-group-item) --------------------------------------------------------------------- The iOS inset-grouped table view: no box around each row, a hairline between rows that stops short of nothing (full-bleed, like Settings), rounded ends on the group, a soft fill on hover and a tinted capsule for the selected row instead of a solid primary block. Only rows that are actually navigable (`a` / `button` / `.list-group-item-action`) get the hover fill — plenty of the app's list groups are read-only rows (invoice totals, dashboard summaries) and lighting those up on hover would promise an interaction that isn't there. The two sidebar variants (`.help-catagory` — used by the Settings and Knowledge Base menus — and `.content-sidebar`) pin their rows with `border-radius: 0 !important` and mark the selection with a left border, so they need !important to be turned into a capsule. ===================================================================== */ .list-group { border-radius: var(--ios26-radius); } .list-group > .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .list-group > .list-group-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .list-group-item { background-color: transparent; border: 0; border-bottom: 1px solid var(--ios26-hairline); padding: 11px 16px; color: var(--ios26-text); transition: background-color 0.2s var(--ios26-ease), color 0.2s var(--ios26-ease); } .list-group-item:last-child { border-bottom: 0; } /* interactive rows only */ a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus, .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ios26-fill); color: var(--ios26-text); } /* selected row: tinted capsule, not a solid primary block */ .list-group-item.active { background: var(--ios26-accent-soft); border-color: transparent; border-radius: var(--ios26-radius-sm); color: var(--ios26-accent-strong); font-weight: 600; } /* Unread rows in the messenger / notification popups are `.list-group-item.unread-notification` (app/Views/messages/notifications.php). The old flat #edeff5 block reads as a second selection state next to the new capsule, so it becomes a soft accent tint with a semibold label. */ .list-group-item.unread-notification { background-color: var(--ios26-accent-soft) !important; font-weight: 600; } /* -------------------------------------------------- sidebar list menus `.help-catagory` (Settings + Knowledge Base) and `.content-sidebar` both force `border-radius: 0 !important`, so the capsule needs the same weight to land. */ .help-catagory.list-group .list-group-item, .content-sidebar .list-group .list-group-item { border: 0 !important; border-radius: var(--ios26-radius-sm) !important; margin-bottom: 2px; padding: 9px 14px; background: transparent; color: var(--ios26-muted); font-weight: 500; } .help-catagory.list-group .list-group-item:hover, .content-sidebar .list-group .list-group-item:hover { border-left: 0 !important; text-indent: 0; background: var(--ios26-fill); color: var(--ios26-text); } .help-catagory.list-group .list-group-item.active, .content-sidebar .list-group .list-group-item.active { border-left: 0 !important; text-indent: 0; background: var(--ios26-accent-soft); color: var(--ios26-accent-strong); font-weight: 600; } .content-sidebar .list-group-item:hover, .content-sidebar .list-group-item.active { border-radius: var(--ios26-radius-sm) !important; } /* ---------------------------------------------------------- dark theme 1E202D.css paints list rows with the flat theme colour (several rules, all !important), which would cover the glass panel underneath. */ body.color-1E202D .list-group-item, body.color-1E202D .list-group .list-group-item { background-color: transparent !important; border-color: var(--ios26-hairline) !important; color: var(--ios26-text); } body.color-1E202D a.list-group-item:hover, body.color-1E202D a.list-group-item:focus, body.color-1E202D button.list-group-item:hover, body.color-1E202D .list-group-item-action:hover { background-color: var(--ios26-fill) !important; color: var(--ios26-text) !important; } body.color-1E202D .list-group-item.active, body.color-1E202D .settings .list-group-item.active, body.color-1E202D .help-catagory.list-group .list-group-item.active { background-color: var(--ios26-accent-soft) !important; border-color: transparent !important; color: #cfd8ff !important; } body.color-1E202D .help-catagory.list-group .list-group-item, body.color-1E202D .content-sidebar .list-group .list-group-item { color: var(--ios26-muted); } body.color-1E202D .help-catagory.list-group .list-group-item:hover, body.color-1E202D .content-sidebar .list-group .list-group-item:hover { background-color: var(--ios26-fill) !important; color: var(--ios26-text) !important; } body.color-1E202D .settings .list-group-item:not(.active), body.color-1E202D .help-catagory .list-group-item:not(.active) { background-color: transparent !important; } /* ===================================================================== iOS 26 — titles --------------------------------------------------------------------- iOS/macOS titles are tight and heavy: negative tracking, bold weight, and no chrome around them. `.page-title` and `.tab-title` are both header bars that live INSIDE a card (see app/Views/taxes/index.php), so they lose their own background and become a hairline-separated header of the frosted panel instead of a second white slab on top of it. Font SIZES are left alone. The bars they sit in are height-tuned against the buttons floated next to them, and re-sizing the type would knock every one of those out of alignment. ===================================================================== */ h1, h2, h3 { letter-spacing: -0.025em; font-weight: 700; } h4, h5, h6 { letter-spacing: -0.015em; font-weight: 600; } .page-title { background: transparent; border-bottom: 1px solid var(--ios26-hairline); border-radius: var(--ios26-radius-lg) var(--ios26-radius-lg) 0 0; color: var(--ios26-text); /* keep the floated buttons optically centred against the taller h4 */ } .page-title h1 { letter-spacing: -0.03em; font-weight: 700; color: var(--ios26-text); } .page-title h4 { padding: 15px 20px; letter-spacing: -0.02em; font-weight: 600; color: var(--ios26-text); } .page-title .btn { margin: 13px 5px; } .page-title .title-button-group { margin: 0 14px; } .tab-title { border-bottom: 1px solid var(--ios26-hairline); } .tab-title h4 { padding: 15px 20px; letter-spacing: -0.02em; font-weight: 600; color: var(--ios26-text); } /* section headings that name a panel rather than a page */ .card-title, .box-title, .widget-title { letter-spacing: -0.02em; font-weight: 600; color: var(--ios26-text); } /* ---------------------------------------------------------- dark theme 1E202D.css repaints .page-title and every h1-h4; both rules are plain (no !important) but the sheet loads at runtime AFTER app.all.css, so the extra body-class specificity is what wins here. */ body.color-1E202D .page-title { background-color: transparent; border-color: var(--ios26-hairline); color: var(--ios26-text); } body.color-1E202D .page-title h1, body.color-1E202D .page-title h4 { color: var(--ios26-text); } body.color-1E202D .tab-title { border-bottom-color: var(--ios26-hairline) !important; } body.color-1E202D .tab-title h4 { color: var(--ios26-text); } body.color-1E202D .card-title, body.color-1E202D .box-title, body.color-1E202D .widget-title { color: var(--ios26-text); } /* ===================================================================== iOS 26 — tab bars (.nav-tabs) --------------------------------------------------------------------- The same segmented "Liquid Glass" control as the App/Plugin Store filters (`.nav app-store-filters` in app/Views/plugins/index.php): capsule tabs, a frosted capsule marking the selection, and no underline. The store's version has a JS glider that slides between tabs; this one is pure CSS (the capsule simply moves with `.active`) because the tab bars here are server-rendered links that reload the page — there is no in-page transition for a glider to animate. Layout ------ `ul.nav.nav-tabs.bg-white.title` is the app's standard list-view header (see .claude/rules/frontend-ui.md). It holds the tabs AND a `.tab-title.no-border > .title-button-group` with the page's action buttons, and it sits directly on top of a card carrying `border-top-0 rounded-top-0`. So it is not shrink-wrapped into a floating pill like the store's filter bar — it stays a full-width bar and instead becomes the frosted TOP of that card: same surface, same blur, top corners rounded, no bottom edge. `.nav-tabs.vertical` (the Settings sidebar accordion) is excluded throughout: it contains `.settings-anchor` divs and `.list-group`s, not tab links, and is styled by _list.scss. ===================================================================== */ .nav-tabs:not(.vertical) { background: transparent; border: 0; border-radius: 0; } .nav-tabs:not(.vertical) li { margin-bottom: 0; /* the animated underline is replaced by the capsule below. These selectors mirror style.scss's, which set width/transform with !important, so they need the same weight. */ /* selected tab — frosted capsule. style.scss forces `background-color: transparent !important` and `border-color: transparent !important` on `.nav-tabs li .active`, hence the !important here. */ } .nav-tabs:not(.vertical) li a, .nav-tabs:not(.vertical) li .nav-link { padding: 9px 18px; margin: 0 2px; border: 0; border-radius: var(--ios26-pill); color: var(--ios26-muted); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; transition: background-color 0.25s var(--ios26-ease), color 0.25s var(--ios26-ease), box-shadow 0.25s var(--ios26-ease); } .nav-tabs:not(.vertical) li a:not(.active):hover, .nav-tabs:not(.vertical) li .nav-link:not(.active):hover { background: var(--ios26-fill); color: var(--ios26-text); } .nav-tabs:not(.vertical) li:not(.title-tab) a::after, .nav-tabs:not(.vertical) li:not(.title-tab) a:not(.active):hover::after, .nav-tabs:not(.vertical) li a.active::after { display: none !important; } .nav-tabs:not(.vertical) li a.active, .nav-tabs:not(.vertical) li .nav-link.active, .nav-tabs:not(.vertical) li .active, .nav-tabs:not(.vertical) li.active { background-color: var(--ios26-surface-strong) !important; border: 0 !important; border-radius: var(--ios26-pill) !important; color: var(--ios26-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(17, 24, 39, 0.12); } /* ------------------------------------------------------- the glider assets/js/ios26-tabs.js injects one absolutely positioned `li.ios26-tab-glider` per bar and translates it onto the active tab, so the selection SLIDES the way the App/Plugin Store filters do instead of the capsule blinking from one tab to the next. `ios26-tabs-glide` is added by that script once the glider is in place. Everything below is scoped to it, so with JS disabled or failed the static capsule above still marks the selection. NOTE the high-specificity selector + !important on `position`: the theme's `.nav li { position: relative }` would otherwise keep this
  • in flow, where it would take its own slot and shove the tabs sideways (the same trap the store's implementation documents). */ .nav-tabs.ios26-tabs-glide { position: relative; /* transitions are switched on only after the first placement, so the capsule doesn't fly in from the corner on page load */ /* the glider is the capsule now — the active link only changes ink */ } .nav-tabs.ios26-tabs-glide li.ios26-tab-glider { position: absolute !important; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; z-index: 0; float: none; list-style: none; border-radius: var(--ios26-pill); background: var(--ios26-surface-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(17, 24, 39, 0.12); pointer-events: none; } .nav-tabs.ios26-tabs-glide.ios26-tabs-ready li.ios26-tab-glider { transition: transform 0.36s var(--ios26-spring), width 0.36s var(--ios26-spring), height 0.36s var(--ios26-spring); } .nav-tabs.ios26-tabs-glide li a, .nav-tabs.ios26-tabs-glide li .nav-link { position: relative; z-index: 1; } .nav-tabs.ios26-tabs-glide li a.active, .nav-tabs.ios26-tabs-glide li .nav-link.active, .nav-tabs.ios26-tabs-glide li .active, .nav-tabs.ios26-tabs-glide li.active { background-color: transparent !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .nav-tabs.ios26-tabs-glide.ios26-tabs-ready li.ios26-tab-glider { transition: none; } } /* ------------------------------------------- the list-view header bar */ .nav-tabs.title, .nav-tabs.bg-white:not(.vertical) { display: flex; flex-wrap: nowrap; align-items: center; padding: 9px 12px; background-color: var(--ios26-surface) !important; -webkit-backdrop-filter: var(--ios26-blur); backdrop-filter: var(--ios26-blur); border: 1px solid var(--ios26-edge) !important; border-bottom: 0 !important; border-radius: var(--ios26-radius-lg) var(--ios26-radius-lg) 0 0; box-shadow: var(--ios26-inset); /* the action buttons ride on the right of the same bar */ } .nav-tabs.title li, .nav-tabs.bg-white:not(.vertical) li { float: none; flex: 0 0 auto; } .nav-tabs.title li a, .nav-tabs.bg-white:not(.vertical) li a { padding: 8px 16px; } .nav-tabs.title .tab-title, .nav-tabs.bg-white:not(.vertical) .tab-title { display: flex; align-items: center; margin-left: auto; padding: 0; border: 0; } .nav-tabs.title .tab-title h4, .nav-tabs.bg-white:not(.vertical) .tab-title h4 { float: none; margin: 0; padding: 0 10px; } .nav-tabs.title .title-button-group, .nav-tabs.bg-white:not(.vertical) .title-button-group { display: flex; align-items: center; gap: 8px; float: none; margin: 0 0 0 8px; } .nav-tabs.title .title-button-group .btn, .nav-tabs.bg-white:not(.vertical) .title-button-group .btn { margin: 0; } /* ---------------------------------------------------------- dark theme 1E202D.css repaints .nav-tabs and recolours the active tab and the underline; it loads after app.all.css, so these need the body class. */ body.color-1E202D .nav-tabs:not(.vertical) { background: transparent; border-color: transparent !important; } body.color-1E202D .nav-tabs:not(.vertical) li a, body.color-1E202D .nav-tabs:not(.vertical) li .nav-link { color: var(--ios26-muted) !important; } body.color-1E202D .nav-tabs:not(.vertical) li a:not(.active):hover, body.color-1E202D .nav-tabs:not(.vertical) li .nav-link:not(.active):hover { background: var(--ios26-fill); color: var(--ios26-text) !important; } body.color-1E202D .nav-tabs:not(.vertical) li a.active, body.color-1E202D .nav-tabs:not(.vertical) li .nav-link.active, body.color-1E202D .nav-tabs:not(.vertical) li .active, body.color-1E202D .nav-tabs:not(.vertical) li.active { background-color: var(--ios26-fill-hover) !important; color: var(--ios26-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.35); } body.color-1E202D .nav-tabs.title, body.color-1E202D .nav-tabs.bg-white:not(.vertical) { background-color: var(--ios26-surface) !important; border: 1px solid var(--ios26-edge) !important; border-bottom: 0 !important; } body.color-1E202D .nav-tabs.ios26-tabs-glide li.ios26-tab-glider { background: var(--ios26-fill-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.35); } /* ===================================================================== iOS 26 — search fields --------------------------------------------------------------------- The capsule search pill from the App/Plugin Store header (`.app-store-search input` in app/Views/plugins/index.php): frosted fill, hairline edge, an inner top highlight, and an accent focus ring instead of a border colour change. Scope — search fields only, NOT every .form-control. Form inputs are left alone on purpose: they sit in dense two-column forms all over the app where a 999px capsule would fight the labels next to it. Not touched here, because they already own their own glass skin and load after app.all.css: * `.dt-container .dt-search input` / `.datatable-search` — appTable (assets/css/apptable-glass.css) * `.nz-kb-nav__search` — knowledge base nav (kb-nav-glass.css) * `.chat-emoji-search` — messenger emoji picker ===================================================================== */ input[type="search"], .help-search-box, .item-search-box, .search-box .form-control { height: auto; border-radius: var(--ios26-pill); border: 1px solid var(--ios26-hairline); background-color: var(--ios26-surface-strong); -webkit-backdrop-filter: var(--ios26-blur-sm); backdrop-filter: var(--ios26-blur-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); color: var(--ios26-text); transition: box-shadow 0.22s var(--ios26-ease), border-color 0.22s var(--ios26-ease), background-color 0.22s var(--ios26-ease); } input[type="search"]:focus, .help-search-box:focus, .item-search-box:focus, .search-box .form-control:focus { background-color: #fff; border-color: var(--ios26-accent); box-shadow: 0 0 0 4px var(--ios26-accent-ring); outline: none; } input[type="search"]::placeholder, .help-search-box::placeholder, .item-search-box::placeholder, .search-box .form-control::placeholder { color: var(--ios26-muted); } /* The knowledge-base search keeps its background-image magnifier, so only the colour layer of the shorthand is replaced — and its two hard-coded `border-*-radius: 5px !important` corners need the same weight. */ .help-search-box { padding: 12px 18px 12px 42px; border-top-right-radius: var(--ios26-pill) !important; border-bottom-right-radius: var(--ios26-pill) !important; } .help-search-box:focus { border-color: var(--ios26-accent); } /* The global search modal composes a select2 and this input into one flat bar (`.search-modal .help-search-box` is deliberately border/background free). Keep it flat so the composite doesn't gain a stray capsule. */ .search-modal .help-search-box { padding: 6px 8px; border-radius: 0 !important; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .search-modal .help-search-box:focus { background-color: transparent; box-shadow: none; } /* select2's own search box, so the dropdown matches the field above it */ .select2-search input, .select2-container .select2-search__field { border-radius: var(--ios26-radius-sm) !important; border: 1px solid var(--ios26-hairline) !important; background-color: var(--ios26-surface-strong) !important; } /* ---------------------------------------------------------- dark theme 1E202D.css sets `.form-control { background-color / border-color / color ... !important }`, so — exactly as the App Store page does — the dark search pill needs body-class specificity AND !important. */ body.color-1E202D input[type="search"], body.color-1E202D input[type="search"].form-control, body.color-1E202D .help-search-box, body.color-1E202D .help-search-box.form-control, body.color-1E202D .item-search-box, body.color-1E202D .search-box .form-control { background-color: var(--ios26-surface-strong) !important; border-color: var(--ios26-hairline) !important; color: var(--ios26-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } body.color-1E202D input[type="search"]:focus, body.color-1E202D input[type="search"].form-control:focus, body.color-1E202D .help-search-box:focus, body.color-1E202D .help-search-box.form-control:focus, body.color-1E202D .item-search-box:focus, body.color-1E202D .search-box .form-control:focus { background-color: rgba(20, 21, 26, 0.92) !important; border-color: var(--ios26-accent) !important; box-shadow: 0 0 0 4px var(--ios26-accent-ring); } body.color-1E202D .search-modal .help-search-box, body.color-1E202D .search-modal .help-search-box.form-control { background-color: transparent !important; box-shadow: none; } body.color-1E202D .select2-search input, body.color-1E202D .select2-container .select2-search__field { background-color: var(--ios26-surface-strong) !important; border-color: var(--ios26-hairline) !important; color: var(--ios26-text) !important; } /* ===================== IOS26-UI:END ===================== */