.bootstrap-tagsinput { background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); display: inline-block; padding: 4px 6px; color: #555; vertical-align: middle; border-radius: 4px; max-width: 100%; line-height: 22px; cursor: text; } .bootstrap-tagsinput input { border: none; box-shadow: none; outline: none; background-color: transparent; padding: 0 6px; margin: 0; width: auto; max-width: inherit; } .bootstrap-tagsinput.form-control input::-moz-placeholder { color: #777; opacity: 1; } .bootstrap-tagsinput.form-control input:-ms-input-placeholder { color: #777; } .bootstrap-tagsinput.form-control input::-webkit-input-placeholder { color: #777; } .bootstrap-tagsinput input:focus { border: none; box-shadow: none; } .bootstrap-tagsinput .tag { margin-right: 2px; color: white; } .bootstrap-tagsinput .tag [data-role="remove"] { margin-left: 8px; cursor: pointer; } .bootstrap-tagsinput .tag [data-role="remove"]:after { content: "x"; padding: 0px 2px; } .bootstrap-tagsinput .tag [data-role="remove"]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .bootstrap-tagsinput .tag [data-role="remove"]:hover:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } @font-face{font-family:'QFont Icons';src:url('../fonts/qfont-icons.woff') format('woff');src:url('../fonts/qfont-icons.otf') format("opentype");font-weight:normal;font-style:normal;}.qpf{font-family:'QFont Icons'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.qpf.qpf-settings:before{content:"";}.qpf.qpf-trash-o:before{content:"";}.qpf.qpf-pencil-square-o:before{content:"";}.qpf.qpf-paperclip:before{content:"";}.qpf.qpf-file-o:before{content:"";}.qpf.qpf-files-o:before{content:"";}.qpf.qpf-eye-o:before{content:"";}.qpf.qpf-eye-slash:before{content:"";}.qpf.qpf-angle-right:before{content:"";}.qpf.qpf-angle-left:before{content:"";}.qpf.qpf-angle-down:before{content:"";}.qpf.qpf-angle-up:before{content:"";}.qpf.qpf-angle-double-right:before{content:"";}.qpf.qpf-angle-double-left:before{content:"";}.qpf.qpf-angle-double-down:before{content:"";}.qpf.qpf-angle-double-up:before{content:"";}.qpf.qpf-chevron-right:before{content:"";}.qpf.qpf-chevron-left:before{content:"";}.qpf.qpf-chevron-down:before{content:"";}.qpf.qpf-chevron-up:before{content:"";}.qpf.qpf-plus:before{content:"";}.qpf.qpf-minus:before{content:"";}.qpf.qpf-dot-circle-o:before{content:"";}.qpf.qpf-plus-circle-o:before{content:"";}.qpf.qpf-minus-circle-o:before{content:"";}.qpf.qpf-plus-circle:before{content:"";}.qpf.qpf-minus-circle:before{content:"";}.qpf.qpf-play-circle-o:before{content:"";}.qpf.qpf-pause-circle-o:before{content:"";}.qpf.qpf-stop-circle-o:before{content:"";}.qpf.qpf-play-circle:before{content:"";}.qpf.qpf-pause-circle:before{content:"";}.qpf.qpf-stop-circle:before{content:"";}.qpf.qpf-upload:before{content:"";}.qpf.qpf-download:before{content:"";}.qpf.qpf-import:before{content:"";}.qpf.qpf-export:before{content:"";}.qpf.qpf-filter-o:before{content:"";}.qpf.qpf-sign-in:before{content:"";}.qpf.qpf-sign-out:before{content:"";}.qpf.qpf-sign-out:before{content:"";}.qpf.qpf-ellipsis-square-v:before{content:"";}.qpf.qpf-ellipsis-square-h:before{content:"";}.qpf.qpf-ellipsis-circle-v:before{content:"";}.qpf.qpf-ellipsis-circle-h:before{content:"";}.qpf.qpf-th-large:before{content:"";}.qpf.qpf-th:before{content:"";}.qpf.qpf-check-square-o:before{content:"";}.qpf.qpf-list-alt:before{content:"";}.qpf.qpf-picture-o:before{content:"";}.qpf.qpf-picture-o:before{content:"";}.qpf.qpf-comment-o:before{content:"";}.qpf.qpf-envelope-o:before{content:"";}.qpf.qpf-hashtag:before{content:"";}.qpf.qpf-star-o:before{content:"";}.qpf.qpf-star:before{content:"";}.qpf.qpf-calendar:before{content:"";}.qpf.qpf-heart-o:before{content:"";}.qpf.qpf-heart:before{content:"";}.qpf.qpf-smile-o:before{content:"";}.qpf.qpf-smile:before{content:"";}.qpf.qpf-comment-square-o:before{content:"";}.qpf.qpf-comment-square:before{content:"";}.qpf.qpf-thumbs-o-up:before{content:"";}.qpf.qpf-thumbs-up:before{content:"";}.qpf.qpf-times-o:before{content:"";}.qpf.qpf-times:before{content:"";}.qpf.qpf-calculator:before{content:"";}.qpf.qpf-palette:before{content:"";}.qpf.qpf-spinner:before{content:"";}.qpf.qpf-yesno:before{content:"";}.qpf.qpf-page-view:before{content:"";}.qpf.qpf-skip:before{content:"";}.qpf.qpf-text:before{content:"";}.qpf.qpf-progress:before{content:"";}.qpf.qpf-single-text:before{content:"";}.qpf.qpf-multi-text:before{content:"";}.qpf.qpf-scale:before{content:"";}.qpf.qpf-slider:before{content:"";}.qpf.qpf-question-group:before{content:"";}.qpf.qpf-repeat:before{content:"";}.qpf.qpf-tracking:before{content:"";}.qpf.qpf-ranking:before{content:"";}.qpf-spin{display:block;-webkit-animation:qpf-spin 2s infinite linear;animation:qpf-spin 2s infinite linear;}@-webkit-keyframes qpf-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes qpf-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}} /*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2015 Hakim El Hattab, http://hakim.se */.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1} /*! jQuery UI - v1.11.4 - 2015-03-11 * http://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px * Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; min-height: 0; /* support: IE7 */ font-size: 100%; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-dialog { overflow: hidden; position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 12px; height: 12px; right: -5px; bottom: -5px; background-position: 16px 16px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; /* Support: IE7 */ overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; z-index:20001; } .ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; text-decoration: none; cursor: pointer; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; margin-top: -8px; position: absolute; top: 50%; } .ui-selectmenu-button span.ui-selectmenu-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em; display: block; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* vertically center icon */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url("../images/jquery-ui/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url("../images/jquery-ui/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url("../images/jquery-ui/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url("../images/jquery-ui/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #212121; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url("../images/jquery-ui/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #fcefa1; background: #fbf9ee url("../images/jquery-ui/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url("../images/jquery-ui/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("../images/jquery-ui/ui-icons_222222_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("../images/jquery-ui/ui-icons_222222_256x240.png"); } .ui-state-default .ui-icon { background-image: url("../images/jquery-ui/ui-icons_888888_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url("../images/jquery-ui/ui-icons_454545_256x240.png"); } .ui-state-active .ui-icon { background-image: url("../images/jquery-ui/ui-icons_454545_256x240.png"); } .ui-state-highlight .ui-icon { background-image: url("../images/jquery-ui/ui-icons_2e83ff_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("../images/jquery-ui/ui-icons_cd0a0a_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa url("../images/jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url("../images/jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ border-radius: 8px; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 8px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(../images/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-dark-thin .mCSB_draggerContainer { top:10px;bottom:10px; } .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color:#9ca9b1; } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ /* HELPERS */ .mCS-nomargin .mCSB_container { margin:0; } @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.short { -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.long { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes singleflash { from, to { opacity: 1; } 50% { opacity: 0.1; } } @keyframes singleflash { from, to { opacity: 1; } 50% { opacity: 0.1; } } .singleflash { -webkit-animation-name: singleflash; animation-name: singleflash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .btn { font-family: 'Open Sans', sans-serif; font-size: 14px; outline: none; } .btn:active, .btn:focus, .btn.focus { outline: none !important; -webkit-appearance: none; } .btn-success { background-color: #91e248; } .btn-success:hover { background-color: #a9e770; border-color: #79bc3d; } .btn-success:active, .btn-success:focus, .btn-success.focus { background-color: #79bc3d; border-color: #79bc3d; } *, *:before, *:after { margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { background-color: #f5f6fa; font-family: 'Open Sans', sans-serif; font-size: 11px; line-height: 1.25; height: 100%; color: #0c1b38; margin: 0; padding: 0; } h1 { color: #1a232d; } h2, h3, h4, h5, h6 { color: #1a232d; } h2 { font-weight: initial; font-size: initial; } h2.add-content { color: #475b79 !important; font-size: 22px; font-family: 'Open Sans'; font-weight: bold; line-height: 1.3; } .h1, .h2, .h3, h1, h2, h3 { font-family: 'Ubuntu', sans-serif, Verdana; margin: 0; } /* fields */ select { padding: 4px 10px; font-size: 12px; border: 1px solid #c2c6c9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; vertical-align: middle; } textarea { font-family: 'Open Sans', sans-serif; font-size: 12px; padding: 4px 10px; outline: none; border: 1px solid #c2c6c9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } label { display: inline-block; margin-bottom: 5px; font-size: 12px; font-weight: normal; } input { vertical-align: middle; padding: 4px 10px; font-size: 12px; line-height: 17px; border: 1px solid #c2c6c9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input[type=checkbox]:active, input[type=checkbox]:focus, input[type=radio]:active, input[type=radio]:focus { outline: none; } input:disabled { border: 1px solid #E3E3E3; background-color: #F7F7F7; color: #8A8A8A; } button { outline: none; } a { outline: none; text-decoration: none; color: #69788d; } a > img { outline: none; } a:focus, a:hover, a:active { text-decoration: none; color: #10183d; outline: none; } a:hover { color: #10183d; } ::-ms-clear { display: none; } .modal { right: auto; bottom: auto; } #questionTable { margin-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 30px; } .questionTableCell { vertical-align: top; padding: 4px; } .questionPhone { width: 400px; margin-top: 15px; margin-left: auto; margin-right: auto; vertical-align: middle; } #questionContent { background-color: White; width: 600px; padding: 0; margin-top: 15px; margin-bottom: 15px; margin-left: auto; margin-right: auto; border: solid 1px gray; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #questionHeader { height: 20px; margin: 0; margin-top: 10px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; vertical-align: middle; text-align: right; font-weight: bold; font-size: 11px; /*background-image:url('../images/table_header_bck.png'); background-repeat:repeat-x;*/ } #questionForm { width: 400px; margin-left: 108px; text-align: left; font-size: 15px; } #questionForm input[type='radio'], #questionForm input[type='checkbox'] { cursor: pointer; margin-bottom: 10px; } #questionForm label { cursor: pointer; padding: 5px; max-width: 215px; } #questionForm label:hover { background-color: #CCCCCC; } .playerTime { float: right; font-size: larger; font-weight: bold; color: #37414A; vertical-align: middle; margin-top: 0px; line-height: 32px; margin-right: 10px; } .loading-box { display: none; float: right; color: #37414A; vertical-align: middle; margin-top: 0px; line-height: 32px; margin-right: 10px; } /*.player-refresh { float: right; width: 32px; height: 32px; background-image: url('../images/refresh.png'); background-repeat: no-repeat; cursor: pointer; } .player-refresh:hover { background-position: bottom left; }*/ #questionContent .questionNext { text-align: right; margin: 10px 30px 30px 30px; } #preview { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #484848; opacity: 0.4; filter: alpha(opacity=40); z-index: 90; } #previewBox { width: 400px; position: absolute; margin-top: 100px; margin-left: auto; margin-right: auto; padding: 5px; background-color: #efeded; text-align: left; font-size: 14px; font-weight: bold; border: solid 2px #ea992e; z-index: 100; } .editor td { padding: 0px; } /* NEEEEEEEEEEEEEEEEW */ .user-profile .link { display: block; font-size: 12px; color: #fff; line-height: 33px; background-color: #1A232D; border: 1px solid #0E1419; border-right: 0; padding: 0px 15px 0px 15px; /*margin-top: 12px;*/ border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .user-profile .link:hover { color: #91e248; } .logout-link { display: block; background-image: url(../images/logout_btn.png); width: 37px; height: 39px; margin-top: -2px; } .logout-link:hover { background-position: 0 -39px; } .logout-link:active { background-position: 0 -78px; } header { position: relative; z-index: 6; background-color: #232d3c; height: 50px; width: 100%; min-width: 980px; background-repeat: repeat-x; -webkit-box-shadow: inset 0px -10px 10px -10px #232d3c; -moz-box-shadow: inset 0px -10px 10px -10px #232d3c; box-shadow: inset 0px -10px 10px -10px #232d3c; } header:after { clear: both; } header .logo { float: left; } header .logo a { display: block; width: 80px; height: 50px; background-image: url(../images/qpoint_logo.png); background-repeat: no-repeat; background-position: center; } header .menu-container { display: inline-block; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; } header .menu-container ul { color: #7889A4; margin: 0; padding: 0; list-style: none; } header .menu-container ul li { float: left; margin: 0; padding: 0; } header .menu-container ul a { display: block; font-size: 14px; line-height: 50px; padding: 0 20px 0 20px; color: #7889A4; text-decoration: none; } header .menu-container ul a:before { content: ''; display: inline-block; width: 20px; height: 18px; vertical-align: text-bottom; margin-right: 6px; background-image: url(../images/header_menu_ico_20x18px.png); } header .menu-container ul a:hover { color: #ffffff; /*background-color:#2b3646;*/ } header .menu-container .active-menu a { color: #ffffff; background-color: #2c3748; -webkit-box-shadow: inset 0px -10px 10px -10px #232d3c; -moz-box-shadow: inset 0px -10px 10px -10px #232d3c; box-shadow: inset 0px -10px 10px -10px #232d3c; } header .menu-container ul a.forms:before { background-position: 0px 0; } header .menu-container ul a.users:before { background-position: -20px 0; } header .menu-container ul a.outreach:before { background-position: -40px 0; } header .menu-container ul .active-menu a.forms:before, header .menu-container ul a.forms:hover:before { background-position: 0px -18px; } header .menu-container ul .active-menu a.users:before, header .menu-container ul a.users:hover:before { background-position: -20px -18px; } header .menu-container ul .active-menu a.outreach:before, header .menu-container ul a.outreach:hover:before { background-position: -40px -18px; } header .menu-container ul li > .sub { display: none; } header .menu-container ul li > .sub li { display: block; float: none; } header .menu-container ul li > .sub li a { display: block; width: 120px; text-decoration: none; font-size: 10px; line-height: normal; color: #fff; border: none; padding: 7px 10px 7px 10px; background: #344356; border-top: 1px solid #242f3b; white-space: nowrap; } header .menu-container ul li > .sub li:hover a { background: #242f3b; } header .menu-container ul li:hover > .sub { display: block; position: absolute; top: 50px; z-index: 10; } header .menu-container ul li > .sub:hover + a { color: #fff; background-color: #314254; background-image: url(../images/headerselected.jpg); background-repeat: repeat-x; } header .menu-container { position: relative; } header .menu-container ul li:hover > .submenu { display: block !important; } header .menu-container .submenu { background-color: #2c3748; display: none; } header .menu-container .submenu li { display: block; float: none; } header .menu-container .submenu li a { background-color: transparent; } header .menu-container .submenu li a:before { display: none; } header > .menu-left-container { display: block; position: absolute; left: 0; top: 0; } header > .menu-right-container { display: block; position: absolute; top: 0; right: 25px; } header .menu-right-container > ul { list-style: none; } header .menu-right-container > ul > li { position: relative; display: inline-block; height: 50px; } /* ACCOUNTS CONTAINER */ header .menu-right-container .accounts-container .bootstrap-select { height: 25px; } header .menu-right-container .accounts-container .bootstrap-select .dropdown-toggle { padding-bottom: 3px; padding-top: 3px; font-size: 12px; } /* WATCH TUTORIAL */ header .menu-right-container .tutorial { font-size: 12px; margin-right: 30px; } header .menu-right-container .tutorial a { line-height: 50px; color: #7d92ac; } header .menu-right-container .tutorial a:hover { color: #91e248; text-decoration: underline; } header .menu-right-container .tutorial a .fa { margin-right: 5px; } /* PROFILE */ header .menu-right-container > ul > li.profile-top-menu { margin-right: 8px; vertical-align: top; } header .menu-right-container > ul > li.profile-top-menu .profile-name { display: inline-block; color: #7d92ac; line-height: 50px; vertical-align: top; font-size: 10px; } header .menu-right-container > ul > li.profile-top-menu .profile-icon { /*position:absolute;top:0px;right:0px;*/ display: inline-block; width: 45px; height: 50px; } header .menu-right-container > ul > li.profile-top-menu .profile-icon .ico { display: block; margin-top: 8px; margin-left: auto; margin-right: auto; width: 33px; height: 33px; background-image: url(../images/profile_meni_icon.png); background-repeat: no-repeat; background-position: 0 0; } header .menu-right-container > ul > li.profile-top-menu .profile-icon:after { content: ''; position: absolute; top: 22px; right: -8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #7d92ac; } header .menu-right-container > ul > li.profile-top-menu .profile-icon:hover:after { border-top: 5px solid #91e248; } header .menu-right-container > ul > li.profile-top-menu:hover .profile-icon:after { border-top: 5px solid #91e248; } header .menu-right-container > ul > li.profile-top-menu:hover .profile-icon .ico { background-position: 0 -33px; } /* SETTINGS */ header .menu-right-container > ul > li.settings-top-menu { width: 45px; } header .menu-right-container > ul > li.settings-top-menu .settings-icon { position: absolute; top: 0px; right: 0px; display: block; width: 45px; height: 50px; } header .menu-right-container > ul > li.settings-top-menu .settings-icon .ico { display: block; margin-top: 10px; margin-left: auto; margin-right: auto; width: 26px; height: 30px; background-image: url(../images/top-settings-icon.png); background-repeat: no-repeat; background-position: 0 0; } header .menu-right-container > ul > li.settings-top-menu:hover .settings-icon .ico { background-position: 0 -30px; } header .menu-right-container > ul li .sub { display: none; background-color: #fff; list-style: none; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); } header .menu-right-container > ul li > ul:before { content: ''; position: absolute; top: -6px; right: 15px; border-right: 8px solid transparent; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-bottom-color: #fff; } header .menu-right-container > ul li > .sub li { display: block; position: relative; line-height: 22px; min-width: 180px; } header .menu-right-container > ul li > .sub li.nohover:hover { background-color: #fff !important; } header .menu-right-container > ul li > .sub li.profile-details .badge { border-radius: 0.125rem; font-size: 11px; font-weight: initial; line-height: 1; padding: 0.375rem 0.5625rem; font-family: "opensans-medium", sans-serif; width: 100%; text-align: center; } header .menu-right-container > ul li > .sub li.profile-details .badge.badge-secondary { border: 1px solid #7388ab; color: #fff; background-color: #7388ab; } header .menu-right-container > ul li > .sub li.profile-details .badge.badge-warning { border: 1px solid #fbd54a; color: #fff; background-color: #fbd54a; } header .menu-right-container > ul li > .sub li.profile-details .profile-details-responses .profile-details-responses-title { margin-top: 6px; margin-bottom: -6px; } header .menu-right-container > ul li > .sub li.profile-details .profile-details-responses .progress .progress-bar { background-color: #91e248; } header .menu-right-container > ul li > .sub li a { display: block; padding: 4px 35px 4px 35px; font-size: 11px; color: #0c1b38; border-bottom: 1px solid #e7eff2; margin: 0 3px; } header .menu-right-container > ul li > .sub li a.ico-padding { padding-left: 45px; } header .menu-right-container > ul li > .sub li:hover { background-color: #314254; } header .menu-right-container > ul li > .sub li:hover a { color: #fff; border-bottom: 1px solid transparent; } header .menu-right-container > ul li:hover > .sub { display: block; position: absolute; z-index: 99; top: 50px; right: 0; } header .menu-right-container > ul li > .sub li a.logout { border: none; background-color: #1d2731; color: #d0d0d0; margin: 0; } header .menu-right-container > ul li > .sub li:hover a.logout { color: #fff; } header .menu-right-container > ul li > .sub li a span { display: block; position: absolute; top: 8px; left: 20px; background-image: url(../images/profile_menu_sprite.png); } header .menu-right-container > ul li > .sub li a span.profile { width: 14px; height: 14px; background-position: 0 0; } header .menu-right-container > ul li > .sub li:hover a span.profile { background-position: 0 -14px; } header .menu-right-container > ul li > .sub li a span.account { width: 14px; height: 14px; background-position: -14px 0; } header .menu-right-container > ul li > .sub li:hover a span.account { background-position: -14px -14px; } header .menu-right-container > ul li > .sub li a span.logout { width: 14px; height: 14px; background-position: -28px 0; } header .menu-right-container > ul li > .sub li:hover a span.logout { background-position: -28px -14px; } header .menu-right-container > ul li > .sub li a span.invoice { width: 14px; height: 14px; background-position: -42px 0; } header .menu-right-container > ul li > .sub li:hover a span.invoice { background-position: -42px -14px; } header .menu-right-container > ul li > .sub li a span.upgrade { width: 14px; height: 14px; background-position: -56px 0; } header .menu-right-container > ul li > .sub li:hover a span.upgrade { background-position: -56px -14px; } header .menu-right-container > ul li > .sub li a span.team { width: 14px; height: 14px; background-position: -84px 0; } header .menu-right-container > ul li > .sub li:hover a span.team { background-position: -84px -14px; } header .menu-right-container > ul li > .sub li a span.settings { width: 14px; height: 14px; background-position: -70px 0; } header .menu-right-container > ul li > .sub li:hover a span.settings { background-position: -70px -14px; } .mc { position: relative; height: auto !important; min-width: 980px; height: calc(100% - 50px); min-height: calc(100% - 50px); /*padding-bottom:30px;*/ background-image: url(../images/wrapper_background.png); background-position: top center; } .mc div.mc-pad { padding: 25px; } .mc > div.mcnotfull { width: 1024px; min-width: 1024px; padding: 20px; margin-left: auto; margin-right: auto; } .mc div.mc-title { position: relative; top: 0; left: 0; right: 0; z-index: 5; height: 50px; background-color: #2c3748; color: #ffffff; font-size: 10px; border-bottom: 1px solid #232d3c; } .mc div.mc-title h1 { float: left; padding-left: 25px; color: #f5f6fa; line-height: 50px; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: bold; } .mc div.mc-title h1.editor { cursor: pointer; } .mc div.mc-title h1.editor:hover { text-decoration: underline; } .mc div.mc-title div.create-form-button { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); background-color: #91e248; color: #fff; width: 46px; height: 46px; border-radius: 100px; border: 1px solid #79bc3d; text-align: center; line-height: 44px; font-size: 22px; font-weight: bold; -webkit-box-shadow: 0px 6px 12px 0px rgba(44, 55, 72, 0.3); -moz-box-shadow: 0px 6px 12px 0px rgba(44, 55, 72, 0.3); box-shadow: 0px 6px 12px 0px rgba(44, 55, 72, 0.3); transition: width 0.3s ease-out; white-space: nowrap; } .mc div.mc-title div.create-form-button a { position: absolute; top: 0; display: inline-block; font-size: 14px; color: #fff; width: 50%; padding-left: 15px; padding-right: 15px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.6s ease-in; -webkit-animation-play-state: initial; -moz-animation-play-state: initial; -o-animation-play-state: initial; animation-play-state: initial; } .mc div.mc-title div.create-form-button a.left { left: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; } .mc div.mc-title div.create-form-button a.right { right: 0; border-top-right-radius: 100px; border-bottom-right-radius: 100px; } .mc div.mc-title div.create-form-button a:hover { background-color: #79bc3d; } .mc div.mc-title div.create-form-button .icon { display: block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; } .mc div.mc-title div.create-form-button .title { display: none; top: 0px; position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1em; padding: 6px 12px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .mc div.mc-title div.create-form-button:hover { width: 255px; font-size: 16px; } .mc div.mc-title div.create-form-button:hover .icon { visibility: hidden; opacity: 0; } .mc div.mc-title div.create-form-button:hover a { visibility: visible; opacity: 1; } .mc div.mc-title div.create-form-button:hover .title { display: block; animation: create 0.5s; animation-fill-mode: forwards; } @keyframes create { 0% { top: 0px; } 25% { top: -5px; } 100% { top: -22px; } } .mc div.mc-title h1 input.title-editor { min-width: 200px; background-color: #27323e; border: 1px solid #18212a; padding: 0px 10px; margin: 0 0 0 -10px; color: #f5f6fa; font-size: 14px; height: 35px; } .mc div.mc-title h1.desc { line-height: 1em; margin-top: 14px; } .mc div.mc-title h1.desc span { display: block; margin-top: 2px; font-size: 11px; font-weight: normal; color: #7889a4; } .mc div.mc-title .survey-play-container { display: inline-block; float: right; margin-top: 20px; margin-right: 25px; } .mc .mc-sidebars { position: absolute; top: 50px; left: 0; bottom: 0px; z-index: 4; background-color: #d7dce2; } .mc .mc-sidebars.mc-sidebars-right { left: auto; right: 0; } .mc .mc-sidebars .mc-sidebar { position: relative; float: left; height: 100%; min-height: 100% !important; -webkit-box-shadow: 1px 0px 3px 0px rgba(43, 54, 70, 0.5); -moz-box-shadow: 1px 0px 3px 0px rgba(43, 54, 70, 0.5); box-shadow: 1px 0px 3px 0px rgba(43, 54, 70, 0.5); } .mc .mc-sidebars .mc-sidebar .mc-sidebar-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; } .mc .mc-sidebars .mc-sidebar .mc-sidebar-content .grid-filters > div { margin-bottom: 8px; } .mc .mc-sidebars .mc-sidebar .mc-sidebar-content .grid-filters > div label { font-size: 12px; color: #575f6f; } .mc .mc-sidebars .mc-sidebar .mc-sidebar-content .grid-filters > div input, .mc .mc-sidebars .mc-sidebar .mc-sidebar-content .grid-filters > div select { color: #575f72; } .mc .mc-sidebars .mc-sidebar .mc-sidebar-content .grid-filters > div .search-term-icon { position: absolute; top: 3px; right: 2px; display: block; background-image: url(../images/search_ico.png); width: 20px; height: 20px; margin-left: -20px; } .mc .mc-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin-top: 50px; margin-bottom: 0px; overflow-y: auto; z-index: 3; } footer { position: relative; right: 0; bottom: 0; left: 0; min-width: 900px; } footer div { position: absolute; bottom: 0; left: 0; right: 0; line-height: 30px; margin-top: -32px; text-align: center; background-size: cover; background-color: #1A232D; color: #D6D6D6; } footer div a { font-size: 11px; color: #69788d; } footer div a:hover { color: #fff; } .create-container { margin-top: 70px; } .create-container .options .option { margin-bottom: 6px; position: relative; } .create-container .options .option .option-header { position: relative; width: 100%; font-size: 16px; font-weight: bold; background-color: #d7dce3; border-radius: 3px; border: 1px solid #9ca9b1; color: #0c1b38; line-height: 60px; padding-left: 70px; cursor: pointer; } .create-container .options .option .option-header:hover { background-color: #becadb; color: #0c1b38; } .create-container .options .option .option-header .radio { position: absolute; top: 20px; left: 25px; display: block; margin: 0; padding: 0; width: 20px; height: 20px; background-image: url(../images/create_radion_btn.png); background-repeat: no-repeat; } .create-container .options .option.selected { margin-bottom: 20px; } .create-container .options .option.selected .option-header { background-color: #d7f0c4; border: 1px solid #b3cba2; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .create-container .options .option.selected .option-header .radio { background-position: 0 -20px; } .create-container .options .option .option-body { display: none; position: relative; width: 100%; margin-top: -1px; background-color: #fff; border: 1px solid #b3cba2; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .create-container .options .option .option-body .option-body-wrapper { padding: 20px 70px; } .create-container #selExistingSurveys option.locked { color: #ffd800; } .create-container .templateCategoryListContainer { display: inline-block; vertical-align: top; margin: 0; padding: 0; } .create-container .templateCategoryListContainer .category { display: block; position: relative; width: 310px; line-height: 40px; background-color: #f9fdf6; border-bottom: 1px solid #b3cba2; color: #0c1b38; font-size: 14px; padding-left: 45px; border-right: 1px solid #b3cba2; cursor: pointer; } .create-container .templateCategoryListContainer .category:hover, .create-container .templateCategoryListContainer .category.active { background-color: #91e248; color: #fff; } .create-container .templateCategoryListContainer .category .count { position: absolute; display: block; top: 8px; right: 10px; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 50px; border: 1px solid transparent; background-color: #bddea1; color: #fff; font-size: 10px; } .create-container .templateCategoryListContainer .category:hover .count, .create-container .templateCategoryListContainer .category.active .count { background-color: #75b939; } .create-container .templateListContainer { display: inline-block; /*height:366px;*/ width: 668px; margin: 0; padding: 0; } .create-container .templateListContainer .template { padding: 0 30px 30px 30px; width: 100%; } .create-container .templateListContainer .template:first-child { padding-top: 30px; } .create-container .templateListContainer .template h3 { font-size: 20px; font-weight: bold; color: #0c1b38; margin-bottom: 8px; } .create-container .templateListContainer .template .desc { width: 100%; font-size: 14px; font-style: italic; color: #0c1b38; margin-bottom: 10px; } .create-container .templateListContainer .template .question-count { font-size: 12px; color: #575f6f; margin-bottom: 15px; } #configMenuContainer ul { list-style: none; width: 100%; } #configMenuContainer ul li { position: relative; outline: none; border-bottom: 1px solid #cacfd3; background-color: #e9edf1; } #configMenuContainer ul li:hover { background-color: #e3e8ed; } #configMenuContainer ul li.menu-item a { display: block; width: 100%; padding: 14px 30px; text-align: left; color: #595f6b; font-size: 12px; outline: none; } #configMenuContainer ul li.menu-item a span.text { display: inline-block; margin: 0 auto; vertical-align: middle; font-size: 10px; } #configMenuContainer ul li.menu-item a span.text strong { display: block; margin-bottom: 4px; font-size: 12px; } #configMenuContainer ul li.menu-item a:hover { color: #28323b; } #configMenuContainer ul li.menu-item.selected a:hover { color: #28323b; } #configMenuContainer ul li.menu-item.selected:after { display: block; content: ''; position: absolute; top: 50%; right: 15px; width: 14px; height: 22px; transform: translateY(-50%); background-image: url(../images/collect_sidebar_right_arrow.png); } #configOptionsContainer { background-color: #f5f6fa; } #configOptionsContainer .configPanel { position: relative; } #configOptionsContainer .configPanel .title-container { position: fixed; top: 100px; width: 100%; z-index: 100; background-color: #f5f6fa; padding-top: 17px; border-bottom: 1px solid #cacfd3; padding-bottom: 12px; } #configOptionsContainer .configPanel .title-container h2.title { color: #28323b; font-weight: bold; font-size: 20px; } #configOptionsContainer .configPanel .title-container .desc { padding-top: 5px; font-size: 11px; color: #0c1b38; } #configOptionsContainer .configPanel .title-container .action-container { position: absolute; top: 50%; left: 250px; transform: translateY(-50%); } #configOptionsContainer .configPanel .content-container { padding: 70px 0 20px 0; } #configOptionsContainer .configPanel .content-container h2 { font-weight: bold; font-size: 18px; margin-bottom: 20px; } #configOptionsContainer .configPanel .content-container h2:not(:first-of-type) { margin-top: 20px; } #configOptionsContainer .configPanel .content-container h2 .subdesc { display: block; margin-top: 4px; font-size: 10px; font-weight: normal; } #configOptionsContainer .configPanel .content-container h4 { font-size: 16px; } #collectMenuContainer ul { list-style: none; width: 100%; } #collectMenuContainer ul li { position: relative; outline: none; border-bottom: 1px solid #cacfd3; background-color: #e9edf1; } #collectMenuContainer ul li:hover { background-color: #e3e8ed; } #collectMenuContainer ul li.menu-item.selected:after { display: block; content: ''; position: absolute; top: 36px; right: 15px; width: 14px; height: 22px; background-image: url(../images/collect_sidebar_right_arrow.png); } #collectMenuContainer ul li.menu-item a { display: block; width: 100%; padding: 14px 30px; text-align: left; color: #595f6b; font-size: 12px; outline: none; } #collectMenuContainer ul li.menu-item a span.ico { display: inline-block; width: 58px; height: 62px; margin-right: 20px; vertical-align: middle; background-image: url(../images/collect_response_ico.png); } #collectMenuContainer ul li.menu-item a span.text { display: inline-block; margin: 0 auto; max-width: 140px; vertical-align: middle; font-size: 10px; } #collectMenuContainer ul li.menu-item a span.text strong { display: block; margin-bottom: 4px; font-size: 12px; } #collectMenuContainer ul li.menu-item.selected a, #collectMenuContainer ul li.menu-item a:hover { color: #28323b; } /*icons*/ #collectMenuContainer ul li.menu-item a.social span.ico { background-position: 0 -62px; } #collectMenuContainer ul li.menu-item a.social:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.social span.ico { background-position: 0 0; } #collectMenuContainer ul li.menu-item a.embed span.ico { background-position: -58px -62px; } #collectMenuContainer ul li.menu-item a.embed:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.embed span.ico { background-position: -58px 0; } #collectMenuContainer ul li.menu-item a.link span.ico { background-position: -116px -62px; } #collectMenuContainer ul li.menu-item a.link:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.link span.ico { background-position: -116px 0; } #collectMenuContainer ul li.menu-item a.qr span.ico { background-position: -174px -62px; } #collectMenuContainer ul li.menu-item a.qr:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.qr span.ico { background-position: -174px 0; } #collectMenuContainer ul li.menu-item a.cati span.ico { background-position: -232px -62px; } #collectMenuContainer ul li.menu-item a.cati:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.cati span.ico { background-position: -232px 0; } #collectMenuContainer ul li.menu-item a.sms span.ico { background-position: -290px -62px; } #collectMenuContainer ul li.menu-item a.sms:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.sms span.ico { background-position: -290px 0; } #collectMenuContainer ul li.menu-item a.email span.ico { background-position: -348px -62px; } #collectMenuContainer ul li.menu-item a.email:hover span.ico, #collectMenuContainer ul li.menu-item.selected a.email span.ico { background-position: -348px 0; } #collectOptionsContainer .collectPanel { display: none; } #collectOptionsContainer .collectPanel .title { font-size: 18px; font-weight: bold; color: #28323b; border-bottom: 1px solid #c8d0d3; padding-bottom: 12px; margin-bottom: 18px; } #collectOptionsContainer .collectPanel .desc { font-size: 12px; padding: 0; margin-bottom: 10px; } #collectOptionsContainer textarea { width: 100%; background-color: #fff; border: 1px solid #9ca9b1; font-family: "Courier New", Courier, monospace; padding: 10px 50px 10px 25px; font-weight: bold; font-size: 14px; outline: none; resize: none; overflow: hidden; } #collectOptionsContainer textarea::selection { background-color: #91e248; } #collectOptionsContainer .copy-block { position: absolute; top: 16px; right: 15px; height: 24px; cursor: pointer; } #collectOptionsContainer .copy-info { display: none; float: left; height: 24px; margin-right: 6px; text-align: center; padding: 0 6px; line-height: 22px; box-shadow: 2px 2px 6px #a9a9a9; color: #0c1b38; border-radius: 3px; font-size: 10px; z-index: 100; background-color: #fff; } #collectOptionsContainer .copy-button { width: 24px; height: 24px; float: left; background-image: url(../images/textarea-copy-icon.png); } .wrapper-start-player-container { margin-left: -30px; font-size: 14px; font-weight: bold; color: #0c1b38; } .player-command-play { display: inline-block; background-image: url(../images/play_ico.png); width: 40px; height: 40px; vertical-align: middle; } .player-command-play:hover { background-position: 0 -40px; } .player-command-stop { display: inline-block; background-image: url(../images/play_ico.png); width: 40px; height: 40px; background-position: 0 -80px; vertical-align: middle; } .player-command-stop:hover { background-position: 0 -120px; } .player-volume-container { position: absolute; top: 0px; right: 0px; text-align: center; } .player-volume-container span { display: block; font-size: 8px; font-weight: normal; color: #0c1b38; margin-top: 2px; margin-bottom: 2px; } .player-volume-container .player-command-volume-up, .player-volume-container .player-command-volume-down { display: block; width: 15px; height: 15px; background-color: #fbfbfb; background-image: url(../images/button_bg_gradient.png); font-size: 8px; line-height: 15px; border: 1px solid #c2c6c9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .player-volume-container .player-command-volume-up:hover, .player-volume-container .player-command-volume-down:hover { box-shadow: 0px 0px 2px 1px #5f6b82; border: 1px solid #0c1b38; } .image-command-preview { display: inline-block; background-image: url(../images/img_preview_ico.png); width: 40px; height: 40px; vertical-align: middle; } .image-command-preview:hover { background-position: 0 -40px; } .video-command-preview { display: inline-block; background-image: url(../images/vid_preview_ico.png); width: 40px; height: 40px; vertical-align: middle; } .video-command-preview:hover { background-position: 0 -40px; } .loadmask { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; zoom: 1; background-color: #fbfeff; opacity: 0.85; } .loadmask-msg { z-index: 20001; position: absolute; top: 0; left: 0; padding: 2px; color: #0c1b38; text-align: center; text-shadow: 1px 2px 2px #fff; font-size: 16px; } .loadmask-msg div { padding: 2px 2px 2px 90px; min-width: 90px; min-height: 90px; background: url('../images/loading.svg') no-repeat 2px 2px; line-height: 90px; font-size: 12px; cursor: wait; } #confirm-dialog { min-width: 250px; max-width: 400px; top: 175px; background-color: #F3F3F3; border-radius: 3px; box-shadow: 0px 0px 15px 2px #aab2be; z-index: 202001; } #confirm-dialog-caption { line-height: 40px; background-color: #212b35; padding: 15px 20px 15px 20px; border-top-left-radius: 3px; color: #9aa0a7; font-size: 10px; text-transform: uppercase; } #confirm-dialog-message { margin: 10px 10px 25px 10px; font-size: 14px; } #confirm-button-panel { width: 100%; margin: 0; margin-top: 30px; text-align: center; } #confirm-dialog .confirm-dialog-content { padding: 20px 20px 12px 20px; } .popup { z-index: 9999; position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background-color: #b4b8b9; } .popup-box { z-index: 20001; position: fixed; max-width: 850px; display: none; background-color: #f3f3f3; border-radius: 3px; box-shadow: 0px 0px 15px 2px #aab2be; } .popup-box.popup-box-extended { width: 990px; max-height: 90%; background-color: #fff !important; } .popup-box .popup-title { background-color: #212b35; padding: 15px 20px 15px 20px; border-top-left-radius: 3px; color: #9aa0a7; font-size: 10px; text-transform: uppercase; display: inline-block; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .popup-box .popup-close { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background-image: url(../images/close-confirm.png); background-repeat: no-repeat; cursor: pointer; } .popup-box .popup-close:hover { background-position: 0 -20px; } .popup-box .popup-close:active { background-position: 0 -40px; } .popup-box .popup-content { padding: 20px 20px 12px 20px; } .popup-box .popup-content.popup-content-extended { padding: 30px 20px 12px 20px !important; } .popup-box .popup-content label { font-size: 11px; } .popup-box .popup-content select { font-size: 12px; } .modal[role='dialog'] { right: 0; left: 0; } .modal[role='dialog'] .modal-dialog label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; } .modal[role='dialog'] .modal-dialog .modal-content { background-color: #f3f3f3; } .modal[role='dialog'] .modal-dialog .modal-content .modal-header { background-color: #212b35; } .modal[role='dialog'] .modal-dialog .modal-content .modal-header .close { color: #6a8096; opacity: 1; text-shadow: none; } .modal[role='dialog'] .modal-dialog .modal-content .modal-header .close:hover { color: #91e248; } .modal[role='dialog'] .modal-dialog .modal-content .modal-header .modal-title { color: #9aa0a7; font-size: 10px; text-transform: uppercase; } .form-main .form-content .form-group { margin-bottom: 12px; } .form-main .form-content label { font-size: 12px; } .form-main .form-content input { vertical-align: middle; } .form-main .form-content input[type='checkbox'] { margin-top: 0; } .form-main .form-content { padding: 25px; } .form-main .form-content .form-section { margin-bottom: 30px; } .form-main .form-content .form-section > h2 { margin-bottom: 20px; padding-bottom: 12px; font-size: 18px; font-weight: bold; color: #0c1b38; border-bottom: 1px solid #c8d0d3; } .form-main .form-content .form-section > h2.icon::before { content: ''; position: relative; display: inline-block; width: 35px; height: 30px; margin-right: 15px; top: 7px; background-image: url(../images/upgrade-title-icons.png); } .form-main .form-content .form-section > h2.icon.credit-card::before { background-position: -35px 0; } .form-main .form-content .form-section > h2.icon.euro::before { background-position: 0 0; } .form-main .form-content .form-section > h2.icon.billing::before { background-position: -70px 0; } .form-main .form-content .form-section > h2.icon.confirm::before { background-position: -105px 0; } .form-main .form-content .form-section > h2.icon.settings::before { background-position: -140px 0; } #pollsContainer a.start-survey { display: block; width: 16px; height: 16px; background-image: url(../images/start_survey_sprite.png); background-position: 0 0; } #pollsContainer a.start-survey:hover { background-position: 0 -16px; } #pollsContainer a.start-survey.disabled { background-position: 0 -32px; } #pollsContainer a.start-survey.disabled:hover { background-position: 0 -32px; } #media-select-dialog-form .popup-content { overflow-y: auto; } #media-upload-dialog .media-type-container { display: inline-block; /*width: 33%;*/ padding: 0 10px; vertical-align: middle; margin-top: 25% !important; margin-bottom: 10% !important; } #media-upload-dialog .media-type-container h2 { font-weight: bold; margin: 15px 0; font-size: 14px; } #media-upload-dialog .media-type-container h2.add-content { color: #475b79 !important; font-size: 22px; font-family: 'Open Sans'; font-weight: bold; line-height: 1.3; } #media-upload-dialog .media-type-container .desc { margin: 15px 0; } #media-upload-dialog .media-type-container .desc.desc-extended { color: #9B9ACB !important; line-height: 1.433; font-size: 12px !important; } #media-upload-dialog .media-type-container .media-button { display: inline-block; width: 90px; height: 90px; background-repeat: no-repeat; cursor: pointer; } #media-upload-dialog .media-type-container .media-button.video { background-image: url(../images/build_video_icons_large.png); } #media-upload-dialog .media-type-container .media-button.video:hover { background-image: url(../images/build_video_icons_large.png); } #media-upload-dialog .media-type-container .media-button.audio { background-image: url(../images/build_audio_icons_large.png); } #media-upload-dialog .media-type-container .media-button.audio:hover { background-image: url(../images/build_audio_icons_large.png); } #media-upload-dialog .media-type-container .media-button.image { background-image: url(../images/build_image_icons_large.png); } #media-upload-dialog .media-type-container .media-button.image:hover { background-image: url(../images/build_image_icons_large.png); } #media-upload-dialog .media-type-container .media-button.text { background-image: url(../images/build_text_icons_large.png); } #media-upload-dialog .media-type-container .media-button.text:hover { background-image: url(../images/build_text_icons_large.png); } #media-upload-dialog .media-file-upload-row, #media-upload-dialog .media-row { position: relative; width: 100%; height: 24px; line-height: 20px; border: 1px solid #dadada; background-color: #ecebeb; border-radius: 2px; margin-bottom: 6px; padding: 2px 8px; } #media-upload-dialog .media-file-upload-row.limit { background-color: #ffdede; } #media-upload-dialog .media-file-upload-row a.remove { position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; background-image: url(../images/upload_remove.png); cursor: pointer; } #media-upload-dialog .media-file-upload-row .title { position: absolute; z-index: 10; left: 24px; font-size: 11px; font-weight: bold; } #media-upload-dialog .media-file-upload-row .size { margin-left: 5px; font-size: 10px; font-weight: normal; } #media-upload-dialog .media-file-upload-row .progress-bar { position: absolute; z-index: 9; top: 0; left: 0; height: 22px; border-radius: 2px; width: 0%; background-color: #91e248; } #media-upload-dialog .media-file-upload-row .progress-bar .percentage { float: right; margin-right: 4px; font-size: 11px; } #media-upload-dialog .media-row .order { display: inline-block; font-weight: bold; text-align: right; padding-right: 8px; vertical-align: top; } #media-upload-dialog .media-row .title { display: inline-block; font-weight: bold; vertical-align: top; width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #media-upload-dialog .media-row .preview { display: inline-block; width: 26px; height: 19px; margin-top: -1px; margin-right: 10px; background-image: url(../images/build_addmedia_btn.png); background-position: 0 -19px; } #media-upload-dialog .media-row .preview.type-1 { background-position: -52px -19px; } #media-upload-dialog .media-row .preview.type-1:hover { background-position: -52px -38px; } #media-upload-dialog .media-row .preview.type-1.playing { background-position: -52px -57px; } #media-upload-dialog .media-row .preview.type-2 { background-position: -26px -19px; } #media-upload-dialog .media-row .preview.type-2:hover { background-position: -26px -38px; } #media-upload-dialog .media-row .preview.type-3 { background-position: 0 -19px; } #media-upload-dialog .media-row .preview.type-3:hover { background-position: 0 -38px; } #media-upload-dialog .media-row .preview.type-4 { background-position: -78px -19px; } #media-upload-dialog .media-row .preview.type-3:hover { background-position: -78px -38px; } #media-upload-dialog .media-row a.remove { position: absolute; right: 5px; top: 5px; width: 12px; height: 12px; background-image: url(../images/upload_remove.png); cursor: pointer; } #media-upload-dialog #media-text-container { position: relative; } #media-upload-dialog #media-text-container textarea { width: 100%; } #media-upload-dialog #media-video-container { position: relative; } #media-upload-dialog #media-video-container .youtube-icon { display: inline-block; width: 72px; height: 30px; vertical-align: middle; background-image: url(../images/youtube_ico.png); margin-right: 10px; } #media-upload-dialog #media-video-container .search-query-icon { position: absolute; top: 3px; right: 2px; display: block; background-image: url(../images/search_ico.png); width: 20px; height: 20px; margin-left: -20px; } #media-upload-dialog #media-video-container .list-container { /*min-height:100px;min-height:20px; max-height:400px;*/ max-height: 300px; overflow-y: auto; } #media-upload-dialog #media-video-container .list-container .video { display: table; border: 4px solid transparent; padding: 4px; border-radius: 3px; width: 98%; } #media-upload-dialog #media-video-container .list-container .video.selected { border: 4px solid #91e248; } #media-upload-dialog #media-video-container .list-container .video .image { display: table-cell; position: relative; width: 96px; padding-right: 5px; vertical-align: top; cursor: pointer; text-align: center; } #media-upload-dialog #media-video-container .list-container .video .image img { height: 72px; } #media-upload-dialog #media-video-container .list-container .video .image .play-overlay { position: absolute; top: 0; left: 0; display: block; width: 96px; height: 72px; background-image: url(../images/youtoube_play_background.png); } #media-upload-dialog #media-video-container .list-container .video .embedded { display: none; padding-right: 5px; } #media-upload-dialog #media-video-container .list-container .video .details { display: table-cell; vertical-align: top; cursor: pointer; } #media-upload-dialog #media-video-container .list-container .video .details h2 { font-size: 14px; font-weight: bold; margin-bottom: 5px; } #media-upload-dialog #media-video-container .list-container .video .details .desc { height: 28px; } #media-upload-dialog #media-video-container .list-container .video .details .date { color: #b0b9bf; } #tutorialModal .firstTimeUser { text-align: center; } #tutorialModal .firstTimeUser h2 { font-size: 28px; font-weight: bold; margin-bottom: 15px; } #tutorialModal .firstTimeUser p { font-size: 16px; margin-bottom: 15px; } .tabs { text-align: right; height: 60px; margin-right: 20px; } .tabs-button { margin-left: -5px; margin-top: 12px; padding: 0px 15px 0px 15px; height: 36px; line-height: 34px; display: inline-block; vertical-align: top; background-color: #1f2933; background-image: url(../images/tab-button-background.png); background-repeat: repeat-x; border: 1px solid #18212a; font-size: 11px; color: #7d92ac; text-transform: uppercase; cursor: pointer; } .tabs > a.tabs-button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .tabs > a.tabs-button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } a.tabs-button { font-size: 11px; } a.tabs-button:hover, a.tabs-button:focus { color: #80c642; } a.tabs-button.tabs-selected:hover { color: #80c642; } .tabs-selected { background-color: #18212a; background-position: 0px bottom; color: #80c642; } .tabs a.tab-configure-icon:before { content: ''; display: block; width: 16px; height: 16px; margin-top: 9px; background-image: url(../images/tab-options.png); background-position: 0 0; } .tabs a.tab-configure-icon:hover:before { background-position: 0 bottom; } #btPreviewSurvey.tab-preview-icon { float: right; display: inline-block; margin-left: 18px; margin-right: 25px; margin-top: 22px; line-height: 18px; font-size: 12px; color: #7d92ac; } #btPreviewSurvey.tab-preview-icon:hover { color: #80c642; } #btPreviewSurvey.tab-preview-icon:before { content: ''; display: inline-block; margin-right: 6px; width: 22px; height: 18px; vertical-align: top; background-image: url(../images/survey_preview_button.png); background-position: 0 0; } #btPreviewSurvey.tab-preview-icon:hover:before { background-position: 0 -18px; } .tabs-selected > .tab-options-icon { background-position: 0 bottom; } .back-button { float: left; display: inline-block; margin-top: 8px; margin-left: 20px; height: 35px; width: 35px; border-radius: 3px; border: 1px solid #0a0d10; cursor: pointer; background-color: #18212a; background-image: url(../images/page-back.png); background-repeat: no-repeat; } .back-button:hover { background-position: 0px -35px; background-color: #1f2933; } .poll-status-slider { float: left; margin-top: 22px; margin-right: 15px; } .poll-status-slider > a { display: block; height: 20px; width: 50px; background-image: url(../images/slider.png); background-repeat: no-repeat; } .poll-status-slider:hover > a { background-position: -13px -20px; } .poll-status-slider .selected { background-position: -25px 0px; } .notify-container { display: none; position: fixed; z-index: 99999; top: 0px; left: 0px; height: 60px; width: 100%; background-color: #1F2832; text-align: center; -moz-opacity: 0.9; opacity: 0.9; } .notify-message { font-size: 20px; font-weight: bold; padding-top: 15px; padding-bottom: 15px; text-shadow: 1px 2px 2px #080808; } .notify-ok { color: #FAFAFA; } .notify-error { color: #F73434; } .optionIcon { display: inline-block; width: 10px; height: 10px; } .groupContainer a.groupTypeIcon { position: relative; } .groupContainer .single .groupTypeIcon:before, .groupContainer .multiple .groupTypeIcon:before, .groupContainer .textual .groupTypeIcon:before, .groupContainer .textarea .groupTypeIcon:before, .groupContainer .dropdown .groupTypeIcon:before { content: ''; position: absolute; top: 0px; left: -25px; width: 15px; height: 15px; background: url(../images/answergrouptype.png) no-repeat; } .groupContainer .single .groupTypeIcon:before { background-position: 0 0; } .groupContainer .multiple .groupTypeIcon:before { background-position: -15px 0; } .groupContainer .textual .groupTypeIcon:before { background-position: -30px 0; } .groupContainer .textarea .groupTypeIcon:before { background-position: -45px 0; } .groupContainer .dropdown .groupTypeIcon:before { background-position: -60px 0; } #line-separator { width: 100%; height: 9px; margin-bottom: 10px; border-bottom: 1px solid #e4e7eb; border-top: 1px solid #e4e7eb; } #line-separator p { border-bottom: 1px solid #e4e7eb; height: 4px; } .new-answer { display: inline-block; margin-top: -21px !important; margin-bottom: 21px !important; } .new-group { width: 200px; } .new-group .addNew-button { margin: 0; padding: 0px 30px 0px 10px; line-height: 43px; height: 43px; border: 1px solid #b0b9bf; border-radius: 5px; font-weight: bold; color: #69788d; position: relative; text-align: right; background-image: url(../images/gradient.jpg); background-repeat: repeat-x; } .new-group .button-ico { float: left; display: inline-block; background-image: url(../images/addanswer.png); height: 20px; width: 20px; position: relative; top: 12px; left: 17px; z-index: 1; } .new-group:hover .addNew-button { cursor: pointer; border: 1px solid #0A0D10; color: #0A0D10; } .new-group:hover .button-ico { background-position: 0px 20px; } .poll-grid { width: 100%; border-collapse: collapse; background-color: white; color: #10183d; font-size: 11px; border: 1px solid #b0b9bf; table-layout: fixed; } .poll-grid th { height: 20px; margin: 0; padding: 0px 14px 0px 14px; height: 45px; text-align: inherit; background-image: url(../images/grid-th.jpg); background-repeat: repeat-x; } .poll-grid th .sort-up { display: inline-block; height: 4px; margin-bottom: 2px; padding-left: 5px; padding-right: 5px; background-image: url(../images/grid-sort-arrows.png); background-repeat: no-repeat; } .poll-grid th .sort-down { display: inline-block; height: 4px; margin-bottom: 2px; padding-left: 5px; padding-right: 5px; background-image: url(../images/grid-sort-arrows.png); background-repeat: no-repeat; background-position: right 0px; } .poll-grid th > a { cursor: pointer; color: #69788d; } .poll-grid-header-sort { color: #10183d !important; font-weight: bold !important; text-decoration: none !important; } .poll-grid tr { text-align: center; margin: 0; /*border-bottom:1px solid #b0b9bf;*/ } .poll-grid tr:nth-child(even) { background-color: #fff; } .poll-grid tr:nth-child(odd) { background-color: #eceff4; } .poll-grid td { text-align: center; margin: 0; padding: 12px 10px 12px 10px; } .poll-grid td a { font-size: 11px; color: #316d97; } .poll-grid a:hover { color: #69ca16; } .poll-grid img { vertical-align: middle; } .poll-grid-noactivelink { color: #D2D2D2; } .poll-grid a.template { color: #e07e79; } .poll-grid-drag-handle { width: 52px; height: 52px; background-image: url(../images/dragndrop.png); background-repeat: no-repeat; background-position: 0 0; cursor: move; } .poll-grid-drag-handle:hover { background-position: 0 -52px; } .poll-grid-drag a { color: White; } .poll-grid-drag td { background-color: #828282; color: #fff; } .pageing { display: none; font-size: 10px; margin-bottom: 5px; clear: both; } .pageing select { font-size: 10px; } .pageing .first-page, .pageing .prev-page { display: inline-block; width: 12px; height: 8px; background-image: url(../images/grid-page-back.png); } .pageing .first-page { background-position: 0px 0px; } .pageing .prev-page { background-position: 12px 0px; } .pageing .next-page, .pageing .last-page { display: inline-block; width: 12px; height: 8px; background-image: url(../images/grid-page-forward.png); } .pageing .next-page { background-position: 0px 0px; } .pageing .last-page { background-position: 12px 0px; } .pageing label { font-weight: bold; font-size: 10px; } .empty-table { display: block; padding-top: 40px; border: 1px solid #d9d9d9; border-top: none; padding-bottom: 40px; color: #919191; text-shadow: 1px 2px 2px #fff; font-size: 14px; text-align: center; background-color: #f0f0f0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .loading-data { display: block; padding-top: 40px; border: 1px solid #d9d9d9; border-top: none; padding-bottom: 40px; color: #919191; text-shadow: 1px 2px 2px #fff; font-size: 14px; text-align: center; background-color: #f0f0f0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .loading-data img { margin: 0px; padding: 0px; vertical-align: middle; } /*.big-input { padding:4px 4px 4px 4px; margin-right:5px; font-size:14px; border:1px solid gray; -webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px; }*/ .button { position: relative; display: inline-block; margin: 0 5px; font-family: 'Open Sans', sans-serif; color: #fff; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 2px #11161d; -moz-box-shadow: 0px 2px #11161d; box-shadow: 0px 2px #11161d; background-color: #3b4e61; cursor: pointer; outline: none; overflow: hidden; } .button:hover { background-color: #4c6075; } .button:active { background-color: #24313d; } .button:disabled { background-color: #9ca9b1; color: #cfd9df; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button.big { font-size: 18px; height: 45px; line-height: 45px; padding: 0 50px; padding-top: 1px; } .button.medium { font-size: 13px; height: 35px; line-height: 35px; padding: 0 20px; padding-top: 1px; } .button.small { font-size: 11px; height: 25px; line-height: 24px; padding: 0 15px; padding-top: 1px; } .button.x-small { font-size: 10px; height: 23px; line-height: 22px; padding: 0 20px; padding-top: 1px; } .button.x-small.no-bottom-border { height: 25px; line-height: 23px; } .button.green { color: #fff; -webkit-box-shadow: 0px 2px #68ae29; -moz-box-shadow: 0px 2px #68ae29; box-shadow: 0px 2px #68ae29; background-color: #91e248; } .button.green:hover { background-color: #a9e770; } .button.green:active { background-color: #79bc3d; } .button.green-outline { -webkit-box-shadow: 0px 2px #91e248; -moz-box-shadow: 0px 2px #91e248; box-shadow: 0px 2px #91e248; color: #91e248; background-color: #fff; border: 1px solid #a9e770; } .button.green-outline:hover { color: #fff; background-color: #a9e770; } .button.green-outline:active { color: #fff; background-color: #79bc3d; } .button.yellow { color: #fff; -webkit-box-shadow: 0px 2px #d8b910; -moz-box-shadow: 0px 2px #d8b910; box-shadow: 0px 2px #d8b910; background-color: #ffd800; } .button.yellow:hover { background-color: #fde03f; } .button.yellow:active { background-color: #e7c610; } .button.light-blue { color: #fff; -webkit-box-shadow: 0px 2px #24b0ce; -moz-box-shadow: 0px 2px #24b0ce; box-shadow: 0px 2px #24b0ce; background-color: #30c4e4; } .button.light-blue:hover { background-color: #24b0ce; } .button.light-blue:active { background-color: #30c4e4; } .button.light-blue-outline { -webkit-box-shadow: 0px 2px #30c4e4; -moz-box-shadow: 0px 2px #30c4e4; box-shadow: 0px 2px #30c4e4; color: #30c4e4; background-color: #fff; border: 1px solid #30c4e4; } .button.light-blue-outline:hover { color: #fff; background-color: #30c4e4; } .button.light-blue-outline:active { color: #fff; background-color: #30c4e4; } .button.light-red { color: #fff; -webkit-box-shadow: 0px 2px #a2627e; -moz-box-shadow: 0px 2px #a2627e; box-shadow: 0px 2px #a2627e; background-color: #ce87a6; } .button.light-red:hover { background-color: #e2acc4; } .button.light-red:active { background-color: #a2627e; } .button.white { color: #7388ab; background-color: #fff; border: 1px solid #7388ab; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button.white:hover, .button.white:active { color: #fff; background-color: #7388ab; } .button.yellow:hover { background-color: #fff; } .button.yellow:active { background-color: #e7c610; } /* BUTTON ICONS */ .button.small.save { padding-left: 30px; padding-right: 14px; } .button.small.save:before { content: ''; position: absolute; top: 0; left: 3px; width: 25px; height: 25px; background: url(../images/button_icons_sprite.png) no-repeat; background-position: -25px -80px; } .button.small.download { padding-left: 30px; padding-right: 14px; } .button.small.download:before { content: ''; position: absolute; top: 0; left: 3px; width: 25px; height: 25px; background: url(../images/button_icons_sprite.png) no-repeat; background-position: -50px -80px; } .button.small.delete { padding-left: 30px; padding-right: 14px; } .button.small.delete-extended { padding-left: 17px; } .button.small.delete:before { content: '\f014'; font-family: FontAwesome; position: absolute; top: 1px; left: 3px; width: 25px; height: 25px; font-size: small; } .button.medium.facebook, .button.medium.twitter, .button.medium.google, .button.medium.linkedin { padding: 1px 25px 0 40px; -moz-box-shadow: 0px 2px #c2c6c9; box-shadow: 0px 2px #c2c6c9; } .button.medium.facebook:before, .button.medium.twitter:before, .button.medium.google:before, .button.medium.linkedin:before { content: ''; position: absolute; top: 0; left: 0; width: 35px; height: 35px; background: url(../images/button_icons_sprite.png) no-repeat; } .button.medium.facebook:before { background-position: 0 -105px; } .button.medium.twitter:before { background-position: -35px -105px; } .button.medium.google:before { background-position: -70px -105px; } .button.medium.linkedin:before { background-position: -105px -105px; } .button.medium.facebook { background-color: #43609c; color: #fff; -moz-box-shadow: 0px 2px #374f81; box-shadow: 0px 2px #374f81; } .button.medium.facebook:hover { background-color: #3d5588; } .button.medium.twitter { background-color: #23a9e6; color: #fff; -moz-box-shadow: 0px 2px #198dc2; box-shadow: 0px 2px #198dc2; } .button.medium.twitter:hover { background-color: #1d95cc; } .button.medium.google { background-color: #f14033; color: #fff; -moz-box-shadow: 0px 2px #d0352a; box-shadow: 0px 2px #d0352a; } .button.medium.google:hover { background-color: #d8362a; } .button.medium.linkedin { background-color: #177eb8; color: #fff; -moz-box-shadow: 0px 2px #136c9e; box-shadow: 0px 2px #136c9e; } .button.medium.linkedin:hover { background-color: #1572a6; } .qp-checkbox-control { display: inline-block; font-size: 11px; text-align: right; line-height: 22px; } .qp-checkbox-control a.qp-checkbox { position: relative; display: inline-block; margin-left: 5px; border: 1px solid #d6d9e2; background-color: #d6d9e2; border-radius: 3px; width: 44px; height: 22px; vertical-align: middle; } .qp-checkbox-control > span { opacity: 0.85; } .qp-checkbox-control a.qp-checkbox .state { position: absolute; top: 0; left: 0; display: inline-block; width: 22px; height: 20px; background-color: #fff; border-right: 1px solid #d6d9e2; border-radius: 3px; -webkit-transition: left 0.2s ease-out; } .qp-checkbox-control a.qp-checkbox.checked { text-align: right; background-color: #80c642; } .qp-checkbox-control a.qp-checkbox.checked .state { left: 20px; border: 0; border-left: 1px solid #d6d9e2; } #shareButtons { width: 100%; text-align: left; margin-top: 40px; } #shareButtons a { padding: 16px 26px 16px 16px; color: #5D6265; } #shareButtons a:hover { color: #0c1b38; } #shareButtons a > div { width: 33px; height: 33px; display: inline-block; vertical-align: middle; margin-right: 5px; background-image: url(../images/social_ico.png); background-repeat: no-repeat; } #shareButtons a.facebook > div { background-position: 0 0; } #shareButtons a.facebook:hover > div { background-position: 0 -33px; } #shareButtons a.twitter > div { background-position: -33px 0; } #shareButtons a.twitter:hover > div { background-position: -33px -33px; } #shareButtons a.google > div { background-position: -66px 0; } #shareButtons a.google:hover > div { background-position: -66px -33px; } #shareButtons a.linkedin > div { background-position: -99px 0; } #shareButtons a.linkedin:hover > div { background-position: -99px -33px; } .valerrinput { background-image: url(../images/exclamation.png); background-repeat: no-repeat; width: 4px; height: 14px; margin-left: -12px; z-index: 99999; } .valerrinput span { display: none; } .valerrtextarea span { display: none; } .invalid { border: 1px solid #ff2f51; } .valerr { background-color: #ff2f51; padding: 4px 8px 4px 8px; /*height: 13px;*/ white-space: nowrap; color: #fff; font-size: 11px; text-shadow: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; z-index: 99999; } .valerr em { border: 10px solid; border-color: #ff2f51 transparent transparent; bottom: -17px; display: block; height: 0; left: 10px; position: absolute; width: 0; } fieldset { width: 500px; border: 0; } fieldset legend { font-size: 16px; padding-left: 0px; } .dashboard .filter { width: 100%; height: 40px; text-align: right; margin-bottom: 0; } .dashboard .filter .item { float: right; line-height: 40px; background-color: #1f2b37; padding-left: 8px; padding-right: 8px; margin-right: 0; } .facts { margin-top: 30px; } .facts .headline { width: 300px; height: 58px; margin-left: auto; margin-right: auto; margin-top: 30px; background-image: url(../images/dash-pass.png); font-size: 14px; font-weight: bold; color: #fff; text-align: center; } .facts .headline div { padding-top: 10px; } .facts .item { position: relative; float: left; width: 33%; text-align: center; } .facts .item .header { /*position:absolute;top:0;left:0;*/ width: 100%; text-transform: uppercase; font-size: 11px; color: #7e8b9d; } .facts .item .value { color: #1f2b37; font-size: 70px; text-shadow: 2px 2px #fff; } .feedback a { display: block; position: fixed; padding: 4px 10px; bottom: 30px; right: 50px; background-color: #1A232D; color: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; z-index: 5; -webkit-transition: padding 0.3s ease-out; -ms-transition: padding 0.3s ease-out; -o-transition: padding 0.3s ease-out; /*-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);*/ } .feedback a:hover { color: #91e248; padding: 10px; /*right:-22px; bottom:92px;*/ } #feedback-dialog textarea { vertical-align: middle; padding: 4px 3px 4px 5px; font-size: 14px; border: 1px solid #fff; border: 1px solid #c2c6c9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* GRID ICONS */ .graph-report-icon { display: inline-block; width: 20px; height: 20px; background-image: url(../images/grid-icons.png); background-position: -60px 0px; } .graph-report-icon:hover { background-position: -60px -20px; } .template-icon { display: inline-block; width: 20px; height: 20px; background-image: url(../images/grid-icons.png); background-position: -80px 0px; } .template-icon:hover { background-position: -80px -20px; } .template-inactive { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url(../images/grid-icons.png); background-position: 0 -40px; } .edit-icon { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url(../images/grid-icons.png); background-position: -100px 0; } .edit-icon:hover { background-position: -100px -20px; } .edit-inactive { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url(../images/grid-icons.png); background-position: -100px -40px; } .purge-icon { display: inline-block; width: 20px; height: 20px; background-image: url(../images/grid-icons.png); background-position: -120px 0px; } .purge-icon:hover { background-position: -120px -20px; } .purge-inactive { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url(../images/grid-icons.png); background-position: -120px -40px; } .delete-icon { display: inline-block; width: 20px; height: 20px; background-image: url(../images/grid-icons.png); background-position: -140px 0px; } .delete-icon:hover { background-position: -140px -20px; } .delete-inactive { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-image: url(../images/grid-icons.png); background-position: -140px -40px; } .repeat-icon { display: inline-block; width: 23px; height: 22px; background-image: url(../images/question_repeat_ico.png); background-repeat: no-repeat; font-size: 7px; font-weight: bold; line-height: 22px; text-align: center; cursor: pointer; } .attachment-icon { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background-image: url(../images/question_attached_ico.png); background-repeat: no-repeat; font-size: 7px; font-weight: bold; line-height: 22px; text-align: center; cursor: pointer; } .ui-selectmenu-menu .ui-menu .ui-menu-item { padding: 6px 0 6px 30px; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon { width: 15px; height: 15px; background-image: url(../images/answergrouptype.png); margin-left: 5px; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon.radio { background-position: 0 0; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon.checkbox { background-position: -15px 0; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon.textbox { background-position: -30px 0; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon.textarea { background-position: -45px 0; } .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-icon.dropdown { background-position: -60px 0; } #custom-style-dialog #csd-properties-container *:focus { outline: 0; } #custom-style-dialog #csd-properties-container { width: 100%; display: inline-block; float: left; } #custom-style-dialog #csd-properties-container label { font-size: 10px; } #custom-style-dialog #csd-properties-container input { font-size: 11px; } #custom-style-dialog #csd-properties-container select { font-size: 11px; } #custom-style-dialog .csd-properties-wrapper { width: 153px; margin-right: 10px; display: inline-block; float: left; } #custom-style-dialog .csd-example-wrapper { background-color: #212b35; display: inline-block; float: left; width: 635px; border: 6px solid #3D484E; border-radius: 3px; } #custom-style-dialog #csd-properties-container .ui-accordion-header { height: 30px; line-height: 30px; font-size: 10px; padding: 0px 0px 0px 20px; color: #fff; background-color: #212b35; border: 1px solid #3D484E; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 0px solid #000000; background-image: url(../images/accordion_style.png); } #custom-style-dialog #csd-properties-container .ui-accordion-header:hover { text-shadow: 0 0 2px #B5B5B5; } #custom-style-dialog #csd-properties-container .ui-accordion-header.ui-state-active { margin-bottom: 0px; border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; } #custom-style-dialog #csd-properties-container .ui-accordion-content { display: block; margin-bottom: 6px; padding: 5px; background-color: #FBFBFB; border-left: 1px solid #c2c6c9; border-right: 1px solid #c2c6c9; border-bottom: 1px solid #c2c6c9; } #custom-style-dialog #csd-properties-container .color-picker { display: inline-block; border: 1px solid #2b2e30; vertical-align: middle; border-radius: 2px; } #custom-style-dialog #csd-properties-container .color-picker a { display: block; width: 13px; height: 13px; border: 3px solid #49525b; cursor: pointer; } #designMainAccordion { list-style: none; margin: 0; } #designMainAccordion li { position: relative; outline: none; } #designMainAccordion li h3 { position: relative; padding: 18px 30px; text-align: left; color: #595f6b; outline: none; background-color: #e9edf1; /*border-top:1px solid #cacfd3;*/ border-bottom: 1px solid #cacfd3; color: #28323b; display: inline-block; margin: 0 auto; vertical-align: middle; font-size: 10px; font-weight: normal; cursor: pointer; } #designMainAccordion li h3 span.text { font-family: 'Open Sans'; display: block; padding-right: 40px; } #designMainAccordion li h3:after { display: block; content: ''; position: absolute; top: 27px; right: 15px; width: 14px; height: 22px; background-image: url(../images/collect_sidebar_right_arrow.png); } #designMainAccordion li h3:hover { color: #28323b; background-color: #e3e8ed; } #designMainAccordion li h3 strong { display: block; margin-bottom: 4px; font-size: 12px; } #designMainAccordion li .menu-item-content { display: none; padding: 8px 0; } #designMainAccordion li.selected h3:after { top: 29px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #designMainAccordion li.selected .menu-item-content { -webkit-box-shadow: inset 0px 0px 10px -4px #2b3646; -moz-box-shadow: inset 0px 0px 10px -4px #2b3646; box-shadow: inset 0px 0px 10px -4px #2b3646; } /*common*/ #designMainAccordion .subtitle { font-size: 11px; font-weight: bold; color: #28323b; } #designMainAccordion .widget-color-picker { position: relative; width: 28px; height: 28px; background-color: #d7dce2; border: 1px solid transparent; border-radius: 3px; padding: 2px; cursor: pointer; } #designMainAccordion .widget-color-picker > div { border: 1px solid #fff; width: 100%; height: 100%; } #designMainAccordion .widget-color-picker .ico { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; background-color: #d7dce2; } #designMainAccordion .widget-color-picker .ico:after { display: block; content: ''; width: 0; height: 0; margin: 2px auto; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid #69788d; } #designMainAccordion .widget-color-picker.large { width: 80px; height: 50px; } /* themes */ #designMainAccordion ul.design-themes { padding: 0 16px; list-style: none; } #designMainAccordion ul.design-themes li { padding: 8px 16px; border: 1px solid transparent; border-radius: 3px; line-height: 24px; color: #69788d; font-size: 11px; font-weight: bold; cursor: pointer; } #designMainAccordion ul.design-themes li.empty { border-color: #b4bdc7; background-color: #ccd3db; color: #ecf1f7 !important; text-align: center; } #designMainAccordion ul.design-themes li:hover { border-color: #b4bdc7; background-color: #ccd3db; color: #fff; } #designMainAccordion ul.design-themes li .theme-colors { display: inline-block; vertical-align: top; } #designMainAccordion ul.design-themes li .theme-colors:after { content: ''; clear: both; } #designMainAccordion ul.design-themes li .theme-colors .theme-color { float: left; width: 24px; height: 24px; } #designMainAccordion ul.design-themes li .theme-title { display: inline-block; margin-left: 14px; vertical-align: top; max-width: 102px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #designMainAccordion ul.design-themes li .theme-delete { display: none; position: absolute; top: 12px; right: 6px; width: 12px; height: 19px; background-image: url(../images/build_sidebar_delete_question.png); background-repeat: no-repeat; background-position: 0 0; } #designMainAccordion ul.design-themes.design-themes-delete li:hover .theme-delete { display: block; } #designMainAccordion ul.design-themes.design-themes-delete li .theme-delete:hover { background-position: -12px 0; } /* background */ /* colors */ #designMainAccordion .colors-container { list-style: none; } #designMainAccordion .colors-container li { padding: 14px 35px; border-bottom: 1px solid #c8d0d3; } #designMainAccordion .colors-container li .picker-container { display: inline-block; margin-right: 20px; } #designMainAccordion .colors-container li .color-name { display: inline-block; margin-right: 20px; font-size: 11px; font-weight: bold; line-height: 28px; vertical-align: top; color: #69788d; } #designMainAccordion .colors-container li:hover { background-color: #e9edf1; } #designMainAccordion .colors-container li:hover .color-name { color: #2b3646; } /* background */ #designMainAccordion .bg-tabs { background-color: #d7dce2; } #designMainAccordion .bg-tabs > div { display: inline-block; font-size: 12px; color: #575f6f; font-weight: bold; text-align: center; width: 33.3333333%; border: 1px solid transparent; padding: 10px 0; cursor: pointer; background-color: #e9edf1; border-bottom-color: #b4bdc7; border-right-color: #b4bdc7; border-left-color: #b4bdc7; } #designMainAccordion .bg-tabs > div:first-child { border-left-color: transparent; border-right-color: transparent; } #designMainAccordion .bg-tabs > div:last-child { border-left-color: transparent; border-right-color: transparent; } #designMainAccordion .bg-tabs > div:hover { background-color: transparent; color: #2b3646; } #designMainAccordion .bg-tabs > div.active { background-color: transparent; color: #2b3646; border-bottom-color: transparent; /*border-color: transparent;*/ } #designMainAccordion .bg-tab-container { width: 100%; display: none; } #designMainAccordion .background-types-container, #designMainAccordion .favicon-options-container { padding: 12px 0; text-align: center; border-bottom: 1px solid #b4bdc7; } #designMainAccordion .background-types-container a, #designMainAccordion .favicon-options-container a { display: inline-block; width: 80px; margin: 0 4px; padding-left: 5px; line-height: 23px; background-color: #ccd3db; text-align: left; font-weight: bold; font-size: 11px; color: #69788d; border: 1px solid #b4bdc7; border-radius: 2px; } #designMainAccordion .background-types-container a:hover, #designMainAccordion .background-types-container a.active, #designMainAccordion .favicon-options-container a:hover, #designMainAccordion .favicon-options-container a.active { color: #fff; } #designMainAccordion .background-types-container a:before, #designMainAccordion .favicon-options-container a:before { vertical-align: middle; font-family: FontAwesome; font-size: 14px; margin-right: 8px; font-weight: normal; } #designMainAccordion .background-types-container a.color:before, #designMainAccordion .favicon-options-container a.color:before { content: "\f1fb"; } #designMainAccordion .background-types-container a.image:before, #designMainAccordion .favicon-options-container a.image:before { content: "\f03e"; } #designMainAccordion .background-types-container a.none:before, #designMainAccordion .favicon-options-container a.none:before { content: "\f2d4"; } #designMainAccordion .background-types-container a.default:before, #designMainAccordion .favicon-options-container a.default:before { content: "\f0ac"; } #designMainAccordion .color-option, #designMainAccordion .none-option { padding: 15px 20px; } #designMainAccordion .image-option { padding: 15px 20px 0px 20px; background-size: contain; } #designMainAccordion .image-option .image-thumb { position: relative; display: inline-block; width: 106px; height: 68px; border: 2px solid #dcdfe4; margin-right: 8px; vertical-align: top; overflow: hidden; } #designMainAccordion .image-option .image-thumb .img { background-color: #ccd3db; width: 100%; height: 100%; background-image: url(../images/design_noimg.png); background-size: cover; } #designMainAccordion .image-option .image-name { font-size: 10px; color: #575f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #designMainAccordion .image-option .image-scale { display: inline-block; vertical-align: bottom; } #designMainAccordion .image-option .image-scale h4 { color: #575f6f; font-weight: bold; font-size: 11px; margin-top: 10px; margin-bottom: 4px; } #designMainAccordion .image-option .image-scale .clear-image { font-size: 10px; } #designMainAccordion .image-option .image-scale .clear-image:before { content: '\f00d'; font-size: 11px; font-family: FontAwesome; margin-right: 2px; } #designMainAccordion .image-option .image-scale .scale-type { display: inline-block; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 2px; } #designMainAccordion .image-option .image-scale .scale-type.active, #designMainAccordion .image-option .image-scale .scale-type:hover { color: #fff; background-color: #ccd3db; border-color: #b4bdc7; } #designMainAccordion .image-option .image-scale .scale-type:before { display: block; content: ''; width: 22px; height: 22px; margin-top: 3px; margin-left: 3px; background-image: url(../images/design_background_scale.png); } #designMainAccordion .image-option .image-scale .scale-type.strech:before { background-position: 0 0; } #designMainAccordion .image-option .image-scale .scale-type.center:before { background-position: -22px 0; } #designMainAccordion .image-option .image-scale .scale-type.tile:before { background-position: -44px 0; } #designMainAccordion .image-option .image-scale .scale-type.active.strech:before, #designMainAccordion .image-option .image-scale .scale-type.strech:hover:before { background-position: 0 -22px; } #designMainAccordion .image-option .image-scale .scale-type.active.center:before, #designMainAccordion .image-option .image-scale .scale-type.center:hover:before { background-position: -22px -22px; } #designMainAccordion .image-option .image-scale .scale-type.active.tile:before, #designMainAccordion .image-option .image-scale .scale-type.tile:hover:before { background-position: -44px -22px; } #designMainAccordion .image-container .clear-image { display: inline-block; margin-top: 5px; font-size: 10px; } #designMainAccordion .image-container .clear-image:before { content: '\f00d'; font-size: 11px; font-family: FontAwesome; margin-right: 2px; } #designMainAccordion .image-container .image-option .image-position { position: relative; display: inline-block; vertical-align: bottom; } #designMainAccordion .image-container .image-option .image-position h4 { color: #575f6f; font-weight: bold; font-size: 11px; margin-top: 0; margin-bottom: 4px; } #designMainAccordion .image-container .image-option .image-position .position-type { display: inline-block; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 2px; } #designMainAccordion .image-container .image-option .image-position .position-type:hover, #designMainAccordion .image-container .image-option .image-position .position-type.active { color: #fff; background-color: #ccd3db; border-color: #b4bdc7; } #designMainAccordion .image-container .image-option .image-position .position-type:before { display: block; content: ''; width: 22px; height: 22px; margin-top: 3px; margin-left: 3px; background-image: url(../images/design_logo_position.png); } #designMainAccordion .image-container .image-option .image-position .position-type.top-left:before { background-position: 0 0; } #designMainAccordion .image-container .image-option .image-position .position-type.top-left.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.top-left:hover:before { background-position: 0 -22px; } #designMainAccordion .image-container .image-option .image-position .position-type.top-center:before { background-position: -22px 0; } #designMainAccordion .image-container .image-option .image-position .position-type.top-center.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.top-center:hover:before { background-position: -22px -22px; } #designMainAccordion .image-container .image-option .image-position .position-type.top-right:before { background-position: -44px 0; } #designMainAccordion .image-container .image-option .image-position .position-type.top-right.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.top-right:hover:before { background-position: -44px -22px; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-left:before { background-position: -66px 0; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-left.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.bottom-left:hover:before { background-position: -66px -22px; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-center:before { background-position: -88px 0; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-center.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.bottom-center:hover:before { background-position: -88px -22px; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-right:before { background-position: -110px 0; } #designMainAccordion .image-container .image-option .image-position .position-type.bottom-right.active:before, #designMainAccordion .image-container .image-option .image-position .position-type.bottom-right:hover:before { background-position: -110px -22px; } #designMainAccordion .design-slider-container { padding: 10px 20px; } #designMainAccordion .design-slider-container .design-slider { background: none !important; background-color: #ccd3db !important; border-color: #9ca9b1; height: 8px; } #designMainAccordion .design-slider-container .design-slider .ui-widget-header { background: none !important; background-color: #b4bdc7 !important; } #designMainAccordion .design-slider-container .design-slider .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { cursor: pointer; background: none; background-color: #ccd3db; border-color: #9ca9b1; border-radius: 25px; top: -5px; width: 16px; height: 16px; } #designMainAccordion .design-slider-container .design-slider-label { font-size: 12px; color: #575f6f; font-weight: bold; margin-top: 7px; } #designMainAccordion #themeImageLibraryContainer, #designMainAccordion #faviconLibraryContainer { padding: 15px 20px; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary, #designMainAccordion #faviconLibraryContainer #faviconLibrary { list-style: none; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li, #designMainAccordion #faviconLibraryContainer #faviconLibrary li { position: relative; display: inline-block; width: 80px; height: 50px; margin-right: 2px; margin-bottom: 8px; border: 2px solid #dcdfe4; overflow: hidden; cursor: pointer; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li:hover, #designMainAccordion #faviconLibraryContainer #faviconLibrary li:hover { -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li:hover span.delete, #designMainAccordion #faviconLibraryContainer #faviconLibrary li:hover span.delete { display: block; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li:hover span.delete:hover, #designMainAccordion #faviconLibraryContainer #faviconLibrary li:hover span.delete:hover { color: #fff; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li.uploading, #designMainAccordion #faviconLibraryContainer #faviconLibrary li.uploading { display: block; width: 100%; height: 100%; animation: fa-spin 2s infinite linear; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li.uploading .upload-ico:before, #designMainAccordion #faviconLibraryContainer #faviconLibrary li.uploading .upload-ico:before { position: absolute; display: block; content: "\f110"; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: FontAwesome; color: #b4bdc7; font-size: 24px; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li.uploading img, #designMainAccordion #faviconLibraryContainer #faviconLibrary li.uploading img { display: none; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li .img, #designMainAccordion #faviconLibraryContainer #faviconLibrary li .img { border: 1px solid #fff; background-color: #ccd3db; width: 100%; height: 100%; background-size: cover; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li .upload-ico, #designMainAccordion #faviconLibraryContainer #faviconLibrary li .upload-ico { display: none; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li span.delete, #designMainAccordion #faviconLibraryContainer #faviconLibrary li span.delete { display: none; position: absolute; top: 4px; right: 4px; padding: 0 1px; line-height: 10px; background-color: #ccd3db; border: 1px solid #b4bdc7; border-radius: 2px; } #designMainAccordion #themeImageLibraryContainer #themeImageLibrary li span.delete::before, #designMainAccordion #faviconLibraryContainer #faviconLibrary li span.delete::before { content: '\f00d'; font-family: FontAwesome; } #designMainAccordion #faviconLibraryContainer #faviconLibrary li .img { background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; } #designMainAccordion #faviconLibraryContainer #faviconLibrary li.selected { border: 2px solid #91e248; } #designMainAccordion #faviconLibraryContainer #faviconLibrary li.selected:after { content: "\f00c"; font-family: FontAwesome; display: block; bottom: 0; left: 0px; position: absolute; color: #91e248; background-color: white; width: 12px; height: 12px; text-align: center; } #designMainAccordion #faviconLibraryContainer #faviconLibrary li.selected .img { border: none; } /* fonts */ #designMainAccordion .fonts-container { list-style: none; } #designMainAccordion .fonts-container li { padding: 14px 35px; cursor: pointer; color: #575f6f; border-bottom: 1px solid #c8d0d3; } #designMainAccordion .fonts-container li div.t { font-size: 15px; } #designMainAccordion .fonts-container li div.d { font-size: 10px; } #designMainAccordion .fonts-container li:hover { background-color: #e9edf1; color: #2b3646; } #designMainAccordion .fonts-container li.active { background-color: #2b3646; color: #ffffff; } /* manage forms */ #scrollFormsLoading { display: none; height: 14px; margin: 20px 0; } .browser-screen-loading-content { text-align: center; max-width: 100%; height: 14px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .loading-dots { margin-left: -1.5em; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-animation: loading-dots-fadein 0.5s linear forwards; -moz-animation: loading-dots-fadein 0.5s linear forwards; -o-animation: loading-dots-fadein 0.5s linear forwards; -ms-animation: loading-dots-fadein 0.5s linear forwards; animation: loading-dots-fadein 0.5s linear forwards; } .loading-dots i { font-size: 20px; line-height: 16px; width: 0.5em; height: 0.5em; display: inline-block; vertical-align: middle; background: #6ca9b1; -webkit-border-radius: 50%; border-radius: 50%; margin: 0 5px; -webkit-animation: loading-dots-middle-dots 0.5s linear infinite; -moz-animation: loading-dots-middle-dots 0.5s linear infinite; -o-animation: loading-dots-middle-dots 0.5s linear infinite; -ms-animation: loading-dots-middle-dots 0.5s linear infinite; animation: loading-dots-middle-dots 0.5s linear infinite; } .loading-dots.dark-gray i { background: #575f6f; } .loading-dots i:first-child { -webkit-animation: loading-dots-first-dot 0.5s infinite; -moz-animation: loading-dots-first-dot 0.5s linear infinite; -o-animation: loading-dots-first-dot 0.5s linear infinite; -ms-animation: loading-dots-first-dot 0.5s linear infinite; animation: loading-dots-first-dot 0.5s linear infinite; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -o-transform: translate(-1em); -ms-transform: translate(-1em); transform: translate(-1em); } .loading-dots i:last-child { -webkit-animation: loading-dots-last-dot 0.5s linear infinite; -moz-animation: loading-dots-last-dot 0.5s linear infinite; -o-animation: loading-dots-last-dot 0.5s linear infinite; -ms-animation: loading-dots-last-dot 0.5s linear infinite; animation: loading-dots-last-dot 0.5s linear infinite; } @-moz-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-webkit-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-o-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-moz-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } .emptyStateContainer { text-align: center; margin: 40px auto; color: #778da5; } .emptyStateContainer h1 { font-weight: bold; font-size: 24px; color: #778da5; margin-bottom: 10px; } .emptyStateContainer h2 { font-size: 18px; color: #778da5; margin-bottom: 25px; } #sidebarFilters { width: 15px; transition: all 0.3s ease-in-out; } #sidebarFilters .search-term-icon { display: none; } #sidebarFilters #sidebarToggle { display: block; z-index: 4; position: absolute; height: 50px; width: 40px; top: 40px; right: -40px; background-color: #d7dce2; cursor: pointer; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } #sidebarFilters #sidebarToggle:before { position: absolute; display: inline-block; font-family: FontAwesome; content: '\f0b0'; font-size: 18px; width: 100%; line-height: 50px; text-align: center; } #sidebarFilters #sidebarToggle:focus { color: inherit; } #sidebarFilters .header { display: none; position: relative; height: 40px; overflow: hidden; background-color: #e9edf3; border-bottom: 1px dashed #9ca9b1; -webkit-box-shadow: inset 2px 0px 3px -1px rgba(43, 54, 70, 0.5); -moz-box-shadow: inset 2px 0px 3px -1px rgba(43, 54, 70, 0.5); box-shadow: inset 2px 0px 3px -1px rgba(43, 54, 70, 0.5); } #sidebarFilters .header:before { content: '\f0b0'; font-family: FontAwesome; font-size: 16px; position: absolute; left: 22px; top: 10px; display: block; width: 26px; height: 26px; } #sidebarFilters .header h2 { font-size: 14px; font-weight: bold; line-height: 40px; width: auto; margin-left: 45px; overflow: hidden; } #sidebarFilters.active { width: 220px; } #sidebarFilters.active .search-term-icon { display: block; } #sidebarFilters.active .header { display: block; } #formsContainer { padding-top: 20px; } #formsContainer .form-row { display: block; width: 100%; max-width: 1000px; height: 100%; margin: 0 auto 20px auto; background-color: #fff; border: 1px solid #d7dce3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #formsContainer .form-row .border-right { border-right: 1px solid #d7dce3; } #formsContainer .form-row .table { display: table; height: 100%; margin: 0; } #formsContainer .form-row .table .cell { display: table-cell; height: 100%; float: none; vertical-align: middle; } #formsContainer .form-row .resps-cont .form-responses { font-weight: bold; font-size: 20px; color: #3b4e61; padding: 15px 15px 0 8px; } #formsContainer .form-row .resps-cont .form-responses span { display: block; font-weight: normal; font-size: 10px; } #formsContainer .form-row .resps-cont .form-active { position: relative; margin: 6px 0; } #formsContainer .form-row .resps-cont .form-active span { display: block; padding: 4px; margin-left: 8px; color: #fff; font-size: 10px; font-weight: bold; background-color: #add48f; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #formsContainer .form-row .resps-cont .form-active.inactive span { background-color: #e9778c; } #formsContainer .form-row .resps-cont .form-active.template span { background-color: #e9446e; } #formsContainer .form-row .title-container { width: 100%; vertical-align: middle; padding-right: 20px; } #formsContainer .form-row .title-container .inner-container { width: 100%; height: 84px; display: flex; flex-direction: row; align-items: center; } #formsContainer .form-row .title-container .inner-container .fav { display: flex; align-items: center; flex: 0 0 auto; } #formsContainer .form-row .title-container .inner-container .display-link { flex: 1 1 auto; display: flex; align-items: center; height: 100%; } #formsContainer .form-row .title-container { width: 100%; vertical-align: middle; padding-right: 20px; display: flex; flex-direction: row; align-items: center; justify-content: center; } #formsContainer .form-row .title-container .fav { vertical-align: middle; padding: 0 15px; } #formsContainer .form-row .title-container .fav a { display: inline-block; } #formsContainer .form-row .title-container .fav a:after { content: '\f006'; font-family: FontAwesome; font-size: 22px; color: #d7dce3; } #formsContainer .form-row .title-container .fav a.checked:after { content: '\f005'; color: #ffd800; } #formsContainer .form-row .title-container .fav a:hover:after { content: '\f005'; color: #ffd800; } #formsContainer .form-row .title-container .fav a.checked:hover:after { content: '\f006'; color: #d7dce3; } #formsContainer .form-row .title-container .title span { color: #575f6f; font-weight: bold; font-size: 14px; border-bottom: 1px solid transparent; transition: all 0.2s linear; } #formsContainer .form-row .title-container .title div { padding-top: 3px; } #formsContainer .form-row .title-container:hover span { color: #2b3646; border-color: #91e248; } #formsContainer .form-row .title-container .title .date { display: inline-block; font-size: 10px; color: #9ca9b1; font-weight: normal; overflow: hidden; } #formsContainer .form-row .title-container .title .date.visible-hover { display: none; } #formsContainer .form-row .form-menu { vertical-align: middle; width: 70%; } #formsContainer .form-row .form-menu ul.stats { list-style: none; text-align: center; margin: 0; padding: 0 20px; } #formsContainer .form-row .form-menu ul.stats li { display: inline-block; width: 24%; color: #9ca9b1; font-weight: bold; font-size: 10px; } #formsContainer .form-row .form-menu ul.stats li .theme-colors { max-width: 40px; height: 40px; padding: 0 5px; margin: 0 auto; vertical-align: middle; } #formsContainer .form-row .form-menu ul.stats li .theme-colors .theme-color { float: left; width: 15px; height: 15px; } #formsContainer .form-row .form-menu ul.stats li .questions { height: 40px; line-height: 40px; font-size: 20px; font-weight: bold; color: #3b4e61; } #formsContainer .form-row .form-menu ul.stats li .duration { height: 40px; line-height: 40px; font-size: 20px; font-weight: bold; color: #3b4e61; } #formsContainer .form-row .form-menu ul.stats li .duration span { font-size: 10px; } #formsContainer .form-row .form-menu ul.stats li .form-chart { position: relative; width: 40px; height: 40px; overflow: hidden; margin: 0 auto; } #formsContainer .form-row .form-menu ul.stats li .form-chart .chart { text-align: center; width: 55px; height: 55px; overflow: hidden; margin: -13px 0 0 -8px; } #formsContainer .form-row .form-menu ul.stats li .form-chart .eff { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 12; font-size: 6px; font-weight: bold; color: #3b4e61; } #formsContainer .form-row .form-menu ul.links { display: none; list-style: none; text-align: center; margin: 0; padding: 0 20px; } #formsContainer .form-row .form-menu ul.links li { display: inline-block; width: 24%; } #formsContainer .form-row .form-menu ul.links li.ico a { width: 100%; display: inline-block; color: #9ca9b1; font-weight: bold; font-size: 10px; } #formsContainer .form-row .form-menu ul.links li.ico a:before { display: block; margin: 0 auto; content: ''; width: 40px; height: 40px; background-image: url(../images/form_grid_icons.png); } #formsContainer .form-row .form-menu ul.links li.ico.build a:before { background-position: 0 0; } #formsContainer .form-row .form-menu ul.links li.ico.design a:before { background-position: -40px 0; } #formsContainer .form-row .form-menu ul.links li.ico.collect a:before { background-position: -80px 0; } #formsContainer .form-row .form-menu ul.links li.ico.analyze a:before { background-position: -120px 0; } #formsContainer .form-row .form-menu ul.links li.ico.build a:hover:before { background-position: 0 -40px; } #formsContainer .form-row .form-menu ul.links li.ico.design a:hover:before { background-position: -40px -40px; } #formsContainer .form-row .form-menu ul.links li.ico.collect a:hover:before { background-position: -80px -40px; } #formsContainer .form-row .form-menu ul.links li.ico.analyze a:hover:before { background-position: -120px -40px; } #formsContainer .form-row .form-menu ul.links li.ico a:hover { color: #3b4e61; } #formsContainer .form-row .form-preview { position: relative; text-align: center; max-width: 200px; } #formsContainer .form-row .form-preview a { display: inline-block; color: #9ca9b1; font-weight: bold; font-size: 10px; width: 100%; height: 100%; } #formsContainer .form-row .form-preview a:before { display: block; margin: 0 auto; margin-top: 28px; content: ''; width: 28px; height: 21px; background-image: url(../images/form_grid_preview.png); } #formsContainer .form-row .form-preview:hover { background-color: #6093d6; } #formsContainer .form-row .form-preview:hover a { color: #fff; } #formsContainer .form-row .form-preview:hover a:before { background-position: 0 -21px; } #formsContainer .form-row .form-actions { text-align: center; width: 38px; } #formsContainer .form-row .form-actions a { position: relative; display: block; width: 100%; height: 42px; margin: 0 auto; } #formsContainer .form-row .form-actions a:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: FontAwesome; font-size: 16px; color: #adb8bf; vertical-align: middle; } #formsContainer .form-row .form-actions a:hover:before { color: #fff; } #formsContainer .form-row .form-actions a.copy { border-bottom: 1px solid #d7dce3; } #formsContainer .form-row .form-actions a.copy:before { content: '\f0c5'; } #formsContainer .form-row .form-actions a.copy:hover { background-color: #91e248; } #formsContainer .form-row .form-actions a.delete:before { content: '\f014'; } #formsContainer .form-row .form-actions a.delete:hover { background-color: #e9446e; } /* hover */ #formsContainer .form-row:hover { -webkit-box-shadow: 0px 2px 4px 0px rgba(9, 20, 41, 0.25); -moz-box-shadow: 0px 2px 4px 0px rgba(9, 20, 41, 0.25); box-shadow: 0px 2px 4px 0px rgba(9, 20, 41, 0.25); } #formsContainer .form-row:hover .form-menu ul.stats { display: none; } #formsContainer .form-row:hover .form-menu ul.links { display: block; } .visible-admin { color: #F73434 !important; } /* HELPERS */ .w45 { width: 45px; } .w60 { width: 60px; } .w50 { width: 50px; } .w70 { width: 70px; } .w75 { width: 75px; } .w90 { width: 90px; } .w100 { width: 100px; } .w125 { width: 125px; } .w150 { width: 150px; } .w200 { width: 200px; } .w250 { width: 250px; } .w300 { width: 300px; } .w350 { width: 350px; } .w500 { width: 500px; } .w100pc { width: 100%; } .clear { clear: both; } .left { float: left; } .mt03 { margin-top: 3px !important; } .mt0 { margin-top: 0px !important; } .mt10 { margin-top: 10px !important; } .hideSection { display: none !important; } .d-inline-block { display: inline-block !important; } .right { float: right; } .nomargin { margin: 0 !important; } .nopadding { padding: 0 !important; } .upper { text-transform: uppercase; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } input[type='text'].error-req, select.error-req { outline: none; box-shadow: 0px 0px 5px red; } span.req { color: #ff2f51; } /* DYGRAPHS */ .dygraph-container { background-color: #1f2b37; } .dygraph-axis-label.dygraph-axis-label-x { font-size: 10px; color: #fff; margin-top: 2px; } .dygraph-axis-label.dygraph-axis-label-y { font-size: 10px; color: #fff; margin-right: 20px; } .dygraph-legend { position: absolute; z-index: 10; top: 5px; right: 5px; text-align: right; font-size: 12px; font-weight: bold; color: #7889a4; } .dygraph-legend span { font-size: 11px; color: #ffffff; } .mc-title.analize-title, .mc-title.collect-responses-title, .mc-title.design-title, .mc-title.builder-title { display: flex; width: 100%; height: 50px; } .mc-title.analize-title .tools-header, .mc-title.collect-responses-title .tools-header, .mc-title.design-title .tools-header, .mc-title.builder-title .tools-header { flex: 0 0 155px; display: none; font-size: 15px; font-weight: 700; background-color: #2c3748; align-items: center; color: #7388ab; margin-left: 15px; } .mc-title.analize-title .form-header, .mc-title.collect-responses-title .form-header, .mc-title.design-title .form-header, .mc-title.builder-title .form-header { display: flex; flex: 1 1 auto; background-color: #475b79; } .mc-title.analize-title .form-header .form-title-container, .mc-title.collect-responses-title .form-header .form-title-container, .mc-title.design-title .form-header .form-title-container, .mc-title.builder-title .form-header .form-title-container { display: flex; flex: 1 1 auto; align-items: center; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-title.analize-title .form-header .form-title-container .edit-form-button, .mc-title.collect-responses-title .form-header .form-title-container .edit-form-button, .mc-title.design-title .form-header .form-title-container .edit-form-button, .mc-title.builder-title .form-header .form-title-container .edit-form-button { cursor: pointer; margin-left: 20px; } .mc-title.analize-title .form-header .form-title-container .edit-form-button .qpf-pencil-square-o, .mc-title.collect-responses-title .form-header .form-title-container .edit-form-button .qpf-pencil-square-o, .mc-title.design-title .form-header .form-title-container .edit-form-button .qpf-pencil-square-o, .mc-title.builder-title .form-header .form-title-container .edit-form-button .qpf-pencil-square-o { font-size: 18px; } .mc-title.analize-title .form-header .form-title-container .form-title, .mc-title.collect-responses-title .form-header .form-title-container .form-title, .mc-title.design-title .form-header .form-title-container .form-title, .mc-title.builder-title .form-header .form-title-container .form-title { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 60px); position: absolute; left: 50px; height: 100%; top: 0; line-height: 50px; /*div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; width: 100%; }*/ } .mc-title.analize-title .form-header .form-title-container .form-title .form-title-edit-text, .mc-title.collect-responses-title .form-header .form-title-container .form-title .form-title-edit-text, .mc-title.design-title .form-header .form-title-container .form-title .form-title-edit-text, .mc-title.builder-title .form-header .form-title-container .form-title .form-title-edit-text { color: #232d3c; height: 34px; font-size: 14px; margin-bottom: 3px; width: 100%; max-width: 200px; } .mc-title.analize-title .form-header .menu-item-preview, .mc-title.collect-responses-title .form-header .menu-item-preview, .mc-title.design-title .form-header .menu-item-preview, .mc-title.builder-title .form-header .menu-item-preview { color: white; font-size: 13px; margin-right: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; cursor: pointer; } .mc-title.analize-title .form-header .menu-item-preview div, .mc-title.collect-responses-title .form-header .menu-item-preview div, .mc-title.design-title .form-header .menu-item-preview div, .mc-title.builder-title .form-header .menu-item-preview div { height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #232d3c; margin-right: 10px; background-color: #475b79; } .mc-title.analize-title .form-header .menu-item-preview div i, .mc-title.collect-responses-title .form-header .menu-item-preview div i, .mc-title.design-title .form-header .menu-item-preview div i, .mc-title.builder-title .form-header .menu-item-preview div i { font-size: 14px; height: 15px; } .mc-title.analize-title .form-header .menu-item-preview:hover div, .mc-title.collect-responses-title .form-header .menu-item-preview:hover div, .mc-title.design-title .form-header .menu-item-preview:hover div, .mc-title.builder-title .form-header .menu-item-preview:hover div { background-color: #7388ab; } .mc-title.analize-title .form-header .menu-item-preview:active > div, .mc-title.collect-responses-title .form-header .menu-item-preview:active > div, .mc-title.design-title .form-header .menu-item-preview:active > div, .mc-title.builder-title .form-header .menu-item-preview:active > div { background-color: #475b79; -webkit-box-shadow: inset 0px 4px 5px 0px #22334d; -moz-box-shadow: inset 0px 4px 5px 0px #22334d; box-shadow: inset 0px 4px 5px 0px #22334d; } .mc-title.analize-title .form-header .menu-items, .mc-title.collect-responses-title .form-header .menu-items, .mc-title.design-title .form-header .menu-items, .mc-title.builder-title .form-header .menu-items { display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; } .mc-title.analize-title .form-header .menu-items .separator, .mc-title.collect-responses-title .form-header .menu-items .separator, .mc-title.design-title .form-header .menu-items .separator, .mc-title.builder-title .form-header .menu-items .separator { flex: 0 0 auto; width: 1px; height: 28px; background-color: #394961; margin-right: 10px; margin-left: 10px; } .mc-title.analize-title .form-header .menu-items .menu-item, .mc-title.collect-responses-title .form-header .menu-items .menu-item, .mc-title.design-title .form-header .menu-items .menu-item, .mc-title.builder-title .form-header .menu-items .menu-item { display: flex; align-items: center; padding-left: 20px; padding-right: 20px; color: white; font-size: 13px; height: 100%; border-top: 2px solid transparent; border-bottom: 2px solid transparent; } .mc-title.analize-title .form-header .menu-items .menu-item.active.build, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active.build, .mc-title.design-title .form-header .menu-items .menu-item.active.build, .mc-title.builder-title .form-header .menu-items .menu-item.active.build, .mc-title.analize-title .form-header .menu-items .menu-item.build:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item.build:hover, .mc-title.design-title .form-header .menu-items .menu-item.build:hover, .mc-title.builder-title .form-header .menu-items .menu-item.build:hover { border-top-color: #30c4e4; } .mc-title.analize-title .form-header .menu-items .menu-item.active.config, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active.config, .mc-title.design-title .form-header .menu-items .menu-item.active.config, .mc-title.builder-title .form-header .menu-items .menu-item.active.config, .mc-title.analize-title .form-header .menu-items .menu-item.config:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item.config:hover, .mc-title.design-title .form-header .menu-items .menu-item.config:hover, .mc-title.builder-title .form-header .menu-items .menu-item.config:hover { border-top-color: #91e248; } .mc-title.analize-title .form-header .menu-items .menu-item.active.design, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active.design, .mc-title.design-title .form-header .menu-items .menu-item.active.design, .mc-title.builder-title .form-header .menu-items .menu-item.active.design, .mc-title.analize-title .form-header .menu-items .menu-item.design:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item.design:hover, .mc-title.design-title .form-header .menu-items .menu-item.design:hover, .mc-title.builder-title .form-header .menu-items .menu-item.design:hover { border-top-color: #fbd54a; } .mc-title.analize-title .form-header .menu-items .menu-item.active.collect, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active.collect, .mc-title.design-title .form-header .menu-items .menu-item.active.collect, .mc-title.builder-title .form-header .menu-items .menu-item.active.collect, .mc-title.analize-title .form-header .menu-items .menu-item.collect:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item.collect:hover, .mc-title.design-title .form-header .menu-items .menu-item.collect:hover, .mc-title.builder-title .form-header .menu-items .menu-item.collect:hover { border-top-color: #f26f7c; } .mc-title.analize-title .form-header .menu-items .menu-item.active.analyze, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active.analyze, .mc-title.design-title .form-header .menu-items .menu-item.active.analyze, .mc-title.builder-title .form-header .menu-items .menu-item.active.analyze, .mc-title.analize-title .form-header .menu-items .menu-item.analyze:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item.analyze:hover, .mc-title.design-title .form-header .menu-items .menu-item.analyze:hover, .mc-title.builder-title .form-header .menu-items .menu-item.analyze:hover { border-top-color: #fff; } .mc-title.analize-title .form-header .menu-items .menu-item.active, .mc-title.collect-responses-title .form-header .menu-items .menu-item.active, .mc-title.design-title .form-header .menu-items .menu-item.active, .mc-title.builder-title .form-header .menu-items .menu-item.active, .mc-title.analize-title .form-header .menu-items .menu-item:hover, .mc-title.collect-responses-title .form-header .menu-items .menu-item:hover, .mc-title.design-title .form-header .menu-items .menu-item:hover, .mc-title.builder-title .form-header .menu-items .menu-item:hover { background-color: #40526d; } .mc-title.analize-title .form-header .live-preview-container, .mc-title.collect-responses-title .form-header .live-preview-container, .mc-title.design-title .form-header .live-preview-container, .mc-title.builder-title .form-header .live-preview-container { display: flex; flex: 0 0 160px; background-color: #37465e; align-items: center; justify-content: center; } .mc-title.analize-title .form-header .live-preview-container.live .active, .mc-title.collect-responses-title .form-header .live-preview-container.live .active, .mc-title.design-title .form-header .live-preview-container.live .active, .mc-title.builder-title .form-header .live-preview-container.live .active { display: flex; } .mc-title.analize-title .form-header .live-preview-container.live .not-active, .mc-title.collect-responses-title .form-header .live-preview-container.live .not-active, .mc-title.design-title .form-header .live-preview-container.live .not-active, .mc-title.builder-title .form-header .live-preview-container.live .not-active { display: none; } .mc-title.analize-title .form-header .live-preview-container.offline .not-active, .mc-title.collect-responses-title .form-header .live-preview-container.offline .not-active, .mc-title.design-title .form-header .live-preview-container.offline .not-active, .mc-title.builder-title .form-header .live-preview-container.offline .not-active { display: flex; } .mc-title.analize-title .form-header .live-preview-container.offline .active, .mc-title.collect-responses-title .form-header .live-preview-container.offline .active, .mc-title.design-title .form-header .live-preview-container.offline .active, .mc-title.builder-title .form-header .live-preview-container.offline .active { display: none; } .mc-title.analize-title .form-header .live-preview-container a, .mc-title.collect-responses-title .form-header .live-preview-container a, .mc-title.design-title .form-header .live-preview-container a, .mc-title.builder-title .form-header .live-preview-container a { display: flex; height: 36px; border: 1px solid #232d3c; background-color: transparent; border-radius: 5px; align-items: center; justify-content: center; font-size: 13px; color: white; padding-left: 10px; padding-right: 10px; cursor: pointer; } .mc-title.analize-title .form-header .live-preview-container a i, .mc-title.collect-responses-title .form-header .live-preview-container a i, .mc-title.design-title .form-header .live-preview-container a i, .mc-title.builder-title .form-header .live-preview-container a i { color: #91e248; margin-left: 5px; font-size: 19px; } .mc-title.analize-title .form-header .live-preview-container a:hover, .mc-title.collect-responses-title .form-header .live-preview-container a:hover, .mc-title.design-title .form-header .live-preview-container a:hover, .mc-title.builder-title .form-header .live-preview-container a:hover { background-color: #475b79; box-shadow: 0px 4px 18px 0px #111a28; } .mc-title.analize-title .form-header .live-preview-container a:active, .mc-title.collect-responses-title .form-header .live-preview-container a:active, .mc-title.design-title .form-header .live-preview-container a:active, .mc-title.builder-title .form-header .live-preview-container a:active { box-shadow: inset 0px 4px 5px 0px rgba(17, 26, 40, 0.5); } .mc-title.analize-title .form-header .live-preview-container a.not-active, .mc-title.collect-responses-title .form-header .live-preview-container a.not-active, .mc-title.design-title .form-header .live-preview-container a.not-active, .mc-title.builder-title .form-header .live-preview-container a.not-active { opacity: 0.5; } .mc-title.analize-title .form-header .live-preview-container a.not-active .qpf, .mc-title.collect-responses-title .form-header .live-preview-container a.not-active .qpf, .mc-title.design-title .form-header .live-preview-container a.not-active .qpf, .mc-title.builder-title .form-header .live-preview-container a.not-active .qpf { color: #d95965; } .mc-title.analize-title .form-header .live-preview-container a.not-active:hover, .mc-title.collect-responses-title .form-header .live-preview-container a.not-active:hover, .mc-title.design-title .form-header .live-preview-container a.not-active:hover, .mc-title.builder-title .form-header .live-preview-container a.not-active:hover { background-color: transparent; box-shadow: none; } .mc-title.builder-title .tools-header { display: flex; } .btn-outline-light:active { background: #959ab0; color: #fff; } .btn-outline-light:focus { background: #959ab0; color: #fff; } .btn-outline-light:hover { background: #959ab0; color: #fff; } .btn-outline-light.btn-outline-light-extended { margin: 16px 16px 0px 0px; padding: 7px 30px !important; width: 104px; height: 35px; border-color: #9baecb !important; } .card:hover { box-shadow: 0px 0px 40px 15px #f0f1f2; border-color: #fff; cursor: pointer; } .card.card-extended { border-color: #f3f3f3; border-style: solid; border-width: 1px !important; border-radius: 0.5125rem !important; height: 335px !important; } .row.row-button { display: flex; justify-content: center; margin-top: 20px !important; margin-bottom: 20px !important; } .row.row-media-header { margin-bottom: 0px; margin-left: 0px; margin-right: 10px; background-color: #f3f3f3 !important; width: 850px !important; height: 42px !important; }