PHP Classes

File: assets/htmlwidgets.css

Recommend this page to a friend!
  Classes of Nikos M.   PHP Widget Library for HTML Pages   assets/htmlwidgets.css   Download  
File: assets/htmlwidgets.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Widget Library for HTML Pages
Generate HTML and JavaScript to show page widgets
Author: By
Last change: v.2.3.0

* enable adding handlers to restore dynamically structured elements
back to default state and remove any event handlers
in case they are re-rendered on same page
* add modelview re-render test example
* minor changes and corrections
Date: 1 year ago
Size: 196,130 bytes
 

Contents

Class file image Download
/** * HtmlWidget * * @dependencies: FontAwesome * @version: 2.3.0 * https://github.com/foo123/HtmlWidget * **/ .w-widget, .w-sprite, .w-wrapper, .fa-wrapper, .w-panel, .w-dialog, .w-table, .w-tab, .w-page, .w-accordeon-item, .w-dropdown, .w-select, .w-time, .w-time-component, .w-textarea, .w-syntax-highlight, .w-text, .w-map, .w-link, .w-label, .w-button, .w-switch, input.w-radio-image + label, input.w-checkbox-image + label, input.w-radio-label + label, input.w-checkbox-label + label, input.w-radio + label, input.w-checkbox + label { position: relative; display: inline-block; vertical-align: middle; outline: 0; background: none; font-weight: normal; font-style: normal; padding: 0; margin: 0; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* clearfix container hack */ /* https://css-tricks.com/snippets/css/clear-fix/ */ .w-clearfloat:after { content: ""; display: table; clear: both; } .w-sprite { overflow: hidden !important; } .w-syntax-editor, .w-syntax-editor + .CodeMirror, .w-syntax-editor + .ace_editor { position: relative; display: inline-block; vertical-align: top; outline: 0; padding: 0; width: 100%; max-width: 100%; min-height: 400px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .w-syntax-highlight { position: relative; display: inline-block; vertical-align: top; outline: 0; padding: 0; width: 100%; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow: auto; } .w-widget.w-chart, .w-chart { position: relative; } .w-widget.w-control-list, .w-control-list { position: relative; display: block; } .w-widget.w-control-list > li > .w-control-list-option-label, .w-control-list > li > .w-control-list-option-label { max-width: 300px; word-wrap: normal; } .w-widget.w-control-list.w-control-list-horizontal, .w-control-list.w-control-list-horizontal { list-style-type: none !important; display: inline-block; padding: 0; } .w-widget.w-control-list.w-control-list-horizontal > li, .w-control-list.w-control-list-horizontal > li { display: inline-block; padding: 1px; text-align: center; max-width: 100px; } .w-widget.w-control-list.w-control-list-horizontal > li > .w-control-list-option-label, .w-control-list.w-control-list-horizontal > li > .w-control-list-option-label { display: none; } .w-widget.w-control-array, .w-control-array { position: relative; display: table; } .w-widget.w-control-array td, .w-control-array td { padding: 4px; } .w-widget.w-control-array thead td, .w-control-array thead td { text-align: center; font-weight: bold; } .w-widget.w-control-array tbody td:first-child, .w-control-array tbody td:first-child { text-align: right; font-weight: bold; } .w-widget.w-control-array.stripped tbody tr.even > td, .w-control-array .stripped tbody tr.even > td, .w-widget.w-control-array.stripped tbody tr:nth-of-type(2n) > td, .w-control-array.stripped tbody tr:nth-of-type(2n) > td { background: rgba(0,0,0,0.11); } .w-widget.w-dnd-upload, .w-widget.w-upload, .w-dnd-upload, .w-upload { position: relative; display: inline-block; padding: 0; margin: 0; cursor: pointer; } .w-widget.w-dnd-upload, .w-dnd-upload { min-width: 120px; min-height: 120px; text-align: center; overflow: hidden; border-style: solid; border-width: 1px; border-color: transparent; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 100%; word-wrap: break-word; } .w-dnd-upload.__empty__ > .w-dnd-upload-upload { position: absolute; display: block; margin: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 2em; } .w-dnd-upload:not(.__empty__) > .w-dnd-upload-upload { position: relative; display: inline-block; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .w-dnd-upload > .w-dnd-upload-preview, .w-upload > img.w-upload-thumbnail { position: relative; max-width: 100%; margin: 0 auto; margin-bottom: 10px; display: block; } .w-dnd-upload.__empty__ > .w-dnd-upload-preview, .w-upload > img.w-upload-thumbnail[src=''] { display: none; margin-bottom: 0; } .w-dnd-upload.__empty__ > .w-dnd-upload-delete, .w-upload > img.w-upload-thumbnail[src=''] ~ .w-upload-delete { display: none; } .w-tag { position: relative; display: inline-block; cursor: pointer; vertical-align: middle; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; text-decoration: none; background-color: #777; color: #fff; font-size: 1em; font-weight: bold; /*text-shadow: 0 1px 2px rgba(0,0,0,0.2);*/ box-shadow: 0 1px 2px rgba(0,0,0,0.2); white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .w-tag:before { position: absolute; content: ""; right: 1px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; -moz-box-shadow: -1px -1px 2px rgba(0,0,0,0.4); -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4); box-shadow: -1px -1px 2px rgba(0,0,0,0.4); } .w-tag:after { position: absolute; content: ""; right: -12px;top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-color: transparent transparent transparent #777; border-style: solid; border-width: 12px 0 12px 12px; } .w-tag.w-tag2 { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .w-tag.w-tag2:before { left: 1px; right: auto; } .w-tag.w-tag2:after { left: -12px; right: auto; border-color: transparent #777 transparent transparent; border-width: 12px 12px 12px 0; } .w-tag.w-tag3 { -webkit-border-radius: 5px 5px 5px 5px !important; -moz-border-radius: 5px 5px 5px 5px !important; -ms-border-radius: 5px 5px 5px 5px !important; border-radius: 5px 5px 5px 5px !important; } .w-tag.w-tag3:before, .w-tag.w-tag3:after { display: none !important; } .w-tag i.fa { position: relative; display: inline-block; vertical-align: middle; margin: 0 4px; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .w-tag > button, .w-tag > label, .w-tag > a { position: relative; display: inline-block; vertical-align: middle; text-decoration: none; font-size: inherit; color: inherit; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .w-tag select { position: relative; display: inline-block; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; font-size: inherit !important; color: inherit; min-width: 8em; max-width: 100%; border: none; background-color: inherit; padding: 0; padding-right: 5px; margin: 0 1px; overflow: hidden; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ellipsis; cursor: pointer; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .w-tag select::-ms-expand { display: none !important; /* IE10+ */ } .w-tag select, .w-tag select:hover, .w-tag select:focus, .w-tag select:active { outline: none; border: none; box-shadow: none; } .w-tag select option { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: 0.9em !important; font-weight: bold; color: inherit; background-color: inherit; /*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%);*/ } .w-tag.w-tag3 select option { padding: 6px 2px; } .w-tag select, .w-tag select option { background-color: #777; color: #fff !important; } .w-error-msg { position: relative; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow: hidden; float: none; font-weight: normal; border: 1px solid transparent; } .w-error-msg::before { position: relative; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: inherit; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; content: "\f071"; /* exclamation-triangle */ } input.w-colorselector { display: none !important; } .colorpicker-selector, .w-colorselector { position: relative; display: inline-block; z-index: 1; vertical-align: middle; cursor: pointer; background-image: url(colorpicker/images/colorpicker_transparent.jpg); background-repeat: repeat; background-position: 0 0; background-clip: padding-box !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: transparent; } .colorpicker-selector:before, .w-colorselector:before { position: absolute; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; content: " "; padding: 0; margin: 0; border: none; border-radius: 0; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 2; background-color: inherit; background-image: none; } .colorpicker-selector:after, .w-colorselector:after { position: absolute; display: block; z-index: 3; bottom: 0; right: 0; text-align: center; background: none; content: "\25BE"; } .colorpicker-selector:focus, .colorpicker-selector:active, .colorpicker-selector:hover, .w-colorselector:focus, .w-colorselector:active, .w-colorselector:hover { outline: 0 !important; } .w-select:hover, .w-time-component:hover, .w-text:hover, .w-textarea:hover, .w-select:focus, .w-time-component:focus, .w-text:focus, .w-textarea:focus { outline: 0; } .w-link:active, .w-label:active, .w-button:active, .w-link:hover, .w-label:hover, .w-button:hover, .w-link, .w-label, .w-button, .w-switch label:active, .w-switch label:hover, .w-switch label, input.w-radio-image + label:hover, input.w-checkbox-image + label:hover, input.w-radio + label:hover, input.w-checkbox + label:hover, input.w-radio-image + label:active, input.w-checkbox-image + label:active, input.w-radio + label:active, input.w-checkbox + label:active, input.w-radio-image + label, input.w-checkbox-image + label, input.w-radio-label + label, input.w-checkbox-label + label, input.w-radio + label, input.w-checkbox + label { cursor: pointer !important; text-decoration: none; outline: 0; } .w-switch > input.w-switch-state, input[type=radio].w-radio-image, input[type=checkbox].w-checkbox-image, input[type=radio].w-radio-label, input[type=checkbox].w-checkbox-label, input[type=radio].w-radio, input[type=checkbox].w-checkbox { display: none !important; } .w-menu-controller, .w-transition-controller, .w-page-controller { position: fixed !important; height: 0; visibility: hidden; z-index: -1; } .w-modal-controller, .w-panel-controller { position: absolute !important; display: none; height: 0; visibility: hidden; z-index: -1; } .w-widget.animated, .w-animated { /* duration 0.5 sec */ -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; /* delay 0 sec */ -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; /* one iteration */ -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; /* linear easing */ -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; /* fill mode both */ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .fa-wrapper > .fa { position: relative; display: inline-block; padding: 0; margin: 0; color: inherit; font-size: inherit; } .w-syntax-editor-box, .w-wysiwyg-editor-box { display: block; } .w-textarea, .w-syntax-editor, .w-wysiwyg-editor { vertical-align: top; } .w-table { display: table; vertical-align: top; } .w-time-component, .w-select, .w-button, .w-dropdown, .w-text, .w-textarea, .w-syntax-editor, .w-syntax-editor + .CodeMirror, .w-syntax-editor + .ace_editor, .w-wysiwyg-editor, input.w-radio + label, input.w-checkbox + label { border-color: transparent; border-style: solid; } .w-wysiwyg-editor-box.trumbowyg.trumbowyg-box { position: relative; display: block; } .w-time .w-time-sep { position: relative; display: inline-block; font-weight: bold; } .w-wrapper > .w-widget.w-suggest ~ .fa-wrapper.w-suggest-spinner { display: none; z-index: -1; } /*.w-wrapper.ajax > .w-widget.w-suggest ~ .fa-wrapper.w-suggest-spinner,*/ .w-wrapper.__ajax__ > .w-widget.w-suggest ~ .fa-wrapper.w-suggest-spinner { display: inline-block; z-index: 2; } .w-button { -webkit-user-select: none; -moz-user-select: none; background-image: none; font-weight: normal; margin-bottom: 0; text-align: center; white-space: nowrap; background-clip: padding-box !important; } .w-label.w-icon > .fa-wrapper.left-fa, .w-button.w-icon > .fa-wrapper.left-fa, .w-label.w-icon-right > .fa-wrapper.right-fa, .w-button.w-icon-right > .fa-wrapper.right-fa, .w-label.w-icon-only > .fa-wrapper, .w-button.w-icon-only > .fa-wrapper { position: relative; display: inline-block; } .w-wrapper.w-icon > .w-widget:not(:disabled):hover ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget:not(:disabled):hover ~ .fa-wrapper, .w-wrapper.w-icon > .w-widget:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon > .w-widget.w-text:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-text:not(:disabled):focus ~ .fa-wrapper { opacity: 1; } .w-wrapper > .w-widget { margin: 0; width: 100%; position: relative; } .w-wrapper.w-icon > .w-widget ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget ~ .fa-wrapper { display: inline-block; position: absolute; top: 50%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; cursor: pointer; z-index: 2; opacity: 1; } .w-wrapper.w-icon > .w-widget:not(:disabled) ~ .fa-wrapper.w-colorselector, .w-wrapper.w-icon-right > .w-widget:not(:disabled) ~ .fa-wrapper.w-colorselector { pointer-events: auto !important; } .w-wrapper.w-icon > .w-widget ~ .fa-wrapper > .fa, .w-wrapper.w-icon-right > .w-widget ~ .fa-wrapper > .fa { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; cursor: pointer; } .w-wrapper.w-icon > .w-widget ~ .fa-wrapper.left-fa { left: 1em; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .w-wrapper.w-icon-right > .w-widget ~ .fa-wrapper.right-fa { right: 1em; -webkit-transform: translate(50%,-50%); -moz-transform: translate(50%,-50%); -ms-transform: translate(50%,-50%); -o-transform: translate(50%,-50%); transform: translate(50%,-50%); } input[type=radio].w-radio-image + label input[type=checkbox].w-checkbox-image + label { padding: 0 !important; border: none; } input[type=radio].w-radio-image + label > span, input[type=checkbox].w-checkbox-image + label > span { display: block !important; position: relative; padding: 0; margin: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 4px solid transparent; overflow: hidden; z-index: 2; background-color: transparent; background-clip: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; -ms-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; opacity: .5; } input[type=radio].w-radio-image + label:hover > span, input[type=checkbox].w-checkbox-image + label:hover > span { opacity: 1; } input[type=radio].w-radio-image:checked + label > span, input[type=checkbox].w-checkbox-image:checked + label > span { background-size: 125% auto; background-position: 15% 15%; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; -ms-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; opacity: 1; } input[type=radio].w-radio-image + label > span:after, input[type=checkbox].w-checkbox-image + label > span:after { position: absolute; display: none; z-index: 0; top: 2px; right: 2px; content: "\f058"; /* check-circle */ font-family: FontAwesome, sans-serif; font-size: 2em; color: rgb(28, 184, 65); pointer-events: none; } input[type=radio].w-radio-image:checked + label > span:after, input[type=checkbox].w-checkbox-image:checked + label > span:after { display: block; z-index: 2; } input.w-radio + label, input.w-checkbox + label { overflow: visible; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: sans-serif; background-repeat: no-repeat; border-radius: 15%; text-align: center; z-index: 1; } input.w-radio + label:before, input.w-checkbox + label:before { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; position: absolute; display: inline-block; padding: 0; margin: 0; border: none; background: none; z-index: 2; overflow: hidden; font-family: inherit; color: inherit; cursor: inherit; font-weight: bold; content: " "; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } input.w-radio + label:before, input.w-radio + label { border-radius: 50%; } input.w-checkbox:disabled + label:before, input.w-radio:disabled + label:before { opacity: 0.6; } /* DEFAULT */ input.w-checkbox + label:before, input.w-radio + label:before, /* HEAVY CHECK MARK */ input.w-checkbox.heavy-check-mark + label:before, input.w-radio.heavy-check-mark + label:before, input.w-checkbox + label.heavy-check-mark:before, input.w-radio + label.heavy-check-mark:before { content: "\2714"; } /* HEAVY PLUS SIGN */ input.w-checkbox.heavy-plus-sign + label:before, input.w-radio.heavy-plus-sign + label:before, input.w-checkbox + label.heavy-plus-sign:before, input.w-radio + label.heavy-plus-sign:before { content: "\2795"; } /* HEAVY cross */ input.w-checkbox.heavy-cross + label:before, input.w-radio.heavy-cross + label:before, input.w-checkbox + label.heavy-cross:before, input.w-radio + label.heavy-cross:before { content: "\271A"; } /* CROSS X MARK */ input.w-checkbox.cross-x-mark + label:before, input.w-radio.cross-x-mark + label:before, input.w-checkbox + label.cross-x-mark:before, input.w-radio + label.cross-x-mark:before { content: "\274C"; } /* CHECK MARK */ input.w-checkbox.check-mark + label:before, input.w-radio.check-mark + label:before, input.w-checkbox + label.check-mark:before, input.w-radio + label.check-mark:before { content: "\2713"; } /* MULT SIGN */ input.w-checkbox.mult-sign + label:before, input.w-radio.mult-sign + label:before, input.w-checkbox + label.mult-sign:before, input.w-radio + label.mult-sign:before { content: "\2715"; } /* HEAVY MULT SIGN */ input.w-checkbox.heavy-mult-sign + label:before, input.w-radio.heavy-mult-sign + label:before, input.w-checkbox + label.heavy-mult-sign:before, input.w-radio + label.heavy-mult-sign:before { content: "\2716"; } /* BALLOT X */ input.w-checkbox.ballot-x + label:before, input.w-radio.ballot-x + label:before, input.w-checkbox + label.ballot-x:before, input.w-radio + label.ballot-x:before { content: "\2717"; } /* HEAVY BALLOT X */ input.w-checkbox.heavy-ballot-x + label:before, input.w-radio.heavy-ballot-x + label:before, input.w-checkbox + label.heavy-ballot-x:before, input.w-radio + label.heavy-ballot-x:before { content: "\2718"; } /* LARGE SQUARE */ input.w-checkbox.square + label:before, input.w-radio.square + label:before, input.w-checkbox + label.square:before, input.w-radio + label.square:before { content: "\2B1B"; } /* SMALL SQUARE */ input.w-checkbox.square-sm + label:before, input.w-radio.square-sm + label:before, input.w-checkbox + label.square-sm:before, input.w-radio + label.square-sm:before { content: "\25A0"; } /* BLACK CIRCLE */ input.w-checkbox.discus + label:before, input.w-radio.discus + label:before, input.w-checkbox + label.discus:before, input.w-radio + label.discus:before { content: "\25CF"; } input.w-checkbox:not(.w-push-button):not(.w-led-button):not(:checked) + label:before, input.w-radio:not(.w-push-button):not(.w-led-button):not(:checked) + label:before, input.w-checkbox.empty-on-unchecked:not(:checked) + label:before, input.w-radio.empty-on-unchecked:not(:checked) + label:before, input.w-checkbox:not(:checked) + label:not(.w-push-button):not(.w-led-button):before, input.w-radio:not(:checked) + label:not(.w-push-button):not(.w-led-button):before, input.w-checkbox:not(:checked) + label.empty-on-unchecked:before, input.w-radio:not(:checked) + label.empty-on-unchecked:before { content: " "; } /* user-defined ON state */ input.w-checkbox:checked + label[data-wstate-on]:before, input.w-radio:checked + label[data-wstate-on]:before { content: attr(data-wstate-on) !important; } /* user-defined OFF state */ input.w-checkbox:not(:checked) + label[data-wstate-off]:before, input.w-radio:not(:checked) + label[data-wstate-off]:before { content: attr(data-wstate-off) !important; } /* HEAVY */ input.w-checkbox.heavy + label:before, input.w-radio.heavy + label:before, input.w-checkbox + label.heavy:before, input.w-radio + label.heavy:before { font-weight: bold !important; } input.w-radio.inset:not(.w-push-button) + label, input.w-checkbox.inset:not(.w-push-button) + label, input.w-radio + label.inset:not(.w-push-button), input.w-checkbox + label.inset:not(.w-push-button) { border: 1px solid transparent; } /* adapted from https://github.com/LeaVerou/regexplained demo page */ input.w-checkbox.w-push-button + label, input.w-radio.w-push-button + label, input.w-checkbox + label.w-push-button, input.w-radio + label.w-push-button { min-width: 1em; line-height: 1; background: none; background-image: none; border: 1px solid transparent; transform: translate(0, 0); transition-duration: .1s; transition-property: box-shadow, transform; } input.w-checkbox.w-push-button + label:before, input.w-radio.w-push-button + label:before, input.w-checkbox + label.w-push-button:before, input.w-radio + label.w-push-button:before { text-shadow: 1px 1px 1px rgba(0, 0, 0, .9); } input.w-checkbox.w-push-button:checked + label, input.w-radio.w-push-button:checked + label, input.w-checkbox:checked + label.w-push-button, input.w-radio:checked + label.w-push-button { transform: translate(2px, 2px); } input.w-checkbox.w-led-button + label:before, input.w-radio.w-led-button + label:before, input.w-checkbox + label.w-led-button:before, input.w-radio + label.w-led-button:before { transition-duration: .2s; transition-property: text-shadow, color; } /* sliding switch checkboxes */ .w-switch { overflow: hidden; color: transparent; text-shadow: none; background-image: none; background-color: #fff; z-index: 1; } .w-switch > label { position: relative; display: block; z-index: 1; padding: 0; margin: 0; overflow: hidden; float: left; width: 50%; height: 100%; text-align: center; line-height: inherit; font-size: inherit; color: inherit; text-shadow: inherit; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* IE10+ */ background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* W3C */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .w-switch > label.w-switch-on > .fa, .w-switch > label.w-switch-off > .fa { position: absolute; display: block; margin: 0; padding: 0; border: none; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .w-switch > label.w-switch-on > .fa::before, .w-switch > label.w-switch-off > .fa::before { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .w-switch > label > .fa.not-positive::before, .w-switch > label > .fa.negative::before { opacity: 0.6; } .w-switch > label > .fa.positive::after, .w-switch > label > .fa.negative::after { position:absolute; display: block; z-index: 2; padding: 0; margin: 0; border: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: FontAwesome, sans-serif; font-weight: normal; font-size: 0.8em; color: inherit; top: 0; right: 0; -webkit-transform:translate(25%,-25%); -moz-transform:translate(25%,-25%); -ms-transform:translate(25%,-25%); -o-transform:translate(25%,-25%); transform:translate(25%,-25%); } .w-switch > label > .fa.positive::after { content: "\f058"; /* check-circle */ } .w-switch > label > .fa.negative::after { content: "\f057"; /* times-circle */ } .w-switch > .w-switch-handle { display: block; position: absolute; padding: 0; margin: 0; outline: 0; z-index: 2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* IE10+ */ background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 10%,rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%,rgba(255,255,255,0) 100%); /* W3C */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; cursor: pointer; top: 50%; left: 0; width: 50%; height: 110%; border-color: inherit; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: -webkit-transform .25s ease-out; -moz-transition: -moz-transform .25s ease-out; -ms-transition: -ms-transform .25s ease-out; -o-transition: -o-transform .25s ease-out; transition: transform .25s ease-out; } .w-switch.reverse > .w-switch-handle { -webkit-transform: translate(100%, -50%); -moz-transform: translate(100%, -50%); -ms-transform: translate(100%, -50%); -o-transform: translate(100%, -50%); transform: translate(100%, -50%); } .w-switch.dual > input.w-state-on:checked ~ .w-switch-handle, .w-switch:not(.dual) > input.w-switch-state:checked ~ .w-switch-handle { -webkit-transform: translate(100%, -50%); -moz-transform: translate(100%, -50%); -ms-transform: translate(100%, -50%); -o-transform: translate(100%, -50%); transform: translate(100%, -50%); -webkit-transition: -webkit-transform .25s ease-out; -moz-transition: -moz-transform .25s ease-out; -ms-transition: -ms-transform .25s ease-out; -o-transition: -o-transform .25s ease-out; transition: transform .25s ease-out; } .w-switch.reverse.dual > input.w-state-on:checked ~ .w-switch-handle, .w-switch.reverse:not(.dual) > input.w-switch-state:checked ~ .w-switch-handle { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .w-switch > input.w-switch-state:disabled ~ label.w-switch-on, .w-switch > input.w-switch-state:disabled ~ label.w-switch-off { opacity: 0.6; } /* range slider */ .w-range:not(.circular) { --primary-color: #0366D6; --primary-color-lighter: LightCyan; --value-offset-y: var(--ticks-gap); --value-active-color: white; --value-background: transparent; --value-background-hover: var(--primary-color); --value-font-size: 12px/1; --value-font: 700 var(--value-font-size) sans-serif; --fill-color: linear-gradient(to right, var(--primary-color-lighter), var(--primary-color)); --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset; --progress-fill-shadow: var(--progress-shadow); --progress-background: #EEE; --progress-radius: 20px; --track-height: 6px; --min-max-font: 12px sans-serif; --min-max-opacity: .5; --min-max-x-offset: 10%; --thumb-size: 20px; --thumb-color: white; --thumb-shadow: 0 0 3px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.5) inset, 0 0 0 99px var(--thumb-color) inset; --thumb-shadow-active: 0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color), 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0,0,0,.4); --thumb-shadow-hover: var(--thumb-shadow); --ticks-thickness: 1px; --ticks-height: 5px; --ticks-gap: var(--ticks-height, 0); --ticks-color: silver; --step: 1; --ticks-count: calc((var(--max) - var(--min)) / var(--step)); --maxTicksAllowed: 30; --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0)); --x-step: Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min))); --tickIntervalPerc_1: calc((var(--max) - var(--min)) / var(--x-step)); --tickIntervalPerc: calc((100% - var(--thumb-size)) / var(--tickIntervalPerc_1) * var(--tickEvery, 1)); --value-a: Clamp(var(--min), var(--value, 0), var(--max)); --value-b: var(--value, 0); --text-value-a: var(--text-value, ""); --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100); --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100); --ca: Min(var(--completed-a), var(--completed-b)); --cb: Max(var(--completed-a), var(--completed-b)); --thumbs-too-close: Clamp( -1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1 ); --thumb-close-to-min: Min(1, Max(var(--ca) - 5, 0)); --thumb-close-to-max: Min(1, Max(95 - var(--cb), 0)); box-sizing:content-box; display:inline-block; height:Max(var(--track-height), var(--thumb-size)); background:linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x; background-size:var(--tickIntervalPerc) var(--ticks-height); background-position-x:calc(var(--thumb-size)/2 - var(--ticks-thickness)/2); background-position-y:var(--flip-y, bottom); padding-bottom:var(--flip-y, calc(2 * var(--ticks-gap))); padding-top:calc(var(--flip-y) * var(--ticks-gap) * 2); position:relative; z-index:1; --flip-y: 1; } /*.w-range[data-ticks-position="top"] { --flip-y: 1; }*/ .w-range:not(.circular)::before,.w-range:not(.circular)::after { --offset: calc(var(--thumb-size) / 2); content:counter(x); display:var(--show-min-max, block); font:var(--min-max-font); position:absolute; bottom:var(--flip-y, -2.5ch); top:calc(-2.5ch * var(--flip-y)); opacity:Clamp(0, var(--at-edge), var(--min-max-opacity)); transform:translateX(calc( var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge)); pointer-events:none; } .w-range:not(.circular)::before { --before: 1; --at-edge: var(--thumb-close-to-min); counter-reset:x var(--min); left:var(--offset); } .w-range:not(.circular)::after { --at-edge: var(--thumb-close-to-max); counter-reset:x var(--max); right:var(--offset); } .w-range-values { position:relative; top:50%; line-height:0; text-align:justify; width:100%; pointer-events:none; margin:0 auto; z-index:5; } .w-range-values::after { content:''; width:100%; display:inline-block; height:0; background:red; } .w-range-progress { --start-end: calc(var(--thumb-size) / 2); --clip-end: calc(100% - (var(--cb) ) * 1%); --clip-start: calc(var(--ca) * 1%); --clip: inset(-20px var(--clip-end) -20px var(--clip-start)); position:absolute; left:var(--start-end); right:var(--start-end); top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size) / 2 - var(--track-height) / 2); height:var(--track-height); background:var(--progress-background, #EEE); pointer-events:none; z-index:-1; border-radius:var(--progress-radius); } .w-range-progress::before { content:''; position:absolute; left:0; right:0; clip-path:var(--clip); top:0; bottom:0; background:var(--fill-color, black); box-shadow:var(--progress-fill-shadow); z-index:1; border-radius:inherit; } .w-range-progress::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; box-shadow:var(--progress-shadow); pointer-events:none; border-radius:inherit; } .w-range:not(.circular) > input { -webkit-appearance:none; appearance:none; width:100%; height:var(--thumb-size); margin:0; position:absolute; left:0; top:calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1))); cursor:-webkit-grab; cursor:grab; outline:none; background:none; } .w-range:not(.circular) > input:not(:only-of-type) { pointer-events:none; } .w-range:not(.circular) > input::-webkit-slider-thumb { -webkit-appearance: none; border:none; margin:0; height:var(--thumb-size); width:var(--thumb-size); border-radius:var(--thumb-radius, 50%); transform:translate(0,-2px); background:var(--thumb-color); box-shadow:var(--thumb-shadow); pointer-events:auto; transition:.1s; } .w-range:not(.circular) > input::-moz-range-thumb { border:none; margin:0; height:var(--thumb-size); width:var(--thumb-size); border-radius:var(--thumb-radius, 50%); transform:translate(0,-2px); background:var(--thumb-color); box-shadow:var(--thumb-shadow); pointer-events:auto; transition:.1s; } .w-range:not(.circular) > input::-ms-thumb { border:none; margin:0; height:var(--thumb-size); width:var(--thumb-size); border-radius:var(--thumb-radius, 50%); transform:translate(0,-2px); background:var(--thumb-color); box-shadow:var(--thumb-shadow); pointer-events:auto; transition:.1s; } .w-range:not(.circular) > input:hover { --thumb-shadow: var(--thumb-shadow-hover); } .w-range:not(.circular) > input:focus + output, .w-range:not(.circular) > input:hover + output { --value-background: var(--value-background-hover); --y-offset: -5px; color:var(--value-active-color); box-shadow:0 0 0 3px var(--value-background); } .w-range:not(.circular) > input:focus, .w-range:not(.circular) > input:active { --thumb-shadow: var(--thumb-shadow-active); cursor:grabbing; z-index:2; } .w-range:not(.circular) > input:focus + output, .w-range:not(.circular) > input:active + output { transition:0s; outline: none; } .w-range:not(.circular) > input:nth-of-type(1) { --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999 ,1); } .w-range:not(.circular) > input:nth-of-type(1) + output { --value: var(--value-a); --x-offset: calc(var(--completed-a) * -1%); } .w-range:not(.circular) > input:nth-of-type(1) + output:not(:only-of-type) { --flip: calc(var(--thumbs-too-close) * -1); } .w-range:not(.circular) > input:nth-of-type(1) + output::after { content:var(--prefix, "") var(--text-value-a) var(--suffix, ""); } .w-range:not(.circular) > input:nth-of-type(2) { --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999 ,1); } .w-range:not(.circular) > input:nth-of-type(2) + output { --value: var(--value-b); } .w-range:not(.circular) > input:only-of-type ~ .w-range-progress { --clip-start: 0; } .w-range:not(.circular) > input + output { --flip: -1; --x-offset: calc(var(--completed-b) * -1%); --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%); pointer-events:none; position:absolute; z-index:5; background:var(--value-background); border-radius:2px; padding:2px 4px; left:var(--pos); transform:translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip))); transition:all .12s ease-out, left 0s; min-width: 30px; text-align:center; outline: none; } .w-range:not(.circular) > input + output::after { position:relative; display:inline-block; content:var(--prefix, "") var(--text-value-b) var(--suffix, ""); font:var(--value-font); z-index:1; } .w-range:not(.circular) > input + output::before { position:absolute; display:block; content:""; top:100%; left:50%; max-width:100%; transform:translate(-50%, -2px); height:0; z-index:-1; border-left:15px solid transparent; border-right:15px solid transparent; border-top:10px solid var(--value-background); } .w-range.circular { --angle: 0deg; --angle0: 0deg; --radius: 180px; --bg: #FFF; --thumb-radius: 24px; --thumb-bg: #EEE; --progress-width: 6px; --progress-bg: LightCyan; --progress-active-bg: #0366D6; position: relative; display: inline-block; background: conic-gradient(var(--progress-bg) 0deg, var(--progress-bg) var(--angle0), var(--progress-active-bg) var(--angle0), var(--progress-active-bg) var(--angle), var(--progress-bg) var(--angle), var(--progress-bg)); border-radius: 50%; height: var(--radius); width: var(--radius); font: 700 16px/1 sans-serif; cursor: grab; } .w-range.circular::before { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); font: inherit; content: var(--prefix,"") var(--text-value,"") var(--suffix,""); width: calc(var(--radius) - (var(--progress-width) * 2)); height: calc(var(--radius) - (var(--progress-width) * 2)); top: var(--progress-width); left: var(--progress-width); z-index: 1; cursor: auto; color: inherit; } .w-range.circular::after { position: absolute; background: var(--progress-active-bg); border-radius: 50%; content: ""; width: calc(var(--progress-width) * 2); height: calc(var(--progress-width) * 2); top: calc(var(--progress-width) / -2); left: calc(50% - var(--progress-width)); z-index: 2; } .w-range.circular > output { position: absolute; background: none; top: 50%; left: 50%; width: 50%; height: var(--thumb-radius); transform: rotate(calc(var(--angle) - 90deg)); transform-origin: top left; z-index: 2; } .w-range.circular > output::before { position: absolute; display: inline-block; box-sizing: border-box; background: var(--thumb-bg); border: 4px solid var(--thumb-bg); border-radius: 50%; width: var(--thumb-radius); height: var(--thumb-radius); box-shadow: var(--thumb-shadow, 1px 1px 5px 0 rgba(0,0,0,0.4)); content: ""; top: calc((var(--progress-width) - var(--thumb-radius)) / 2); right: calc((var(--progress-width) - var(--thumb-radius)) / 2); cursor: grab; z-index: 1; transform-origin: center center; } .w-range.circular:focus > output::before, .w-range.circular:active > output::before, .w-range.circular > output:focus::before, .w-range.circular > output:active::before { background: var(--progress-active-bg); cursor: grabbing; } .w-range.circular > output:focus { outline: none; } .w-range.circular > input { appearance: none; } .w-range.circular > input::-ms-thumb, .w-range.circular > input::-moz-range-thumb, .w-range.circular > input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: var(--thumb-bg); border-radius: 50%; width: var(--thumb-radius); height: var(--thumb-radius); color: transparent; cursor: grab; z-index: 2; } .w-range.circular > input:active::-ms-thumb, .w-range.circular > input:active::-moz-range-thumb, .w-range.circular > input:active::-webkit-slider-thumb { cursor: grabbing; } .w-range.circular > input::-ms-track, .w-range.circular > input::-moz-range-track, .w-range.circular > input::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; background: transparent; background-size: 100%; border-radius: 10px; height: 100%; } ul.w-check-options, ol.w-check-options, .w-check-options { position: relative; display: inline-block; padding: 0; max-height: 300px; min-width: 200px; overflow-y: auto; vertical-align: top; } .w-check-options > li { position: relative; display: block; padding: 0; margin: 2px; cursor: pointer; border-bottom: 1px solid #ddd; } .w-check-options > li:after { content: ""; display: table; clear: both; } .w-check-options > li:last-child { border-bottom: none; } .w-check-options > li > input[type=checkbox]:first-child { position: relative; display: none !important; } .w-check-options > li > input[type=checkbox]:first-child+label { position: relative; display: inline-block; width: 140px; max-width: 100%; padding: 4px; margin: 2px; cursor: pointer; } .w-check-options > li > input[type=checkbox]:first-child:checked+label { background-color: #1190d1 !important; color: #fff !important; } .w-check-options > li > input[type=checkbox]:first-child:not(:checked)~.w-check-option-selected { display: none !important; } .w-rating { position: relative; display: inline-block; padding: 0; border: 0; margin: 0px 4px; vertical-align: middle; /*float: left;*/ } .w-rating > legend { font-weight: bold; font-size: 1em; } .w-rating > input.w-rating-input { display: none !important; } .w-rating > label.w-rating-label { position: relative; display: inline-block; margin: 0; float: right; cursor: pointer !important; font-size: 1.4em; color: #ddd; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); } .w-rating:after { position: relative; display: block; height: 1px; font-size: 1px; line-height: 1px; float: none; clear: both; content: " "; } /*.w-rating > label.w-rating-label:before { position: relative; display: inline-block; }*/ .w-rating > input.w-rating-input:checked ~ label.w-rating-label, /* show gold star when rated */ .w-rating > input.w-rating-input:not(:disabled) + label.w-rating-label:active, /* show gold star when clicked */ .w-rating > input.w-rating-input:not(:disabled) + label.w-rating-label:hover, /* show gold star when hovered */ .w-rating > input.w-rating-input:not(:disabled) + label.w-rating-label:active ~ label.w-rating-label, /* + rest */ .w-rating > input.w-rating-input:not(:disabled) + label.w-rating-label:hover ~ label.w-rating-label /* + rest */ { color: gold; } .w-rating > input.w-rating-input:disabled ~ label.w-rating-label { opacity: 0.6; } .w-tooltip { position: absolute; display: block; visibility: visible; z-index: 1000; background-image: none; background-repeat: no-repeat; border-color: transparent; border-style: solid; text-align: center; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .w-tooltip-arrow { overflow:hidden; position:absolute; margin-left:0; height:20px; width:20px; border-width:0; border-color:inherit; border-style:inherit; } .w-tooltip-arrow:after { content:" "; position:absolute; height:0; left:0; top:0; width:0; margin:0; border-color:inherit; border-style:inherit; border-width:6px; box-shadow:6px 5px 9px -9px rgba(0, 0, 0, .9) } .w-tooltip-arrow.w-arrow-bottom { top:100%; left:38% } .w-tooltip-arrow.w-arrow-bottom:after { border-width:8px; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .w-tooltip-arrow.w-arrow-top { top:-13px; left:42% } .w-tooltip-arrow.w-arrow-top:after { border-top-color:transparent; border-right-color:transparent; border-left-color:transparent; } .w-tooltip-arrow.w-arrow-left { top:25%; left:-13px; bottom:-16px } .w-tooltip-arrow.w-arrow-left:after { width:0; border-top-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .w-tooltip-arrow.w-arrow-right { top:26%; left:100%; bottom:-16px; } .w-tooltip-arrow.w-arrow-right:after { width:0; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; } .w-time-component, .w-select { width: auto; z-index: 1; cursor: pointer; } .w-widget.w-dropdown, .w-dropdown { overflow: visible; width: auto; padding: 0 !important; /*min-width: 120px;*/ z-index: 1; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: transparent !important; } .w-dropdown:after, .w-dropdown:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; content: " "; position: absolute; display: block; padding: 0; margin: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; cursor: inherit; z-index: 5; -webkit-border-radius: inherit; -moz-border-radius: inherit; -ms-border-radius: inherit; -o-border-radius: inherit; border-radius: inherit; background-image: inherit; background-repeat: inherit; background-color: inherit; border-width: 1px; border-style: solid; border-color: transparent !important; background-clip: padding-box !important; color: inherit; text-shadow: none; vertical-align: middle; text-align: center; } .w-dropdown:after { top: 0; bottom: 0; right: 0; width: 40px; } .w-dropdown:before { background: none; width: 40px; font-family: FontAwesome, sans-serif; font-size: 0.9em; font-weight: normal; opacity: 0.5; content: "\f0dd"; /*\f103\f0dc*/ left: 4px; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .w-dropdown:hover:before { opacity: 1; } .w-dropdown > select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; text-indent: 0.01px; /* Removes default arrow from firefox*/ text-overflow: ellipsis; /*Removes default arrow from firefox*/ -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; -ms-box-sizing: padding-box; -o-box-sizing: padding-box; box-sizing: padding-box; position: relative; display: inline-block; margin: 0; padding-left: 40px !important; padding: 8px; width: 100%; min-width: 160px; max-width: 100% !important; line-height: normal; height: 100%; font-size: inherit; border-width: 1px; border-style: solid; border-color: transparent; border-radius: inherit; color: inherit; background-color: inherit; text-shadow: inherit; cursor: inherit; /*overflow: visible;*/ } .w-dropdown > select::-ms-expand { display: none !important; /* IE10+ */ } /*.w-dropdown > select:hover, .w-dropdown > select:focus { color: inherit; background-color: inherit; outline: 0; }*/ .w-dropdown option, .w-dropdown optgroup { position: relative; cursor: pointer; color: inherit; background-color: inherit; } select.w-select option, .w-dropdown > select option { font-style: normal; } select.w-select option.w-option-placeholder, .w-dropdown > select option.w-option-placeholder { font-style: italic; } @media all and (-webkit-min-device-pixel-ratio:0) { /* Webkit/chrome/safari/opera CSS*/ .w-dropdown:after { display: none !important; } } @media all and (-moz-min-device-pixel-ratio:0) { /* Mozilla/firefox CSS*/ .w-dropdown:after { display: none !important; } } @media all and (min-width:0\0) and (min-resolution: +72dpi) { /* IE9+ CSS*/ .w-dropdown:after { display: none !important; } .w-dropdown > select:focus { width: auto !important; } } .w-pagination { position: relative; display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .w-pagination > li, .w-pagination > span, .w-pagination > .page-select { display: inline; } .w-pagination > li > a, .w-pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; text-decoration: none; color: inherit; background-color: transparent; border: 1px solid transparent; } .w-pagination > span, .w-pagination > .page-select { padding: 6px 12px; text-decoration: none; color: inherit; background-color: transparent; border: 1px solid transparent; } .w-pagination > .page-select { width: auto; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .w-pagination > span > a { text-decoration: none; } .w-pagination > li:first-child > a, .w-pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .w-pagination > li:last-child > a, .w-pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .w-pagination > .active > a, .w-pagination > .active > a:focus, .w-pagination > .active > a:hover, .w-pagination > .active > span, .w-pagination > .active > span:focus, .w-pagination > .active > span:hover { z-index: 3; } .w-dropdown-menu { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; z-index: 500; } .w-dropdown-menu ul { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 1px solid transparent; display: block; z-index: 10; border-radius: 0; padding: 0; margin: 0; position: absolute; list-style: none !important; list-style-image: none !important; list-style-type: none !important; } .w-dropdown-menu > ul { padding: 0 20px; position: relative; z-index: 1; display: inline-table; } .w-dropdown-menu > ul:after { content: ""; float: none; clear: both; display: block; } .w-dropdown-menu ul > li > ul { left: 100%; top:0; display: none; max-height: auto; } .w-dropdown-menu > ul > li > ul { overflow: hidden; top: 100%; left: 0; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; display: block; max-height: 0; } .w-dropdown-menu ul > li:focus > ul, .w-dropdown-menu ul > li:active > ul, .w-dropdown-menu ul > li:hover > ul { display: block; } .w-dropdown-menu > ul > li:focus > ul, .w-dropdown-menu > ul > li:active > ul, .w-dropdown-menu > ul > li:hover > ul { overflow: visible; z-index: 20; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; max-height: 800px; } .w-dropdown-menu ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 0; margin: 0; display: block; } .w-dropdown-menu > ul > li { float: left; border-right: 1px solid transparent; } .w-dropdown-menu > ul > li:last-child { border-right: 0; } .w-dropdown-menu ul ul > li { float: none; border-bottom: 1px solid transparent; min-width: 200px; } .w-dropdown-menu ul ul > li:last-child { border-bottom: 0; } /*.w-dropdown-menu li:before,*/ .w-dropdown-menu li.w-submenu-item:before { position: absolute; display: block; font-family: FontAwesome; font-size: inherit; color: inherit; right: 10px; top: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); z-index: 2; opacity: 0.6; content: "\f0d7"; /* fa-caret-down */ } /*.w-dropdown-menu li li:before,*/ .w-dropdown-menu li li.w-submenu-item:before { content: "\f0da"; /* fa-caret-right */ } /*.w-dropdown-menu li:focus:before, .w-dropdown-menu li:active:before, .w-dropdown-menu li:hover:before,*/ .w-dropdown-menu li.w-submenu-item:focus:before, .w-dropdown-menu li.w-submenu-item:active:before, .w-dropdown-menu li.w-submenu-item:hover:before { opacity: 1; } .w-dropdown-menu li > div, .w-dropdown-menu li > p, .w-dropdown-menu li > label, .w-dropdown-menu li > a { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 100%; text-decoration: none; color: inherit; font-weight: normal; padding: 12px 24px; } .w-dropdown-menu >ul > li > div, .w-dropdown-menu >ul > li > p, .w-dropdown-menu >ul > li > label, .w-dropdown-menu >ul > li > a { font-weight: bold; padding: 14px 28px; } .w-dropdown-menu .w-icon { display: inline-block; vertical-align: middle; margin-right: 8px; } @media all and (min-width:0\0) and (min-resolution: +72dpi) { /* IE9+ CSS*/ /* if styles are loaded in footer, due to page optimisation bug, list-style does not apply in IE */ .w-dropdown-menu ul > li { list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); list-style-position: outside; } } .w-vertical-menu { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; min-width: 200px; z-index: 500; } .w-vertical-menu ul { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 1px solid transparent; border-radius: 0; padding: 0 20px; margin: 0; list-style: none; position: relative; display: block; overflow: hidden; min-width: 200px; } .w-vertical-menu > ul { min-width: auto; width: 100%; } .w-vertical-menu > ul:after { content: ""; float: none; clear: both; display: block; } .w-vertical-menu ul:focus, .w-vertical-menu ul:active, .w-vertical-menu ul:hover { overflow: visible; } .w-vertical-menu li > ul { display: block; border-radius: 0; padding: 0; margin: 0; position: absolute; top: 0; left: 100%; z-index: -1; pointer-events: none; opacity: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: opacity .4s ease, -webkit-transform .6s ease; -moz-transition: opacity .4s ease, -moz-transform .6s ease; -ms-transition: opacity .4s ease, -ms-transform .6s ease; -o-transition: opacity .4s ease, -o-transform .6s ease; transition: opacity .4s ease, transform .6s ease; } .w-vertical-menu li:focus > ul, .w-vertical-menu li:active > ul, .w-vertical-menu li:hover > ul { pointer-events: auto; z-index: 1; opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition: opacity .6s .2s ease, -webkit-transform .4s ease; -moz-transition: opacity .6s .2s ease, -moz-transform .4s ease; -ms-transition: opacity .6s .2s ease, -ms-transform .4s ease; -o-transition: opacity .6s .2s ease, -o-transform .4s ease; transition: opacity .6s .2s ease, transform .4s ease; } .w-vertical-menu ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 0; margin: 0; display: block; border-bottom: 1px solid transparent; } .w-vertical-menu ul > li:last-child { border-bottom: 0; } /*.w-vertical-menu li:before,*/ .w-vertical-menu li.w-submenu-item:before { position: absolute; display: block; font-family: FontAwesome; font-size: inherit; color: inherit; right: 10px; top: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); z-index: 2; opacity: 0.6; content: "\f0da"; /* fa-caret-right */ } /*.w-vertical-menu li:focus:before, .w-vertical-menu li:active:before, .w-vertical-menu li:hover:before,*/ .w-vertical-menu li.w-submenu-item:focus:before, .w-vertical-menu li.w-submenu-item:active:before, .w-vertical-menu li.w-submenu-item:hover:before { opacity: 1; } .w-vertical-menu li > div, .w-vertical-menu li > p, .w-vertical-menu li > label, .w-vertical-menu li > a { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 100%; text-decoration: none; color: inherit; font-weight: normal; padding: 12px 24px; z-index: 10; } .w-vertical-menu > ul > li > div, .w-vertical-menu > ul > li > p, .w-vertical-menu > ul > li > label, .w-vertical-menu > ul > li > a { font-weight: bold; padding: 14px 28px; } .w-vertical-menu .w-icon { display: inline-block; vertical-align: middle; margin-right: 8px; } .w-dialog, .w-dialog > .w-dialog-title, .w-dialog > .w-dialog-content, .w-dialog > .w-dialog-content > form, .w-dialog > .w-dialog-buttons { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; padding: 0; } .w-dialog > .w-dialog-title, .w-dialog > .w-dialog-content, .w-dialog > .w-dialog-content > form, .w-dialog > .w-dialog-buttons { position: relative; } .w-dialog { display: block; overflow: hidden; padding: 4px !important; border-radius: 4px !important; } .w-dialog > .w-dialog-title { padding: 20px 10px; font-weight: bold; } .w-dialog > .w-dialog-title > .fa { margin-right: 10px; } .w-dialog > .w-dialog-content { position: relative; padding: 20px 10px 20px 10px; } .w-dialog > .w-dialog-buttons { position: relative; margin-top: 10px; border-top: 1px solid transparent; padding: 20px 0px; text-align: right; font-weight: bold; } .w-dialog > .w-dialog-title > .w-dialog-close { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } .w-dialog > .w-dialog-title > .w-dialog-close > .fa { font-size: 2em; /* fa-2x*/ } .w-modal.w-dialog > .w-dialog-content { overflow-y: auto; height: 300px; } .w-modal-overlay .w-modal.w-dialog, .w-modal.w-dialog { position: absolute; display: block; margin: 0 !important; width: 95%; max-width: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); /*pointer-events: none !important;*/ /*opacity: 0;*/ z-index: 5; /*transition: opacity .3s ease-in .05s;*/ } .w-modal-overlay { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; display: none !important; position: fixed !important; overflow: hidden; overflow-y: auto; z-index: -100; top: 0; left: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; width: 100%; height: 100%; background: rgba(0,0,0,0.5); /*pointer-events: none !important; opacity: 0; transition: opacity .2s ease-in .01s;*/ } .w-modal-controller:checked + .w-modal-overlay { display: block !important; z-index: 1000 !important; /*opacity: 1; pointer-events: auto !important; transition: opacity .3s ease .05s;*/ } /*.w-modal-controller:checked + .w-modal-overlay + .w-modal.w-dialog { z-index: 10001; opacity: 1; pointer-events: auto !important; transition: opacity .2s ease 0s; }*/ /* adapted from https://cssloaders.github.io/ */ .w-spinner { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; position: relative; display: block; padding: 0; margin: 0; z-index: 1; overflow: visible; font-size: 1em; visibility: hidden; width: 80%; height: 1px; padding-bottom: 80%; /* 1:1 */ } .w-spinner:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; position: absolute; font-size: inherit; z-index:1; overflow: visible; padding: 0; margin: 0; content: " "; display: block; visibility: hidden; background: none; border: none; -webkit-animation-name: none; animation-name: none; } .w-spinner.w-spinner-dots:before { position: relative; margin: 50% auto; width: 1em; height: 1em; border-radius: 50%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .w-spinner.w-spinner-dots2:before, .w-spinner.w-spinner-dots2:after, .w-spinner.w-spinner-dots2 { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: none; animation-name: none; } .w-spinner.w-spinner-dots2 { font-size: 10px; padding: 0; margin: 80px auto; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .w-spinner.w-spinner-dots2:before, .w-spinner.w-spinner-dots2:after { position: absolute; display: inline-block; top: 0; left: 3.5em; content: ''; visibility: visible; } .w-spinner.w-spinner-dots2:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .active.w-spinner { visibility: visible; } .active.w-spinner.w-spinner-dots:before { visibility: visible; } .w-disabable-overlay, .w-delayable-overlay { position: absolute; display: block; padding: 0; margin: 0; top: 0; left: 0; visibility: visible; overflow: hidden; width: 100%; height: 100%; background: none; background-repeat: no-repeat; background-position: center center; z-index: -10; opacity: 0; -webkit-transition-property: z-index, opacity; -webkit-transition-duration: .02s, .6s; -webkit-transition-delay: 0s, .04s; -moz-transition-property: z-index, opacity; -moz-transition-duration: .02s, .6s; -moz-transition-delay: 0s, .04s; -ms-transition-property: z-index, opacity; -ms-transition-duration: .02s, .6s; -ms-transition-delay: 0s, .04s; -o-transition-property: z-index, opacity; -o-transition-duration: .02s, .6s; -o-transition-delay: 0s, .04s; transition-property: z-index, opacity; transition-duration: .02s, .6s; transition-delay: 0s, .04s; -webkit-transition-timing-function: linear, ease-in; -moz-transition-timing-function: linear, ease-in; -ms-transition-timing-function: linear, ease-in; -o-transition-timing-function: linear, ease-in; transition-timing-function: linear, ease-in; cursor: inherit; } .w-disabled > .w-disabable-overlay, .w-delayed > .w-delayable-overlay { z-index: 500; opacity: 1; -webkit-transition-delay: .65s, 0s; -moz-transition-delay: .65s, 0s; -ms-transition-delay: .65s, 0s; -o-transition-delay: .65s, 0s; transition-delay: .65s, 0s; } .w-enabled > .w-disabable-overlay, .w-undelayed > .w-delayable-overlay { -webkit-transition-delay: .65s, 0s; -moz-transition-delay: .65s, 0s; -ms-transition-delay: .65s, 0s; -o-transition-delay: .65s, 0s; transition-delay: .65s, 0s; } .w-delayed > .w-delayable-overlay { cursor: progress; } .w-disabled > .w-disabable-overlay { cursor: not-allowed; } .w-delayable-overlay > .w-spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .w-delayable-overlay > .w-spinner.w-spinner-dots { font-size: 20px; width: 20%; height: 1px; padding-bottom: 20%; /* 1:1 */ } .w-delayable.w-delayable-fixed > .w-delayable-overlay > .w-spinner { position: fixed; } .w-delayed > .w-delayable-overlay > .w-spinner { visibility: visible; } .w-delayed > .w-delayable-overlay > .w-spinner.w-spinner-dots:before { visibility: visible; } .w-delayed > .w-disabable-overlay { z-index: 100; cursor: progress; } .w-table-wrapper { position: relative; font-size: 1em; } .w-table-top, .w-table-bottom { position: relative; padding: 0; margin: 0; border: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: none; clear: both; } .w-table-top .w-table-controls, .w-table-top .dt-buttons, .w-table-top .dataTables_filter, .w-table-top .dataTables_length, .w-table-top .dataTables_paginate, .w-table-top .dataTables_info, .w-table-bottom .w-table-controls, .w-table-bottom .dt-buttons, .w-table-bottom .dataTables_filter, .w-table-bottom .dataTables_length, .w-table-bottom .dataTables_paginate, .w-table-bottom .dataTables_info { position: relative; float: none !important; display: inline-block !important; margin: 0; padding: 4px 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: inherit !important; font-size: 0.9em !important; } .dt-button-collection > .w-button { display: block !important; padding-right: 2em; } .dt-button-collection > .w-button:after { position: absolute; display: inline-block; right: 10px; top: 8px; font-family: FontAwesome; content: "\f096"; } .dt-button-collection > .w-button.active { background-color: #1190d1 !important; color: #fff !important; } .dt-button-collection > .w-button.active:after { content: "\f046"; } .w-table-top .dataTables_paginate a.paginate_button:active, .w-table-top .dataTables_paginate a.paginate_button:hover, .w-table-bottom .dataTables_paginate a.paginate_button:active, .w-table-bottom .dataTables_paginate a.paginate_button:hover, .w-table-top .dataTables_paginate a.paginate_button, .w-table-bottom .dataTables_paginate a.paginate_button, .w-table-top .dataTables_paginate .paginate_button:active, .w-table-top .dataTables_paginate .paginate_button:hover, .w-table-bottom .dataTables_paginate .paginate_button:active, .w-table-bottom .dataTables_paginate .paginate_button:hover, .w-table-top .dataTables_paginate .paginate_button, .w-table-bottom .dataTables_paginate .paginate_button { background: none !important; background-image: none !important; color: inherit !important; font-size: inherit !important; border-width: 1px !important; border-style: solid !important; border-color: #ccc !important; border-radius: 6px !important; } .w-table-top .dataTables_paginate a.paginate_button:active, .w-table-top .dataTables_paginate a.paginate_button:hover, .w-table-bottom .dataTables_paginate a.paginate_button:active, .w-table-bottom .dataTables_paginate a.paginate_button:hover, .w-table-top .dataTables_paginate .paginate_button:active, .w-table-top .dataTables_paginate .paginate_button:hover, .w-table-bottom .dataTables_paginate .paginate_button:active, .w-table-bottom .dataTables_paginate .paginate_button:hover { border-color: #999 !important; } .w-table-top .dataTables_paginate a.paginate_button.current:active, .w-table-bottom .dataTables_paginate a.paginate_button.current:active, .w-table-top .dataTables_paginate .paginate_button.current:active, .w-table-bottom .dataTables_paginate .paginate_button.current:active, .w-table-top .dataTables_paginate a.paginate_button.current:hover, .w-table-bottom .dataTables_paginate a.paginate_button.current:hover, .w-table-top .dataTables_paginate .paginate_button.current:hover, .w-table-bottom .dataTables_paginate .paginate_button.current:hover, .w-table-top .dataTables_paginate a.paginate_button.current, .w-table-bottom .dataTables_paginate a.paginate_button.current, .w-table-top .dataTables_paginate .paginate_button.current, .w-table-bottom .dataTables_paginate .paginate_button.current { border-color: #1190d1 !important; color: #1190d1 !important; } table.w-table.cellular.dataTable, table.w-table.cellular, table.w-table.dataTable, table.w-table { position: relative; margin-bottom: 20px; max-width: 100%; width: 100%; border: 0; border-spacing: 0; border-collapse: collapse; font-family: Helvetica, Arial, sans-serif; font-size: 1em; } table.w-table.responsive.bordered.dataTable, table.w-table.responsive.bordered, table.w-table.cellular.bordered.dataTable, table.w-table.cellular.bordered, table.w-table.bordered.dataTable, table.w-table.bordered { border-collapse: collapse !important; } table.w-table.dataTable.no-header, table.w-table.dataTable.no-footer { border-top: 0; border-bottom: 0; } table.w-table.dataTable tfoot td, table.w-table.dataTable tfoot th, table.w-table.dataTable thead td, table.w-table.dataTable thead th, table.w-table.dataTable tbody td, table.w-table tfoot td, table.w-table tfoot th, table.w-table thead td, table.w-table thead th, table.w-table tbody td { background: none; background-color: transparent; vertical-align: middle; text-align: left; padding: 8px; border: 0; } table.w-table.cellular.dataTable td, table.w-table.cellular.dataTable th, table.w-table.cellular th, table.w-table.cellular td, table.w-table.dataTable td, table.w-table.dataTable th, table.w-table th, table.w-table td { color: inherit; font-family: inherit; font-size: inherit; } table.w-table.dataTable tfoot td, table.w-table.dataTable tfoot th, table.w-table.dataTable thead td, table.w-table.dataTable thead th, table.w-table tfoot td, table.w-table tfoot th, table.w-table thead td, table.w-table thead th { font-weight: bold; padding: 12px 8px; background-image: none !important; } table.w-table.cellular.dataTable > tbody > tr > td, table.w-table.cellular > tr > td, table.w-table.cellular > tbody > tr > td { min-height: 2em; padding: 12px 8px; } table.w-table.cellular.dataTable > tbody > tr, table.w-table.cellular > tr, table.w-table.cellular > tbody > tr { padding: 5px 1.6em 5px 1px; } table.w-table.dataTable tfoot .sorting:after, table.w-table.dataTable tfoot .sorting_desc:after, table.w-table.dataTable tfoot .sorting_asc:after, table.w-table.dataTable thead .sorting:after, table.w-table.dataTable thead .sorting_desc:after, table.w-table.dataTable thead .sorting_asc:after { position: absolute; display: block; z-index: 1; font-family: FontAwesome, sans-serif; font-size: inherit; opacity: 1; top: 50%; right: 5px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } table.w-table.dataTable tfoot .sorting_desc_disabled:after, table.w-table.dataTable tfoot .sorting_asc_disabled:after, table.w-table.dataTable thead .sorting_desc_disabled:after, table.w-table.dataTable thead .sorting_asc_disabled:after { opacity: 0.6; } table.w-table.dataTable tfoot .sorting:after, table.w-table.dataTable thead .sorting:after { content: "\f0dc"; } table.w-table.dataTable tfoot .sorting_desc:after, table.w-table.dataTable thead .sorting_desc:after { content: "\f0dd"; } table.w-table.dataTable tfoot .sorting_asc:after, table.w-table.dataTable thead .sorting_asc:after { content: "\f0de"; } table.w-table.responsive.bordered.dataTable thead > tr, table.w-table.responsive.bordered thead > tr, table.w-table.bordered.dataTable thead > tr, table.w-table.bordered thead > tr { border-bottom: 1px solid #ddd !important; } table.w-table.responsive.bordered.dataTable tfoot > tr, table.w-table.responsive.bordered tfoot > tr, table.w-table.bordered.dataTable tfoot > tr, table.w-table.bordered tfoot > tr { border-top: 1px solid #ddd !important; } table.w-table.responsive.bordered.dataTable tbody > tr, table.w-table.responsive.bordered tbody > tr, table.w-table.bordered.dataTable tbody > tr, table.w-table.bordered tbody > tr { border-bottom: 1px solid #ccc !important; } table.w-table:not(.cellular).responsive.bordered.dataTable tbody > tr:last-child, table.w-table:not(.cellular).responsive.bordered tbody > tr:last-child, table.w-table:not(.cellular).bordered.dataTable tbody > tr:last-child, table.w-table:not(.cellular).bordered tbody > tr:last-child { border-bottom: 0 !important; } table.w-table.responsive.stripped.dataTable tbody tr:nth-of-type(2n+1), table.w-table.responsive.stripped tbody tr:nth-of-type(2n+1), table.w-table.stripped.dataTable tbody tr:nth-of-type(2n+1), table.w-table.stripped tbody tr:nth-of-type(2n+1) { background: none; background-color: transparent; } table.w-table.responsive.stripped.dataTable tbody tr:nth-of-type(2n), table.w-table.responsive.stripped tbody tr:nth-of-type(2n), table.w-table.responsive:not(.stripped).vstripped.dataTable td:nth-of-type(2n), table.w-table.responsive:not(.stripped).vstripped td:nth-of-type(2n), table.w-table.responsive.stripped.vstripped.dataTable tr:nth-of-type(2n+1) > td:nth-of-type(2n), table.w-table.responsive.stripped.vstripped tr:nth-of-type(2n+1) > td:nth-of-type(2n), table.w-table.stripped.dataTable tbody tr:nth-of-type(2n), table.w-table.stripped tbody tr:nth-of-type(2n), table.w-table:not(.stripped).vstripped.dataTable td:nth-of-type(2n), table.w-table:not(.stripped).vstripped td:nth-of-type(2n), table.w-table.stripped.vstripped.dataTable tr:nth-of-type(2n+1) > td:nth-of-type(2n), table.w-table.stripped.vstripped tr:nth-of-type(2n+1) > td:nth-of-type(2n) { background-color: rgba(0,0,0,0.11); } table.w-table.responsive.dataTable tbody tr.selected, table.w-table.responsive tbody tr.selected, table.w-table.dataTable tbody tr.selected, table.w-table tbody tr.selected { background-color: #b1c1fb !important; } table.w-table.fixed.dataTable, table.w-table.fixed { table-layout: fixed !important; } table.w-table.fit-content { width: auto; } table.w-table.fit-content td { width: 1px !important; padding: 2px 6px !important; white-space: nowrap; } .separator, .w-separator, .w-sep { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 1px; margin: 10px 0; border-bottom: 1px solid transparent; } .w-panel { display: block; } .w-panel.w-side-panel-left { display: inline-block; overflow: visible; } .w-panel.w-side-panel-right { display: inline-block; overflow: visible; } .w-panel:not(.w-panel-no-header) > .w-panel-header { position: relative; display: block; width: 100%; max-width: 100%; min-width: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .w-panel.w-side-panel-right:not(.w-panel-no-header) > .w-panel-header { position: absolute; width: auto; display: inline-block; top: 0px; right: 100%; } .w-panel.w-side-panel-left:not(.w-panel-no-header) > .w-panel-header { position: absolute; width: auto; display: inline-block; top: 0px; left: 100%; } .w-panel.w-panel-no-header > .w-panel-header { display: none !important; pointer-events: none !important; } .w-panel:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button, .w-panel > .w-panel-controller-button { position: absolute; display: inline-block; cursor: pointer !important; right: 5px; top: 50%; -webkit-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -ms-transform: translate(0px, -50%); -o-transform: translate(0px, -50%); transform: translate(0px, -50%); color: green; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; transition: color 0.5s ease; } .w-panel.w-side-panel-right > .w-panel-controller-button { right: auto; top: 50%; left: 5px; } .w-panel.w-side-panel-right:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button, .w-panel.w-side-panel-left:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button { position: relative; top: auto; left: auto; right: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } input.w-panel-controller:checked + .w-panel:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button, input.w-panel-controller:checked + .w-panel > .w-panel-controller-button { color: orange; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; transition: color 0.5s ease; } input.w-panel-controller:not(:checked) + .w-panel:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:not(:checked) + .w-panel > .w-panel-controller-button::before { content: "\f103"; /*fa-angle-double-down*/ } input.w-panel-controller:checked + .w-panel:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:checked + .w-panel > .w-panel-controller-button::before { content: "\f102"; /*fa-angle-double-up*/ } input.w-panel-controller:not(:checked) + .w-panel.w-side-panel-left:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:not(:checked) + .w-panel.w-side-panel-left > .w-panel-controller-button::before { content: "\f101"; /*fa-angle-double-right*/ } input.w-panel-controller:checked + .w-panel.w-side-panel-left:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:checked + .w-panel.w-side-panel-left > .w-panel-controller-button::before { content: "\f100"; /*fa-angle-double-left*/ } input.w-panel-controller:not(:checked) + .w-panel.w-side-panel-right:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:not(:checked) + .w-panel.w-side-panel-right > .w-panel-controller-button::before { content: "\f100"; /*fa-angle-double-left*/ } input.w-panel-controller:checked + .w-panel.w-side-panel-right:not(.w-panel-no-header) > .w-panel-header > .w-panel-controller-button::before, input.w-panel-controller:checked + .w-panel.w-side-panel-right > .w-panel-controller-button::before { content: "\f101"; /*fa-angle-double-right*/ } .w-panel > .w-panel-content { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 100% !important; overflow: hidden; } .w-panel.w-side-panel-right.w-panel-floated, .w-panel.w-side-panel-left.w-panel-floated { position: absolute; z-index: 100; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); } .w-panel.w-side-panel-left.w-panel-floated { top: 0px; left: 0px; } .w-panel.w-side-panel-right.w-panel-floated { top: 0px; right: 0px; } .w-panel:not(.w-side-panel-left):not(.w-side-panel-right) > .w-panel-content { max-height: 0px; opacity: 0; -webkit-transition: opacity 0.3s ease 0.1s, max-height 0.5s ease 0.1s; -moz-transition: opacity 0.3s ease 0.1s, max-height 0.5s ease 0.1s; -ms-transition: opacity 0.3s ease 0.1s, max-height 0.5s ease 0.1s; -o-transition: opacity 0.3s ease 0.1s, max-height 0.5s ease 0.1s; transition: opacity 0.3s ease 0.1s, max-height 0.5s ease 0.1s; } input.w-panel-controller:checked + .w-panel:not(.w-side-panel-left):not(.w-side-panel-right) > .w-panel-content { max-height: 2000px; opacity: 1; -webkit-transition: opacity 0.6s ease 0.2s, max-height 0.5s ease 0.1s; -moz-transition: opacity 0.6s ease 0.2s, max-height 0.5s ease 0.1s; -ms-transition: opacity 0.6s ease 0.2s, max-height 0.5s ease 0.1s; -o-transition: opacity 0.6s ease 0.2s, max-height 0.5s ease 0.1s; transition: opacity 0.6s ease 0.2s, max-height 0.5s ease 0.1s; } .w-panel.w-side-panel-left:not(.w-side-panel-fixed) { max-width: 500px; max-height: 0px; overflow: hidden; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -moz-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -ms-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -o-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; } .w-panel.w-side-panel-right:not(.w-side-panel-fixed) { max-width: 500px; max-height: 0px; overflow: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -moz-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -ms-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; -o-transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; transition: max-height 0.1s linear 0.31s,transform 0.2s ease 0.1s; } .w-panel.w-side-panel-left.w-side-panel-fixed { max-width: 500px; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: transform 0.2s ease 0.1s; -moz-transition: transform 0.2s ease 0.1s; -ms-transition: transform 0.2s ease 0.1s; -o-transition: transform 0.2s ease 0.1s; transition: transform 0.2s ease 0.1s; } .w-panel.w-side-panel-right.w-side-panel-fixed { max-width: 500px; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform 0.2s ease 0.1s; -moz-transition: transform 0.2s ease 0.1s; -ms-transition: transform 0.2s ease 0.1s; -o-transition: transform 0.2s ease 0.1s; transition: transform 0.2s ease 0.1s; } input.w-panel-controller:checked + .w-panel.w-side-panel-right:not(.w-side-panel-fixed), input.w-panel-controller:checked + .w-panel.w-side-panel-left:not(.w-side-panel-fixed) { max-height: 5000px; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -webkit-transition: max-height 0.1s,transform 0.2s ease 0.1s; -moz-transition: max-height 0.1s,transform 0.2s ease 0.1s; -ms-transition: max-height 0.1s,transform 0.2s ease 0.1s; -o-transition: max-height 0.1s,transform 0.2s ease 0.1s; transition: max-height 0.1s,transform 0.2s ease 0.1s; } input.w-panel-controller:checked + .w-panel.w-side-panel-right.w-side-panel-fixed, input.w-panel-controller:checked + .w-panel.w-side-panel-left.w-side-panel-fixed { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -webkit-transition: transform 0.2s ease 0.1s; -moz-transition: transform 0.2s ease 0.1s; -ms-transition: transform 0.2s ease 0.1s; -o-transition: transform 0.2s ease 0.1s; transition: transform 0.2s ease 0.1s; } .w-tabs-wrapper, .w-pages-wrapper { position: relative; overflow: hidden; min-height: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .w-tab, .w-page { position: absolute; display: inline-block; top: 0; left: 0; z-index: 10; width: 100%; float: left !important; clear: none !important; /*-webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%);*/ -webkit-transition: -webkit-transform .3s ease; -moz-transition: -moz-transform .3s ease; -ms-transition: -ms-transform .3s ease; -o-transition: -o-transform .3s ease; transition: transform .3s ease; } /*.w-tab, .w-page { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } */ /* using 3D transform should be faster than 2D transform, using optimised layers rendering */ /* .w-tab.w-3d, .w-page.w-3d { -webkit-transform: translate3d(100%,0px,0px); -moz-transform: translate3d(100%,0px,0px); -ms-transform: translate3d(100%,0px,0px); -o-transform: translate3d(100%,0px,0px); transform: translate3d(100%,0px,0px); } */ /*-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;*/ .w-accordeon-item { max-height: 0; -webkit-transition: max-height .3s ease; -moz-transition: max-height .3s ease; -ms-transition: max-height .3s ease; -o-transition: max-height .3s ease; transition: max-height .3s ease; } .w-tab.w-animated { overflow: hidden; float: none; position: absolute; top: 0; left: 0; z-index: 1; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 0.2s; -moz-animation-duration: 0.2s; -ms-animation-duration: 0.2s; -o-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } .w-wrapper > .w-widget:read-only ~ .fa-wrapper, [class|="w-widget"]:read-only, .w-widget:read-only { /*cursor: not-allowed !important;*/ } .w-wrapper > .w-widget:disabled ~ .fa-wrapper, [class|="w-widget"]:disabled, .w-widget:disabled { /*cursor: not-allowed !important;*/ opacity: 0.6 !important; } .w-scrolltable { position:relative; display: block; margin: 0; padding: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; height: 500px; } .w-scrolltable > table.w-table, .w-scrolltable > table { position: relative; padding: 0; margin: 0; } /* http://www.cssportal.com/css-ribbon-generator/ */ .w-ribbon-dtr, .w-ribbon-dtl { position: absolute; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; font-family: 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 1px; font-size: 0.8em; font-weight: bold; } .w-ribbon-dtr > span, .w-ribbon-dtl > span { position: absolute; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: center; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 20px; width: 100px; } .w-ribbon-dtl { left: -5px; top: -5px; } .w-ribbon-dtl > span { top: 19px; left: -21px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .w-ribbon-dtr { left: auto; right: -5px; top: -5px; } .w-ribbon-dtr > span { top: 19px; left: auto; right: -21px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .w-ribbon-dtr.w-ribbon-fold > span::before, .w-ribbon-dtl.w-ribbon-fold > span::before { position: absolute; display: block; content: ""; z-index: -1; left: 0px; top: 100%; border-width: 3px; border-style: solid; } .w-ribbon-dtr.w-ribbon-fold > span::after, .w-ribbon-dtl.w-ribbon-fold > span::after { position: absolute; display: block; content: ""; z-index: -1; right: 0px; top: 100%; border-width: 3px; border-style: solid; } /* .w-ribbon { position: absolute; display: block; z-index: 10; margin: 0; padding: 0; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; -ms-box-sizing: padding-box; -o-box-sizing: padding-box; box-sizing: padding-box; border-style: solid; border-color: transparent; border-width: 0 1em 0 1em; top: 10px; left: -1em; width: 100%; text-align: center; background: #d64b4b; background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); background: -moz-linear-gradient(top, #d64b4b, #ab2c2c); background: -ms-linear-gradient(top, #d64b4b, #ab2c2c); background: -o-linear-gradient(top, #d64b4b, #ab2c2c); background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%); -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; box-shadow: rgba(000,000,000,0.3) 0 1px 1px; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 34px !important; color: #801111; } .w-ribbon.w-ribbon-fold:before, .w-ribbon.w-ribbon-fold:after { position: absolute; display: block; content: ''; bottom: -0.5em; border: 1em solid #c23a3a; z-index: -1; } .w-ribbon.w-ribbon-fold:before { left: -2em; border-right-width: 1em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -ms-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -o-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; } .w-ribbon.w-ribbon-fold:after { right: -2em; border-left-width: 1em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -ms-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -o-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; } .w-ribbon > span { position: relative; display: inline-block; z-index: 10; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; -ms-box-sizing: padding-box; -o-box-sizing: padding-box; box-sizing: padding-box; width: 100%; text-align: center; margin: 0; padding: 15px 1em; margin-left: -1em; color: inherit; font-family: inherit; font-size: inherit; background: inherit; text-shadow: #d65c5c 0 1px 0; } .w-ribbon > span:before, .w-ribbon > span:after { position: absolute; display: block; content: ""; z-index: 1; border-style: solid; border-color: #871616 transparent transparent transparent; bottom: -0.5em; } .w-ribbon > span:before { left: 0; border-width: 0.5em 0 0 0.5em; } .w-ribbon > span:after { right: 0; border-width: 0.5em 0.5em 0 0; } */ /* PURE CSS SPEECH BUBBLES by Nicolas Gallagher - http://nicolasgallagher.com/pure-css-speech-bubbles/ */ .w-bubble { position: relative; display: inline-block; margin: 1em; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border-style: solid; border-width: 1px; text-align: center; box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.3); } .w-bubble:after { position: absolute; display: block; content: ""; width: 0; border-style: solid; } .w-bubble.w-bubble-down:after { bottom: -15px; /* value = - border-top-width - border-bottom-width */ left: 50px; /* controls horizontal position */ border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */ border-top-color: inherit; border-bottom-color: inherit; border-left-color: transparent; border-right-color: transparent; } .w-bubble.w-bubble-up:after { top: -15px; /* value = - border-top-width - border-bottom-width */ right: 50px; /* controls horizontal position */ border-width: 0 15px 15px; /* vary these values to change the angle of the vertex */ border-top-color: inherit; border-bottom-color: inherit; border-left-color: transparent; border-right-color: transparent; } .w-bubble.w-bubble-left:after { top: 16px; /* controls vertical position */ left: -20px; /* value = - border-left-width - border-right-width */ border-width: 10px 20px 10px 0; border-left-color: inherit; border-right-color: inherit; border-top-color: transparent; border-bottom-color: transparent; } .w-bubble.w-bubble-right:after { top: 16px; /* controls vertical position */ right: -20px; /* value = - border-left-width - border-right-width */ border-width: 10px 0 10px 20px; border-left-color: inherit; border-right-color: inherit; border-top-color: transparent; border-bottom-color: transparent; } .w-bubble.w-bubble2-down:after { bottom: -20px; /* value = - border-top-width - border-bottom-width */ left: 50px; /* controls horizontal position */ border-width: 20px 0 0 20px; /* vary these values to change the angle of the vertex */ border-top-color: inherit; border-bottom-color: inherit; border-left-color: transparent; border-right-color: transparent; } .w-bubble.w-bubble2-up:after { top: -20px; /* value = - border-top-width - border-bottom-width */ right: 50px; /* controls horizontal position */ border-width: 20px 20px 0 0; /* vary these values to change the angle of the vertex */ border-left-color: inherit; border-right-color: inherit; border-top-color: transparent; border-bottom-color: transparent; } .w-bubble.w-bubble2-left:after { top: 16px; left: -20px; /* value = - border-left-width - border-right-width */ border-width: 15px 20px 0 0; /* vary these values to change the angle of the vertex */ border-left-color: inherit; border-right-color: inherit; border-top-color: transparent; border-bottom-color: transparent; } .w-bubble.w-bubble2-right:after { top: 16px; right: -20px; /* value = - border-left-width - border-right-width */ border-width: 15px 0 0 20px; /* vary these values to change the angle of the vertex */ border-left-color: inherit; border-right-color: inherit; border-top-color: transparent; border-bottom-color: transparent; } .w-arrowed { position: relative; overflow: visible; } .w-arrowed:after, .w-arrowed:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 5; } .w-arrowed.w-arrowed-top:after { bottom: 100%; left: 50%; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; /* background-color */ border-width: 12px; margin-left: -12px; } .w-arrowed.w-arrowed-top:before { bottom: 100%; left: 50%; border-color: rgba(85, 85, 85, 0); border-bottom-color: #555; /* border-color */ border-width: 13px; margin-left: -13px; } .w-arrowed.w-arrowed-bottom:after { top: 100%; left: 50%; border-color: rgba(255, 255, 255, 0); border-top-color: #fff; /* background-color */ border-width: 12px; margin-left: -12px; } .w-arrowed.w-arrowed-bottom:before { top: 100%; left: 50%; border-color: rgba(85, 85, 85, 0); border-top-color: #555; /* border-color */ border-width: 13px; margin-left: -13px; } .w-arrowed.w-arrowed-right:after { left: 100%; top: 50%; border-color: rgba(255, 255, 255, 0); border-left-color: #fff; /* background-color */ border-width: 12px; margin-top: -12px; } .w-arrowed.w-arrowed-right:before { left: 100%; top: 50%; border-color: rgba(85, 85, 85, 0); border-left-color: #555; /* border-color */ border-width: 13px; margin-top: -13px; } .w-arrowed.w-arrowed-left:after { right: 100%; top: 50%; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; /* background-color */ border-width: 12px; margin-top: -12px; } .w-arrowed.w-arrowed-left:before { right: 100%; top: 50%; border-color: rgba(85, 85, 85, 0); border-right-color: #555; /* border-color */ border-width: 13px; margin-top: -13px; } /* w-widget FX and auxiliaries */ /*timing-function cubic-bezier(0, 1, 0.5, 1);*/ /*.w-fx-blur { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='4' /></filter></svg>#blur"); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); }*/ @-webkit-keyframes w-anim-show { 0% { z-index: 10; opacity: 1; } 100% { z-index: 10; opacity: 1; } } @keyframes w-anim-show { 0% { z-index: 10; opacity: 1; } 100% { z-index: 10; opacity: 1; } } @-webkit-keyframes w-anim-hide { 0% { z-index: -1; opacity: 0; } 100% { z-index: -1; opacity: 0; } } @keyframes w-anim-hide { 0% { z-index: -1; opacity: 0; } 100% { z-index: -1; opacity: 0; } } @-webkit-keyframes w-anim-slidein { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0px);} } @keyframes w-anim-slidein { 0% { transform: translateX(100%); } 100% { transform: translateX(0px);} } @-webkit-keyframes w-anim-slidein-3d { 0% { -webkit-transform: translate3d(100%,0px,0px); } 100% { -webkit-transform: translate3d(0px,0px,0px);} } @keyframes w-anim-slidein-3d { 0% { transform: translate3d(100%,0px,0px); } 100% { transform: translate3d(0px,0px,0px);} } @-webkit-keyframes w-anim-slideout { 0% { transform: translateX(0px); } 100% { transform: translateX(-100%); } } @keyframes w-anim-slideout { 0% { transform: translateX(0px); } 100% { transform: translateX(-100%); } } @-webkit-keyframes w-anim-slideout-3d { 0% { transform: translate3d(0px,0px,0px); } 100% { transform: translate3d(-100%,0px,0px); } } @keyframes w-anim-slideout-3d { 0% { transform: translate3d(0px,0px,0px); } 100% { transform: translate3d(-100%,0px,0px); } } @media (max-width : 1024px), (max-device-width : 1024px) { .responsive-1024-container .w-vertical-menu.w-mobile, .responsive-1024-container .w-vertical-menu.w-mobile > ul, .responsive-1024-container .w-dropdown-menu.w-mobile, .responsive-1024-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-1024, .w-vertical-menu.w-mobile.responsive-1024 > ul, .w-dropdown-menu.w-mobile.responsive-1024, .w-dropdown-menu.w-mobile.responsive-1024 > ul { width: 100%; } .responsive-1024-container .w-vertical-menu.w-mobile, .responsive-1024-container .w-dropdown-menu.w-mobile, .w-vertical-menu.w-mobile.responsive-1024, .w-dropdown-menu.w-mobile.responsive-1024 { padding-left: 28px; min-height: 28px; } .responsive-1024-container .w-vertical-menu.w-mobile > ul, .responsive-1024-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-1024 > ul, .w-dropdown-menu.w-mobile.responsive-1024 > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-1024-container .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .responsive-1024-container .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul, .w-vertical-menu.w-mobile.responsive-1024 > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile.responsive-1024 > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .responsive-1024-container .w-dropdown-menu.w-mobile ul > li > ul, .responsive-1024-container .w-dropdown-menu.w-mobile > ul > li > ul, .w-dropdown-menu.w-mobile.responsive-1024 ul > li > ul, .w-dropdown-menu.w-mobile.responsive-1024 > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-1024-container .w-vertical-menu.w-mobile li > ul, .w-vertical-menu.w-mobile.responsive-1024 li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-1024-container .w-dropdown-menu.w-mobile > ul > li, .w-dropdown-menu.w-mobile.responsive-1024 > ul > li { float: none; display: block; width: 100%; min-width: auto; } .responsive-1024-container .w-dropdown-menu.w-mobile li:focus > ul, .responsive-1024-container .w-dropdown-menu.w-mobile li:active > ul, .responsive-1024-container .w-dropdown-menu.w-mobile li:hover > ul, .w-dropdown-menu.w-mobile.responsive-1024 li:focus > ul, .w-dropdown-menu.w-mobile.responsive-1024 li:active > ul, .w-dropdown-menu.w-mobile.responsive-1024 li:hover > ul { overflow: visible; max-height: 800px; } .responsive-1024-container .w-vertical-menu.w-mobile li:focus > ul, .responsive-1024-container .w-vertical-menu.w-mobile li:active > ul, .responsive-1024-container .w-vertical-menu.w-mobile li:hover > ul, .w-vertical-menu.w-mobile.responsive-1024 li:focus > ul, .w-vertical-menu.w-mobile.responsive-1024 li:active > ul, .w-vertical-menu.w-mobile.responsive-1024 li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .responsive-1024-container .w-vertical-menu.w-mobile li.w-submenu-item:before, .responsive-1024-container .w-dropdown-menu.w-mobile li li.w-submenu-item:before, .w-vertical-menu.w-mobile.responsive-1024 li.w-submenu-item:before, .w-dropdown-menu.w-mobile.responsive-1024 li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } } @media (max-width : 960px), (max-device-width : 960px) { .responsive-960-container .w-vertical-menu.w-mobile, .responsive-960-container .w-vertical-menu.w-mobile > ul, .responsive-960-container .w-dropdown-menu.w-mobile, .responsive-960-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-960, .w-vertical-menu.w-mobile.responsive-960 > ul, .w-dropdown-menu.w-mobile.responsive-960, .w-dropdown-menu.w-mobile.responsive-960 > ul { width: 100%; } .responsive-960-container .w-vertical-menu.w-mobile, .responsive-960-container .w-dropdown-menu.w-mobile, .w-vertical-menu.w-mobile.responsive-960, .w-dropdown-menu.w-mobile.responsive-960 { padding-left: 28px; min-height: 28px; } .responsive-960-container .w-vertical-menu.w-mobile > ul, .responsive-960-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-960 > ul, .w-dropdown-menu.w-mobile.responsive-960 > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-960-container .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .responsive-960-container .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul, .w-vertical-menu.w-mobile.responsive-960 > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile.responsive-960 > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .responsive-960-container .w-dropdown-menu.w-mobile ul > li > ul, .responsive-960-container .w-dropdown-menu.w-mobile > ul > li > ul, .w-dropdown-menu.w-mobile.responsive-960 ul > li > ul, .w-dropdown-menu.w-mobile.responsive-960 > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-960-container .w-vertical-menu.w-mobile li > ul, .w-vertical-menu.w-mobile.responsive-960 li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-960-container .w-dropdown-menu.w-mobile > ul > li, .w-dropdown-menu.w-mobile.responsive-960 > ul > li { float: none; display: block; width: 100%; min-width: auto; } .responsive-960-container .w-dropdown-menu.w-mobile li:focus > ul, .responsive-960-container .w-dropdown-menu.w-mobile li:active > ul, .responsive-960-container .w-dropdown-menu.w-mobile li:hover > ul, .w-dropdown-menu.w-mobile.responsive-960 li:focus > ul, .w-dropdown-menu.w-mobile.responsive-960 li:active > ul, .w-dropdown-menu.w-mobile.responsive-960 li:hover > ul { overflow: visible; max-height: 800px; } .responsive-960-container .w-vertical-menu.w-mobile li:focus > ul, .responsive-960-container .w-vertical-menu.w-mobile li:active > ul, .responsive-960-container .w-vertical-menu.w-mobile li:hover > ul, .w-vertical-menu.w-mobile.responsive-960 li:focus > ul, .w-vertical-menu.w-mobile.responsive-960 li:active > ul, .w-vertical-menu.w-mobile.responsive-960 li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .responsive-960-container .w-vertical-menu.w-mobile li.w-submenu-item:before, .responsive-960-container .w-dropdown-menu.w-mobile li li.w-submenu-item:before, .w-vertical-menu.w-mobile.responsive-960 li.w-submenu-item:before, .w-dropdown-menu.w-mobile.responsive-960 li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } } @media (max-width : 864px), (max-device-width : 864px) { .responsive-864-container .w-vertical-menu.w-mobile, .responsive-864-container .w-vertical-menu.w-mobile > ul, .responsive-864-container .w-dropdown-menu.w-mobile, .responsive-864-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-864, .w-vertical-menu.w-mobile.responsive-864 > ul, .w-dropdown-menu.w-mobile.responsive-864, .w-dropdown-menu.w-mobile.responsive-864 > ul { width: 100%; } .responsive-864-container .w-vertical-menu.w-mobile, .responsive-864-container .w-dropdown-menu.w-mobile, .w-vertical-menu.w-mobile.responsive-864, .w-dropdown-menu.w-mobile.responsive-864 { padding-left: 28px; min-height: 28px; } .responsive-864-container .w-vertical-menu.w-mobile > ul, .responsive-864-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-864 > ul, .w-dropdown-menu.w-mobile.responsive-864 > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-864-container .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .responsive-864-container .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul, .w-vertical-menu.w-mobile.responsive-864 > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile.responsive-864 > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .responsive-864-container .w-dropdown-menu.w-mobile ul > li > ul, .responsive-864-container .w-dropdown-menu.w-mobile > ul > li > ul, .w-dropdown-menu.w-mobile.responsive-864 ul > li > ul, .w-dropdown-menu.w-mobile.responsive-864 > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-864-container .w-vertical-menu.w-mobile li > ul, .w-vertical-menu.w-mobile.responsive-864 li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-864-container .w-dropdown-menu.w-mobile > ul > li, .w-dropdown-menu.w-mobile.responsive-864 > ul > li { float: none; display: block; width: 100%; min-width: auto; } .responsive-864-container .w-dropdown-menu.w-mobile li:focus > ul, .responsive-864-container .w-dropdown-menu.w-mobile li:active > ul, .responsive-864-container .w-dropdown-menu.w-mobile li:hover > ul, .w-dropdown-menu.w-mobile.responsive-864 li:focus > ul, .w-dropdown-menu.w-mobile.responsive-864 li:active > ul, .w-dropdown-menu.w-mobile.responsive-864 li:hover > ul { overflow: visible; max-height: 800px; } .responsive-864-container .w-vertical-menu.w-mobile li:focus > ul, .responsive-864-container .w-vertical-menu.w-mobile li:active > ul, .responsive-864-container .w-vertical-menu.w-mobile li:hover > ul, .w-vertical-menu.w-mobile.responsive-864 li:focus > ul, .w-vertical-menu.w-mobile.responsive-864 li:active > ul, .w-vertical-menu.w-mobile.responsive-864 li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .responsive-864-container .w-vertical-menu.w-mobile li.w-submenu-item:before, .responsive-864-container .w-dropdown-menu.w-mobile li li.w-submenu-item:before, .w-vertical-menu.w-mobile.responsive-864 li.w-submenu-item:before, .w-dropdown-menu.w-mobile.responsive-864 li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } } @media (max-width : 768px), (max-device-width : 768px) { .responsive-768-container .w-vertical-menu.w-mobile, .responsive-768-container .w-vertical-menu.w-mobile > ul, .responsive-768-container .w-dropdown-menu.w-mobile, .responsive-768-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-768, .w-vertical-menu.w-mobile.responsive-768 > ul, .w-dropdown-menu.w-mobile.responsive-768, .w-dropdown-menu.w-mobile.responsive-768 > ul { width: 100%; } .responsive-768-container .w-vertical-menu.w-mobile, .responsive-768-container .w-dropdown-menu.w-mobile, .w-vertical-menu.w-mobile.responsive-768, .w-dropdown-menu.w-mobile.responsive-768 { padding-left: 28px; min-height: 28px; } .responsive-768-container .w-vertical-menu.w-mobile > ul, .responsive-768-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-768 > ul, .w-dropdown-menu.w-mobile.responsive-768 > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-768-container .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .responsive-768-container .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul, .w-vertical-menu.w-mobile.responsive-768 > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile.responsive-768 > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .responsive-768-container .w-dropdown-menu.w-mobile ul > li > ul, .responsive-768-container .w-dropdown-menu.w-mobile > ul > li > ul, .w-dropdown-menu.w-mobile.responsive-768 ul > li > ul, .w-dropdown-menu.w-mobile.responsive-768 > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-768-container .w-vertical-menu.w-mobile li > ul, .w-vertical-menu.w-mobile.responsive-768 li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-768-container .w-dropdown-menu.w-mobile > ul > li, .w-dropdown-menu.w-mobile.responsive-768 > ul > li { float: none; display: block; width: 100%; min-width: auto; } .responsive-768-container .w-dropdown-menu.w-mobile li:focus > ul, .responsive-768-container .w-dropdown-menu.w-mobile li:active > ul, .responsive-768-container .w-dropdown-menu.w-mobile li:hover > ul, .w-dropdown-menu.w-mobile.responsive-768 li:focus > ul, .w-dropdown-menu.w-mobile.responsive-768 li:active > ul, .w-dropdown-menu.w-mobile.responsive-768 li:hover > ul { overflow: visible; max-height: 800px; } .responsive-768-container .w-vertical-menu.w-mobile li:focus > ul, .responsive-768-container .w-vertical-menu.w-mobile li:active > ul, .responsive-768-container .w-vertical-menu.w-mobile li:hover > ul, .w-vertical-menu.w-mobile.responsive-768 li:focus > ul, .w-vertical-menu.w-mobile.responsive-768 li:active > ul, .w-vertical-menu.w-mobile.responsive-768 li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .responsive-768-container .w-vertical-menu.w-mobile li.w-submenu-item:before, .responsive-768-container .w-dropdown-menu.w-mobile li li.w-submenu-item:before, .w-vertical-menu.w-mobile.responsive-768 li.w-submenu-item:before, .w-dropdown-menu.w-mobile.responsive-768 li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } } @media (max-width : 640px), (max-device-width : 640px) { .responsive-640-container .w-vertical-menu.w-mobile, .responsive-640-container .w-vertical-menu.w-mobile > ul, .responsive-640-container .w-dropdown-menu.w-mobile, .responsive-640-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-640, .w-vertical-menu.w-mobile.responsive-640 > ul, .w-dropdown-menu.w-mobile.responsive-640, .w-dropdown-menu.w-mobile.responsive-640 > ul { width: 100%; } .responsive-640-container .w-vertical-menu.w-mobile, .responsive-640-container .w-dropdown-menu.w-mobile, .w-vertical-menu.w-mobile.responsive-640, .w-dropdown-menu.w-mobile.responsive-640 { padding-left: 28px; min-height: 28px; } .responsive-640-container .w-vertical-menu.w-mobile > ul, .responsive-640-container .w-dropdown-menu.w-mobile > ul, .w-vertical-menu.w-mobile.responsive-640 > ul, .w-dropdown-menu.w-mobile.responsive-640 > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-640-container .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .responsive-640-container .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul, .w-vertical-menu.w-mobile.responsive-640 > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile.responsive-640 > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .responsive-640-container .w-dropdown-menu.w-mobile ul > li > ul, .responsive-640-container .w-dropdown-menu.w-mobile > ul > li > ul, .w-dropdown-menu.w-mobile.responsive-640 ul > li > ul, .w-dropdown-menu.w-mobile.responsive-640 > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-640-container .w-vertical-menu.w-mobile li > ul, .w-vertical-menu.w-mobile.responsive-640 li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .responsive-640-container .w-dropdown-menu.w-mobile > ul > li, .w-dropdown-menu.w-mobile.responsive-640 > ul > li { float: none; display: block; width: 100%; min-width: auto; } .responsive-640-container .w-dropdown-menu.w-mobile li:focus > ul, .responsive-640-container .w-dropdown-menu.w-mobile li:active > ul, .responsive-640-container .w-dropdown-menu.w-mobile li:hover > ul, .w-dropdown-menu.w-mobile.responsive-640 li:focus > ul, .w-dropdown-menu.w-mobile.responsive-640 li:active > ul, .w-dropdown-menu.w-mobile.responsive-640 li:hover > ul { overflow: visible; max-height: 800px; } .responsive-640-container .w-vertical-menu.w-mobile li:focus > ul, .responsive-640-container .w-vertical-menu.w-mobile li:active > ul, .responsive-640-container .w-vertical-menu.w-mobile li:hover > ul, .w-vertical-menu.w-mobile.responsive-640 li:focus > ul, .w-vertical-menu.w-mobile.responsive-640 li:active > ul, .w-vertical-menu.w-mobile.responsive-640 li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .responsive-640-container .w-vertical-menu.w-mobile li.w-submenu-item:before, .responsive-640-container .w-dropdown-menu.w-mobile li li.w-submenu-item:before, .w-vertical-menu.w-mobile.responsive-640 li.w-submenu-item:before, .w-dropdown-menu.w-mobile.responsive-640 li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } } @media (max-width : 480px), (max-device-width : 480px) { .w-vertical-menu.w-mobile, .w-vertical-menu.w-mobile > ul, .w-dropdown-menu.w-mobile, .w-dropdown-menu.w-mobile > ul { width: 100%; } .w-vertical-menu.w-mobile, .w-dropdown-menu.w-mobile { padding-left: 28px; min-height: 28px; } .w-vertical-menu.w-mobile > ul, .w-dropdown-menu.w-mobile > ul { display: block; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .w-vertical-menu.w-mobile > .w-menu-controller:checked + ul, .w-dropdown-menu.w-mobile > .w-menu-controller:checked + ul { -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: visible; max-height: 1500px; } .w-dropdown-menu.w-mobile ul > li > ul, .w-dropdown-menu.w-mobile > ul > li > ul { position: relative; display: block; left: 0; top: 0; width: 98%; margin-left: 2%; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .w-vertical-menu.w-mobile li > ul { position: relative; display: block; left: 0; top: 0; opacity: 1; width: 98%; margin-left: 2%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: max-height .4s ease; -moz-transition: max-height .4s ease; -ms-transition: max-height .4s ease; -o-transition: max-height .4s ease; transition: max-height .4s ease; overflow: hidden; max-height: 0; } .w-dropdown-menu.w-mobile > ul > li { float: none; display: block; width: 100%; min-width: auto; } .w-dropdown-menu.w-mobile li:focus > ul, .w-dropdown-menu.w-mobile li:active > ul, .w-dropdown-menu.w-mobile li:hover > ul { overflow: visible; max-height: 800px; } .w-vertical-menu.w-mobile li:focus > ul, .w-vertical-menu.w-mobile li:active > ul, .w-vertical-menu.w-mobile li:hover > ul { left: 0; top: 0; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; overflow: visible; max-height: 800px; } .w-vertical-menu.w-mobile li.w-submenu-item:before, .w-dropdown-menu.w-mobile li li.w-submenu-item:before { content: "\f0d7"; /* fa-caret-down */ } .w-vertical-menu.w-mobile li > ul, .w-dropdown-menu.w-mobile ul > li > ul, .w-dropdown-menu.w-mobile > ul > li > ul { width: 100%; margin-left: 0; } } @media (max-width : 360px), (max-device-width : 360px) { } /*************************************************************************** * HtmlWidget Sizes *****************************************************************************/ .w-widget { margin: 3px 5px; font-size: 0.9em; } .w-wrapper { margin: 3px 5px; } .w-range:not(.circular) { width: 200px; margin: 5px 5px; } .w-range:not(.circular).w-xlarge, .w-range:not(.circular).w-large { width: 260px; --thumb-size: 26px; --track-height: 10px; } .w-range:not(.circular).w-xsmall, .w-range:not(.circular).w-small { width: 180px; --thumb-size: 16px; } .w-range.circular { margin: 5px 5px; } .w-range.circular.w-xlarge, .w-range.circular.w-large { --radius: 240px; --thumb-radius: 24px; --progress-width: 12px; } .w-range.circular.w-xsmall, .w-range.circular.w-small { --radius: 140px; --thumb-radius: 18px; --progress-width: 4px; } .colorpicker-selector, .w-colorselector { width: 24px; height: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; padding: 0; margin: 2px 4px; border-width: 2px; } .colorpicker-selector:after, .w-colorselector:after { width: 8px; height: 8px; line-height: 8px; font-size: 8px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .colorpicker-selector.w-large, .w-colorselector.w-large { width: 36px; height: 36px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; border-width: 2px; } .colorpicker-selector.w-large:after, .w-colorselector.w-large:after { width: 10px; height: 10px; line-height: 10px; font-size: 10px; } .colorpicker-selector.w-xlarge, .w-colorselector.w-xlarge { width: 48px; height: 48px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border-width: 2px; } .colorpicker-selector.w-xlarge:after, .w-colorselector.w-xlarge:after { width: 10px; height: 10px; line-height: 10px; font-size: 10px; } /*input.w-radio-image + label > span, input.w-checkbox-image + label > span { /* 1:1 aspect responsive * / height: 0; padding-bottom: 100% !important; }*/ .w-map { /* 1:1 aspect responsive */ width: 400px; height: 0; padding-bottom: 100%; } .w-time-component, .w-dropdown, .w-select, .w-button, .w-text, .w-textarea, .w-syntax-editor, .w-syntax-editor + .CodeMirror, .w-syntax-editor + .ace_editor, .w-wysiwyg-editor, input.w-radio + label, input.w-checkbox + label { border-width: 1px; } .w-select, .w-time-component, .w-textarea, .w-text, .w-label, .w-button { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .w-dropdown { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .w-textarea, .w-text { -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } .w-text, .w-select, .w-textarea, .w-syntax-editor, .w-wysiwyg-editor { padding: 8px; } .w-time-component, .w-select { padding: 6px; } .w-wysiwyg-editor-box.trumbowyg.trumbowyg-box { margin: 3px 5px; } .w-link .fa { margin-right: 6px; } .w-time .w-time-sep { margin: 0px 7px; } .w-button { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; line-height: 1.42857; padding: 6px 10px; } .w-button.w-small { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; font-size: 0.8em; line-height: 1.5; padding: 4px 6px; } .w-button.w-xsmall { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; font-size: 0.6em; line-height: 1.1; padding: 2px 3px; } .w-button.w-large:not(.w-icon-only) { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; font-size: 1.2em; line-height: 1.33; padding: 8px 12px; } .w-button.w-xlarge:not(.w-icon-only) { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; font-size: 1.4em; line-height: 1.33; padding: 10px 14px; } .w-label.w-icon > .fa-wrapper.left-fa, .w-button.w-icon > .fa-wrapper.left-fa { margin-right: 8px; } .w-label.w-icon-right > .fa-wrapper.right-fa, .w-button.w-icon-right > .fa-wrapper.right-fa { margin-left: 8px; } .w-label.w-icon-only > .fa-wrapper, .w-button.w-icon-only > .fa-wrapper { font-size: 1.1em; } .w-label.w-large.w-icon-only > .fa-wrapper, .w-button.w-large.w-icon-only > .fa-wrapper { font-size: 1.4em; } .w-label.w-xlarge.w-icon-only > .fa-wrapper, .w-button.w-xlarge.w-icon-only > .fa-wrapper { font-size: 1.6em; } .w-button.w-icon-only { line-height: 1 !important; padding: 6px; } .w-button.w-small.w-icon-only { padding: 4px; } .w-button.w-xsmall.w-icon-only { padding: 2px; } .w-button.w-large.w-icon-only { padding: 8px; } .w-button.w-xlarge.w-icon-only { padding: 10px; } .w-wrapper.w-icon > .w-widget ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget ~ .fa-wrapper { font-size: 1.2em; } .w-wrapper.w-icon > .w-widget.w-large ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-large ~ .fa-wrapper { font-size: 1.5em; } .w-wrapper.w-icon > .w-widget.w-xlarge ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-xlarge ~ .fa-wrapper { font-size: 2em; } .w-wrapper.w-icon > .w-widget ~ .fa-wrapper.w-colorselector, .w-wrapper.w-icon-right > .w-widget ~ .fa-wrapper.w-colorselector { margin-top: 0; margin-bottom: 0; width: 19px; height: 19px; } .w-wrapper.w-icon > .w-widget.w-large ~ .fa-wrapper.w-colorselector, .w-wrapper.w-icon-right > .w-widget.w-large ~ .fa-wrapper.w-colorselector { width: 26px; height: 26px; } .w-wrapper.w-icon > .w-widget.w-xlarge ~ .fa-wrapper.w-colorselector, .w-wrapper.w-icon-right > .w-widget.w-xlarge ~ .fa-wrapper.w-colorselector { width: 34px; height: 34px; } .w-wrapper.w-icon > .w-widget { padding-left: 2.5em; } .w-wrapper.w-icon-right > .w-widget { padding-right: 2.5em; } .w-widget.w-dnd-upload, .w-dnd-upload { padding: 10px 5px; } input.w-radio-image + label, input.w-checkbox-image + label { border-radius: 6px; } input.w-radio-label + label, input.w-checkbox-label + label { padding: 6px 2em 6px 12px; } input.w-radio-label + label.w-icon-left, input.w-checkbox-label + label.w-icon-left { padding: 6px 12px 6px 2em; } input.w-radio-label + label:after, input.w-checkbox-label + label:after { position: absolute; display: inline-block; right: 10px; top: 8px; font-family: FontAwesome; content: "\f096"; } input.w-radio-label + label.w-icon-left:after, input.w-checkbox-label + label.w-icon-left:after { right: auto; left: 10px; } input.w-radio-label + label[data-wstate-off]:after, input.w-checkbox-label + label[data-wstate-off]:after { content: attr(data-wstate-off) !important; } input.w-radio-label:checked + label:after, input.w-checkbox-label:checked + label:after { content: "\f046"; } input.w-radio-label:checked + label[data-wstate-on]:after, input.w-checkbox-label:checked + label[data-wstate-on]:after { content: attr(data-wstate-on) !important; } input.w-radio + label, input.w-checkbox + label { margin-right: 8px; margin-left: 8px; width: 16px; height: 16px; font-size: 16px; line-height: 16px; } input.w-radio + label:before, input.w-checkbox + label:before { font-size: 75%; } input.w-radio + label.w-large, input.w-checkbox + label.w-large { width: 24px; height: 24px; font-size: 24px; line-height: 24px; } input.w-radio + label.w-xlarge, input.w-checkbox + label.w-xlarge { width: 32px; height: 32px; font-size: 32px; line-height: 32px; } .w-switch { margin: 0px 5px; width: 60px; height: 15px; /*26.7% */ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .w-switch.w-large { width: 90px; height: 30px; /*26.7% */ -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .w-switch.w-xlarge { width: 110px; height: 40px; font-size: 1.1em; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .w-switch > label.w-switch-on > .fa, .w-switch > label.w-switch-off > .fa { font-size: 1.5em; } .w-switch > label > .fa.positive::before, .w-switch > label > .fa.negative::before { font-size: 0.8em; } .w-rating.w-large > label.w-rating-label { font-size: 2em; } .w-rating.w-xlarge > label.w-rating-label { font-size: 3em; } .w-textarea.w-large, .w-text.w-large { padding: 12px 8px; font-size: 1.2em; } .w-textarea.w-xlarge, .w-text.w-xlarge { padding: 16px 8px; font-size: 1.4em; } .w-dropdown option, .w-dropdown optgroup { letter-spacing: 2px; font-size: .9em; } .w-dropdown > select option { margin: 2px 4px; padding: 2px; text-align: left; } .w-dropdown.w-large, .w-select.w-large, .w-large > .w-time-component, .w-label.w-large { font-size: 1.1em; } .w-select.w-large, .w-dropdown.w-large > select { padding: 12px 8px; } .w-dropdown.w-xlarge, .w-select.w-xlarge, .w-xlarge > .w-time-component, .w-label.w-xlarge { font-size: 1.4em; } .w-select.w-xlarge, .w-dropdown.w-xlarge > select { padding: 16px 8px; } .w-tooltip { font-size: 1em; max-width: 400px; border-width: 1px; padding: 6px 10px; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .w-tooltip > .fa.left-fa { margin-right: 10px; } .w-tooltip > .fa.right-fa { margin-left: 10px; } .w-error-msg { width: 100%; max-width: 90%; padding: 10px; margin: 2px 0; font-size: 0.95em; border-radius: 6px; word-spacing: 2px; letter-spacing: 2px; } .w-error-msg::before { margin-right: 5px; } .w-ribbon-dtl.w-large { left: -6px; top: -6px; } .w-ribbon-dtr.w-large { left: auto; right: -6px; top: -6px; } .w-ribbon-dtr.w-large, .w-ribbon-dtl.w-large { width: 100px; height: 100px; font-size: 1em; } .w-ribbon-dtr.w-large > span, .w-ribbon-dtl.w-large > span { line-height: 30px; width: 140px; } .w-ribbon-dtl.w-large > span { left: -30px; top: 26px; } .w-ribbon-dtr.w-large > span { left: auto; right: -30px; } .w-ribbon-dtl.w-ribbon-fold.w-large > span::before { border-width: 7px; left: -4px; top: 100%; } .w-ribbon-dtr.w-ribbon-fold.w-large > span::before { border-width: 7px; left: -1px; top: 100%; } .w-ribbon-dtl.w-ribbon-fold.w-large > span::after { border-width: 7px; right: -8px; top: 100%; } .w-ribbon-dtr.w-ribbon-fold.w-large > span::after { border-width: 7px; right: -8px; top: 100%; } .w-tag { height: 24px; line-height: 23px; margin: 0 12px 8px 0; padding: 0 12px 0 10px; font-size: 0.9em; } .w-tag.w-tag2 { margin: 0 0 8px 12px; padding: 0 10px 0 12px; } .w-tag.w-tag3 { height: auto; line-height: auto; margin: 0 6px 8px 6px; padding: 0 12px 0 12px; } .w-tag.w-large { font-size: 1.2em; padding: 2px 14px 2px 12px; } .w-tag.w-large:after { right: -14px; border-width: 14px 0 14px 14px; } .w-tag.w-tag2.w-large { padding: 2px 12px 2px 14px; } .w-tag.w-tag2.w-large:after { left: -14px; right: auto; border-width: 14px 14px 14px 0; } .w-tag.w-tag3.w-large { padding: 2px 14px 2px 14px; } .w-tag.w-xlarge { font-size: 1.5em; padding: 6px 16px 6px 12px; } .w-tag.w-xlarge:after { right: -16px; border-width: 16px 0 16px 16px; } .w-tag.w-tag2.w-xlarge { padding: 6px 12px 6px 16px; } .w-tag.w-tag2.w-xlarge:after { left: -16px; right: auto; border-width: 16px 16px 16px 0; } .w-tag.w-tag3.w-xlarge { padding: 6px 16px 6px 16px; } .w-select + .select2-container { padding: 2px; } .w-select + .select2-container.select2-container-multi:after { position: absolute; display: block; z-index: 10; pointer-events: none; right: 2%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: FontAwesome; font-size: .9em; color: inherit; opacity: 0.6; content: "\f0dd"; /*sort-desc*//* \f0dc sort*/ } .w-select + .select2-container-active.select2-container-multi:after, .w-select + .select2-container.select2-container-multi:active:after, .w-select + .select2-container.select2-container-multi:focus:after, .w-select + .select2-container.select2-container-multi:hover:after { opacity: 1; } .w-select + .select2-container > .select2-choices { border: none !important; padding: 0 !important; margin: 0 !important; font-size: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .w-select + .select2-container > .select2-choice, .w-select + .select2-container > .select2-choices > .select2-search-choice { position: relative; border-radius: 3px; padding: .5em 1em .5em 1.2em; } .w-select + .select2-container > .select2-choice, .w-select + .w-large.select2-container > .select2-choices > .select2-search-choice { padding: .6em 1.2em .6em 1.2em; } .w-select + .select2-container > .select2-choice { border: none; } .w-select + .select2-container:focus .select2-choice > .select2-chosen, .w-select + .select2-container .select2-choice:focus > .select2-chosen, .w-select + .select2-container .select2-choice > .select2-chosen:focus, .w-select + .select2-container:active .select2-choice > .select2-chosen, .w-select + .select2-container .select2-choice:active > .select2-chosen, .w-select + .select2-container .select2-choice > .select2-chosen:active, .w-select + .select2-container:hover .select2-choice > .select2-chosen, .w-select + .select2-container .select2-choice:hover > .select2-chosen, .w-select + .select2-container .select2-choice > .select2-chosen:hover { color: inherit; } .w-select + .select2-container > .select2-choices > .select2-search-choice > .select2-search-choice-close { position: absolute; display: inline-block; padding: 0; margin: 0; background: none; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: .8em; /*line-height: 1;*/ color: inherit; left: .2em; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .w-select + .select2-container > .select2-choices > .select2-search-choice > .select2-search-choice-close:before { position: relative; display: inline-block; padding: 0; margin: 0; background: none; content: "\f057"; /* times-circle, times "\f00d"*/ -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } .w-select + .select2-container > .select2-choices > .select2-search-choice:hover > .select2-search-choice-close:before, .w-select + .select2-container > .select2-choices > .select2-search-choice > .select2-search-choice-close:hover:before { -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } .select2-drop.select2-drop-active .select2-results .select2-result.w-option-placeholder, .select2-drop.select2-drop-active .select2-results .select2-result.select2-result-unselectable { opacity: 0.5; } .w-rangeslider + .rangeslider { position: relative; display: inline-block; max-width: 100%; } .w-rangeslider + .rangeslider.rangeslider--horizontal { height: 10px !important; } .w-rangeslider + .rangeslider.rangeslider--vertical { width: 10px !important; } .w-rangeslider + .rangeslider.rangeslider--horizontal > .rangeslider__handle { height: 14px; width: 14px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .w-rangeslider + .rangeslider.rangeslider--vertical > .rangeslider__handle { height: 14px; width: 14px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } /********************************************************************************* * HtmlWidget Colors (default light theme) ***********************************************************************************/ .w-widget { background: none; color: #121212; } .colorpicker-selector, .w-colorselector { background-color: #fff; border-color: #ccc; } .colorpicker-selector:after, .w-colorselector:after { background-color: #ccc; color: rgba(0, 0, 0, .8); text-shadow: 0 1px 1px rgba(127, 127, 127, .3); } .colorpicker-selector:hover, .w-colorselector:hover { border-color: #999; } .colorpicker-selector:hover:after, .w-colorselector:hover:after { background-color: #999; } .colorpicker-selector:focus, .colorpicker-selector:active, .w-colorselector:focus, .w-colorselector:active { border-color: #1190d1; } :focus > .colorpicker-selector:after, :focus + .colorpicker-selector:after, :focus > .w-colorselector:after, :focus + .w-colorselector:after, .colorpicker-selector:focus:after, .colorpicker-selector:active:after, .w-colorselector:focus:after, .w-colorselector:active:after { background-color: #1190d1; } .w-time-component, .w-dropdown > select, .w-select, .w-text, .w-textarea, .w-wysiwyg-editor { border-color: #ccc; background-color: #fff; color: #333; } .w-syntax-editor, .w-syntax-editor + .CodeMirror, .w-syntax-editor + .ace_editor { border-color: #ccc; } textarea.w-textarea::-webkit-input-placeholder, input.w-date::-webkit-input-placeholder, input.w-text::-webkit-input-placeholder { color: inherit !important; opacity: 0.5 !important; font-size: inherit !important; font-style: italic !important; } textarea.w-textarea::-moz-placeholder, input.w-date::-moz-placeholder, input.w-text::-moz-placeholder { color: inherit !important; opacity: 0.5 !important; font-size: inherit !important; font-style: italic !important; } textarea.w-textarea:-moz-placeholder, input.w-date:-moz-placeholder, input.w-text:-moz-placeholder { color: inherit !important; opacity: 0.5 !important; font-size: inherit !important; font-style: italic !important; } textarea.w-textarea:-ms-input-placeholder, input.w-date:-ms-input-placeholder, input.w-text:-ms-input-placeholder { color: inherit !important; opacity: 0.5 !important; font-size: inherit !important; font-style: italic !important; } .w-control-list input.w-radio + label, .w-control-list input.w-checkbox + label, .w-control-array input.w-radio + label, .w-control-array input.w-checkbox + label, input.w-radio + label, input.w-checkbox + label { border-color: #aaa; background-color: #fff; color: #333; } .w-wrapper.w-icon > .w-widget.w-text ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-text ~ .fa-wrapper { color: #ccc; } .w-dropdown:hover > select, .w-dropdown > select:hover, .w-select:hover, .w-text:hover, .w-textarea:hover { border-color: #999; } .w-control-list input.w-radio + label:active, .w-control-list input.w-checkbox + label:active, .w-control-array input.w-radio + label:active, .w-control-array input.w-checkbox + label:active, input.w-radio + label:active, input.w-checkbox + label:active, input.w-radio + label:hover, input.w-checkbox + label:hover { border-color: #333; } .w-widget.w-dnd-upload, .w-dnd-upload { border-color: #ccc; color: #333; background-color: transparent; } .w-dnd-upload > span.w-dnd-upload-preview { background-color: #efefef; border-radius: 3px; padding: 2px 4px; } .w-dnd-upload > img.w-dnd-upload-preview { border: 4px solid #efefef; } .w-widget.w-dnd-upload:hover, .w-dnd-upload:hover { border-color: #999; } .w-widget.w-dnd-upload:not(.__empty__), .w-dnd-upload:not(.__empty__) { background-color: #1190d1; } .w-widget.w-dnd-upload.__dragover__, .w-dnd-upload.__dragover__ { border-color: #1190d1 !important; } .w-widget.w-dnd-upload.__dragover__ > .w-button, .w-dnd-upload.__dragover__ > .w-button { color: #1190d1; } .w-wrapper.w-icon > .w-widget.w-text:not(:disabled):hover ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-text:not(:disabled):hover ~ .fa-wrapper { color: #999; } .w-time-component:focus, .w-dropdown:active > select, .w-dropdown:focus > select, .w-dropdown > select:active, .w-dropdown > select:focus, .w-select:focus, .w-text:focus, .w-textarea:focus { border-color: #1190d1; } .w-dropdown:active:before .w-dropdown:focus:before { color: #1190d1; opacity: 1; } .w-wrapper.w-icon > .w-widget:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon > .w-widget.w-text:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-text:not(:disabled):focus ~ .fa-wrapper { color: #1190d1; } select.w-select option, .w-dropdown > select option { color: #333; } select.w-select option:disabled, .w-dropdown > select:disabled, .w-dropdown > select option:disabled, select.w-select option.w-option-placeholder, .w-dropdown > select option.w-option-placeholder { opacity: 0.6; } input.w-radio-label + label , input.w-checkbox-label + label { /*background-color: none;*/ border-width: 1px; border-style: solid; border-color: transparent; background-clip: padding-box !important; } .w-control-list input.w-radio:not(:checked) + label:active, .w-control-list input.w-checkbox:not(:checked) + label:active, .w-control-array input.w-radio:not(:checked) + label:active, .w-control-array input.w-checkbox:not(:checked) + label:active, input.w-radio-label:not(:checked) + label:active, input.w-checkbox-label:not(:checked) + label:active, input.w-radio-label:not(:checked) + label:hover, input.w-checkbox-label:not(:checked) + label:hover { background-color: #477b96 !important; border-color: #477b96 !important; color: #fff !important; } .w-control-list input.w-radio:checked + label:active, .w-control-list input.w-checkbox:checked + label:active, .w-control-array input.w-radio:checked + label:active, .w-control-array input.w-checkbox:checked + label:active, input.w-radio-label:checked + label:active, input.w-checkbox-label:checked + label:active, input.w-radio-label:checked + label:hover, input.w-checkbox-label:checked + label:hover { border-color: #1190d1 !important; } input.w-radio-label:checked + label , input.w-checkbox-label:checked + label { background-color: #1190d1 !important; color: #fff !important; font-weight: bold !important; } input.w-radio-image + label , input.w-checkbox-image + label { box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.5); } input.w-radio-image + label > span, input.w-checkbox-image + label > span { border-color: #ccc; } input.w-radio-image + label:hover > span, input.w-checkbox-image + label:hover > span, input.w-radio-image:checked + label > span, input.w-checkbox-image:checked + label > span { border-color: #999; } /*input.w-radio + label, input.w-checkbox + label { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); text-shadow: 0 1px rgba(255, 255, 255, 0.8); }*/ input.w-radio + label:before, input.w-checkbox + label:before { color: inherit; } input.w-checkbox-label:disabled + label, input.w-radio-label:disabled + label, input.w-checkbox-image:disabled + label, input.w-radio-image:disabled + label, input.w-checkbox:disabled + label, input.w-radio:disabled + label { background-image: -webkit-linear-gradient(top, rgba(255,255,255,.6), rgba(255,255,255,.6)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.6), rgba(255,255,255,.6)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.6), rgba(255,255,255,.6)); background-image: -o-linear-gradient(top, rgba(255,255,255,.6), rgba(255,255,255,.6)); background-image: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.6)); } .w-button.w-white, .w-button { background-color: #fff; border-color: #ccc; color: #333; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px 2px rgba(255, 255, 255, 0.12) inset; } .w-button.w-white:hover, .w-button.w-white:focus, .w-button:hover, .w-button:focus { border-color: #999; } .w-button.w-white:active, .w-button:active { color: #1190d1; border-color: #1190d1; } .w-button.w-black { background-color: #3a3a3a; border-color: transparent; color: #efefef; } .w-button.w-black:hover, .w-button.w-black:focus, .w-button.w-black:active { color: #fff; border-color: #292929 !important; } .w-button.w-aqua { background-color: #477b96; border-color: transparent; color: #efefef; } .w-button.w-aqua:hover, .w-button.w-aqua:focus, .w-button.w-aqua:active { color: #fff; border-color: #365363 !important; } .w-button.w-blue, .w-button.w-primary { background: rgb(0,117,204); border-color: transparent; color: #efefef; } .w-button.w-blue:hover, .w-button.w-blue:focus, .w-button.w-primary:hover, .w-button.w-primary:focus, .w-button.w-blue:active, .w-button.w-primary:active { color: #fff; border-color: rgb(0,117,204) !important; } .w-button.w-red { background-color: rgb(202, 60, 60); border-color: transparent; color: #efefef; } .w-button.w-red:hover, .w-button.w-red:focus, .w-button.w-red:active { color: #fff; border-color: rgb(241, 31, 31) !important; } .w-button.w-orange { background-color: rgb(223, 117, 20); border-color: transparent; color: #efefef; } .w-button.w-orange:hover, .w-button.w-orange:focus, .w-button.w-orange:active { color: #fff; border-color: rgb(206, 101, 5) !important; } .w-button.w-green { background-color: rgb(28, 184, 65); border-color: transparent; color: #efefef; } .w-button.w-green:hover, .w-button.w-green:focus, .w-button.w-green:active { color: #fff; border-color: rgb(9, 170, 47) !important; } .w-button.w-yellow { background-color: rgb(214, 212, 24); border-color: transparent; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .w-button.w-yellow:hover, .w-button.w-yellow:focus, .w-button.w-yellow:active { color: #fff; border-color: rgb(189, 187, 44) !important; } .w-button.w-purple { background-color: rgb(171, 14, 194); border-color: transparent; color: #efefef; } .w-button.w-purple:hover, .w-button.w-purple:focus, .w-button.w-purple:active { color: #fff; border-color: rgb(133, 11, 151) !important; } input.w-radio.inset:not(.w-push-button) + label, input.w-checkbox.inset:not(.w-push-button) + label, input.w-radio + label.inset:not(.w-push-button), input.w-checkbox + label.inset:not(.w-push-button) { background-color: #fefefe; border-color: rgba(0,0,0,.2); box-shadow: 1px 1px rgba(0,0,0,.1) inset, 2px 2px rgba(0,0,0,.1) inset, 2px 2px rgba(0,0,0,.8) inset, 2px 2px 2px rgba(0,0,0,.3) inset; } input.w-radio.inset:not(.w-push-button):checked + label, input.w-checkbox.inset:not(.w-push-button):checked + label, input.w-radio:checked + label.inset:not(.w-push-button), input.w-checkbox:checked + label.inset:not(.w-push-button) { box-shadow: 1px 1px rgba(0,0,0,.1) inset, 2px 2px rgba(0,0,0,.1) inset, 2px 2px rgba(0,0,0,.8) inset, 2px 2px 3px rgba(0,0,0,.5) inset; } input.w-checkbox.w-push-button + label, input.w-radio.w-push-button + label, input.w-checkbox + label.w-push-button, input.w-radio + label.w-push-button { background-color: #e0e0e0; border-color: rgba(0,0,0,.2); color: #fff; box-shadow: 0 1px hsla(0,0%,100%,.15) inset, 1px 1px hsl(30,20%,20%), 1px 1px hsl(30,20%,18%), 2px 2px hsl(30,20%,16%), 2px 2px 5px rgba(0,0,0,.5); } input.w-checkbox.w-push-button + label:before, input.w-radio.w-push-button + label:before, input.w-checkbox + label.w-push-button:before, input.w-radio + label.w-push-button:before { text-shadow: 1px 1px 1px rgba(0, 0, 0, .9); } input.w-checkbox.w-push-button:checked + label, input.w-radio.w-push-button:checked + label, input.w-checkbox:checked + label.w-push-button, input.w-radio:checked + label.w-push-button { box-shadow: 1px 1px hsl(30,20%,14%) inset, 2px 2px hsl(30,20%,16%) inset, 2px 2px hsl(30,20%,18%) inset, 2px 2px 5px rgba(0,0,0,.5) inset; } input.w-checkbox.w-led-button + label:before, input.w-radio.w-led-button + label:before, input.w-checkbox + label.w-led-button:before, input.w-radio + label.w-led-button:before { color: rgba(255, 0, 0, .4); text-shadow: 0px 0px 1px rgba(200, 0, 0, .8); } input.w-checkbox.w-led-button:checked + label:before, input.w-radio.w-led-button:checked + label:before, input.w-checkbox:checked + label.w-led-button:before, input.w-radio:checked + label.w-led-button:before { color: rgba(255, 0, 0, 1); text-shadow: 0px 0px 100px rgba(200, 0, 0, .8); } .w-switch { color: transparent; background-color: #fff; } .w-switch > label.w-switch-on { background-color: #0f0; } .w-switch > label.w-switch-off { background-color: #f00; } .w-switch > label.w-switch-on > .fa, .w-switch > label.w-switch-off > .fa { color: #fff; } .w-switch > label > .fa.positive::after, .w-switch > label > .fa.negative::after { color: inherit; } .w-switch > .w-switch-handle { background-color: #fafafa; } .w-switch > input.w-switch-state:disabled ~ .w-switch-handle { background-color: #efefef; } .w-tooltip { background-color: rgba(0, 0, 0, .9); border-color: rgba(0, 0, 0, .9); color: #fff; -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .9); box-shadow: inset 0 1px 0 #000; } .w-pagination > li > a, .w-pagination > li > span, .w-pagination > span, .w-pagination > span > a, .w-pagination > .page-select { color: #337ab7; background-color: #fff; border-color: #ddd; } .w-pagination > .disabled > a, .w-pagination > .disabled > a:focus, .w-pagination > .disabled > a:hover, .w-pagination > .disabled > span, .w-pagination > .disabled > span:focus, .w-pagination > .disabled > span:hover { cursor: not-allowed; color: #777; background-color: #fff; border-color: #ddd; } .w-pagination > .active > a, .w-pagination > .active > a:focus, .w-pagination > .active > a:hover, .w-pagination > .active > span, .w-pagination > .active > span:focus, .w-pagination > .active > span:hover { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .w-vertical-menu ul, .w-dropdown-menu ul { background-color: #efefef; box-shadow: 0px 0px 9px rgba(0,0,0,0.15); color: #121212; } .w-vertical-menu > ul, .w-dropdown-menu > ul { background-color: #fefefe; } .w-vertical-menu li, .w-dropdown-menu li { color: #121212; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .w-vertical-menu li.current, .w-vertical-menu li.active, .w-vertical-menu li:focus, .w-vertical-menu li:active, .w-vertical-menu li:hover, .w-dropdown-menu li.current, .w-dropdown-menu li.active, .w-dropdown-menu li:focus, .w-dropdown-menu li:active, .w-dropdown-menu li:hover { background-color: #1190d1; color: #fff; } .w-vertical-menu ul > li, .w-dropdown-menu ul > li { border-bottom-color: #ccc; } .w-dropdown-menu > ul > li { border-right-color: #ccc; } .w-dialog { background: #fefefe !important; } .w-dialog > .w-dialog-title { background: rgba(12,144,232,0.9); color: #fafafa; } .w-dialog > .w-dialog-buttons { border-top-color: rgba(0,0,0,0.32); } .active.w-spinner.w-spinner-dots:before { -webkit-animation-name: w-anim-spindots; animation-name: w-anim-spindots; } .active.w-spinner.w-spinner-dots2:before, .active.w-spinner.w-spinner-dots2:after, .active.w-spinner.w-spinner-dots2 { -webkit-animation-name: w-anim-dots; animation-name: w-anim-dots; } .w-disabable-overlay, .w-delayable-overlay { background-color: rgba(255,255,255,.4); } .w-delayed > .w-delayable-overlay > .w-spinner.w-spinner-dots:before { -webkit-animation-name: w-anim-spindots; animation-name: w-anim-spindots; } .w-delayed > .w-delayable-overlay > .w-spinner.w-spinner-dots2:before, .w-delayed > .w-delayable-overlay > .w-spinner.w-spinner-dots2:after, .w-delayed > .w-delayable-overlay > .w-spinner.w-spinner-dots2 { -webkit-animation-name: w-anim-dots; animation-name: w-anim-dots; } .w-delayed > .w-disabable-overlay { background-color: rgba(255,255,255,0); } table.w-table.cellular.dataTable, table.w-table.cellular, table.w-table.dataTable, table.w-table { color: #444; background-color: #efefef; } .separator, .w-separator, .w-sep { background: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(0,0,0,0.12); } .w-select.w-error, .w-file-input.w-error + .w-file, .w-text.w-error, .w-date.w-error, .w-textarea.w-error, .w-checkbox.w-error + label, .w-radio.w-error + label { -webkit-box-shadow: 0 0 0 1px rgb(248,0,0) !important; -moz-box-shadow: 0 0 0 1px rgb(248,0,0) !important; -ms-box-shadow: 0 0 0 1px rgb(248,0,0) !important; -o-box-shadow: 0 0 0 1px rgb(248,0,0) !important; box-shadow: 0 0 0 1px rgb(248,0,0) !important; border-color: rgb(248,0,0) !important; } .w-ribbon-dtr > span, .w-ribbon-dtl > span { color: #fff; background: #79A70A; background: -webkit-linear-gradient(#B6BAC9 0%, #808080 100%); background: -moz-linear-gradient(#B6BAC9 0%, #808080 100%); background: -ms-linear-gradient(#B6BAC9 0%, #808080 100%); background: -o-linear-gradient(#B6BAC9 0%, #808080 100%); background: linear-gradient(#B6BAC9 0%, #808080 100%); box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); } .w-ribbon-dtr.w-ribbon-fold > span::before, .w-ribbon-dtl.w-ribbon-fold > span::before { border-color: #808080 transparent transparent #808080; } .w-ribbon-dtr.w-ribbon-fold > span::after, .w-ribbon-dtl.w-ribbon-fold > span::after { border-color: #808080 #808080 transparent transparent; } .w-ribbon-dtr.w-red > span, .w-ribbon-dtl.w-red > span { background: #79A70A; background: -webkit-linear-gradient(#F70505 0%, #8F0808 100%); background: -moz-linear-gradient(#F70505 0%, #8F0808 100%); background: -ms-linear-gradient(#F70505 0%, #8F0808 100%); background: -o-linear-gradient(#F70505 0%, #8F0808 100%); background: linear-gradient(#F70505 0%, #8F0808 100%); } .w-ribbon-dtr.w-red.w-ribbon-fold > span::before, .w-ribbon-dtl.w-red.w-ribbon-fold > span::before { border-color: #8F0808 transparent transparent #8F0808; } .w-ribbon-dtr.w-red.w-ribbon-fold > span::after, .w-ribbon-dtl.w-red.w-ribbon-fold > span::after { border-color: #8F0808 #8F0808 transparent transparent; } .w-ribbon-dtr.w-green > span, .w-ribbon-dtl.w-green > span { background: #79A70A; background: -webkit-linear-gradient(#9BC90D 0%, #79A70A 100%); background: -moz-linear-gradient(#9BC90D 0%, #79A70A 100%); background: -ms-linear-gradient(#9BC90D 0%, #79A70A 100%); background: -o-linear-gradient(#9BC90D 0%, #79A70A 100%); background: linear-gradient(#9BC90D 0%, #79A70A 100%); } .w-ribbon-dtr.w-green.w-ribbon-fold > span::before, .w-ribbon-dtl.w-green.w-ribbon-fold > span::before { border-color: #79A70A transparent transparent #79A70A; } .w-ribbon-dtr.w-green.w-ribbon-fold > span::after, .w-ribbon-dtl.w-green.w-ribbon-fold > span::after { border-color: #79A70A #79A70A transparent transparent; } .w-ribbon-dtr.w-blue > span, .w-ribbon-dtl.w-blue > span { background: #79A70A; background: -webkit-linear-gradient(#2989d8 0%, #1e5799 100%); background: -moz-linear-gradient(#2989d8 0%, #1e5799 100%); background: -ms-linear-gradient(#2989d8 0%, #1e5799 100%); background: -o-linear-gradient(#2989d8 0%, #1e5799 100%); background: linear-gradient(#2989d8 0%, #1e5799 100%); } .w-ribbon-dtr.w-blue.w-ribbon-fold > span::before, .w-ribbon-dtl.w-blue.w-ribbon-fold > span::before { border-color: #1e5799 transparent transparent #1e5799; } .w-ribbon-dtr.w-blue.w-ribbon-fold > span::after, .w-ribbon-dtl.w-blue.w-ribbon-fold > span::after { border-color: #1e5799 #1e5799 transparent transparent; } .w-ribbon-dtr.w-orange > span, .w-ribbon-dtl.w-orange > span { background: #79A70A; background: -webkit-linear-gradient(#F79E05 0%, #8F5408 100%); background: -moz-linear-gradient(#F79E05 0%, #8F5408 100%); background: -ms-linear-gradient(#F79E05 0%, #8F5408 100%); background: -o-linear-gradient(#F79E05 0%, #8F5408 100%); background: linear-gradient(#F79E05 0%, #8F5408 100%); } .w-ribbon-dtr.w-orange.w-ribbon-fold > span::before, .w-ribbon-dtl.w-orange.w-ribbon-fold > span::before { border-color: #8F5408 transparent transparent #8F5408; } .w-ribbon-dtr.w-orange.w-ribbon-fold > span::after, .w-ribbon-dtl.w-orange.w-ribbon-fold > span::after { border-color: #8F5408 #8F5408 transparent transparent; } .w-tag.w-orange select, .w-tag.w-orange select option, .w-tag.w-orange { background-color: #f58220; } .w-tag.w-orange:after { border-color: transparent transparent transparent #f58220; } .w-tag.w-tag2.w-orange:after { border-color: transparent #f58220 transparent transparent; } .w-tag.w-green select, .w-tag.w-green select option, .w-tag.w-green { background-color: #97c224; } .w-tag.w-green:after { border-color: transparent transparent transparent #97c224; } .w-tag.w-tag2.w-green:after { border-color: transparent #97c224 transparent transparent; } .w-tag.w-yellow select, .w-tag.w-yellow select option, .w-tag.w-yellow { background-color: #d6d418; } .w-tag.w-yellow:after { border-color: transparent transparent transparent #d6d418; } .w-tag.w-tag2.w-yellow:after { border-color: transparent #d6d418 transparent transparent; } .w-tag.w-purple select, .w-tag.w-purple select option, .w-tag.w-purple { background-color: #ab0ec2; } .w-tag.w-purple:after { border-color: transparent transparent transparent #ab0ec2; } .w-tag.w-tag2.w-purple:after { border-color: transparent #ab0ec2 transparent transparent; } .w-tag.w-red select, .w-tag.w-red select option, .w-tag.w-red { background-color: #de3f3e; } .w-tag.w-red:after { border-color: transparent transparent transparent #de3f3e; } .w-tag.w-tag2.w-red:after { border-color: transparent #de3f3e transparent transparent; } .w-tag.w-blue select, .w-tag.w-blue select option, .w-tag.w-blue { background-color: #00a6df; } .w-tag.w-blue:after { border-color: transparent transparent transparent #00a6df; } .w-tag.w-tag2.w-blue:after { border-color: transparent #00a6df transparent transparent; } .w-tag.w-aqua select, .w-tag.w-aqua select option, .w-tag.w-aqua { background-color: #477b96; } .w-tag.w-aqua:after { border-color: transparent transparent transparent #477b96; } .w-tag.w-tag2.w-aqua:after { border-color: transparent #477b96 transparent transparent; } .w-tag.w-primary select, .w-tag.w-primary select option, .w-tag.w-primary { background-color: #ec008c; } .w-tag.w-primary:after { border-color: transparent transparent transparent #ec008c; } .w-tag.w-tag2.w-primary:after { border-color: transparent #ec008c transparent transparent; } .w-msg { font-family: sans-serif; border: 1px solid transparent; border-radius: 4px; margin-bottom: 20px; padding: 15px; } .w-msg.w-msg-ok { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .w-msg.w-msg-info { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; } .w-msg.w-msg-warn { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .w-msg.w-msg-err { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .w-error-msg { color: rgb(248,0,0); } .w-widget.w-selected .w-selected { border-color: #f77c05 !important; background-color: #f77c05 !important; } .w-select + .select2-container > .select2-choices > .select2-search-choice:hover > .select2-search-choice-close:before, .w-select + .select2-container > .select2-choices > .select2-search-choice > .select2-search-choice-close:hover:before { color: #33aaff; } .w-select + .select2-container.select2-container-active { border-color: #1190d1; } .select2-drop.select2-drop-active .select2-results .select2-result.select2-result-selectable.select2-highlighted { background-color: #33aaff; color: #efefef; } .w-rangeslider + .rangeslider > .rangeslider__fill { background-color: #33aaff/*#fda762*/; } /********************************************************************************* * HtmlWidget Colors dark theme ***********************************************************************************/ .w-widget.w-dark:not(.w-range) { background: none; color: #eee; } .w-range:not(.circular).w-dark { color: inherit; --primary-color: #0366D6; --primary-color-lighter: LightCyan; --value-active-color: white; --progress-background: #333; --progress-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2) inset; --thumb-color: #eee; --thumb-shadow: 0 0 3px rgba(255,255,255,.4), 0 0 1px rgba(255,255,255,.5) inset, 0 0 0 99px var(--thumb-color) inset; --thumb-shadow-active: 0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color), 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(255,255,255,.4); --ticks-color: silver; } .w-range.circular.w-dark { color: #eee; --bg: #333; --thumb-bg: #eee; } .w-time-component.w-dark, .w-dropdown.w-dark > select, .w-select.w-dark, .w-text.w-dark, .w-textarea.w-dark, .w-wysiwyg-editor.w-dark { border-color: #ccc; background-color: #121212; color: #eee; } .w-syntax-editor.w-dark, .w-syntax-editor.w-dark + .CodeMirror, .w-syntax-editor.w-dark + .ace_editor { border-color: #ccc; } .w-control-list.w-dark input.w-radio + label, .w-control-list.w-dark input.w-checkbox + label, .w-control-array.w-dark input.w-radio + label, .w-control-array.w-dark input.w-checkbox + label, input.w-radio.w-dark + label, input.w-checkbox.w-dark + label { border-color: #ccc; background-color: #222; color: #eee; } .w-wrapper.w-icon > .w-widget.w-dark.w-text ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-dark.w-text ~ .fa-wrapper { color: #eee; } .w-dropdown.w-dark:hover > select, .w-dropdown.w-dark > select:hover, .w-select.w-dark:hover, .w-text.w-dark:hover, .w-textarea.w-dark:hover { border-color: #ccc; } .w-control-list.w-dark input.w-radio + label:active, .w-control-list.w-dark input.w-checkbox + label:active, .w-control-array.w-dark input.w-radio + label:active, .w-control-array.w-dark input.w-checkbox + label:active, input.w-radio.w-dark + label:active, input.w-checkbox.w-dark + label:active, input.w-radio.w-dark + label:hover, input.w-checkbox.w-dark + label:hover { border-color: #eee; } .w-widget.w-dark.w-dnd-upload, .w-dnd-upload.w-dark { border-color: #ccc; color: #eee; background-color: transparent; } .w-dnd-upload.w-dark > span.w-dnd-upload-preview { background-color: #121212; } .w-dnd-upload.w-dark > img.w-dnd-upload-preview { border: 4px solid #efefef; } .w-widget.w-dark.w-dnd-upload:hover, .w-dnd-upload.w-dark:hover { border-color: #ccc; } .w-widget.w-dark.w-dnd-upload:not(.__empty__), .w-dnd-upload.w-dark:not(.__empty__) { background-color: #1190d1; } .w-widget.w-dark.w-dnd-upload.__dragover__, .w-dnd-upload.w-dark.__dragover__ { border-color: #1190d1 !important; } .w-widget.w-dark.w-dnd-upload.__dragover__ > .w-button, .w-dnd-upload.w-dark.__dragover__ > .w-button { color: #1190d1; } .w-wrapper.w-icon > .w-widget.w-dark.w-text:not(:disabled):hover ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-dark.w-text:not(:disabled):hover ~ .fa-wrapper { color: #efefef; } .w-time-component.w-dark:focus, .w-dropdown.w-dark:active > select, .w-dropdown.w-dark:focus > select, .w-dropdown.w-dark > select:active, .w-dropdown.w-dark > select:focus, .w-select.w-dark:focus, .w-text.w-dark:focus, .w-textarea.w-dark:focus { border-color: #1190d1; } .w-dropdown.w-dark:active:before .w-dropdown.w-dark:focus:before { color: #1190d1; opacity: 1; } .w-wrapper.w-icon > .w-widget.w-dark:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-dark:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon > .w-widget.w-text.w-dark:not(:disabled):focus ~ .fa-wrapper, .w-wrapper.w-icon-right > .w-widget.w-text.w-dark:not(:disabled):focus ~ .fa-wrapper { color: #1190d1; } select.w-select.w-dark option, .w-dropdown.w-dark > select option { color: #eee; } select.w-select.w-dark option:disabled, .w-dropdown.w-dark > select:disabled, .w-dropdown.w-dark > select option:disabled, select.w-select.w-dark option.w-option-placeholder, .w-dropdown.w-dark > select option.w-option-placeholder { opacity: 0.6; } .w-control-list.w-dark input.w-radio:not(:checked) + label:active, .w-control-list.w-dark input.w-checkbox:not(:checked) + label:active, .w-control-array.w-dark input.w-radio:not(:checked) + label:active, .w-control-array.w-dark input.w-checkbox:not(:checked) + label:active, input.w-radio-label.w-dark:not(:checked) + label:active, input.w-checkbox-label.w-dark:not(:checked) + label:active, input.w-radio-label.w-dark:not(:checked) + label:hover, input.w-checkbox-label.w-dark:not(:checked) + label:hover { background-color: #477b96 !important; border-color: #477b96 !important; color: #fff !important; } .w-control-list.w-dark input.w-radio:checked + label:active, .w-control-list.w-dark input.w-checkbox:checked + label:active, .w-control-array.w-dark input.w-radio:checked + label:active, .w-control-array.w-dark input.w-checkbox:checked + label:active, input.w-radio-label.w-dark:checked + label:active, input.w-checkbox-label.w-dark:checked + label:active, input.w-radio-label.w-dark:checked + label:hover, input.w-checkbox-label.w-dark:checked + label:hover { border-color: #1190d1 !important; } input.w-radio-label.w-dark:checked + label , input.w-checkbox-label.w-dark:checked + label { background-color: #1190d1 !important; color: #fff !important; } input.w-radio-image.w-dark + label , input.w-checkbox-image.w-dark + label { box-shadow: 3px 3px 5px 2px rgba(255, 255, 255, 0.4); } input.w-radio-image.w-dark + label > span, input.w-checkbox-image.w-dark + label > span { border-color: #ccc; } input.w-radio-image.w-dark + label:hover > span, input.w-checkbox-image.w-dark + label:hover > span, input.w-radio-image.w-dark:checked + label > span, input.w-checkbox-image.w-dark:checked + label > span { border-color: #eee; } input.w-radio.w-dark.inset:not(.w-push-button) + label, input.w-checkbox.w-dark.inset:not(.w-push-button) + label, input.w-radio.w-dark + label.inset:not(.w-push-button), input.w-checkbox.w-dark + label.inset:not(.w-push-button) { background-color: #121212; border-color: rgba(255,255,255,.2); box-shadow: 1px 1px rgba(255,255,255,.1) inset, 2px 2px rgba(255,255,255,.1) inset, 2px 2px rgba(255,255,255,.8) inset, 2px 2px 2px rgba(255,255,255,.3) inset; } input.w-radio.w-dark.inset:not(.w-push-button):checked + label, input.w-checkbox.w-dark.inset:not(.w-push-button):checked + label, input.w-radio.w-dark:checked + label.inset:not(.w-push-button), input.w-checkbox.w-dark:checked + label.inset:not(.w-push-button) { box-shadow: 1px 1px rgba(255,255,255,.1) inset, 2px 2px rgba(255,255,255,.1) inset, 2px 2px rgba(255,255,255,.8) inset, 2px 2px 3px rgba(255,255,255,.5) inset; } input.w-checkbox.w-dark.w-push-button + label, input.w-radio.w-dark.w-push-button + label, input.w-checkbox.w-dark + label.w-push-button, input.w-radio.w-dark + label.w-push-button { background-color: #121212; border-color: rgba(255,255,255,.2); color: #454545; box-shadow: 0 1px hsla(0,0%,100%,.15) inset, 1px 1px hsl(30,20%,20%), 1px 1px hsl(30,20%,18%), 2px 2px hsl(30,20%,16%), 2px 2px 5px rgba(0,0,0,.5); } input.w-checkbox.w-dark.w-push-button + label:before, input.w-radio.w-dark.w-push-button + label:before, input.w-checkbox.w-dark + label.w-push-button:before, input.w-radio.w-dark + label.w-push-button:before { text-shadow: 1px 1px 1px rgba(255, 255, 255, .9); } input.w-checkbox.w-dark.w-push-button:checked + label, input.w-radio.w-dark.w-push-button:checked + label, input.w-checkbox.w-dark:checked + label.w-push-button, input.w-radio.w-dark:checked + label.w-push-button { box-shadow: 1px 1px hsl(30,20%,14%) inset, 2px 2px hsl(30,20%,16%) inset, 2px 2px hsl(30,20%,18%) inset, 2px 2px 5px rgba(0,0,0,.5) inset; } input.w-checkbox.w-dark.w-led-button + label:before, input.w-radio.w-dark.w-led-button + label:before, input.w-checkbox.w-dark + label.w-led-button:before, input.w-radio.w-dark + label.w-led-button:before { color: rgba(255, 0, 0, .4); text-shadow: 0px 0px 1px rgba(200, 0, 0, .8); } input.w-checkbox.w-dark.w-led-button:checked + label:before, input.w-radio.w-dark.w-led-button:checked + label:before, input.w-checkbox.w-dark:checked + label.w-led-button:before, input.w-radio.w-dark:checked + label.w-led-button:before { color: rgba(255, 0, 0, 1); text-shadow: 0px 0px 100px rgba(200, 0, 0, .8); } .w-switch.w-dark { color: transparent; background-color: #121212; } .w-switch.w-dark > label.w-switch-on { background-color: #0f0; } .w-switch.w-dark > label.w-switch-off { background-color: #f00; } .w-switch.w-dark > label.w-switch-on > .fa, .w-switch.w-dark > label.w-switch-off > .fa { color: #fff; } .w-switch.w-dark > label > .fa.positive::after, .w-switch.w-dark > label > .fa.negative::after { color: inherit; } .w-switch.w-dark > .w-switch-handle { background-color: #232323; } .w-switch.w-dark > input.w-switch-state:disabled ~ .w-switch-handle { background-color: #565656; } .w-tooltip.w-dark { background-color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .9); color: #232323; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff; } .w-pagination.w-dark > li > a, .w-pagination.w-dark > li > span, .w-pagination.w-dark > span, .w-pagination.w-dark > span > a, .w-pagination.w-dark > .page-select { color: #eee; background-color: #444; border-color: #eee; } .w-pagination.w-dark > .disabled > a, .w-pagination.w-dark > .disabled > a:focus, .w-pagination.w-dark > .disabled > a:hover, .w-pagination.w-dark > .disabled > span, .w-pagination.w-dark > .disabled > span:focus, .w-pagination.w-dark > .disabled > span:hover { cursor: not-allowed; color: #aaa; background-color: #444; border-color: #aaa; } .w-pagination.w-dark > .active > a, .w-pagination.w-dark > .active > a:focus, .w-pagination.w-dark > .active > a:hover, .w-pagination.w-dark > .active > span, .w-pagination.w-dark > .active > span:focus, .w-pagination.w-dark > .active > span:hover { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .w-vertical-menu.w-dark ul, .w-dropdown-menu.w-dark ul { background-color: #343434; box-shadow: 0px 0px 9px rgba(255,255,255,0.15); color: #eee; } .w-vertical-menu.w-dark > ul, .w-dropdown-menu.w-dark > ul { background-color: #343434; } .w-vertical-menu.w-dark li, .w-dropdown-menu.w-dark li { color: #eee; text-shadow: 1px 1px 1px rgba(255,255,255,0.2); } .w-vertical-menu.w-dark li.current, .w-vertical-menu.w-dark li.active, .w-vertical-menu.w-dark li:focus, .w-vertical-menu.w-dark li:active, .w-vertical-menu.w-dark li:hover, .w-dropdown-menu.w-dark li.current, .w-dropdown-menu.w-dark li.active, .w-dropdown-menu.w-dark li:focus, .w-dropdown-menu.w-dark li:active, .w-dropdown-menu.w-dark li:hover { background-color: #1190d1; color: #fff; } .w-vertical-menu.w-dark ul > li, .w-dropdown-menu.w-dark ul > li { border-bottom-color: #555; } .w-dropdown-menu.w-dark > ul > li { border-right-color: #555; } .w-dialog.w-dark { background: #343434 !important; color: #eee; } .w-dialog.w-dark > .w-dialog-title { background: rgba(12,144,232,0.9); color: #121212; } .w-dialog.w-dark > .w-dialog-buttons { border-top-color: rgba(255,255,255,0.32); } .w-disabable-overlay.w-dark, .w-delayable-overlay.w-dark { background-color: rgba(0,0,0,.4); } .w-delayed > .w-disabable-overlay.w-dark { background-color: rgba(0,0,0,0); } table.w-table.w-dark.cellular.dataTable, table.w-table.w-dark.cellular, table.w-table.w-dark.dataTable, table.w-table.w-dark { color: #eee; background-color: #121212; } .separator.w-dark, .w-separator.w-dark, .w-sep.w-dark { background: rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.12); } .w-widget.w-dark.w-selected .w-selected.w-dark { border-color: #f77c05 !important; background-color: #f77c05 !important; } .w-select.w-dark + .select2-container > .select2-choices > .select2-search-choice:hover > .select2-search-choice-close:before, .w-select.w-dark + .select2-container > .select2-choices > .select2-search-choice > .select2-search-choice-close:hover:before { color: #33aaff; } .w-select.w-dark + .select2-container.select2-container-active { border-color: #1190d1; } .select2-drop.select2-drop-active .select2-results .select2-result.select2-result-selectable.select2-highlighted { background-color: #33aaff; color: #efefef; } .w-rangeslider.w-dark + .rangeslider > .rangeslider__fill { background-color: #33aaff/*#fda762*/; } @-webkit-keyframes w-anim-spindots { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #808080, 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.5), -1.8em -1.8em 0 0em rgba(128,128,128, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.7), 1.8em -1.8em 0 0em #808080, 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.5), 1.8em -1.8em 0 0em rgba(128,128,128, 0.7), 2.5em 0em 0 0em #808080, 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.5), 2.5em 0em 0 0em rgba(128,128,128, 0.7), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.5), 1.75em 1.75em 0 0em rgba(128,128,128, 0.7), 0em 2.5em 0 0em #808080, -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.5), 0em 2.5em 0 0em rgba(128,128,128, 0.7), -1.8em 1.8em 0 0em #808080, -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.5), -1.8em 1.8em 0 0em rgba(128,128,128, 0.7), -2.6em 0em 0 0em #808080, -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.5), -2.6em 0em 0 0em rgba(128,128,128, 0.7), -1.8em -1.8em 0 0em #808080; } } @keyframes w-anim-spindots { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #808080, 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.5), -1.8em -1.8em 0 0em rgba(128,128,128, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.7), 1.8em -1.8em 0 0em #808080, 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.5), 1.8em -1.8em 0 0em rgba(128,128,128, 0.7), 2.5em 0em 0 0em #808080, 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.5), 2.5em 0em 0 0em rgba(128,128,128, 0.7), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.5), 1.75em 1.75em 0 0em rgba(128,128,128, 0.7), 0em 2.5em 0 0em #808080, -1.8em 1.8em 0 0em rgba(128,128,128, 0.2), -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.5), 0em 2.5em 0 0em rgba(128,128,128, 0.7), -1.8em 1.8em 0 0em #808080, -2.6em 0em 0 0em rgba(128,128,128, 0.2), -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.5), -1.8em 1.8em 0 0em rgba(128,128,128, 0.7), -2.6em 0em 0 0em #808080, -1.8em -1.8em 0 0em rgba(128,128,128, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(128,128,128, 0.2), 1.8em -1.8em 0 0em rgba(128,128,128, 0.2), 2.5em 0em 0 0em rgba(128,128,128, 0.2), 1.75em 1.75em 0 0em rgba(128,128,128, 0.2), 0em 2.5em 0 0em rgba(128,128,128, 0.2), -1.8em 1.8em 0 0em rgba(128,128,128, 0.5), -2.6em 0em 0 0em rgba(128,128,128, 0.7), -1.8em -1.8em 0 0em #808080; } } @-webkit-keyframes w-anim-dots { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em rgba(10,10,10,0.2); } 40% { box-shadow: 0 2.5em 0 0 rgba(10,10,10,0.8); } } @keyframes w-anim-dots { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em rgba(10,10,10,0.2); } 40% { box-shadow: 0 2.5em 0 0 rgba(10,10,10,0.8); } }