/* input(3455,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(3665,29): run-time error CSS1035: Expected colon, found '{' input(3910,19): run-time error CSS1035: Expected colon, found '{' input(4057,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(4240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#sidebarv4' input(4273,20): run-time error CSS1035: Expected colon, found '{' input(4279,21): run-time error CSS1035: Expected colon, found '{' input(4290,17): run-time error CSS1035: Expected colon, found '{' input(4371,24): run-time error CSS1035: Expected colon, found '{' input(4379,15): run-time error CSS1035: Expected colon, found '{' input(4388,12): run-time error CSS1035: Expected colon, found '{' input(4895,18): run-time error CSS1035: Expected colon, found ',' input(4954,7): run-time error CSS1035: Expected colon, found '{' input(5009,18): run-time error CSS1035: Expected colon, found '{' input(5031,31): run-time error CSS1035: Expected colon, found '{' input(5061,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '[' input(5102,23): run-time error CSS1035: Expected colon, found '{' input(5128,26): run-time error CSS1035: Expected colon, found '{' input(5358,10): run-time error CSS1035: Expected colon, found '{' input(5414,23): run-time error CSS1035: Expected colon, found '{' input(5439,26): run-time error CSS1035: Expected colon, found '{' input(5478,22): run-time error CSS1035: Expected colon, found '{' input(5639,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(5768,24): run-time error CSS1035: Expected colon, found '{' input(5787,23): run-time error CSS1035: Expected colon, found '{' input(5870,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(5886,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(5963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(6024,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '[' input(6068,17): run-time error CSS1035: Expected colon, found '{' input(6090,20): run-time error CSS1035: Expected colon, found '{' input(6119,24): run-time error CSS1035: Expected colon, found '{' input(6150,19): run-time error CSS1035: Expected colon, found '{' input(6200,7): run-time error CSS1035: Expected colon, found '{' input(6270,30): run-time error CSS1035: Expected colon, found '{' input(6292,15): run-time error CSS1035: Expected colon, found '.' input(6317,27): run-time error CSS1035: Expected colon, found '{' input(6322,30): run-time error CSS1035: Expected colon, found '{' input(6349,26): run-time error CSS1035: Expected colon, found '{' input(6401,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(6514,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(6527,28): run-time error CSS1035: Expected colon, found '{' input(6533,17): run-time error CSS1035: Expected colon, found '{' input(6566,18): run-time error CSS1035: Expected colon, found '{' input(6586,11): run-time error CSS1035: Expected colon, found '{' */ .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:9999}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb} .bootstrap-tagsinput { background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); display: inline-block; padding: 4px 6px; color: #555; vertical-align: middle; border-radius: 4px; max-width: 100%; line-height: 22px; cursor: text; } .bootstrap-tagsinput input { border: none; box-shadow: none; outline: none; background-color: transparent; padding: 0 6px; margin: 0; width: auto; max-width: inherit; } .bootstrap-tagsinput.form-control input::-moz-placeholder { color: #777; opacity: 1; } .bootstrap-tagsinput.form-control input:-ms-input-placeholder { color: #777; } .bootstrap-tagsinput.form-control input::-webkit-input-placeholder { color: #777; } .bootstrap-tagsinput input:focus { border: none; box-shadow: none; } .bootstrap-tagsinput .tag { margin-right: 2px; color: white; } .bootstrap-tagsinput .tag [data-role="remove"] { margin-left: 8px; cursor: pointer; } .bootstrap-tagsinput .tag [data-role="remove"]:after { content: "x"; padding: 0px 2px; } .bootstrap-tagsinput .tag [data-role="remove"]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .bootstrap-tagsinput .tag [data-role="remove"]:hover:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(../assets/css/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #DDD; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #DDD; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #DDD; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #DDD; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #DDD; background-color: rgba(0,0,0,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #DDD; background-color: rgba(0,0,0,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger { height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(0,0,0,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(0,0,0,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical { right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(0,0,0,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(0,0,0,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools { box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #DDD; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #DDD; border-color: rgba(0,0,0,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #DDD; background-color: rgba(0,0,0,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #DDD; background-color: rgba(0,0,0,0.9); } /* ---------------------------------------- */ .mCSB_scrollTools { width: 6px; } /* ._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } ._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; } #mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; } #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; } #mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; } .mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; } */ /* General styles for the modal */ /* Styles for the html/body for special modal where we want 3d effects Note that we need a container wrapping all content on the page for the perspective effects (not including the modals and the overlay). */ .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; } .md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 300px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .md-show { visibility: visible; } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(55, 58, 60, 0.65); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; } /* Content styles */ .md-content { color: #666666; background: #fff; position: relative; border-radius: 3px; margin: 0 auto; } .md-content h3 { color: #fff; margin: 0; padding: 0.4em; text-align: center; font-size: 2.4em; font-weight: 300; opacity: 0.8; background: #28e1bd; border-radius: 3px 3px 0 0; } .md-content > div { padding: 15px 15px 30px 15px; margin: 0; font-weight: 300; font-size: 1.15em; } .md-content > div p { margin: 0; padding: 10px 0; } .md-content > div ul { margin: 0; padding: 0 0 30px 20px; } .md-content > div ul li { padding: 5px 0; } .md-content button { display: block; margin: 0 auto; font-size: 0.8em; } /* Individual modal styles with animations/transitions */ /* Effect 1: Fade in and scale up */ .md-effect-1 .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 2: Slide from the right */ .md-effect-2 .md-content { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .md-show.md-effect-2 .md-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } /* Effect 3: Slide from the bottom */ .md-effect-3 .md-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-3 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Effect 4: Newspaper */ .md-effect-4 .md-content { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; } .md-show.md-effect-4 ~ .md-overlay, .md-effect-4 .md-content { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .md-show.md-effect-4 .md-content { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } /* Effect 5: fall */ .md-effect-5.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-5 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; } .md-show.md-effect-5 .md-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; } /* Effect 6: side fall */ .md-effect-6.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-6 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; } .md-show.md-effect-6 .md-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; } /* Effect 7: slide and stick to top */ .md-effect-7{ top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .md-effect-7 .md-content { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; opacity: 0; } .md-show.md-effect-7 .md-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); border-radius: 0 0 3px 3px; opacity: 1; } /* Effect 8: 3D flip horizontal */ .md-effect-8.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-8 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .md-show.md-effect-8 .md-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } /* Effect 9: 3D flip vertical */ .md-effect-9.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-9 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .md-show.md-effect-9 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 10: 3D sign */ .md-effect-10.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-10 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-10 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 11: Super scaled */ .md-effect-11 .md-content { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-11 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 12: Just me */ .md-effect-12 .md-content { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-12 ~ .md-overlay { background: #fff; } .md-effect-12 .md-content h3, .md-effect-12 .md-content { background: transparent; } .md-show.md-effect-12 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 13: 3D slit */ .md-effect-13.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-13 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-3000px) rotateY(90deg); -moz-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; } .md-show.md-effect-13 .md-content { -webkit-animation: slit .7s forwards ease-out; -moz-animation: slit .7s forwards ease-out; animation: slit .7s forwards ease-out; } @-webkit-keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-moz-keyframes slit { 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes slit { 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;} 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } } /* Effect 14: 3D Rotate from bottom */ .md-effect-14.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-14 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .md-show.md-effect-14 .md-content { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } /* Effect 15: 3D Rotate in from left */ .md-effect-15.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; } .md-effect-15 .md-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-15 .md-content { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } /* Effect 16: Blur */ .md-show.md-effect-16 ~ .md-overlay { background: rgba(180,46,32,0.5); } .md-show.md-effect-16 ~ .container { -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); } .md-effect-16 .md-content { -webkit-transform: translateY(-5%); -moz-transform: translateY(-5%); -ms-transform: translateY(-5%); transform: translateY(-5%); opacity: 0; } .md-show.md-effect-16 ~ .container, .md-effect-16 .md-content { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-16 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Effect 17: Slide in from bottom with perspective on container */ .md-show.md-effect-17 ~ .container { height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .md-show.md-effect-17 ~ .container, .md-show.md-effect-17 ~ .md-overlay { -webkit-transform: rotateX(-2deg); -moz-transform: rotateX(-2deg); -ms-transform: rotateX(-2deg); transform: rotateX(-2deg); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .md-effect-17 .md-content { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); } .md-show.md-effect-17 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all 0.3s 0.2s; -moz-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } /* Effect 18: Slide from right with perspective on container */ .md-show.md-effect-18 ~ .container { height: 100%; overflow: hidden; } .md-show.md-effect-18 ~ .md-overlay { background: rgba(55, 58, 60, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .md-show.md-effect-18 ~ .container, .md-show.md-effect-18 ~ .md-overlay { -webkit-transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in; -moz-transform-style: preserve-3d; -moz-transform-origin: 0% 50%; -moz-animation: rotateRightSideFirst 0.5s forwards ease-in; transform-style: preserve-3d; transform-origin: 0% 50%; animation: rotateRightSideFirst 0.5s forwards ease-in; } @-webkit-keyframes rotateRightSideFirst { 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(-200px); } } @-moz-keyframes rotateRightSideFirst { 50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; } 100% { -moz-transform: translateZ(-200px); } } @keyframes rotateRightSideFirst { 50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; } 100% { transform: translateZ(-200px); } } .md-effect-18 .md-content { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); opacity: 0; } .md-show.md-effect-18 .md-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all 0.5s 0.1s; -moz-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; } /* Effect 19: Slip in from the top with perspective on container */ .md-show.md-effect-19 ~ .container { height: 100%; overflow: hidden; } .md-show.md-effect-19 ~ .md-overlay { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .md-show.md-effect-19 ~ .container, .md-show.md-effect-19 ~ .md-overlay { -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 100%; -webkit-animation: OpenTop 0.5s forwards ease-in; -moz-transform-style: preserve-3d; -moz-transform-origin: 50% 100%; -moz-animation: OpenTop 0.5s forwards ease-in; transform-style: preserve-3d; transform-origin: 50% 100%; animation: OpenTop 0.5s forwards ease-in; } @-webkit-keyframes OpenTop { 50% { -webkit-transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; } } @-moz-keyframes OpenTop { 50% { -moz-transform: rotateX(10deg); -moz-animation-timing-function: ease-out; } } @keyframes OpenTop { 50% { transform: rotateX(10deg); animation-timing-function: ease-out; } } .md-effect-19 .md-content { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); opacity: 0; } .md-show.md-effect-19 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all 0.5s 0.1s; -moz-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; } @media screen and (max-width: 32em) { body { font-size: 75%; } } table.dataTable{clear:both;margin-top:0px !important;margin-bottom:0px !important;max-width:none !important;/*border-collapse:separate !important*/}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} 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:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:12px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.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:0.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{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:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}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%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none} /* * The MIT License * Copyright (c) 2012 Matias Meno */ .dropzone, .dropzone * { box-sizing: border-box; } .dropzone { position: relative; } .dropzone .dz-preview { position: relative; display: inline-block; width: 120px; margin: 0.5em; } .dropzone .dz-preview .dz-progress { display: block; height: 15px; border: 1px solid #aaa; } .dropzone .dz-preview .dz-progress .dz-upload { display: block; height: 100%; width: 0; background: green; } .dropzone .dz-preview .dz-error-message { color: red; display: none; } .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { display: block; } .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark { position: absolute; display: none; left: 30px; top: 30px; width: 54px; height: 58px; left: 50%; margin-left: -27px; } /* * The MIT License * Copyright (c) 2012 Matias Meno */ @-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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @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(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } @-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; padding: 25px; border: 2px dashed #C8CBCE; background: #fafafa; padding: 20px 20px; color: #97A1A8; text-align: center; -webkit-transition: box-shadow 0.3s, border-color 0.3s; -moz-transition: box-shadow 0.3s, border-color 0.3s; transition: box-shadow 0.3s, border-color 0.3s; } .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: 0.5; } .dropzone .dz-message { text-align: center; margin: 2em 0; } .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: white; } .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, 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, 0.8); background-color: rgba(255, 255, 255, 0.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, 0.4); padding: 0 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(0.77, 0, 0.175, 1); -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 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, 0.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: 0.5em 1.2em; color: white; } .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; } /* COLORS https://tailwindcss.com/docs/colors https://oklch.com/ */ :root { /* USE THESE */ --color-tkblue: oklch(0.5635 0.2408 260.82); --color-tkblue-hover: oklch(0.3535 0.2408 260.82); --color-black: var(--color-neutral-950); --color-white: #fff; /*Red*/ --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); /*Orange*/ --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); /*Amber*/ --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); /*Yellow*/ --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); /*Lime*/ --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); /*Green*/ --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); /*Emerald*/ --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(52.7% 0.154 150.069); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); /*Teal*/ --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); /*Cyan*/ --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); /*Sky*/ --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); /*Blue*/ --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); /*Indigo*/ --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); /*Violet*/ --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); /*Purple*/ --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); /*Fuchsia*/ --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); /*Pink*/ --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); /*Rose*/ --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); /*Slate*/ --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); /*Gray*/ --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); /*Zinc*/ --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); /*Neutral*/ --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); /*Stone*/ --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); /*Taupe*/ --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); /*Mauve*/ --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); /*Mist*/ --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); /*Olive*/ --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); /* DO NOT USE -- WILL REVISIT */ --base-tkblue: #0066ff; --base-tkblue-hover: #014c8c; --base-tkblue-light-90: #e5f0ff; --base-black: #000; --base-white: #fff; --base-whitesmoke: #f5f5f5; --base-gainsboro: #dcdcdc; --base-lightgrey: #d3d3d3; --base-darkgrey: #a9a9a9; --base-grey: #808080; --base-dimgrey: #696969; --base-red: #ff0000; --base-crimson: #dc143c; --base-firebrick: #b22222; --base-lightgreen: #e8f5e9; --base-darkgreen: #1b5e20; --base-lightblue: #e3f2fd; --base-sidebar-bg: #cfdcef; --base-sidebar-hover-bg: #737d8c; --base-main-bg: #f7faff; --base-border-color: #aaa; --base-border-nav-color: #a0afc5; --menu-color-OLD: #bbc8dc; --color-blue: #0050c7; --color-blue-light: #e5f0ff; --color-brown: #4e342e; --color-brown-light: #efebe9; --color-cyan: #2c92b8; --color-cyan-light: #ecfeff; --color-green: #016630; --color-green-light: #f0fdf4; --color-lime: #7ccf35; --color-orange: #ca3519; --color-orange-light: #fff7ed; --color-pink: #f6339a; --color-pink-light: #fdf2f8; --color-purple: #6e11b0; --color-purple-light: #faf5ff; --color-red: #9f0712; --color-red-light: #fef2f2; --color-yellow: #ffdf20; --color-yellow-light: #fefce8; --color-blue-gray-700: #c6d5ec; } /* General.css General reuseable classes TODO: cleanup dupes and unused */ .pos-relative { position: relative; } .pos-absolute { position: absolute; } .pos-fixed { position: fixed; } .pos-sticky { position: sticky; } .dis-none { display: none; } .dis-block { display: block; } .dis-inline-block { display: inline-block; } .dis-flex { display: flex; } .dis-inline-flex { display: inline-flex; } .dis-grid { display: grid; } .ggap-4 { gap: 0.25rem; } .ggap-8 { gap: 0.5rem; } .ggap-16 { gap: 1rem; } [class^="text-"] { line-height: 1.5; } .text-8 { font-size: 0.5rem; } .text-10 { font-size: 0.625rem; } .text-12 { font-size: 0.75rem; } .text-14 { font-size: 0.875rem; } .text-16 { font-size: 1rem; } .text-18 { font-size: 1.125rem; } .text-20 { font-size: 1.25rem; } .text-24 { font-size: 1.5rem; } .text-28 { font-size: 1.75rem; } .text-44 { font-size: 2.75rem; } .text-underline { text-decoration: underline; } .text-uppercase { text-transform: uppercase; } .cursor-pointer { cursor: pointer; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 1px; &::after { display: none; } } h1, h2, h3 { margin: 0; padding: 0; line-height: 1.5; } .display-h1 { font-size: 2rem; font-weight: 600; } .display-h2 { font-size: 1.5rem; font-weight: 500; } .display-h3 { font-size: 1.25rem; font-weight: 400; } .caption { font-size: 0.75rem; } .font-color--black { color: var(--color-black); } .font-color--white { color: var(--color-white); } .font-color--tkblue { color: var(--base-tkblue); } .font-color--blue { color: var(--color-blue-700); } .font-color--brown { color: var(--color-brown); } .font-color--cyan { color: var(--color-cyan); } .font-color--green { color: var(--color-green); } .font-color--lime { color: var(--color-lime); } .font-color--orange { color: var(--color-orange); } .font-color--purple { color: var(--color-purple-700); } .font-color--red { color: var(--color-red-700); } .font-color--yellow { color: var(--color-yellow); } .font-color--gray-400, .font-color--disabled { color: var(--color-gray-400); } .font-color--gray-700 { color: var(--color-gray-700); } .bg-color--black { background-color: var(--color-black); } .bg-color--white { background-color: var(--color-white); } .bg-color--tkblue { background-color: var(--color-tkblue); } .bg-color--blue { background-color: var(--color-blue); } .bg-color--blue-light { background-color: var(--color-blue-light); } .bg-color--brown { background-color: var(--color-brown); } .bg-color--green { background-color: var(--color-green); } .bg-color--green-light { background-color: var(--color-green-light); } .bg-color--orange { background-color: var(--color-orange); } .bg-color--orange-light { background-color: var(--color-orange-light); } .bg-color--pink { background-color: var(--color-pink); } .bg-color--purple { background-color: var(--color-purple); } .bg-color--red { background-color: var(--color-red); } .bg-color--red-light { background-color: var(--color-red-light); } .bg-color--yellow { background-color: var(--color-yellow); } .bg-color--yellow-light { background-color: var(--color-yelow-light); } .bg-color--blue-100 { background-color: var(--color-blue-100); } .bg-color--blue-200 { background-color: var(--color-blue-200); } .bg-color--gray-50 { background-color: var(--color-gray-50); } .bg-color--gray-100 { background-color: var(--color-gray-100); } .bg-color--gray-600 { background-color: var(--color-gray-600); } .bg-color--gray-200 { background-color: var(--color-gray-200); } .bg-color--green-100 { background-color: var(--color-green-100); } .bg-color--green-200 { background-color: var(--color-green-200); } .bg-color--slate-200 { background-color: var(--color-slate-200); } .bg-color--slate-300 { background-color: var(--color-slate-300); } .clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .ellipsis-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ZMODE */ /* Remove .horizontal when switching to zen2 fully */ .horizontal, .zmode-horizontal { .form-section-logo-head { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-gray-300); img { max-height: 2.5rem; object-fit: contain; } } .form-section { .form-section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem; font-weight: 600; .form-group.form-check { margin-bottom: 0; } } .form-bordered { height: calc(100% - 1rem); /* height - margin bottom from form-group */ padding: 1rem; border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); } .form-pfp-upload { display: grid; place-items: center; } .form-uploadphoto { display: grid; place-items: center; .form-uploadphoto-placeholder { overflow: hidden; border: 3px solid var(--color-slate-400); border-radius: 50%; .placeholder-image { width: 7.5rem; height: 7.5rem; object-fit: contain; } .placeholder-noimage { display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; background-color: var(--color-white); font-size: 4.75rem; } &.placeholder-logo { background-color: var(--color-slate-300); border-radius: 0; .placeholder-image { width: 100%; height: 4rem; } .placeholder-noimage { width: 4rem; height: 4rem; font-size: 3rem; } } } .form-uploadphoto-actions { margin-top: 1rem; .actions-upload { font-size: 0.875rem; } .actions-remove { margin-top: 1rem; display: grid; place-items: center; } } } .form-group { position: relative; &.form-group-highlight { padding: 0.5rem; background-color: var(--color-slate-200); } .form-label { display: block; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; &.required { &::after { content: '*'; margin-left: 0.125rem; color: var(--color-rose-700); } } } small { font-size: 0.75rem; &.text-muted { color: var(--color-gray-600) !important; } } } .form-switch { display: flex; align-items: center; gap: 0.5rem; padding-left: 0; &.form-switch-inline { display: inline-flex; } &.form-security { display: none; justify-content: center; } .switch-text { margin: 0; font-size: 0.875rem; } input:where([type="checkbox"][role="switch"]) { appearance: none; position: relative; width: 2em; height: 1em; box-sizing: content-box; background-color: var(--color-gray-400); border-radius: 1em; color: inherit; font-size: inherit; vertical-align: text-bottom; &::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); box-sizing: border-box; width: 0.7em; height: 0.7em; margin: 0 0.15em; border-radius: 50%; background-color: var(--color-white); transition: 0.2s; } &:checked { background-color: var(--color-blue-700); } &:checked::before { left: 1em; } &:disabled { opacity: 0.4; } } } .form-dz { place-items: center; min-height: 12rem; padding: 1rem; background-color: var(--color-gray-50); border: 2px dashed var(--color-gray-300); color: var(--color-gray-600); transition: 0.3s; &.dz-drag-hover { background-color: var(--color-green-50); border-color: var(--color-green-300); } .form-dz-message { display: grid; place-items: center; .dz-message-icon { font-size: 2.75rem; } .dz-message-text { margin: 0.5rem 0; text-align: center; } .dz-message-browsebtn {} } } } .form-section-actions { display: flex; gap: 1rem; } .form-section-actions--top { display: grid; place-items: flex-end; margin-bottom: 1rem; } .form-section-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 0.5rem 0.75rem; background-color: var(--color-blue-100); border-radius: var(--border-radius); } } /* zen 1 only */ .horizontal { .form-section { .input-group { align-items: stretch; .input-group-append, .input-group-prepend { display: grid; place-items: center; padding: 0 0.5rem; background-color: var(--color-gray-200); border-style: solid; border-color: var(--color-gray-300); } .input-group-append { border-width: 2px 2px 2px 0; } .input-group-prepend { border-width: 2px 0 2px 2px; } } .custom-file { position: relative; display: inline-block; max-width: 100%; height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } .custom-file-input { min-width: 14rem; max-width: 100%; height: 2.5rem; margin: 0; opacity: 0; } .custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + .75rem); padding: 0.375rem 0.75rem; overflow: hidden; font-weight: 400; line-height: 1.5; border-radius: 4px; border: 1px solid var(--color-gray-300); cursor: pointer; &::after { content: "Browse"; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + .75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: black; background-color: var(--color-slate-100); border-left: inherit; border-radius: 0 .25rem 0.25rem 0; } } } } /* WRAPPER */ .mform-wrapper { padding: 0.5rem; background-color: var(--color-gray-100); border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); } .mform-wrapper-title { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: bold; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } /* FORM */ .mform-form { display: grid; gap: 1rem; } .mform-form.mcol-2 { grid-template-columns: 1fr; } .mform-form-select, .mform-form-input, .mform-form-textarea { width: 100%; font-family: inherit; border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); } .mform-form-row { display: flex; gap: 0.25rem; } .mform-form-row .mform-form-item { flex: 1; } .mform-form-row-grid { display: grid; } .mform-form-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .mform-form-label { margin: 0; padding: 0; font-size: 0.875rem; font-weight: bold; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } .mform-form-field, .mform-form-field.field-with-icon { position: relative; flex: 1; width: 100%; } /* Icon on the left */ .mform-form-field.field-with-icon .mform-icon { position: absolute; left: 0.25rem; top: 50%; transform: translateY(-50%); } .mform-form-field.field-with-icon input { padding-left: 1.5rem; &[readonly] { background-color: transparent !important; } } /* Icon on the right */ .mform-form-field.field-with-icon-right .mform-icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); } .mform-form-field.field-with-icon-right input { padding-right: 1.5rem; } .mform-form-field.field-checkbox { display: flex; align-items: center; gap: 0.25rem; flex: none; } /* TABLE */ .mform-table { display: table; table-layout: fixed; width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--color-gray-300); } .mform-table-row { display: table-row; border-top: 1px solid var(--color-gray-300); } .mform-table-cell { display: table-cell; padding: 0.25rem 0.5rem; line-height: 1.25; vertical-align: middle; } .mform-table-cell.mform-table-cell-header { background-color: var(--color-gray-200); font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } .mform-table-caption--top { display: table-caption; caption-side: top; font-weight: bold; text-align: center; vertical-align: middle; } .mform-table-caption--bottom { display: table-caption; caption-side: bottom; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--color-gray-300); font-weight: bold; text-align: center; vertical-align: middle; } /* LIST */ .mform-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-gray-300); } .mform-list-title { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: bold; letter-spacing: 1px; line-height: 1; text-transform: uppercase; } .mform-list-row { padding: 0.25rem 0; border-top: 1px solid var(--color-gray-300); } /* ALERTS */ .mform-alert { padding: 0.25rem 0.5rem; border-width: 1px; border-style: solid; border-color: transparent; border-radius: var(--border-radius); } .mform-alert.mform-alert-yellow { background-color: var(--color-yellow-50); border-color: var(--color-yellow-300); } .mform-alert.mform-alert-blue { background-color: var(--color-blue-50); border-color: var(--color-blue-300); } .mform-alert.mform-alert-red { background-color: var(--color-red-50); border-color: var(--color-red-300); } .mform-alert.mform-alert-gray { background-color: var(--color-gray-50); border-color: var(--color-gray-300); } .mform-alert.mform-alert-green { background-color: var(--color-green-50); border-color: var(--color-green-300) } .mform-alert.mform-alert-cyan { background-color: var(--color-cyan-50); border-color: var(--color-cyan-300); } .mform-alert.mform-alert-purple { background-color: var(--color-purple-50); border-color: var(--color-purple-300); } /* BADGES */ .mform-badge { padding: 0 0.25rem; border: 1px solid transparent; border-radius: var(--border-radius); font-size: 0.688rem; white-space: nowrap; } .mform-badge.mform-badge-gray { background-color: var(--color-gray-100); border-color: var(--color-gray-300); } .mform-badge.mform-badge-green { background-color: var(--color-green-100); border-color: var(--color-green-300); } .mform-badge.mform-badge-blue { background-color: var(--color-blue-light); border-color: var(--color-blue); } .mform-badge.mform-badge-yellow { background-color: var(--color-yellow-light); border-color: var(--color-yellow); } .mform-badge.mform-badge-red { background-color: var(--color-red-light); border-color: var(--color-red); } .mform-badge.mform-badge-slate { background-color: var(--color-slate-100); border-color: var(--color-slate-300); } .mform-badge.mform-badge-red-dark { background-color: var(--color-red); border-color: var(--color-red); color: var(--color-white); } .mform-badge.mform-badge-blue-dark { background-color: var(--color-blue); border-color: transparent; color: var(--color-white); } /* MISC */ .mform-none { display: none; } .mform-flex { display: flex; } .mform-required { color: var(--color-red); } @media (min-width: 992px) { .mform-form.mcol-2 { grid-template-columns: repeat(2, 1fr); } } /* Zen 2 Overrides Zen 1 */ .main-menu-sidebarv4 { #sidebarv4 { width: 100%; margin: 0; transition: none; .sidebarv4-controls { gap: 1rem; } .btn { flex: none; width: 2rem; height: 2rem; padding: 0; border-color: var(--color-slate-300); border-radius: var(--border-radius); box-shadow: none; transition: 0.3s; i { font-size: 1.375rem; } &:hover { border-color: var(--color-white); box-shadow: 0 4px 10px rgba(0,0,0,0.2); transform: scale(1); } } } } .zmode { .board-wrapper { max-height: calc(100vh - 12rem) !important; } } .zmode-rightfilter { .v3-filter-form { & > div:not(:last-of-type) { margin-bottom: 0.75rem; } } } /* Zen2 Overrides */ .zmode-horizontal { /* CK Editor */ .cke_chrome { overflow: clip; border-radius: var(--border-radius); border-color: var(--color-gray-300); } /* Datepicker */ .daterangepicker { font-size: 0.875rem; td { &.active, &.active:hover { background-color: var(--color-blue-700); } } } /* Select2 */ .select2-container { display: block; } .select2-container--default { .select2-selection__rendered { color: var(--color-black); font-size: 0.875rem; } .select2-selection--multiple { border-color: var(--color-gray-300); .select2-selection__choice { background-color: var(--color-blue-50); border-color: var(--color-blue-300); } .select2-selection__choice__remove { color: var(--color-black); } } .select2-selection--single { height: 2rem; border-color: var(--color-gray-300); .select2-selection__rendered { height: 2rem; line-height: 2.2; } .select2-selection__arrow { height: 2rem; } } .select2-search--dropdown { .select2-search__field { border-color: var(--color-gray-300); border-radius: var(--border-radius); font-size: 0.75rem; } } .select2-results { font-size: 0.75rem; & > .select2-results__options { scrollbar-width: thin; } } .select2-results__option[aria-selected="true"] { background-color: var(--color-slate-200); } .select2-results__option--highlighted[aria-selected] { background-color: var(--color-blue-700); } } } /* General Overrides */ .dataTables_wrapper { .dataTables_filter { display: none; visibility: hidden; } } @media print { table { tfoot { display: table-row-group; } } } /* Bootstrap Overrides */ .zmode-horizontal { /* Alert */ .alert { padding: 0.5rem 0.75rem; color: var(--color-black); font-size: 0.875rem; p { margin: 0; } &.alert-primary { background-color: var(--color-blue-50); border-color: var(--color-blue-300); } &.alert-secondary { background-color: var(--color-gray-50); border-color: var(--color-gray-300); } &.alert-success { background-color: var(--color-green-50); border-color: var(--color-green-300); } &.alert-danger { background-color: var(--color-red-50); border-color: var(--color-red-300); } &.alert-warning { background-color: var(--color-yellow-50); border-color: var(--color-yellow-300); } &.alert-info { background-color: var(--color-sky-50); border-color: var(--color-sky-300); } &.alert-light { background-color: var(--color-taupe-50); border-color: var(--color-taupe-300); } } /* Badge */ .badge { border-radius: var(--border-radius); color: var(--color-white); font-size: 0.625rem; font-weight: 600; &.badge-priamry { background-color: var(--color-blue-700); } &.badge-secondary { background-color: var(--color-gray-700); } &.badge-success { background-color: var(--color-green-700); } &.badge-danger { background-color: var(--color-red-700); } &.badge-warning { background-color: var(--color-yellow-700); } &.badge-info { background-color: var(--color-sky-700); } &.badge-dark { background-color: var(--color-gray-800); color: var(--color-white); } } /* Breadcrumb */ .breadcrumb { margin: 0; padding: 0; background: none; border-radius: 0; .breadcrumb-item { &.active { color: var(--color-gray-600); font-size: inherit; } & + .breadcrumb-item { padding-left: 0.125rem; &::before { padding-right: 0.125rem; color: var(--color-gray-600); font-family: 'Phosphor'; content: '\E13A'; } } } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font-family: inherit; line-height: 1.5; transition: 0.3s; i { display: inline-flex; align-items: center; line-height: 1.5; } &.btn-small { padding: 0.125rem 0.25rem; font-size: 0.688rem; font-weight: 500; } &.btn-primary { background-color: var(--color-blue-700); border-color: var(--color-blue-700); color: var(--color-white); &:not([disabled]):hover { background-color: color-mix(in srgb, var(--color-blue-700), #000000 30%); border-color: color-mix(in srgb, var(--color-blue-700), #000000 30%); } } &.btn-secondary { background-color: var(--color-neutral-600); border-color: var(--color-neutral-600); color: var(--color-white); &:not([disabled]):hover { background-color: color-mix(in srgb, var(--color-neutral-600), #000000 30%); border-color: color-mix(in srgb, var(--color-neutral-600), #000000 30%); } } &.btn-danger { background-color: var(--color-red-800); border-color: var(--color-red-800); color: var(--color-white); &:not([disabled]):hover { background-color: color-mix(in srgb, var(--color-red-800), #000000 30%); border-color: color-mix(in srgb, var(--color-red-800), #000000 30%); } } &.btn-success { background-color: var(--color-green-800); border-color: var(--color-green-800); color: var(--color-white); &:not([disabled]):hover { background-color: color-mix(in srgb, var(--color-green-800), #000000 30%); border-color: color-mix(in srgb, var(--color-green-800), #000000 30%); } } &.btn-warning { background-color: var(--color-yellow-400); border-color: var(--color-yellow-400); color: var(--color-black); &:not([disabled]):hover { background-color: color-mix(in srgb, var(--color-yellow-400), #ffffff 30%); border-color: color-mix(in srgb, var(--color-yellow-400), #ffffff 30%); } } &.btn-outline-dark { color: var(--color-gray-800); border-color: var(--color-gray-800); &:not([disabled]):hover { background-color: var(--color-gray-800); color: var(--color-white); } } } /* Card */ .card { &.card-bordered { border-width: 3px 0 2px 0; border-style: solid; border-color: var(--color-gray-700) transparent var(--color-gray-200); border-radius: 0; .card-header { display: flex; align-items: center; padding: 0.5rem; background-color: var(--color-white); border-color: var(--color-gray-300); } .card-body { padding: 0.5rem; } } &.card-simple { border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); .card-header { border: 0; transition: 0.3s; i { transition: 0.3s; } &[aria-expanded=true] { background-color: var(--color-blue-50); i { transform: rotate(-180deg); } } } .card-body { padding: 0.5rem; } } } /* Dropdowns */ .dropdown-menu { border-color: var(--color-gray-300); } .dropdown, .dropleft { .dropdown-menu { &.show { max-height: 15rem; overflow-y: auto; scrollbar-width: thin; } .dropdown-item { color: var(--color-black); &.disabled { cursor: not-allowed; } &:hover { background-color: var(--color-slate-200); color: var(--color-black); } &.active, &:active { background-color: var(--color-blue-700); color: var(--color-white); } } } } /* Forms */ .form-control { height: 2rem; padding: 0 0.5rem; border-color: var(--color-gray-300); color: var(--color-black); font-size: 0.875rem; &:disabled, &[readonly] { background-color: var(--color-gray-200); } &[type=color] { max-width: 3.5rem; } } .form-check { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; &.form-group { margin-bottom: 1rem; } .form-check-input { position: relative; margin: 0; accent-color: var(--color-blue-700); } .form-check-label { font-size: 0.875rem; font-weight: 400; } } .custom-file-input { cursor: pointer; } .custom-file-label { border-color: var(--color-gray-300); color: var(--color-black); &::after { background-color: var(--color-gray-300); color: var(--color-black); } } /* Input Group */ .input-group { .input-group-text { padding: 0 0.75rem; background-color: var(--color-gray-200); border-color: var(--color-gray-300); color: var(--color-black); font-size: 0.875rem; } } /* Jumbotron */ .jumbotron { background-color: var(--color-mauve-100); } /* Modal */ .modal { .modal-header { button.close { opacity: 1; } } .modal-body { scrollbar-color: var(--scrollbar-slate); scrollbar-width: thin; } } /* Pre/Code */ code { color: var(--color-pink-600); font-size: inherit; line-height: inherit; } pre { &[data-lang]::before { display: block; content: attr(data-lang); padding: 0.5rem 0.75rem; background-color: var(--color-slate-300); border-bottom: 1px solid var(--color-slate-300); color: var(--color-black); font-family: var(--font-family-main); font-weight: 600; text-transform: uppercase; } & > code { display: block; padding: 0 1rem; color: var(--color-purple-700); font-size: 0.75rem; overflow-x: auto; scrollbar-width: thin; } } /* NavBar */ .navbar { &.bg-dark { color: var(--color-gray-700); } &.navbar-dark { .navbar-nav { .nav-link { color: var(--color-neutral-300); &:focus, &:hover { color: var(--color-white); } } } } } /* Nav Pills */ .nav-pills { .nav-link { &.active { background-color: var(--color-blue-700); } } } /* Tables */ .table { color: var(--color-black); font-size: 0.875rem; thead { &.thead-light { tr.filters th { background-color: var(--color-gray-100); } th { background-color: var(--color-slate-100); border-color: var(--color-gray-300); color: var(--color-black); white-space: nowrap; } } th { white-space: nowrap; } } &.table-layout--fixed { table-layout: fixed; width: 100%; } &.table-sortable { width: 100%; min-width: 62rem; thead th { white-space: nowrap; } tbody td { white-space: nowrap; } } } .table-bordered { td, th { border-color: var(--color-gray-300); } } .table-hover { tbody tr:hover { background-color: var(--color-sky-50); color: var(--color-black); } } /* Tabs */ .nav.nav-tabs.zmode-tabs { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; margin-bottom: 1rem; overflow: auto visible; border-bottom: 1px solid var(--color-gray-300); scrollbar-width: thin; scrollbar-color: var(--scrollbar-slate); .nav-item { .nav-link { margin: 0; padding: 0 0 0.125rem; border-width: 0 0 3px 0; border-color: transparent; color: var(--color-gray-400); font-size: 1rem; font-weight: 600; line-height: 1.5; white-space: nowrap; &.active { color: var(--color-black); border-color: var(--color-tkblue); } &:not(.active):hover { color: var(--color-black); border-color: var(--color-sky-100); } } } } } @media screen and (min-width: 992px) { .zmode-horizontal { .dropdown, .dropleft { .dropdown-menu { &.show { max-height: 30rem; } } } } } .zmode-tabletlayout { background: var(--color-white); } :root { --font-family-main: 'Noto Sans', sans-serif; --font-family-signature: 'Allura', cursive; --border-radius: 0.25rem; --aside-width: 4rem; --batchaction-width: 18rem; --pushpanel-width: 40rem; --rightfilter-width: 20rem; --searchpanel-width: 20rem; --slidepanel-width: 16rem; --default-height: 3.5rem; --bg-glass: rgba(255,255,255,0.75); --filter-blur: blur(10px); --scrollbar-slate: var(--color-slate-400) var(--color-white); } [data-viewport="mobile"] { display: flex; } [data-viewport="desktop"] { display: none; } html, body { min-width: 320px; width: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--scrollbar-slate); } .zmode-horizontal { position: relative; background-color: var(--color-white) !important; color: var(--color-black); font-family: var(--font-family-main); font-optical-sizing: auto; font-weight: 400; font-size: 1rem; font-style: normal; font-variation-settings: "wdth" 100; scrollbar-gutter: stable both-edges; transition: 0.3s; a { color: var(--color-tkblue); text-decoration: none; transition: 0.3s; &:hover { color: var(--color-tkblue-hover); text-decoration: none; } } hr { margin: 1.25rem 0; border-top-color: var(--color-gray-300); } .tooltipster-content { max-width: 500px; font-size: 0.75rem; overflow: visible; white-space: normal; } .popout-dd-menu { .dropdown-item { color: var(--color-black); &.active, &:active { background-color: var(--color-sky-100); } } } &.modal-open { .modal { overflow-y: auto !important; } } &.no-scroll { overflow: hidden; } .page-meta { padding: 0.5rem; background-color: var(--color-slate-100); border: 1px solid var(--color-slate-300); border-radius: var(--border-radius); font-size: 0.688rem; } } .zmode { position: relative; .zmode-alert { display: flex; align-items: center; button.close { margin: 0 0 0 auto; padding: 0; float: unset; text-shadow: none; opacity: 1; } } } .zmode-theme-loader { position: fixed; display: grid; place-items: center; width: 100%; height: 100%; background-color: var(--color-white); z-index: 999999; .zmode-theme-loader-image { width: 100%; height: 4rem; object-fit: contain; } } .zmode-scrollbars { overflow: auto; scrollbar-width: thin; } .zmode-container { display: flex; } .zmode-header { grid-area: header; position: fixed; top: 0; left: 0; display: flex; align-items: center; gap: 0.75rem; width: 100%; height: var(--default-height); padding: 0 1rem; background-color: var(--color-slate-300); z-index: 1000; [class*="header-cta--"] { position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-black); text-decoration: none; i { font-size: 1.5rem; } &:hover { color: var(--color-black); } } .notification-circle { position: absolute; top: -0.5rem; right: -0.5rem; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background-color: var(--color-gray-600); border-radius: 50%; color: var(--color-white); font-size: 0.625rem; line-height: 1; &.animate-pulse { background-color: var(--color-tkblue); } } } .zmode-header-home-wrapper { position: relative; display: flex; align-items: center; .header-cta--home { width: 5rem; height: 2.125rem; padding: 0.25rem; background-color: var(--color-white); border-radius: var(--border-radius); cursor: pointer; overflow: hidden; transition: all 0.3s ease-in-out; &:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .home-logo { display: block; width: 100%; height: 100%; margin: 0 auto; object-fit: contain; } } } .zmode-header-search-wrapper { display: flex; .header-input-search { position: relative; .search-options { position: absolute; top: 50%; transform: translateY(-50%); right: 0.5rem; .search-options-cta { width: 1.5rem; height: 1.5rem; display: flex; padding: 0.25rem; background-color: var(--color-slate-600); border-radius: var(--border-radius); border: 0; color: var(--color-white); font-size: 0.875rem; i { display: inline-flex; } } } .search-options-includesold { display: none; visibility: hidden; } .zmode-search { position: relative; height: 2.125rem; border-width: 2px; border-color: var(--color-slate-400); line-height: 1; } } .search-panel-loading { display: none; position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); } .header-input-search-panel { display: none; position: absolute; top: 1.875rem; left: 0; width: 18.75rem; max-height: calc(100vh - 8rem); background-color: var(--color-white); border-radius: 0 0 var(--border-radius) var(--border-radius); border-width: 0 2px 2px; border-style: solid; border-color: var(--color-slate-400); font-size: 0.75rem; overflow-y: auto; .search-panel-inner { border-top: 1px dashed var(--color-slate-200); } .search-panel-actions { display: flex; justify-content: space-between; padding: 0.5rem; .search-panel-includesold { .form-check-label { font-size: 0.75rem; } } .search-panel-close-cta { display: inline-flex; align-items: center; color: var(--color-black); font-size: 1.25rem; } } .search-panel-section { margin-bottom: 0.5rem; padding: 0.5rem; &:not(:last-of-type) { border-bottom: 1px solid var(--color-slate-200); } a { font-size: 0.75rem; } } .search-panel-section-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .search-panel-results { .found { margin-bottom: 1rem; padding-left: 0; list-style: none; } } .search-panel-search-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; list-style: none; padding-left: 0; } .search-panel-modules { margin-bottom: 0.5rem; padding-left: 0.5rem; border-left-width: 2px; border-left-style: solid; &.module-70291523755951a8944755434d8b4f { background-color: var(--color-purple-50); border-color: var(--color-purple-700); } &.module-324554500937b05324547d460a8691 { background-color: var(--color-teal-50); border-color: var(--color-teal-700); } &.module-3303139822b121487e0f0e442a9095 { background-color: var(--color-blue-50); border-color: var(--color-blue-700); } &.module-2577741174811666a3f4d44401a18b { background-color: var(--color-lime-50); border-color: var(--color-lime-700); } &.module-3781547227bd2d848b781244b9a46d { background-color: var(--color-red-50); border-color: var(--color-red-700); } &.module-41307936172ac88c3daf004f3bbc74 { background-color: var(--color-sky-50); border-color: var(--color-sky-700); } &.module-6302087815bd5062b378b54dcea8ec { background-color: var(--color-blue-50); border-color: var(--color-blue-700); } } .search-panel-module { list-style: none; padding-left: 0; } .search-panel-module-title { font-weight: 600; } .search-panel-kpi { width: 100%; margin-bottom: 1rem; table-layout: fixed; border-collapse: collapse; td { width: 33%; padding: 0.25rem; background-color: var(--color-gray-100); text-align: center; &:not(:last-of-type) { border-right: 1px solid var(--color-white); } &:first-of-type { background-color: var(--color-green-50); } .toggle-database-results { display: flex; flex-direction: column; } .title { color: var(--color-black); font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase; } .value { font-size: 0.875rem; font-weight: 600; } } } } } .zmode-header-tenant-wrapper { display: none; } .zmode-header-menu-mobile-wrapper { position: relative; display: flex; gap: 1rem; margin-left: auto; } .zmode-header-menu-wrapper { position: relative; width: 100%; height: var(--default-height); margin-left: auto; justify-content: flex-end; form { position: relative; display: flex; align-items: center; gap: 0.75rem; } [class*="header-cta--"] { min-width: 2.125rem; height: 2.125rem; padding: 0 0.25rem; background-color: var(--color-slate-200); border: 1px solid var(--color-slate-400); border-radius: var(--border-radius); color: var(--color-black); transition: all 0.3s ease-in-out; &:hover { background-color: rgba(255,255,255,0.2); backdrop-filter: blur(5px); border-color: var(--color-slate-100); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } } .header-cta--showmore { cursor: pointer; i { transform: rotate(0deg); transition: transform 0.3s ease-out; } &.active { background-color: rgba(255,255,255,0.4); i { transform: rotate(180deg); } } } .header-menu--showmore { display: none; position: absolute; top: 0; left: 0; transform: translate3d(0, 47px, 0); padding: 1rem; background-color: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--border-radius); } } .zmode-header-help-wrapper { .header-cta--help { padding: 0.25rem; background-color: var(--color-slate-200); border: 1px solid var(--color-slate-400); border-radius: var(--border-radius); transition: all 0.3s ease-in-out; &:hover { background-color: rgba(255,255,255,0.2); backdrop-filter: blur(5px); border-color: var(--color-slate-100); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } } .dropdown-menu.show { width: 18rem; & > div:not(:last-of-type) { margin-bottom: 0.5rem; } } } .zmode-header-account-wrapper { .header-cta--account { position: relative; border: 2px solid var(--color-slate-400); border-radius: 50%; overflow: clip; transition: all 0.3s ease-in-out; &:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); transform: scale(1.1); } .account-avatar { width: 2rem; height: 2rem; object-fit: contain; &.account-avatar--none { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-white); } } } } .zmode-aside { display: none; } .zmode-main { position: relative; display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin-top: var(--default-height); transition: 0.3s; .zmode-main-menu { position: fixed; bottom: calc(var(--default-height) + 0.5rem); right: 0.5rem; z-index: 1000; .main-menu-inner { display: flex; flex-direction: column; gap: 1rem; } a:not(.dropdown-item), button:not(.dropdown-item) { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: var(--color-slate-300); border: 1px solid var(--color-slate-300); border-radius: 50%; transition: 0.3s; i { color: var(--color-black); font-size: 1.375rem; } &:hover, &:active { background-color: var(--color-slate-400); } } } .zmode-main-wrapper { position: relative; width: 100vw; height: 100%; padding: 1rem; background-color: var(--color-white); scroll-behavior: smooth; transition: 0.3s; } .zmode-main-body { padding-bottom: var(--default-height); .zmode-main-body-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; .module-industry-name { font-size: 1.375rem; font-weight: 600; } .module-breadcrumbs { display: flex; align-items: center; gap: 0.125rem; font-size: 0.75rem; a { font-size: inherit; text-decoration: underline; } > i { visibility: hidden; display: inline-block; width: auto; &::before { display: none; } &::after { visibility: visible; position: relative; display: inline-flex; font-family: 'Phosphor'; font-size: 0.75rem; content: '\E13A'; color: var(--color-gray-600); } } > ol.breadcrumb { padding: 0; background: none; border-radius: 0; } } .header--left { display: flex; align-items: center; gap: 0.5rem; } .header--right .legacy-action-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; a.btn, button.btn { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.5rem; background-color: var(--color-blue) !important; border-color: transparent !important; border-radius: var(--border-radius); font-size: 0.75rem; } } } .zmode-main-body-content { .dhx_sample-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; a.btn, button.btn { padding: 0 0.5rem; display: inline-flex; align-items: center; height: 2rem; background-color: var(--color-blue); border-radius: var(--border-radius); font-size: 0.75rem; } } } } } .zmode-slidepanel { position: fixed; top: 0; left: calc(var(--slidepanel-width) * -1); width: var(--slidepanel-width); height: 100vh; background-color: var(--color-slate-300); color: var(--color-black); overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--color-white) var(--color-slate-300); transition: 0.3s; z-index: 1004; &.open { left: 0; overscroll-behavior-y: contain; } .slidepanel-inner { position: relative; width: 100%; padding: 0.75rem; } .slidepanel-actions { .actions-inner { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1rem; } a, button, i { display: inline-flex; align-items: center; justify-content: center; } a, button { width: 2rem; height: 2rem; } i { color: var(--color-black); font-size: 1.375rem; &::before { padding: 0.25rem; } } } .slidepanel-header { position: relative; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background-color: rgba(255,255,255,0.5); color: var(--color-black); .slidepanel-modulename { display: inline-block; color: var(--color-black); font-size: 1rem; font-weight: 600; &:hover { text-decoration: underline; } } .slidepanel-instructions { font-size: 0.75rem; } } .slidepanel-body { .slidepanel-item { padding: 0.25rem 0.75rem; font-size: 0.875rem; &:hover { background-color: rgba(255,255,255,0.5); } a { display: flex; color: var(--color-black); font-size: 0.875rem !important; &:hover { text-decoration: none; } .ph-caret-up { transition: 0.3s; } &[aria-expanded="true"] .ph-caret-up { transform: rotate(-180deg); } } &.slidepanel-item--closepanel { margin: 1rem 0 2rem; } } } .slidepanel-footer { padding: 0 0.75rem; font-size: 0.75rem; a { font-size: 0.75rem; } } } .zmode-slidepanel-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 1002; } .zmode-slidepanel-overlay-close { display: none; position: fixed; top: 1rem; left: calc(var(--slidepanel-width) + 1rem); z-index: 1003; .overlay-close-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; background-color: rgba(255,255,255,0.2); color: var(--color-white); font-size: 2rem; } } .zmode-glasspanel { background-color: var(--bg-glass); -webkit-backdrop-filter: var(--filter-blur); backdrop-filter: var(--filter-blur); overflow-y: scroll; scrollbar-width: thin; transition: 0.3s; .glasspanel-inner { width: 100%; padding: 0.75rem; font-size: 0.875rem; } .glasspanel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; a, button, i { display: inline-flex; align-items: center; justify-content: center; } i { color: var(--color-black); font-size: 1.375rem; } } .glasspanel-header { display: flex; align-items: center; .glasspanel-close-cta { display: inline-flex; align-items: center; justify-content: center; i { display: inline-flex; align-items: center; justify-content: center; color: var(--color-black); font-size: 1.5rem; } } .glasspanel-title { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 600; &.title--right { &:before { display: block; content: ''; width: 1px; height: 1.75rem; margin-left: 0.5rem; margin-right: 0.5rem; background-color: var(--color-slate-300); } } } .glasspanel-instructions { font-size: 0.75rem; } } .glasspanel-body { } } .zmode-pushpanel { position: fixed; top: 0; right: -100vw; width: 100vw; height: calc(100vh - var(--default-height)); overflow: visible; z-index: 1006; direction: rtl; &.open { right: 0; } } .zmode-pushpanel-ajax { position: fixed; top: 0; right: -100vw; width: 100vw; height: calc(100vh - var(--default-height)); overflow: visible; z-index: 1007; direction: ltr; transition: right 0.3s ease; &.open { right: 0; } .pushpanel-ajax-inner { display: flex; flex-direction: column; width: 100%; height: 100%; direction: ltr; } .pushpanel-ajax-header { display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--color-slate-300); .pushpanel-ajax-close-cta { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; i { color: var(--color-black); font-size: 1.5rem; } } .pushpanel-ajax-title { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 600; margin: 0; &:before { content: ""; width: 1px; height: 1.75rem; display: block; margin-left: 0.5rem; margin-right: 0.5rem; background-color: var(--color-slate-300); } } } .pushpanel-ajax-body { flex: 1; padding: 0.75rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .pushpanel-ajax-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--color-slate-300); position: relative; } } .zmode-batchaction { position: fixed; top: var(--default-height); left: calc(var(--batchaction-width) * -1); width: var(--batchaction-width); height: calc(100vh - var(--default-height)); z-index: 1006; &.open { left: 0; } .batchaction-inner { width: 100%; } .batchaction-header { justify-content: space-between; } .batchaction-instructions { margin-top: 0.75rem; font-size: 0.75rem; } .batchaction-body { padding: 0.75rem 0; ul { display: flex; flex-direction: column; gap: 0.25rem; } li { padding: 0.25rem 0.75rem; &:hover { background-color: var(--color-slate-300); } } a { display: flex; align-items: center; gap: 0.25rem; color: var(--color-black); } } #batch-action-loading { display: none; } } .zmode-mobile-navigation { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; width: 100%; height: var(--default-height); background-color: var(--color-white); border-top: 1px solid var(--color-gray-300); z-index: 1000; [class^="mobile-navigation-cta--"] { position: relative; display: flex; align-items: center; color: var(--color-black); i { font-size: 1.5rem; } } .mobile-navigation-cta--back { display: none; &.active { display: flex; } } .module-dd-menu { .dropdown-item { display: flex; align-items: center; gap: 0.5rem; img { width: 1.25rem; height: 1.25rem; object-fit: contain; } } } } .zmode-mobile-search { display: none; position: fixed; top: var(--default-height); width: 100%; height: auto; padding: 1rem; background-color: var(--color-white); border-bottom: 1px solid var(--color-slate-300); .form-group { position: relative; display: flex; margin: 0; .form-control { border-radius: 4px 0 0 4px; border-color: var(--color-slate-300); } .form-button { padding: 0 0.5rem; background-color: var(--color-slate-300); border: 0; border-radius: 0 4px 4px 0; } } } .zmode-actions-menu { margin-bottom: 1rem; .dropdown-menu { .row { display: grid; grid-gap: 1rem; grid-template-columns: 1fr; margin: 0; } .dropdown-custom-links { a { color: var(--color-black); } &:active a { color: var(--color-white) } } } } /* Right Filter */ .zmode-rightfilter { position: fixed; top: var(--default-height); right: calc(var(--rightfilter-width) * -1); width: var(--rightfilter-width); height: calc(100vh - (var(--default-height) * 2)); direction: rtl; z-index: 1005; .rightfilter-inner { direction: ltr; } .rightfilter-actions { justify-content: flex-start; } .rightfilter-body { padding: 0.75rem 0; font-size: 0.875rem; table { table-layout: fixed; border: 0; } table th, table td { padding: 0.5rem 0.25rem; border: 0; } } &.open { right: 0; } } /* orbit ai override */ .zmode-pushpanel { .message-call { .p-panel-header { padding: 0.25rem 0.5rem; } .p-panel-content { max-height: 15rem; margin: 0 0.5rem 0.5rem 0; padding: 0 0.5rem 0.5rem; overflow-y: auto; scrollbar-width: thin; } .p-button-text.p-button-secondary:not(:disabled):hover { background-color: var(--color-slate-100); } } .message-tk { .incremark { & * { scrollbar-width: thin; scrollbar-color: var(--color-slate-300) transparent; } } } } .main-width-cta { display: none; } .korey-chat-root { display: none; } .environment-circle { position: absolute; bottom: -0.25rem; left: -0.25rem; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background-color: var(--color-rose-700); border-radius: 50%; color: var(--color-white); z-index: 9; i { display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem !important; line-height: 1; } } .icon-orbitai { background-image: linear-gradient(to right, var(--color-blue-500), var(--color-green-600)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; max-width: max-content; } .icon-filters { background-image: linear-gradient(135deg, var(--color-gray-500), var(--color-gray-800)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; max-width: max-content; } .icon-tooltip { color: var(--color-blue-700); cursor: pointer; } .animate-pulse { display: inline-flex; animation: pulsing 2s infinite; } .animate-spinning { display: inline-flex; animation: spinning 1s linear infinite; } @keyframes pulsing { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes spinning { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Media Queries */ @media screen and (min-width: 768px) { .zmode-header-search-wrapper { .header-input-search { .zmode-search { width: 15rem; } } } } @media screen and (min-width: 992px) { [data-viewport="desktop"] { display: flex; } [data-viewport="mobile"] { display: none; } .zmode { display: flex; flex-direction: column; min-height: 100vh; height: 100%; margin: 0; .show .dropdown-menu { max-height: none; } } .zmode-container { flex: 1; display: grid; grid-template-areas: 'aside header' 'aside main'; grid-template-columns: var(--aside-width) 1fr; grid-template-rows: var(--default-height) 1fr; overflow: auto; background-color: var(--color-slate-100); overflow: hidden; } .zmode-header { position: relative; padding: 0 1rem 0 0; } .zmode-header-home-wrapper { position: relative; .header-cta--home { width: 8rem; } } .zmode-header-search-wrapper { .header-input-search { .zmode-search { width: 18.75rem; } } .search-options--close { display: inline-flex; color: var(--color-black); } .search-options-includesold { display: none; align-items: center; gap: 0.25rem; padding: 0.125rem; background-color: var(--color-gray-100); border-radius: var(--border-radius); } } .zmode-aside { grid-area: aside; position: relative; display: flex; background-color: var(--color-slate-300); z-index: 1005; .zmode-aside-nav { position: relative; display: flex; flex-direction: column; gap: 0.25rem; margin-top: 7.5rem; } .zmode-aside-cta { position: relative; width: var(--aside-width); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; &:hover { .zmode-aside-logo { transform: scale(1.2); } } .zmode-aside-logo { display: flex; width: 100%; height: 2.5rem; object-fit: contain; transition: 0.3s; } &.korey img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; overflow: hidden; } } } .zmode-set-width { display: none; } .zmode-main { grid-area: main; flex-direction: row-reverse; margin-top: 0; padding: 1rem; width: 100%; overflow: hidden; &.pushpanel-pushed { width: calc(100% - var(--pushpanel-width)); min-width: 45rem; } &.batchaction-pushed { padding-left: calc(var(--batchaction-width) - var(--aside-width) + 1rem); } .zmode-main-body { padding-bottom: 0; .zmode-main-body-header { flex-direction: row; align-items: center; justify-content: space-between; .header--right .legacy-action-links { a.btn, button.btn { font-size: 1rem; } } } .zmode-main-body-content { .dhx_sample-controls { a.btn, button.btn { font-size: 1rem; } } } } .zmode-main-menu { position: relative; bottom: unset; right: unset; width: unset; z-index: unset; .main-menu-pagecta { display: flex; flex-direction: column; gap: 1rem; } a:not(.dropdown-item), button:not(.dropdown-item) { width: 2rem; height: 2rem; background-color: var(--color-white); border-color: var(--color-slate-300); border-radius: var(--border-radius); box-shadow: none; transition: 0.3s; &:hover, &:active { background-color: var(--color-white); border-color: var(--color-white); box-shadow: 0 4px 10px rgba(0,0,0,0.2); } } } .zmode-main-wrapper { grid-area: main-wrapper; position: relative; width: 100%; min-width: 0; max-width: 85rem; height: auto; max-height: calc(100vh - (var(--default-height) + 2rem)); margin: 0 auto; overflow: auto; background-color: var(--color-white); border: 1px solid var(--color-gray-300); scrollbar-width: thin; transition: 0.3s; &.pushed { overflow-x: auto; } &.expanded { max-width: 100%; } } } .zmode-pushpanel { width: var(--pushpanel-width); top: var(--default-height); right: calc(var(--pushpanel-width) * -1); height: calc(100vh - var(--default-height)); border-left: 8px solid var(--color-white); z-index: 999; } .zmode-pushpanel-ajax { width: var(--pushpanel-width); top: var(--default-height); right: calc(var(--pushpanel-width) * -1); height: calc(100vh - var(--default-height)); border-left: 8px solid var(--color-white); z-index: 1000; } .zmode-slidepanel { height: 100vh; &.open { left: var(--aside-width); border-left: 1px dashed var(--color-slate-400); } .slidepanel-actions { position: relative; } } .zmode-rightfilter { height: calc(100vh - var(--default-height)); .rightfilter-inner { padding: 0.5rem 0.5rem 3rem; } } .zmode-actions-menu { .navbar { border-radius: var(--border-radius); } .navbar-nav { width: 100%; gap: 0.5rem; } .nav-item.dropdown { position: static; } .dropdown-menu.show { width: 100%; left: 0; right: 0; .row { grid-template-columns: repeat(4, 1fr); } } } .korey-chat-root { display: block; } } @media screen and (min-width: 1200px) { .zmode-header-tenant-wrapper { display: flex; .select2 { & + .select2-container { min-width: 10rem; max-width: 12rem; .select2-selection { height: 2.125rem; border: 2px solid var(--color-slate-400); } } } } .main-width-cta { display: flex; justify-content: center; margin-top: auto; margin-bottom: 2rem; transition: 0.3s; i { color: var(--color-black); font-size: 2rem; } &:hover { color: inherit; transform: scale(1.2); } } }