/* COLORS */ /* PRIMARY COLOR = #4f826c PRIMARY RGBCOLOR = 0, 73, 94 SECONDARY COLOR = #2981BA SECONDARY RGBCOLOR = 0, 147, 189 HIGHLIGHT COLOR = #A22C12 HIGHLIGHT RGBCOLOR = 237, 108, 5 BG COLOR = #fafbfd BG RGBCOLOR = 255, 255, 255 */ /* TOMMY RESET/IMPROVEMENTS */ .tommy-matrix { width: 100%!important; } .tommy-matrix .the-matrix .vertical-align { display: flex; flex-direction: column; } .tommy-matrix .matrix-bar { margin: -20px auto -10px; } .tommy-matrix .matrix-scroll { margin: 0 0 30px; } .tommy-matrix .matrix-bar fieldset { padding: 0; margin: 0; } .tommy-matrix .matrix-bar label::after { display: none; } .tommy-matrix .the-matrix.periods .matrix-row .sticky-point { margin: 0 1px 0 0; } .tommy-matrix .popup .close { cursor: pointer; } .tommy-matrix .the-matrix .matrix-row .fixed-one, .tommy-matrix .the-matrix .matrix-beschikbaarheid, .tommy-matrix .matrix-row.arrangement { height: 80px; } .tommy-matrix .the-matrix.periods .matrix-row .fixed-one, .tommy-matrix .the-matrix.periods .matrix-beschikbaarheid, .tommy-matrix .the-matrix.periods .matrix-row.arrangement { height: 60px; } .tommy-matrix .matrix-row.arrangement { margin-bottom: 2px; } .tommy-matrix .matrix-row .fixed-one { top: 7px; } .tommy-matrix .periods .matrix-row .fixed-one { top: 3px; } .tommy-matrix .matrix-row.arrangement .sticky-point { margin: 0 1px 0; } .tommy-matrix .matrix-bar label > select { margin: 5px 0; } .tommy-matrix .matrix-bar .persons-table td input { margin: 0 auto; height: 30px; border: none; } .tommy-matrix .matrix-bar .input-container { border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin: -20px 0 0; z-index: 9999; } @media (max-width: 768px) { .tommy-matrix .the-matrix.periods .popup { width: auto; height: auto; margin: 0; top: 15px!important; left: 15px!important; right: 15px!important; bottom: inherit; } .tommy-matrix .matrix-bar .flex-row > .flex-col, .tommy-matrix .the-matrix .flex-row > .flex-col { margin: 0; flex: 1 1 100%; } .tommy-matrix .the-matrix.periods .matrix-date-row .matrix-time { font-size: 12px; } } @media (max-width: 576px) { .tommy-matrix .the-matrix button, .tommy-matrix .the-matrix .btn { width: 100%; } } /* BACKGROUND-COLOR CONTAINER/BODY */ .tommy-matrix .the-matrix.periods .matrix-row .fixed-one .fixed-one_text { border-right: 2px solid #fafbfd; } .tommy-matrix .matrix-date-row .fixed-one { background: #fafbfd; } .tommy-matrix .the-matrix::after, .tommy-matrix .time-bar .time-ff, .tommy-matrix .time-bar .time-back { background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 74%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 74%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 74%, rgba(255, 255, 255, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); } /* CUSTOM CSS */ .tommy-matrix .matrix-bar label { background: none; height: auto; margin-bottom: 15px; } .tommy-matrix span.label-name { font-size: 16px; margin-bottom: 5px; } .tommy-matrix .matrix-bar label.active textarea, .tommy-matrix .matrix-bar label.active input, .tommy-matrix .matrix-row.arrangement .fixed-one, .tommy-matrix .matrix-bar label.active select { border-color: #A22C12; } .tommy-matrix .matrix-bar .input-ok input, .tommy-matrix .matrix-bar .input-ok select, .tommy-matrix .matrix-bar label.input-ok::after, .tommy-matrix .matrix-beschikbaarheid .matrix-prijs, .tommy-matrix .time-bar .time-back, .tommy-matrix .time-bar .time-ff, .tommy-matrix .matrix-beschikbaarheid .matrix-trigger, .tommy-matrix .matrix-bar .persons-table td a, .tommy-matrix span.label-name { color: #4f826c; } .tommy-matrix .matrix-date-row .matrix-time { color: #4f826c; } /* arrows */ .tommy-matrix .matrix-bar label::after { content: '\f0d7'; font-family: 'fontawesome'; position: absolute; display: block; right: 5px; top: 35px; width: 20px; height: 20px; background-color: #fafbfd; } /* cells */ .tommy-matrix .matrix-row .fixed-one .fixed-one_text { background: #4f826c; color: #fff;} .tommy-matrix .matrix-beschikbaarheid .matrix-prijs { font-size: 14px; font-weight: 700;} .tommy-matrix .matrix-beschikbaarheid { background: rgba(#819e83, 0.35); margin: 0 1px; } .tommy-matrix .matrix-beschikbaarheid.no-data { background: rgba(#819e83, 0.15);} .tommy-matrix .matrix-beschikbaarheid:not(.no-data):hover { background: #fff9ee;} .tommy-matrix .matrix-bar .persons-table td a:hover, .tommy-matrix .time-bar .time-back:hover, .tommy-matrix .time-bar .time-ff:hover { color: #A22C12; } .tommy-matrix .matrix-beschikbaarheid:hover .matrix-prijs { color: #A22C12; } .tommy-matrix .the-matrix.periods .matrix-row .fixed-one .fixed-one_text, .tommy-matrix .matrix-beschikbaarheid { border-radius: 4px;} .tommy-matrix .matrix-row .fixed-one .fixed-one_text { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* popup */ .tommy-matrix .the-matrix .popup { border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin: 24px 0 0 55px; z-index: 9999; } .tommy-matrix .the-matrix .popup .input-container_header { background: #4f826c;} .tommy-matrix .the-matrix .popup .show-col-table tr td { color: #4f826c;} .tommy-matrix .the-matrix .popup .show-col-table tr.td-total td { color: #A22C12;} .tommy-matrix .the-matrix button, .tommy-matrix .the-matrix .btn { background: #A22C12; box-shadow: none; border: none; color: #fff;} .tommy-matrix .the-matrix button:hover, .tommy-matrix .the-matrix .btn:hover{ background: rgba(237, 108, 5, 0.8); } .tommy-matrix .the-matrix .popup .input-container_header::before { content: ''; position: absolute; top: -10px; left: 15px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #4f826c; } .tommy-matrix .popup .close i.fa { font-size: 20px; }