/* ========================================================================== Author's custom styles ========================================================================== */ /*ColorsGreen:dde346; Blue:9ec4c1; Grey:7c7a74; */ @media screen { /*Global classes*/ html, body {} h1 { color:#545454; } h2 { color:#545454; } h3 { color:#545454; } h4 { color:#545454; } h5 { color:#545454; } h6 { color:#545454; } p { color:#545454; } a { color:#6DA29D; } a:hover { text-decoration:none; color:#91B7B4; } a:focus, a:active { text-decoration:none; } *:focus { outline:none !important; text-decoration:none; } .no-select { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .clearboth { clear:both; } .notransition { -webkit-transition:none !important; transition:none !important; } .table > thead > tr > th.border-right, .table > tbody > tr > th.border-right, .table > tfoot > tr > th.border-right, .table > thead > tr > td.border-right, .table > tbody > tr > td.border-right, .table > tfoot > tr > td.border-right { border-right:1px solid #ddd; } .visible-c { visibility:visible; opacity:1; filter:alpha(opacity=100); -webkit-transition:opacity 0.25s linear; transition:opacity 0.25s linear; } .hidden-c { visibility:hidden; opacity:0; filter:alpha(opacity=0); -webkit-transition:visibility 0s 0.25s, opacity 0.25s linear; transition:visibility 0s 0.25s, opacity 0.25s linear; } .btn i.fa { margin-right:5px; } textarea { min-height:125px; resize:vertical; } .crop-image { width:100%; max-height:500px; margin-bottom:30px; } .crop-image > img { max-width:100%; max-height:500px; } .img-preview-large { float:left; background-color:#fff; overflow:hidden; text-align:center; width:200px; height:200px; margin-bottom:20px; } .img-preview-small { float:left; background-color:#fff; overflow:hidden; text-align:center; width:100px; height:100px; margin-bottom:20px; margin-left:20px; } /*dataTables_empty*/ .dataTable .dataTables_empty { text-align:center; padding:20px 0; } /*Language flag icons*/ .languages { position:absolute; top:10px; right:15px; display:none;} .languages a { margin-right:5px; } .languages a:last-child { margin-right:0; } /*Navigation*/ #navigation { background-color:#2f5020; -webkit-transition:width ease-in-out 0.25s; transition:width ease-in-out 0.25s; position:fixed; left:0; top:0; bottom:0; height:100%; width:250px; cursor:default; z-index:5; overflow:hidden;border-right: 1px solid #222222;} #navigation .logo { opacity:1; filter:alpha(opacity=100); -webkit-transition:opacity ease-in-out 0.25s; transition:opacity ease-in-out 0.25s;width: 190px; padding:10px; margin:0 auto; display:table;} #navigation .menu-toggle { position:absolute; bottom:5px; right:5px; } /*Navigation carets*/ #navigation.expanded .caret { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } #navigation.narrow .caret { -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); } /*Navigation*/ #navigation.narrow { width:57px; } #navigation.expanded { width:250px; } #navigation a.logo-wrapper { display:block; padding:25px 20px;background: #F4F4F4;} #navigation ul { width:250px; margin:0; padding:0; list-style:none; list-style-image:none; } #navigation ul li { position:relative; } #navigation ul li a { -webkit-transition:color ease-in-out 0.25s, background-color ease-in-out 0.25s; transition:color ease-in-out 0.25s, background-color ease-in-out 0.25s; padding:5px 0; border-bottom:1px solid #2d2d2d; display:block; position:relative; padding-left:57px; font-weight:300; color:#bbb; text-transform:capitalize; } #navigation ul li a:first-child { border-top:1px solid #3d6224; } #navigation ul li a:hover { color:#ccc; background-color:#111; } #navigation ul li a.active { color:#aab515; background-color:#58714c; border-left:3px solid #aab515; padding-left:54px; } #navigation ul li a.active i.fa { left:8px; } #navigation ul li a span { line-height:38px; font-size:1.1em; font-weight:300; } #navigation ul li a .fa { padding-top:5px; font-size:1.4em; line-height:1.9em; text-align:center; display:block; position:absolute; top:1px; left:11px; width:35px; height:35px; overflow:hidden; } #navigation h3 { text-transform:uppercase; font-weight:300; margin-top:40px; opacity:1; filter:alpha(opacity=100); -webkit-transition:opacity ease-in-out 0.25s; transition:opacity ease-in-out 0.25s; color:#bbb; font-size:1em; width:200px; padding-left:10px; } #navigation ul li a .sub-trigger { position:absolute; right:45px; top:0px; color:#ccc; } #navigation ul li a .sub-trigger i.fa { -webkit-transition:-webkit-transform 0.25s ease-in-out; transition:transform 0.25s ease-in-out; } #navigation ul li ul.sub-menu { display:none; left:0; top:0; position:relative; -webkit-transition:left 0.25s ease-in-out; transition:left 0.25s ease-in-out; } #navigation ul li ul.sub-menu li a { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; padding-left:67px; padding-right:15px; font-size:.9em; } #navigation ul li ul.sub-menu li a .fa { -webkit-transition:left 0.25s ease-in-out; transition:left 0.25s ease-in-out; left:21px; top:3px; } #navigation ul li ul.sub-menu li a.active .fa { left:18px; } #navigation ul li ul.sub-menu.active { display:block; } #navigation.narrow ul li ul.sub-menu li a { padding-left:57px; padding-right:15px; font-size:.9em; } #navigation.narrow ul li ul.sub-menu li a .fa { left:11px; } #navigation .switch-nav-viewport { position:absolute; bottom:15px; left:15px; border:0; background:0; color:#ccc; display:none;} #navigation .switch-nav-viewport i { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; font-size:1.4em; } #navigation.expanded .recent-activity { visibility:visible; opacity:1; filter:alpha(opacity=100); -webkit-transition:opacity 0.25s linear; transition:opacity 0.25s linear; } #navigation .navigation { border-right:1px solid #2d2d2d; left:0; top:0; right:0; position:relative; -webkit-transition:left 0.4s ease-in-out; transition:left 0.4s ease-in-out; } /*Navigation narrow overrides*/ #navigation.narrow h3 { opacity:0; filter:alpha(opacity=0); } #navigation.narrow .logo { opacity:0; filter:alpha(opacity=0); } #navigation.narrow .recent-activity { visibility:hidden; opacity:0; filter:alpha(opacity=0); -webkit-transition:visibility 0s 0.25s, opacity 0.25s linear; transition:visibility 0s 0.25s, opacity 0.25s linear; } /*Mobile navigation styles*/ .mobile-nav { width:100%; height:45px; background-color:#222; } .mobile-nav .nav-toggle { position:absolute; z-index:4; float:left; top:3px; left:0; padding:9px 10px; background:0; border:0; -webkit-transition:left 0.25s ease-in-out; transition:left 0.25s ease-in-out; } .mobile-nav .nav-toggle .icon-bar { display:block; width:30px; height:3px; border-radius:1px; background-color:#bbb; } .mobile-nav .nav-toggle .icon-bar + .icon-bar { margin-top:6px; } .mobile-nav .nav-toggle.nav-expanded { left:250px; } /*Legenda*/ .legenda { margin-bottom:20px; display:block; width:100%; margin-top:-15px;} .legenda-block { display:block; width:100%;} .legenda-block .legenda-item { overflow: hidden; margin-bottom:10px; } .legenda-block .legenda-item:last-of-type { margin-bottom:0; } .legenda-block .legenda-item .legenda-color {width: 32px;height: 18px;display: block;float: left;font-size: .8em;border: 1px solid #222222;} .legenda-block .legenda-item .legenda-explanation { float: left; line-height: 1.2em; margin-left: 10px; color: #222222; } /*Page*/ #page { -webkit-transition:padding-left ease-in-out 0.25s; transition:padding-left ease-in-out 0.25s; } #page.nav-expanded { padding-left:265px; padding-right:15px; } #page.nav-narrow { padding-left:73px; padding-right:15px; } #page .header-bar { overflow:hidden; margin-bottom:20px; } #page .header-bar h1 { float:left; display:inline-block; margin-bottom:15px; } #page ul.breadcrumbs { float:left; display:block; clear:both; margin:0; padding:0; list-style:none; list-style-image:none; margin-bottom:10px; } #page ul.breadcrumbs li { float:left; position:relative; padding-left:13px; margin-left:10px; } #page ul.breadcrumbs li:before { position:absolute; font-family:FontAwesome; color:#EAEAEA; top:0; left:0; content:"\f0da"; } #page ul.breadcrumbs li:first-child { padding-left:20px; margin-left:0; } #page ul.breadcrumbs li:first-child:before { content:"\f015"; color:#545454; } #page ul.breadcrumbs li a { color:#9E9D9D; font-size:.9em; } /*Pagina styles*/ .table-wrapper .header { border-bottom:0; width:100%; background:#f4f4f4; padding:15px; } .table-wrapper .dataTables_filter { display:none; } .table-wrapper .dataTables_empty { text-align:center; padding:20px 5px; } .table-wrapper .dataTables_empty i { margin-right:5px; } .table-wrapper .header .add-wrapper, .block .header .add-wrapper { float:right; } .table-wrapper .header .add-wrapper .dropdown, .block .header .add-wrapper .dropdown { width:auto; display:inline; float:left; margin-right:15px; } .table-wrapper .header .add-wrapper a, .block .header .add-wrapper a { display:inline; float:left; } .table-wrapper .header .add-wrapper .prullenbak, .block .header .add-wrapper .prullenbak { margin-left:15px; } .table-wrapper .header .search-wrapper { float:left; width:30%; position:relative; display:inline-block; } .table-wrapper .header .search-wrapper input { width:100%; position:relative; border:1px solid #ccc; padding:6px 10px; padding-right:30px; border-radius:4px; } .table-wrapper .header .search-wrapper i { position:absolute; right:10px; top:8px; color:#ccc; } .table-wrapper .actions-wrapper { display:none; float:right; margin-right:15px; } .table-wrapper .actions-wrapper .restore { margin-right:11px; } .table-wrapper .header .action-wrapper { float:right; position:relative; display:inline-block; } .table-wrapper .header .action-wrapper button i { margin-right:5px; } .table-wrapper table thead tr { background:#f4f4f4; } .table-wrapper table thead th i.fa-caret-right { margin-left:5px; opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } .table-wrapper table thead th.sorting-desc i.fa-caret-right { opacity:1; filter:alpha(opacity=100); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } .table-wrapper table thead th.sorting-asc i.fa-caret-right { opacity:1; filter:alpha(opacity=100); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); } .table-wrapper table { width:100%; border:1px solid #dfdfdf; border-collapse:collapse; border-spacing:1px; } .table-wrapper table tbody tr:hover { background:#f4f4f4; } .table-wrapper table th, .table-wrapper table td { padding:10px 8px; word-wrap:break-word; vertical-align:middle; border:1px solid #DFDFDF; border-left:0; border-right:0; } .table-wrapper table tr.red th, .table-wrapper table tr.red td { background:#BB4747; color:#fff; } .table-wrapper table tr.green th, .table-wrapper table tr.green td { background:#9FC6BC; color:#fff; } .table-wrapper.block table tr.orange-alert th, .table-wrapper.block table tr.orange-alert td { background:#FF991A; color:#fff; -webkit-animation:highlight 2s infinite; animation:highlight 2s infinite; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .table-wrapper.block table tr.orange-alert td:first-of-type:before { content:'\f017'; font-family:'FontAwesome'; margin-right:10px; color:#BB4747; } .table-wrapper.block table tr td.border-left { border-left:1px solid #fff; } @-webkit-keyframes highlight { 0% { background:#FF991A; } 50% { background:rgba(255, 153, 26, 0.7) } 100% { background:#FF991A; } } @keyframes highlight { 0% { background:#FF991A; } 50% { background:rgba(255, 153, 26, 0.7) } 100% { background:#FF991A; } } table tr:nth-child(even) {background: #efefef} .table-wrapper table td.actions { text-align:right; } .table-wrapper table td.actions a { margin-right:5px; color:#ccc; opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .table-wrapper table tbody tr:hover td.actions a { opacity:1; filter:alpha(opacity=100); } .table-wrapper table tbody tr td.actions a:hover { color:#000; } .table-wrapper table tr.seperator { background-color:#f4f4f4 !important; color:#545454 !important; } .table-wrapper table tr.seperator a.tabledrag-handle .handle:before{ color:#545454 !important; } .table-wrapper .no-results { display:none; } .table-wrapper .no-results p { margin:0; margin-top:8px; } .table-wrapper .error-message { display:none; margin-bottom:15px; } table .checkbox label { -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; opacity:0; filter:alpha(opacity=0); } table .checkbox input:checked + label { opacity:1; filter:alpha(opacity=100); } table tr:hover .checkbox label { opacity:1; filter:alpha(opacity=100); } table .checkbox label.check-all { display:inline-block; } .delete-confirmation { display:none; } .delete-confirmation p { margin-bottom:10px; } .delete-confirmation button.confirm { margin-right:10px; } .delete-confirmation button.cancel {} .dashboard .table-wrapper table td.actions { text-align:left; } .dashboard .table-wrapper table td.actions a { opacity:1; filter:alpha(opacity=100); } .table-wrapper table .input-column { width:20px; padding-left:15px; text-align:center; } .table-wrapper table .star-column { width:30px; text-align:center; } th.sorting { cursor:pointer; white-space:nowrap; } th.sorting_desc { position:relative; cursor:pointer; white-space:nowrap; } th.sorting_desc:after { width:10px; height:12px; background:url('/_cms/img/icon/sort.png?v=2') no-repeat -10px top; display:inline-block; content:''; top:2px; left:4px; position:relative; } th.sorting_asc { position:relative; cursor:pointer; white-space:nowrap; } th.sorting_asc:after { width:10px; height:12px; background:url('/_cms/img/icon/sort.png?v=2') no-repeat left top; display:inline-block; content:''; top:2px; left:4px; position:relative; } /*Table logs*/ .block.log ul.pagination { display:table; margin-left:auto; margin-right:auto; } /*Clickable row*/ .clickable-row { cursor:pointer; } /*Form-control*/ .form-control { height:40px; } .form-group { margin-bottom:30px; } /*Global block class*/ .block { width:100%; border:1px solid #dfdfdf; margin-bottom:40px; } .block .header { padding:15px; background:#f4f4f4; border-bottom:1px solid #dfdfdf; } .block .header:after { clear:both; display:table; content:''; } .block .header h2 { margin:0; font-size:1.4em; } .block .body { padding:35px; } .block.margin-top { margin-top:40px; } .block .body:after { clear:both; content:''; display:table; } .block .header.action-btn h2 { float:left; margin-top:7px; } .block .header.action-btn a.btn { float:right; display:block; } .block .header.action-btn .btn-group { float:right; display:block; } .block .header.action-btn .btn-group a.btn { float:left; display:inline-block; } .block .header.action-btn .btn-success { float:right; display:block; } /*Page overview*/ .block.page-overview .body { padding:15px; } .block.page-overview .header { position:relative; } .block.page-overview .header:after { clear:both; content:''; display:table; } .block.page-overview .tabledrag-toggle-weight-wrapper { display:none; } .block.page-overview.table-wrapper table .input-column { width:20px; padding-right:0px; text-align:center; } .block.page-overview .checkbox label:before { bottom:-8px; } .block.page-overview tr td:first-child, .block.page-overview tr th:first-child { padding-left:10px; } .block.page-overview .fa-check { color:#009900; } .block.page-overview .fa-times { color:#ff2222; } .block.page-overview .header.sticky { position:fixed; left:281px; right:31px; top:0; z-index:2; width:auto; -webkit-transition:left 0.25s ease-in-out; transition:left 0.25s ease-in-out; } #page.nav-narrow .block.page-overview .header.sticky { left:89px; right:31px; } /*Category overview*/ .block.category-overview.table-wrapper .actions-wrapper { margin-right:0; } .block.category-overview.table-wrapper .header .search-wrapper { width:50%; } .block.category-overview .body { padding:15px; } .block.category-overview .header { overflow:hidden; } .block.category-overview .table-wrapper table .input-column { width:20px; padding-right:7px; text-align:center; } .block.category-overview .checkbox label:before { bottom:-8px; } .block.category-overview tbody tr { cursor:pointer; -webkit-transition:background 0.25s ease-in-out, color 0.25s ease-in-out; transition:background 0.25s ease-in-out, color 0.25s ease-in-out; } .block.category-overview .active-category { background:#9ec4c1; color:#fff; } .block.category-overview .active-category a.tabledrag-handle .handle:before, .block.category-overview .active-category select { color:#fff; } .block.category-overview thead tr th:first-child { padding-left:10px; } .block.category-overview .new-category { margin-top:-1px; } .block.category-overview .new-category table { border-top:0; display:table; float:left; } .block.category-overview .new-category table tr:first-child td { border-top:0; } .block.category-overview .new-category table tr:first-child td:first-child { padding-left:10px; } .block.category-overview .new-category table tr:first-child td:last-child { width:200px; padding-right:10px; } .block.category-overview .new-category input[type="text"] { height:34px; width:100%; } .block.category-overview .new-category tr { background:#fff !important; cursor:initial; } .block.category-overview .checkbox { max-width:20px; } /*Tabledrag*/ .tabledrag-toggle-weight-wrapper { display:none; } /*Login*/ #login { font-family:'Helvetica'; width:400px; height:400px; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; } #login .logo { margin-bottom:40px; } #login .logo img { margin:0 auto; max-width:400px; display:table; margin-bottom:20px; } #login form { border-radius:4px; padding:40px; border:1px solid #efefef; margin-bottom:15px; margin-top:5px; } #login label { color:#7d7b75; font-size:0.9em; float:left; clear:both; width:100%; margin:0; } #login input[type="text"], #login input[type="password"] { margin-bottom:20px; border:0; font-size:1.4em; color:#949494; font-weight:normal; border-bottom:2px solid #efefef; width:100%; padding:5px 0; transition:all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; } #login input[type="text"]:focus, #login input[type="password"]:focus { border-bottom:2px solid #949494; } #login input[type="submit"] { margin:0 auto; display:table; background:#9dc5c2; color:#fff; border:1px solid #9dc5c2; border-radius:4px; padding:12px 25px; transition:all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; } #login input[type="submit"]:hover, #login input[type="submit"]:focus { cursor:pointer; background:#fff; color:#9dc5c2; } #login .problem-wrapper a { clear:both; text-align:center; width:100%; display:block; color:#7d7b75; position:relative; text-decoration:none; font-size:0.8em; } #center-block { font-family:'Helvetica'; border:1px solid #efefef; border-radius:4px; text-align:center; width:400px; height:200px; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; vertical-align:middle; } #center-block .avatar { position:absolute; top:-130px; left:122px; width:156px; height:175px; background:transparent url("/_cms/img/avatars/websocial-cms.png") no-repeat; } #center-block .vertical-center { display:block; margin:auto; padding:20px; } #center-block .vertical-center h1 { margin-top:0; } /* ========================================================================== CRM ========================================================================== */ /*Visitekaart bedrijf*/ .block.card {} .block.card:after { clear:both; content:''; display:table; } .block.card .avatar { float:left; border:1px solid #DFDFDF; max-width:140px; margin-right:15px; } .block.card h3 { margin-top:0; } .block.card .body { padding:35px; } .block.card .contact-information { float:left; margin-left:10px; } .block.card .contact-information p { line-height:1.7em; } .block.card .contact-information .phone, .block.card .contact-information .mobile, .block.card .contact-information .email, .block.card .contact-information .website, .block.card .contact-information .fax, .block.card .contact-information .location { position:relative; padding-left:24px; margin:0; display:block; } .block.card .contact-information .phone:before { position:absolute; left:3px; top:0px; font-family:'FontAwesome'; content:'\f095'; color:#545454; } .block.card .contact-information .mobile:before { position:absolute; left:4px; top:0px; font-family:'FontAwesome'; content:'\f10b'; color:#545454; } .block.card .contact-information .email:before { position:absolute; left:1px; top:0px; font-family:'FontAwesome'; content:'\f086'; color:#545454; } .block.card .contact-information .website:before { position:absolute; left:2px; top:0px; font-family:'FontAwesome'; content:'\f0ac'; color:#545454; } .block.card .contact-information .fax:before { position:absolute; left:1px; top:0px; font-family:'FontAwesome'; content:'\f1ac'; color:#545454; } .block.card .contact-information .location:before { position:absolute; left:4px; top:0px; font-family:'FontAwesome'; content:'\f041'; color:#545454; } .block #google-frame-location { float:right; position:relative; width:100%; height:400px; } .block #google-frame-location iframe { width:100%; height:100%; border:0; padding:0; margin:0; } .block #google-frame-location .ajax-loader { position:absolute; z-index:-1; top:calc(50% - 16px); left:calc(50% - 16px); } /*Notitie*/ .block.notitie {} .block.notitie .selection { margin-bottom:20px; } .block.notitie .body.collapsed { display:none; } .block.notitie .body { border-bottom:1px solid #dfdfdf; } .block.notitie .add-note textarea { margin-top:20px; width:100%; } .block.notitie .add-note button { float:right; margin-top:20px; } .block.notitie .add-note-button { float:right; } .block.notitie .add-chat button { float:right; margin-top:20px; } .block.notitie .add-chat-button { float:right; } .block.notitie .header:after { clear:both; content:''; display:table; } .block.notitie .header h2 { float:left; margin-top:7px; } .block.notitie .notes .note { padding:35px; border-top:1px solid #dfdfdf; } .block.notitie .notes .note:first-child { margin-top:0; border-top:0; } .block.notitie .notes .note:after { content:''; clear:both; display:table; } .block.notitie .notes .note .message { display:block; } .block.notitie .notes .note .message p.subject { font-weight:bold; margin:0; } .block.notitie .notes .note .message p { line-height:1.7em; color:#545454; margin-bottom:0; } .block.notitie .notes .note .message.collapsed div.bericht { position:relative; max-height:6.8em; overflow:hidden; } .block.notitie .notes .note.edited .message.collapsed div.bericht { max-height:10.2em; } .block.notitie .notes .note .message div.bericht p { line-height:1.7em; } .block.notitie .notes .note .message.collapsed div.bericht:after { content:""; text-align:right; position:absolute; bottom:-3px; right:0; width:40%; height:1.8em; background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); background:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } .block.notitie .notes .note .message.expanded div.bericht { max-height:none; overflow:visible; } .block.notitie .notes .note .message.expanded div.bericht p { margin-bottom:15px; } .block.notitie .notes .note .message.expanded div.bericht p:last-of-type { margin-bottom:0; } .block.notitie .notes .note .message:after {} .block.notitie .notes .note .message .show-message { border:0; padding:0px 7px 5px 7px; line-height:0.5em; font-weight:bold; border-radius:4px; color:#fff; background:#9ec4c1; -webkit-transition:background 0.2s ease-in-out; transition:background 0.2s ease-in-out; } .block.notitie .notes .note .message .show-message:hover { background:#91B7B4; } .block.notitie .notes .note .message.expanded .show-message { display:none; } .block.notitie .notes .note .message .bericht h1, .block.notitie .notes .note .message .bericht h2, .block.notitie .notes .note .message .bericht h3 { margin-top:0; } /*Edit transition*/ .block.notitie .notes .note .post-information p a.edit-note { color:#9ec4c1; padding-right:15px; opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; position:relative; } .block.notitie .notes .note .post-information p a.edit-note:after { content:'\f040'; font-family:'FontAwesome'; position:absolute; right:0; top:0; display:block; } .block.notitie .notes .note:hover .post-information p a.edit-note { opacity:1; filter:alpha(opacity=100); } /*Notitie ckeditor*/ .block.notitie .notes .note.edit .cke { margin-bottom:20px; } /*Notitie post information*/ .block.notitie .notes .note .post-information { float:right; margin-left:30px; margin-bottom:10px; } .block.notitie .notes .note .post-information p { color:#ccc; text-align:right; font-size:0.85em; margin:0; line-height:1.5em; float:right; clear:both; } .block.notitie .notes .note .post-information .date { font-weight:bold; line-height:1.6em; color:#545454; margin-bottom:0; } .block.notitie .notes .note .post-information .user { line-height:1.6em; margin-bottom:0; color:#ADADAD; } .block.notitie .notes .note .post-information p a.edit-note { margin-top:10px; display:inline-block; cursor:pointer; } .block.notitie .notes .note .post-information p.label { font-weight:normal; font-size:0.8em; padding:0; padding-bottom:2px; } .block.notitie .notes .note .post-information .created { display:block; overflow:hidden; } .block.notitie .notes .note .post-information .edit { margin-top:10px; display:block; overflow:hidden; } /*Block contactpersonen*/ .block.contactpersonen .body { padding:15px; } .block.contactpersonen table { border:1px solid #dfdfdf; margin-bottom:0; width:100%; } .block.contactpersonen table thead th { background:#f4f4f4; } .block.contactpersonen .table > thead > tr > th { border-bottom:1px solid #dfdfdf; line-height:1.4em; } .block.contactpersonen .table tr td:last-child a { color:#9ec4c1; opacity:0; filter:alpha(opacity=0); } .block.contactpersonen .table tr:hover td:last-child a { opacity:1; filter:alpha(opacity=100); } .block.contactpersonen .table tr td a {color: #6DA29D;} .block.contactpersonen .table tr td a:hover { color:#91B7B4; } /*Extra information*/ .block.extra-information table td, .block.extra-information table th { line-height:1.7em; padding-right:20px; } .ui.dropdown .menu > .item { font-size:15px; padding:12px; } .ui.dropdown .item.default { color:rgba(179, 179, 179, .7) !important; } .form-group .ui.dropdown { min-height:40px; height:40px; line-height:1.4em; } .form-group .ui.dropdown .icon { top:13px !important; } /*Dropdown multiple*/ .ui.multiple.dropdown { min-height:34px; padding:2px 3px; height:auto; } .ui.multiple.dropdown .dropdown.icon { top:3px !important; } .ui.multiple.dropdown > .label { margin-top:2px; margin-bottom:2px; color:#000; font-weight:normal; } .ui.multiple.dropdown .delete.icon { position:relative; } .ui.multiple.dropdown .delete.icon:after { content:'\f00d'; font-family:FontAwesome; cursor:pointer; margin-left:3px; font-style:normal; } /*Bootstrap overrides*/ .dropdown-menu > li > a { padding:10px 12px; } .dropdown-menu > li > a i.fa { margin-right:5px; } .dropdown-menu .divider { margin:0; } .dropdown-menu { padding:0; } .dropdown-menu > li > a:hover { background-color:#ebebeb; } /*Form global styles*/ .info { cursor:help; padding:0; margin:0; border:0; background:0; color:#9ec4c1; } .info:after { content:'\f05a'; font-family:FontAwesome; display:inline-block; } .tooltip-inner { text-align:left; padding:15px; } .form-control:focus { border-color:rgba(158, 196, 193, 0.88); outline:0; box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(158, 196, 193, .6); } /*Checkbox styles*/ .checkbox-group { margin-bottom:30px; } .checkbox { padding:0; margin:0; margin-bottom:10px; } .checkbox:last-child { margin-bottom:0; } .checkbox label { display:inline-block; cursor:pointer; position:relative; padding-left:25px; margin-right:15px; } .checkbox input[type="checkbox"] { display:none; } .checkbox label:before { content:"\2713"; display:inline-block; width:16px; height:16px; margin-right:10px; position:absolute; left:0; bottom:calc(50% - 8px); background-color:#fff; border:1px solid #7c7c7c; border-radius:2px; font-size:15px; line-height:15px; text-align:center; color:#fff; text-shadow:1px 1px 1px rgba(255, 255, 255, .2); -webkit-transition:all 0.15s ease-in-out; transition:all 0.15s ease-in-out; } .checkbox input[type="checkbox"]:checked + label:before { content:"\2713"; text-shadow:1px 1px 1px rgba(0, 0, 0, .2); font-size:15px; color:#7c7a74; text-align:center; line-height:15px; font-weight:bold; } .checkbox input[type="checkbox"]:disabled:checked + label:before { color:#CAC9C7; border-color:#B7B7B7; } /*Radio styles*/ .radio-group { margin-bottom:30px; } .radio { padding:0; margin:0; margin-bottom:10px; } .radio:last-child { margin-bottom:0; } .radio label { display:inline-block; cursor:pointer; position:relative; padding-left:25px; margin-right:15px; } .radio input[type="radio"] { display:none; } .radio label:before { border-radius:8px; content:""; display:inline-block; width:16px; height:16px; margin-right:10px; position:absolute; left:0; bottom:2px; background-color:#fff; border:1px solid #7c7c7c; -webkit-transition:color 0.15s ease-in-out, opacity 0.15s ease-in-out; transition:all 0.15s ease-in-out, opacity 0.15s ease-in-out; } .radio label:after { background-color:transparent; content:''; height:8px; width:8px; border-radius:100%; position:absolute; top:6px; left:4px; -webkit-transition:background-color 0.15s ease-in-out; transition:background-color 0.15s ease-in-out; } .radio input[type="radio"]:checked + label:after { background-color:#414141; } /*Submit button*/ button[type="submit"] { float:right; display:inline-block; margin-bottom:0; font-weight:400; text-align:center; vertical-align:middle; cursor:pointer; background-image:none; border:1px solid transparent; white-space:nowrap; padding:6px 12px; font-size:14px; line-height:1.42857143; border-radius:4px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:#fff; background-color:#9ec4c1; border-color:#76B3AE; position:relative; padding-left:34px; } a.btn.btn-success, button.btn.btn-success { float:right; display:inline-block; margin-bottom:0; font-weight:400; text-align:center; vertical-align:middle; cursor:pointer; background-image:none; border:1px solid transparent; white-space:nowrap; padding:6px 12px; font-size:14px; line-height:1.42857143; border-radius:4px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:#fff; background-color:#9ec4c1; border-color:#76B3AE; position:relative; } button[type="submit"]:hover, a.btn.btn-success:hover, button.btn.btn-success:hover { color:#fff; border-color:#76B3AE; } button[type="submit"]:active, a.btn.btn-success:active, button.btn.btn-success:active { outline:0; background-image:none; box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125); } button[type="submit"]:before { font-family:FontAwesome; content:"\f0c7"; position:absolute; left:12px; top:6px; } /* Print Button */ .print-btn { margin-right:10px; } .chat-btn { margin-right:10px;} .chat-btn.btn-danger { -webkit-animation:chatlight 2s infinite; animation:chatlight 2s infinite; -webkit-animation-fill-mode:both; animation-fill-mode:both;} @-webkit-keyframes chatlight { 0% { background:#d9534f; } 50% { background:#FF991A } 100% { background:#d9534f; } } @keyframes chatlight { 0% { background:#d9534f; } 50% { background:#FF991A } 100% { background:#d9534f; } } /*Collapsible group*/ .collapsible-group { margin-bottom:30px; } .collapsible-group input[type="checkbox"] { display:none; } .collapsible-group label.toggle { border:1px solid #ccc; border-radius:4px; padding:15px; display:block; cursor:pointer; margin:0; position:relative; max-height:52px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .collapsible-group label.toggle:after { font-family:FontAwesome; content:'\f196'; font-weight:normal; position:absolute; right:25px; top:15px; font-size:1.2em; } .collapsible-group label.toggle:hover { background-color:#F3F3F3; } .collapsible-group .expandable { border:1px solid #ccc; border-top:0; padding:30px 15px; padding-top:20px; background-color:#fff; display:none; } .collapsible-group input[type="checkbox"]:checked ~ .expandable { display:block; } .collapsible-group input[type="checkbox"]:checked ~ label.toggle { background-color:#F3F3F3; border-bottom-left-radius:0; border-bottom-right-radius:0; } .collapsible-group input[type="checkbox"]:checked ~ label.toggle:after { content:'\f147'; font-weight:normal; } .collapsible-group .form-group, .collapsible-group .radio-group, .collapsible-group .select-group, .collapsible-group .checkbox-group { margin-bottom:15px; } .collapsible-group .form-group:last-child, .collapsible-group .radio-group:last-child, .collapsible-group .select-group:last-child, .collapsible-group .checkbox-group:last-child { margin-bottom:0; } span.fa.fa-times { cursor:help; color:#d2322d; } span.fa.fa-check { cursor:help; color:green; } .yes, .no { display:none; } .block.contactpersonen table.borderless-table { border:0; } .block.contactpersonen table.borderless-table tbody tr:first-child th, .block.contactpersonen table.borderless-table tbody tr:first-child td { border-top:0; } .particularities { margin-top:25px; padding:0 10px; } .edit-icon-dashboard { color:#000; opacity:0.5; filter:alpha(opacity=50); -webkit-transition:0.25s ease-in-out; transition:0.25s ease-in-out; } .edit-icon-dashboard:hover { opacity:1; filter:alpha(opacity=100); } td.force-single-line, th.force-single-line { white-space:nowrap !important; } td.force-small-cell, th.force-small-cell { width:1px !important; min-width:1px !important; } span.fa.fa-exclamation-triangle { color:#d2322d; } .other-address-block { padding:20px; border:1px solid #dfdfdf; margin-bottom:30px; } .other-address-block .form-group:last-of-type { margin-bottom:0; } .model-info { cursor:help; } .duplicate_current_car { cursor:pointer; } th.input-column-first .checkbox label, td.input-column-first .checkbox label { margin-right:10px; padding-left:0; } th.input-column-first .checkbox .check-all { opacity:1; filter:alpha(opacity=100); } .select-archive-week { margin-right:15px; } .btn-group .delete_selected { float:initial; display:block; cursor:pointer; } th.sorting { cursor:pointer; white-space:nowrap; } th.sorting_desc { position:relative; cursor:pointer; white-space:nowrap; } th.sorting_desc:after { width:10px; height:12px; background:url('/_cms/img/icon/sort.png?v=2') no-repeat -10px top; display:inline-block; content:''; top:2px; left:4px; position:relative; } th.sorting_asc { position:relative; cursor:pointer; white-space:nowrap; } th.sorting_asc:after { width:10px; height:12px; background:url('/_cms/img/icon/sort.png?v=2') no-repeat left top; display:inline-block; content:''; top:2px; left:4px; position:relative; } /* table color rows */ tr.not-on-transport td, tr.not-on-transport td, tr.not-on-transport span.fa { color:#fff; background:#d2322d;} /*tr.on-transport td, tr.on-transport td, tr.on-transport span.fa { color:#fff; background:green;}*/ tr.row-not-paid td, tr.row-not-paid th { background:#FFCBCA !important; } tr.row-not-received td:nth-child(1), tr.row-not-received td:nth-child(2), tr.row-not-received td:nth-child(3) { background:#FBE653 !important; } tr.row-not-signed td:nth-child(4), tr.row-not-signed td:nth-child(5), tr.row-not-signed td:nth-child(6) { background:#88ccff !important; } tr.first-not-signed td:nth-child(1), tr.first-not-signed td:nth-child(2), tr.first-not-signed td:nth-child(3) { background:#88ccff !important; } tr td.current-user { color:#00a900; } /*dataTables_empty*/ .dataTable .dataTables_empty { text-align:center; padding:20px 0; } span.required { color:red; font-size:1.2em; } #navigation ul li a span.badge.small { line-height:initial; font-size:.8em; font-weight:300; margin-left:20px; } .block.card.contactpersonen.log table.table tr td:last-child a { opacity:1; } /*Bonus styles*/ #center-bonus { border:1px solid #CCC; display:inline-block; padding:20px;} #center-bonus .form-group { margin-bottom:15px; } #center-bonus .form-group:last-of-type { margin:0; } #center-bonus button { width:100%; display:block; } #progress-bonus {overflow:hidden; width: calc(100% + 60px);margin-left: -30px;background: #2f5020; position:relative; transition:height 0.3s ease;} #progress-bonus .bonus { position:relative; z-index:2; transition:opacity 0.3s ease;} #progress-bonus .bonus p { font-size:2.8em; color:#fff; margin:0; text-align:center; } #progress-bonus .bonus p span { text-transform:uppercase; color:#fff; } #progress-bonus .bonus-bar {background: #73bf44; height:100%; position:absolute; left:0; top:0; bottom:0;} #progress-bonus .resize-bar {opacity:0; position:absolute;right: 10px;top: 15px; bottom:0; z-index:3; transition:top 0.3s ease, opacity 0.3s ease;} #progress-bonus:hover .resize-bar {opacity:1;} #progress-bonus .resize-bar button {background:0; border:0; position:relative;} #progress-bonus .resize-bar button img {transition:max-width 0.3s ease;} /* Expanded */ #progress-bonus.expanded {height:55px;} #progress-bonus.expanded .bonus {opacity:1;} #progress-bonus.expanded .resize-bar {top:15px;} #progress-bonus.expanded .resize-bar img {max-width:24px;} /* Collapsed */ #progress-bonus.collapsed {height:15px;} #progress-bonus.collapsed .bonus {opacity:0;} #progress-bonus.collapsed .resize-bar {top:-3px;} #progress-bonus.collapsed .resize-bar img {max-width:10px;} /* -------------------------------------------------------------------------------------------------------------- */ /* :: File upload */ /* -------------------------------------------------------------------------------------------------------------- */ .files_upload {} .files_upload .accordion.ui {} .files_upload .accordion.ui .content {padding:.5em 1.5em 1.5em 1.5em;} .files_upload .accordion.ui .active.content {padding:.5em 1.5em 1.5em 1.5em;} .files_upload .accordion.ui .uploaded_file {padding:8px; transition:background 0.3s ease;} .files_upload .accordion.ui .uploaded_file:nth-child(even) {background:#fff;} .files_upload .accordion.ui .uploaded_file:nth-child(odd) {background:#eee;} .files_upload .accordion.ui .uploaded_file:after {clear:both; content:''; display:table;} .files_upload .accordion.ui .uploaded_file .filename {font-size:1.1em; font-weight:600; position:relative; top:3px; color:#9ec4c1;} .files_upload .accordion.ui .uploaded_file img.file_type {width:28px; float:left; margin-right:10px;} .files_upload .accordion.ui .uploaded_file button.delete-file-from-server {float:right; background:0; border:0;} .files_upload .accordion.ui .uploaded_file button.delete-file-from-server .fa {font-size:1.2em; font-weight:600; color:#d2322d; margin-top:6px;} .files_upload .accordion.ui .file_upload_box {display:block; margin-top:2em;} .files_upload .accordion.ui .file_upload_box .box {border:1px solid #ccc; background:#eee; padding:30px;} .files_upload .accordion.ui .file_upload_box .box p {color:#bbb; text-transform:uppercase; font-size:1.1em; text-align:center; font-weight:600; margin:0;} .files_upload .accordion.ui *.no-files-uploaded {color:#d2322d;} /* -------------------------------------------------------------------------------------------------------------- */ /* :: Bonus template */ /* -------------------------------------------------------------------------------------------------------------- */ #bonus-template {} #bonus-template table.table {margin-top:25px;} #bonus-template table.table tr.month-name th, #bonus-template table.table tr.month-name td {background:#2EABEF; color:#fff; font-size:1.2em; border-top:20px solid #fff; text-transform:capitalize; } #bonus-template table.table tr.month-name:first-of-type th {border-top:0;} #bonus-template table.table tr.month-name + tr th {border-top:0; } /* ========================================================================== Media Queries & Mobile Styles ========================================================================== */ #overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.3); z-index:3; } /*Navigation styles*/ @media (max-width:992px) { .mobile-nav { background:#222; position:fixed; top:0; left:0; right:0; z-index:4; } #navigation { z-index:5; position:fixed; left:-250px; top:0; bottom:0; -webkit-transition:left 0.25s ease-in-out; transition:left 0.25s ease-in-out; } #navigation.mobile-visible { left:0; } .recent-activity { visibility:visible; } #page.nav-expanded { margin-top:45px; padding-left:0px; padding-right:0; } #page.nav-narrow { margin-top:45px; padding-left:0; padding-right:0; } .block.snelkoppelingen .snelkoppeling span { right:0px; opacity:0; filter:alpha(opacity=0); } #center-block { display:block; width:100%; height:auto; border:0; position:relative; margin:0; top:initial; left:initial; right:initial; bottom:initial; } #center-block .avatar { position:relative; top:initial; left:initial; margin:0 auto; margin-top:-20px; } #login { width:100%; height:auto; position:relative; top:initial; left:initial; bottom:initial; right:initial; } #login p { text-align:center; } .table-wrapper .header .add-wrapper { width:100%; margin-bottom:10px; } .table-wrapper .header .add-wrapper a.btn { width:100%; margin:0; margin-bottom:15px; } .table-wrapper .header .search-wrapper { width:100%; margin-bottom:10px; } .table-wrapper .header .actions-wrapper { width:100%; margin-right:0; } .table-wrapper .header .actions-wrapper .btn { float:initial; width:100%; } .table-wrapper .header .actions-wrapper .restore { margin-bottom:10px; } .table-wrapper .header .add-wrapper .dropdown { margin-bottom:10px; width:100%; } .block.page-overview .header.sticky { left:16px; right:16px; top:45px; } .table-responsive { width:100%; margin-bottom:15px; overflow-y:hidden; overflow-x:scroll; -ms-overflow-style:-ms-autohiding-scrollbar; border:1px solid #ddd; -webkit-overflow-scrolling:touch; } .block.notitie .notes .note .message { width:100%; } .block.card .avatar { max-width:20%; } .block.card .contact-information { width:calc(80% - 26px); margin-top:0; } #progress-bonus .bonus p {font-size: 1em;line-height: 1.4em;margin-top: 19px;} } @media (max-width:767px) { .block.extra-information .col-md-5 { text-align:left; } .block.snelkoppelingen { margin-bottom:40px; } .block.snelkoppelingen .snelkoppeling { background-position:left center; } .form-group .row div[class^="col-sm-"] { margin-bottom:20px; } .form-group .row div[class^="col-sm-"]:last-child { margin-bottom:0; } .table-wrapper .checkbox label { display:inline-block; } } /*Tablet*/ @media (min-width:768px) and (max-width:992px) { .block.extra-information .col-md-5 { text-align:left; } } /*Small Desktop*/ @media (min-width:992px) and (max-width:1200px) { .block.notitie .notes .note .message { width:100%; } } /*Large Desktop*/ @media (min-width:1200px) { } } .hided { display: none; } /* -------------------------------------------------------------------------------------------------------------- */ /* :: Chat */ /* -------------------------------------------------------------------------------------------------------------- */ #chatbox { width: 100%; background: #fff; } #chatbox .messages { height: 500px; border-bottom: 1px solid #dfdfdf; overflow-y: auto; padding-bottom: 15px; } #chatbox .messages .message { padding: 15px 30px; padding-bottom: 0; } #chatbox .messages .message:after { clear: both; content: ''; display: table; } #chatbox .messages .message .inner-message { max-width: 80%; padding: 10px 15px; } #chatbox .messages .message .inner-message p { font-size: 1em; line-height: 1.3em; margin: 0; } #chatbox .messages .message .inner-message span.timestamp { font-size: .75em; line-height: 1.3em; margin: 0; float: right; margin-top: 5px; opacity: .6; } #chatbox .messages .message.new-day { margin: 0 auto; display: table; } #chatbox .messages .message.new-day .inner-message { padding: 5px 20px; max-width: none !important; background: #e1f2fb; border-radius: 4px; } #chatbox .messages .message.new-day .inner-message p { font-size: .9em; } #chatbox .messages .message.self .inner-message { float: right; background: #eee; border-radius: 4px; } #chatbox .messages .message.self .inner-message p { color: #262626; } #chatbox .messages .message.operator .inner-message { float: left; background: #00aeef; border-radius: 4px; } #chatbox .messages .message.operator .inner-message p.name { color: rgba(255, 255, 255, 0.7); font-style: italic; font-size: .9em; margin-bottom: 3px; } #chatbox .messages .message.operator .inner-message p { color: #fff; } #chatbox .messages .message.operator .inner-message span.timestamp { color: #fff; } #chatbox .action-wrapper { height: auto; padding: 10px; } #chatbox .action-wrapper form { width: 100%; } #chatbox .action-wrapper form .user-actions { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } #chatbox .action-wrapper form .user-actions .input-placeholder { position: absolute; top: 0; left: 0; padding: 10px 15px; color: #ccc; pointer-events: none; } #chatbox .action-wrapper form .user-actions .input-message { width: 100%; margin-right: 10px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; word-break: break-word; border: 1px solid #c1c1c1; border-radius: 4px; padding: 10px 15px; word-wrap: break-word; white-space: pre-wrap; min-height: 20px; max-height: 100px; overflow-y: auto; overflow-x: hidden; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } #chatbox .action-wrapper form .user-actions button[type="submit"] { float: right; } #chatbox .action-wrapper form .user-actions button[type="submit"]:before { top: 9px; } #pagination ul.pagination {margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid #dfdfdf; display: flex;} #pagination ul.pagination .paginate_button {display: inline-flex; width: 100%;} #pagination ul.pagination .paginate_button a {border-width: 0px; width: 100%; text-align: center;}