/* Stacking context, Z-index: - Error indicator : 500 - Drop down : 1000 - Dialog : 1200 - changed to 2001200 in Dialog.css if html[data-fitui-companion="fluent-ui"] - Modal BG layer : 1200 - changed to 2001200 in Dialog.css if html[data-fitui-companion="fluent-ui"] - DialogEditor - Error indicator : 500 - changed to "auto" in DesignEditor.css to position below dialog's resize handle - Context menu : 1300 (mounted in ) - Calendar : 1300 (mounted in , might be re-mounted next to control) - changed to 2000000 in DatePicker.css if html[data-fitui-companion="fluent-ui"] - Dragging : 10000 (incremented by 1 every time draggable is being dragged) - changed to start from 2010000 in DragDrop.js if html[data-fitui-companion="fluent-ui"] - CKEditor - Tags context menu : 9997 (mounted in , might be re-mounted next to control) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"] - Image resize handlers : 9999 (mounted in ) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"] - Emoji panel : 10001 (mounted in ) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"] - Dialogs : 10010 (mounted in , might be re-mounted next to control) - changed to 2000020 in Input.css (+10 compared to modal BG layer) if html[data-fitui-companion="fluent-ui"] - Modal BG layer : 10000 (mounted in ) - changed to 2000010 in Input.css (+10 compared to image resize handlers) if html[data-fitui-companion="fluent-ui"] - Alert, Confirm, Prompt : 50000 (must stay on top of draggable dialogs with z-index 10000+) - changed to 2050000 in Dialog.css if html[data-fitui-companion="fluent-ui"] - Modal BG layer : 50000 - changed to 2050000 in Dialog.css if html[data-fitui-companion="fluent-ui"] */ .FitUiStyleCheck { position: fixed; top: -100px; left: -100px; width: 20px; height: 20px; } /* ControlBase */ .FitUiControl { display: inline-block; width: 200px; /* Important: Update default width for Input control (Input.css + Input.js) if this is changed! */ vertical-align: middle; position: relative; /* Allow absolute positioning of children, relative to control container rather than document */ } .FitUiControl, .FitUiControl * /* A bit aggressive, but makes sure sizing is done properly */ { box-sizing: border-box; } /* Make sure both real and synthetic placeholder values appear the same */ .FitUiControl input::placeholder, .FitUiControl *[data-placeholder] /* Attribute (data-placeholder) is only applied when place holder is active/visible */ { color: #757575; /* Default color in Chrome */ } /* Make it possible to distinguish placeholder values from actual text values in IE */ .FitUiControl input:-ms-input-placeholder, .FitUiControl *[data-placeholder] /* Attribute (data-placeholder) is only applied when place holder is active/visible */ { color: silver; } /* Do not show outline when temporarily holding focus while disabled (See ControlBase._internal.DisableAndKeepFocus()) */ .FitUiControl[data-enabled="false"]:focus { outline: none; } /* Validation error (value validation) */ .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: 0.065em solid red; } .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-errormessage]:not(#LegacyIE):before { /* Modern browsers - placed above control (requires support for transform) */ display: none; content: attr(data-errormessage); border-radius: 3px; background-color: #FEFFDD; box-shadow: 0px 0px 6px 0px #A1A1A1; padding: 0.65em; font-size: 0.9em; white-space: pre-line; position: absolute; box-sizing: border-box; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); margin-top: -3px; z-index: 500; /* Fix if control is aligned to the right */ text-align: left; } .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-errormessage][data-focused="false"]:not(#LegacyIE):hover:before, .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-errormessage][data-focused="true"]:not(#LegacyIE):before { display: inline-block; } .FitUiControlLoadingIndicator { /* From FontAwesome fa-spin class */ -webkit-animation: fa-spin 1.25s infinite linear; animation: fa-spin 1.25s infinite linear; /* From FontAwesome fa class */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0em 0.75em 0em 0.75em; } .FitUiControlLoadingIndicator:before { /* From FontAwesome fa-refresh class */ content: "\f021"; } /* Drag and Drop */ .FitDragDropDraggableHandle { cursor: move; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .FitDragDropDraggable.FitDragDropDragging { z-index: 99999; } /* Disabled control */ div.FitUiControl[data-enabled="false"] { color: #808080; border-color: #808080; } div.FitUiControl[data-enabled="false"] input, div.FitUiControl[data-enabled="false"] textarea { color: #808080; background: white; } /* Disabled layer for legacy IE */ div.FitUiControl[data-enabled="false"] div.FitUiControlDisabledLayer { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; /* Layer must have a BG to catch clicks - made 99% transparent */ background: white; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('Resources/FontAwesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('Resources/FontAwesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype')/*, url('Resources/FontAwesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2')*/, url('Resources/FontAwesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('Resources/FontAwesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('Resources/FontAwesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right { margin-left: .3em; } /* Deprecated as of 4.4.0 */ .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-feed:before, .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-intersex:before, .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-genderless:before { content: "\f22d"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } .fa-yc:before, .fa-y-combinator:before { content: "\f23b"; } .fa-optin-monster:before { content: "\f23c"; } .fa-opencart:before { content: "\f23d"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-battery-4:before, .fa-battery:before, .fa-battery-full:before { content: "\f240"; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: "\f241"; } .fa-battery-2:before, .fa-battery-half:before { content: "\f242"; } .fa-battery-1:before, .fa-battery-quarter:before { content: "\f243"; } .fa-battery-0:before, .fa-battery-empty:before { content: "\f244"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-i-cursor:before { content: "\f246"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-sticky-note:before { content: "\f249"; } .fa-sticky-note-o:before { content: "\f24a"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-clone:before { content: "\f24d"; } .fa-balance-scale:before { content: "\f24e"; } .fa-hourglass-o:before { content: "\f250"; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: "\f251"; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass:before { content: "\f254"; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: "\f255"; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: "\f256"; } .fa-hand-scissors-o:before { content: "\f257"; } .fa-hand-lizard-o:before { content: "\f258"; } .fa-hand-spock-o:before { content: "\f259"; } .fa-hand-pointer-o:before { content: "\f25a"; } .fa-hand-peace-o:before { content: "\f25b"; } .fa-trademark:before { content: "\f25c"; } .fa-registered:before { content: "\f25d"; } .fa-creative-commons:before { content: "\f25e"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-tripadvisor:before { content: "\f262"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-get-pocket:before { content: "\f265"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-safari:before { content: "\f267"; } .fa-chrome:before { content: "\f268"; } .fa-firefox:before { content: "\f269"; } .fa-opera:before { content: "\f26a"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-tv:before, .fa-television:before { content: "\f26c"; } .fa-contao:before { content: "\f26d"; } .fa-500px:before { content: "\f26e"; } .fa-amazon:before { content: "\f270"; } .fa-calendar-plus-o:before { content: "\f271"; } .fa-calendar-minus-o:before { content: "\f272"; } .fa-calendar-times-o:before { content: "\f273"; } .fa-calendar-check-o:before { content: "\f274"; } .fa-industry:before { content: "\f275"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-map-o:before { content: "\f278"; } .fa-map:before { content: "\f279"; } .fa-commenting:before { content: "\f27a"; } .fa-commenting-o:before { content: "\f27b"; } .fa-houzz:before { content: "\f27c"; } .fa-vimeo:before { content: "\f27d"; } .fa-black-tie:before { content: "\f27e"; } .fa-fonticons:before { content: "\f280"; } .fa-reddit-alien:before { content: "\f281"; } .fa-edge:before { content: "\f282"; } .fa-credit-card-alt:before { content: "\f283"; } .fa-codiepie:before { content: "\f284"; } .fa-modx:before { content: "\f285"; } .fa-fort-awesome:before { content: "\f286"; } .fa-usb:before { content: "\f287"; } .fa-product-hunt:before { content: "\f288"; } .fa-mixcloud:before { content: "\f289"; } .fa-scribd:before { content: "\f28a"; } .fa-pause-circle:before { content: "\f28b"; } .fa-pause-circle-o:before { content: "\f28c"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stop-circle-o:before { content: "\f28e"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-hashtag:before { content: "\f292"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-percent:before { content: "\f295"; } .fa-gitlab:before { content: "\f296"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpforms:before { content: "\f298"; } .fa-envira:before { content: "\f299"; } .fa-universal-access:before { content: "\f29a"; } .fa-wheelchair-alt:before { content: "\f29b"; } .fa-question-circle-o:before { content: "\f29c"; } .fa-blind:before { content: "\f29d"; } .fa-audio-description:before { content: "\f29e"; } .fa-volume-control-phone:before { content: "\f2a0"; } .fa-braille:before { content: "\f2a1"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: "\f2a4"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-signing:before, .fa-sign-language:before { content: "\f2a7"; } .fa-low-vision:before { content: "\f2a8"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-first-order:before { content: "\f2b0"; } .fa-yoast:before { content: "\f2b1"; } .fa-themeisle:before { content: "\f2b2"; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: "\f2b3"; } .fa-fa:before, .fa-font-awesome:before { content: "\f2b4"; } .fa-handshake-o:before { content: "\f2b5"; } .fa-envelope-open:before { content: "\f2b6"; } .fa-envelope-open-o:before { content: "\f2b7"; } .fa-linode:before { content: "\f2b8"; } .fa-address-book:before { content: "\f2b9"; } .fa-address-book-o:before { content: "\f2ba"; } .fa-vcard:before, .fa-address-card:before { content: "\f2bb"; } .fa-vcard-o:before, .fa-address-card-o:before { content: "\f2bc"; } .fa-user-circle:before { content: "\f2bd"; } .fa-user-circle-o:before { content: "\f2be"; } .fa-user-o:before { content: "\f2c0"; } .fa-id-badge:before { content: "\f2c1"; } .fa-drivers-license:before, .fa-id-card:before { content: "\f2c2"; } .fa-drivers-license-o:before, .fa-id-card-o:before { content: "\f2c3"; } .fa-quora:before { content: "\f2c4"; } .fa-free-code-camp:before { content: "\f2c5"; } .fa-telegram:before { content: "\f2c6"; } .fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before { content: "\f2c7"; } .fa-thermometer-3:before, .fa-thermometer-three-quarters:before { content: "\f2c8"; } .fa-thermometer-2:before, .fa-thermometer-half:before { content: "\f2c9"; } .fa-thermometer-1:before, .fa-thermometer-quarter:before { content: "\f2ca"; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2cb"; } .fa-shower:before { content: "\f2cc"; } .fa-bathtub:before, .fa-s15:before, .fa-bath:before { content: "\f2cd"; } .fa-podcast:before { content: "\f2ce"; } .fa-window-maximize:before { content: "\f2d0"; } .fa-window-minimize:before { content: "\f2d1"; } .fa-window-restore:before { content: "\f2d2"; } .fa-times-rectangle:before, .fa-window-close:before { content: "\f2d3"; } .fa-times-rectangle-o:before, .fa-window-close-o:before { content: "\f2d4"; } .fa-bandcamp:before { content: "\f2d5"; } .fa-grav:before { content: "\f2d6"; } .fa-etsy:before { content: "\f2d7"; } .fa-imdb:before { content: "\f2d8"; } .fa-ravelry:before { content: "\f2d9"; } .fa-eercast:before { content: "\f2da"; } .fa-microchip:before { content: "\f2db"; } .fa-snowflake-o:before { content: "\f2dc"; } .fa-superpowers:before { content: "\f2dd"; } .fa-wpexplorer:before { content: "\f2de"; } .fa-meetup:before { content: "\f2e0"; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } /*! jQuery UI - v1.11.4 - 2016-07-08 * http://jqueryui.com * Includes: core.css, datepicker.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px * Copyright jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .fitui-helper-hidden { display: none; } .fitui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .fitui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .fitui-helper-clearfix:before, .fitui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .fitui-helper-clearfix:after { clear: both; } .fitui-helper-clearfix { min-height: 0; /* support: IE7 */ } .fitui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .fitui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .fitui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .fitui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .fitui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .fitui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .fitui-datepicker .fitui-datepicker-header { position: relative; padding: .2em 0; } .fitui-datepicker .fitui-datepicker-prev, .fitui-datepicker .fitui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .fitui-datepicker .fitui-datepicker-prev-hover, .fitui-datepicker .fitui-datepicker-next-hover { top: 1px; } .fitui-datepicker .fitui-datepicker-prev { left: 2px; } .fitui-datepicker .fitui-datepicker-next { right: 2px; } .fitui-datepicker .fitui-datepicker-prev-hover { left: 1px; } .fitui-datepicker .fitui-datepicker-next-hover { right: 1px; } .fitui-datepicker .fitui-datepicker-prev span, .fitui-datepicker .fitui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .fitui-datepicker .fitui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .fitui-datepicker .fitui-datepicker-title select { font-size: 1em; margin: 1px 0; } .fitui-datepicker select.fitui-datepicker-month, .fitui-datepicker select.fitui-datepicker-year { width: 45%; } .fitui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .fitui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .fitui-datepicker td { border: 0; padding: 1px; } .fitui-datepicker td span, .fitui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .fitui-datepicker .fitui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .fitui-datepicker .fitui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .fitui-datepicker .fitui-datepicker-buttonpane button.fitui-datepicker-current { float: left; } /* with multiple calendars */ .fitui-datepicker.fitui-datepicker-multi { width: auto; } .fitui-datepicker-multi .fitui-datepicker-group { float: left; } .fitui-datepicker-multi .fitui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .fitui-datepicker-multi-2 .fitui-datepicker-group { width: 50%; } .fitui-datepicker-multi-3 .fitui-datepicker-group { width: 33.3%; } .fitui-datepicker-multi-4 .fitui-datepicker-group { width: 25%; } .fitui-datepicker-multi .fitui-datepicker-group-last .fitui-datepicker-header, .fitui-datepicker-multi .fitui-datepicker-group-middle .fitui-datepicker-header { border-left-width: 0; } .fitui-datepicker-multi .fitui-datepicker-buttonpane { clear: left; } .fitui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .fitui-datepicker-rtl { direction: rtl; } .fitui-datepicker-rtl .fitui-datepicker-prev { right: 2px; left: auto; } .fitui-datepicker-rtl .fitui-datepicker-next { left: 2px; right: auto; } .fitui-datepicker-rtl .fitui-datepicker-prev:hover { right: 1px; left: auto; } .fitui-datepicker-rtl .fitui-datepicker-next:hover { left: 1px; right: auto; } .fitui-datepicker-rtl .fitui-datepicker-buttonpane { clear: right; } .fitui-datepicker-rtl .fitui-datepicker-buttonpane button { float: left; } .fitui-datepicker-rtl .fitui-datepicker-buttonpane button.fitui-datepicker-current, .fitui-datepicker-rtl .fitui-datepicker-group { float: right; } .fitui-datepicker-rtl .fitui-datepicker-group-last .fitui-datepicker-header, .fitui-datepicker-rtl .fitui-datepicker-group-middle .fitui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* Component containers ----------------------------------*/ .fitui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .fitui-widget .fitui-widget { font-size: 1em; } .fitui-widget input, .fitui-widget select, .fitui-widget textarea, .fitui-widget button { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .fitui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .fitui-widget-content a { color: #333333; } .fitui-widget-header { border: 1px solid #dddddd; background: #e9e9e9; color: #333333; font-weight: bold; } .fitui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .fitui-state-default, .fitui-widget-content .fitui-state-default, .fitui-widget-header .fitui-state-default { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .fitui-state-default a, .fitui-state-default a:link, .fitui-state-default a:visited { color: #454545; text-decoration: none; } .fitui-state-hover, .fitui-widget-content .fitui-state-hover, .fitui-widget-header .fitui-state-hover, .fitui-state-focus, .fitui-widget-content .fitui-state-focus, .fitui-widget-header .fitui-state-focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; } .fitui-state-hover a, .fitui-state-hover a:hover, .fitui-state-hover a:link, .fitui-state-hover a:visited, .fitui-state-focus a, .fitui-state-focus a:hover, .fitui-state-focus a:link, .fitui-state-focus a:visited { color: #2b2b2b; text-decoration: none; } .fitui-state-active, .fitui-widget-content .fitui-state-active, .fitui-widget-header .fitui-state-active { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: #ffffff; } .fitui-state-active a, .fitui-state-active a:link, .fitui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .fitui-state-highlight, .fitui-widget-content .fitui-state-highlight, .fitui-widget-header .fitui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .fitui-state-highlight a, .fitui-widget-content .fitui-state-highlight a, .fitui-widget-header .fitui-state-highlight a { color: #777620; } .fitui-state-error, .fitui-widget-content .fitui-state-error, .fitui-widget-header .fitui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .fitui-state-error a, .fitui-widget-content .fitui-state-error a, .fitui-widget-header .fitui-state-error a { color: #5f3f3f; } .fitui-state-error-text, .fitui-widget-content .fitui-state-error-text, .fitui-widget-header .fitui-state-error-text { color: #5f3f3f; } .fitui-priority-primary, .fitui-widget-content .fitui-priority-primary, .fitui-widget-header .fitui-priority-primary { font-weight: bold; } .fitui-priority-secondary, .fitui-widget-content .fitui-priority-secondary, .fitui-widget-header .fitui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .fitui-state-disabled, .fitui-widget-content .fitui-state-disabled, .fitui-widget-header .fitui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .fitui-state-disabled .fitui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .fitui-icon { width: 16px; height: 16px; } .fitui-icon, .fitui-widget-content .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_444444_256x240.png"); } .fitui-widget-header .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_444444_256x240.png"); } .fitui-state-default .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_777777_256x240.png"); } .fitui-state-hover .fitui-icon, .fitui-state-focus .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_555555_256x240.png"); } .fitui-state-active .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_ffffff_256x240.png"); } .fitui-state-highlight .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_777620_256x240.png"); } .fitui-state-error .fitui-icon, .fitui-state-error-text .fitui-icon { background-image: url("Resources/JqueryUI-1.11.4.custom/images/ui-icons_cc0000_256x240.png"); } /* positioning */ .fitui-icon-blank { background-position: 16px 16px; } .fitui-icon-carat-1-n { background-position: 0 0; } .fitui-icon-carat-1-ne { background-position: -16px 0; } .fitui-icon-carat-1-e { background-position: -32px 0; } .fitui-icon-carat-1-se { background-position: -48px 0; } .fitui-icon-carat-1-s { background-position: -64px 0; } .fitui-icon-carat-1-sw { background-position: -80px 0; } .fitui-icon-carat-1-w { background-position: -96px 0; } .fitui-icon-carat-1-nw { background-position: -112px 0; } .fitui-icon-carat-2-n-s { background-position: -128px 0; } .fitui-icon-carat-2-e-w { background-position: -144px 0; } .fitui-icon-triangle-1-n { background-position: 0 -16px; } .fitui-icon-triangle-1-ne { background-position: -16px -16px; } .fitui-icon-triangle-1-e { background-position: -32px -16px; } .fitui-icon-triangle-1-se { background-position: -48px -16px; } .fitui-icon-triangle-1-s { background-position: -64px -16px; } .fitui-icon-triangle-1-sw { background-position: -80px -16px; } .fitui-icon-triangle-1-w { background-position: -96px -16px; } .fitui-icon-triangle-1-nw { background-position: -112px -16px; } .fitui-icon-triangle-2-n-s { background-position: -128px -16px; } .fitui-icon-triangle-2-e-w { background-position: -144px -16px; } .fitui-icon-arrow-1-n { background-position: 0 -32px; } .fitui-icon-arrow-1-ne { background-position: -16px -32px; } .fitui-icon-arrow-1-e { background-position: -32px -32px; } .fitui-icon-arrow-1-se { background-position: -48px -32px; } .fitui-icon-arrow-1-s { background-position: -64px -32px; } .fitui-icon-arrow-1-sw { background-position: -80px -32px; } .fitui-icon-arrow-1-w { background-position: -96px -32px; } .fitui-icon-arrow-1-nw { background-position: -112px -32px; } .fitui-icon-arrow-2-n-s { background-position: -128px -32px; } .fitui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .fitui-icon-arrow-2-e-w { background-position: -160px -32px; } .fitui-icon-arrow-2-se-nw { background-position: -176px -32px; } .fitui-icon-arrowstop-1-n { background-position: -192px -32px; } .fitui-icon-arrowstop-1-e { background-position: -208px -32px; } .fitui-icon-arrowstop-1-s { background-position: -224px -32px; } .fitui-icon-arrowstop-1-w { background-position: -240px -32px; } .fitui-icon-arrowthick-1-n { background-position: 0 -48px; } .fitui-icon-arrowthick-1-ne { background-position: -16px -48px; } .fitui-icon-arrowthick-1-e { background-position: -32px -48px; } .fitui-icon-arrowthick-1-se { background-position: -48px -48px; } .fitui-icon-arrowthick-1-s { background-position: -64px -48px; } .fitui-icon-arrowthick-1-sw { background-position: -80px -48px; } .fitui-icon-arrowthick-1-w { background-position: -96px -48px; } .fitui-icon-arrowthick-1-nw { background-position: -112px -48px; } .fitui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .fitui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .fitui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .fitui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .fitui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .fitui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .fitui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .fitui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .fitui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .fitui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .fitui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .fitui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .fitui-icon-arrowreturn-1-w { background-position: -64px -64px; } .fitui-icon-arrowreturn-1-n { background-position: -80px -64px; } .fitui-icon-arrowreturn-1-e { background-position: -96px -64px; } .fitui-icon-arrowreturn-1-s { background-position: -112px -64px; } .fitui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .fitui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .fitui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .fitui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .fitui-icon-arrow-4 { background-position: 0 -80px; } .fitui-icon-arrow-4-diag { background-position: -16px -80px; } .fitui-icon-extlink { background-position: -32px -80px; } .fitui-icon-newwin { background-position: -48px -80px; } .fitui-icon-refresh { background-position: -64px -80px; } .fitui-icon-shuffle { background-position: -80px -80px; } .fitui-icon-transfer-e-w { background-position: -96px -80px; } .fitui-icon-transferthick-e-w { background-position: -112px -80px; } .fitui-icon-folder-collapsed { background-position: 0 -96px; } .fitui-icon-folder-open { background-position: -16px -96px; } .fitui-icon-document { background-position: -32px -96px; } .fitui-icon-document-b { background-position: -48px -96px; } .fitui-icon-note { background-position: -64px -96px; } .fitui-icon-mail-closed { background-position: -80px -96px; } .fitui-icon-mail-open { background-position: -96px -96px; } .fitui-icon-suitcase { background-position: -112px -96px; } .fitui-icon-comment { background-position: -128px -96px; } .fitui-icon-person { background-position: -144px -96px; } .fitui-icon-print { background-position: -160px -96px; } .fitui-icon-trash { background-position: -176px -96px; } .fitui-icon-locked { background-position: -192px -96px; } .fitui-icon-unlocked { background-position: -208px -96px; } .fitui-icon-bookmark { background-position: -224px -96px; } .fitui-icon-tag { background-position: -240px -96px; } .fitui-icon-home { background-position: 0 -112px; } .fitui-icon-flag { background-position: -16px -112px; } .fitui-icon-calendar { background-position: -32px -112px; } .fitui-icon-cart { background-position: -48px -112px; } .fitui-icon-pencil { background-position: -64px -112px; } .fitui-icon-clock { background-position: -80px -112px; } .fitui-icon-disk { background-position: -96px -112px; } .fitui-icon-calculator { background-position: -112px -112px; } .fitui-icon-zoomin { background-position: -128px -112px; } .fitui-icon-zoomout { background-position: -144px -112px; } .fitui-icon-search { background-position: -160px -112px; } .fitui-icon-wrench { background-position: -176px -112px; } .fitui-icon-gear { background-position: -192px -112px; } .fitui-icon-heart { background-position: -208px -112px; } .fitui-icon-star { background-position: -224px -112px; } .fitui-icon-link { background-position: -240px -112px; } .fitui-icon-cancel { background-position: 0 -128px; } .fitui-icon-plus { background-position: -16px -128px; } .fitui-icon-plusthick { background-position: -32px -128px; } .fitui-icon-minus { background-position: -48px -128px; } .fitui-icon-minusthick { background-position: -64px -128px; } .fitui-icon-close { background-position: -80px -128px; } .fitui-icon-closethick { background-position: -96px -128px; } .fitui-icon-key { background-position: -112px -128px; } .fitui-icon-lightbulb { background-position: -128px -128px; } .fitui-icon-scissors { background-position: -144px -128px; } .fitui-icon-clipboard { background-position: -160px -128px; } .fitui-icon-copy { background-position: -176px -128px; } .fitui-icon-contact { background-position: -192px -128px; } .fitui-icon-image { background-position: -208px -128px; } .fitui-icon-video { background-position: -224px -128px; } .fitui-icon-script { background-position: -240px -128px; } .fitui-icon-alert { background-position: 0 -144px; } .fitui-icon-info { background-position: -16px -144px; } .fitui-icon-notice { background-position: -32px -144px; } .fitui-icon-help { background-position: -48px -144px; } .fitui-icon-check { background-position: -64px -144px; } .fitui-icon-bullet { background-position: -80px -144px; } .fitui-icon-radio-on { background-position: -96px -144px; } .fitui-icon-radio-off { background-position: -112px -144px; } .fitui-icon-pin-w { background-position: -128px -144px; } .fitui-icon-pin-s { background-position: -144px -144px; } .fitui-icon-play { background-position: 0 -160px; } .fitui-icon-pause { background-position: -16px -160px; } .fitui-icon-seek-next { background-position: -32px -160px; } .fitui-icon-seek-prev { background-position: -48px -160px; } .fitui-icon-seek-end { background-position: -64px -160px; } .fitui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .fitui-icon-seek-first { background-position: -80px -160px; } .fitui-icon-stop { background-position: -96px -160px; } .fitui-icon-eject { background-position: -112px -160px; } .fitui-icon-volume-off { background-position: -128px -160px; } .fitui-icon-volume-on { background-position: -144px -160px; } .fitui-icon-power { background-position: 0 -176px; } .fitui-icon-signal-diag { background-position: -16px -176px; } .fitui-icon-signal { background-position: -32px -176px; } .fitui-icon-battery-0 { background-position: -48px -176px; } .fitui-icon-battery-1 { background-position: -64px -176px; } .fitui-icon-battery-2 { background-position: -80px -176px; } .fitui-icon-battery-3 { background-position: -96px -176px; } .fitui-icon-circle-plus { background-position: 0 -192px; } .fitui-icon-circle-minus { background-position: -16px -192px; } .fitui-icon-circle-close { background-position: -32px -192px; } .fitui-icon-circle-triangle-e { background-position: -48px -192px; } .fitui-icon-circle-triangle-s { background-position: -64px -192px; } .fitui-icon-circle-triangle-w { background-position: -80px -192px; } .fitui-icon-circle-triangle-n { background-position: -96px -192px; } .fitui-icon-circle-arrow-e { background-position: -112px -192px; } .fitui-icon-circle-arrow-s { background-position: -128px -192px; } .fitui-icon-circle-arrow-w { background-position: -144px -192px; } .fitui-icon-circle-arrow-n { background-position: -160px -192px; } .fitui-icon-circle-zoomin { background-position: -176px -192px; } .fitui-icon-circle-zoomout { background-position: -192px -192px; } .fitui-icon-circle-check { background-position: -208px -192px; } .fitui-icon-circlesmall-plus { background-position: 0 -208px; } .fitui-icon-circlesmall-minus { background-position: -16px -208px; } .fitui-icon-circlesmall-close { background-position: -32px -208px; } .fitui-icon-squaresmall-plus { background-position: -48px -208px; } .fitui-icon-squaresmall-minus { background-position: -64px -208px; } .fitui-icon-squaresmall-close { background-position: -80px -208px; } .fitui-icon-grip-dotted-vertical { background-position: 0 -224px; } .fitui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .fitui-icon-grip-solid-vertical { background-position: -32px -224px; } .fitui-icon-grip-solid-horizontal { background-position: -48px -224px; } .fitui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .fitui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .fitui-corner-all, .fitui-corner-top, .fitui-corner-left, .fitui-corner-tl { border-top-left-radius: 3px; } .fitui-corner-all, .fitui-corner-top, .fitui-corner-right, .fitui-corner-tr { border-top-right-radius: 3px; } .fitui-corner-all, .fitui-corner-bottom, .fitui-corner-left, .fitui-corner-bl { border-bottom-left-radius: 3px; } .fitui-corner-all, .fitui-corner-bottom, .fitui-corner-right, .fitui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .fitui-widget-overlay { background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .fitui-widget-shadow { margin: 0px 0 0 0px; padding: 5px; background: #666666; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ border-radius: 8px; } div.FitUiControlButton { cursor: pointer; width: auto; height: 2em; /* Equal height for all controls */ height: auto\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE which does not render properly when input height is set to 100% of container */ text-align: center; white-space: nowrap; overflow: hidden; /*vertical-align: bottom;*/ /* Moved to div.FitUiControl */ /* Overflow:hidden (above) changes the baseline for inline-block elements - see CSS specification (scroll to bottom): https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align */ padding: 0.3em 0.75em 0.3em 0.75em; border-radius: 3px; border-width: 0.065em; border-width: 1px\9; border-style: solid; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* data-type="Default" */ border-color: #BBBBBB; background-color: #FFFFFF; color: #333333; } div.FitUiControlButton[data-type="Primary"] { border-color: #2E6DA4; background-color: #337AB7; color: #FFFFFF; } div.FitUiControlButton[data-type="Success"] { border-color: #4CAE4C; background-color: #5CB85C; color: #FFFFFF; } div.FitUiControlButton[data-type="Info"] { border-color: #46B8DA; background-color: #5BC0DE; color: #FFFFFF; } div.FitUiControlButton[data-type="Warning"] { border-color: #D58512; background-color: #EC971F; color: #FFFFFF; } div.FitUiControlButton[data-type="Danger"] { border-color: #D43F3A; background-color: #D9534F; color: #FFFFFF; } div.FitUiControlButton > div { /* Center icon and title vertically when height is set (works for block and inline-block). Does not work on IE8 which is fine. Also notice that this doesn't work on WebKit/Chrome unless a repaint is forced: https://code.google.com/p/chromium/issues/detail?id=573715 */ position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media all\0 /* Vertically align text and icon in IE8 */ { div.FitUiControlButton > div { /* Undo vertical alignment for modern browsers */ position: static; top: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; display: table; height: 100%; } div.FitUiControlButton > div > span { display: table-cell; vertical-align: middle; } } div.FitUiControlButton[data-icon][data-title] > div > span + span { padding-left: 0.5em; } div.FitUiControlButton[data-enabled="false"] { cursor: not-allowed; opacity: 0.65; } div.FitUiControlButton:focus { outline: none; /* Chrome fix - even though tabIndex is -1, control is still outlined when clicked */ } div.FitUiControlButton[data-enabled="true"]:focus { outline: 0.125em solid #4484C7; outline-offset: 0.15em; border: 1px solid #4484C7\9; /* Legacy IE (9 and earlier) which does not support outline */ } /* Fluent UI compatibility */ html[data-fitui-companion="fluent-ui"] div.FitUiControlButton { /*height: 2.65em; padding-left: 1.35em; padding-right: 1.35em;*/ padding-left: 1em; padding-right: 1em; border-radius: 2px; border: 1px solid #8A8886; background-color: white; color: #292E34; } html[data-fitui-companion="fluent-ui"] div.FitUiControlButton[data-type="Primary"], html[data-fitui-companion="fluent-ui"] div.FitUiControlButton[data-type="Success"] { border-color: #39A5DC; background-color: #39A5DC; color: white; } div.FitUiControlCheckBox { cursor: pointer; width: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.FitUiControlCheckBox[data-enabled="false"] { cursor: not-allowed; opacity: 0.65; } div.FitUiControlCheckBox:focus { outline: none; /* Chrome fix - even though tabIndex is -1, control is still outlined when clicked */ } div.FitUiControlCheckBox[data-enabled="true"]:focus > div { outline: 0.125em solid #4484C7; outline-offset: 0.15em; border: 1px solid #4484C7\9; /* Legacy IE (9 and earlier) which does not support outline */ } div.FitUiControlCheckBox > div { border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 2px; margin-right: 0.3em; color: #333333; background-color: #FFFFFF; } div.FitUiControlCheckBox[data-checked="false"] > div:before { visibility: hidden; } div.FitUiControlCheckBox[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: none; } div.FitUiControlCheckBox[data-enabled="true"][data-valid="false"][data-showinvalid="true"] > div { border-color: red; } div.FitUiControlColorPicker { height: 2em; /* Equal height for all controls */ width: 200px; border: 0.065em solid #BBBBBB; border-radius: 2px; background: repeating-linear-gradient(-55deg, #f2f2f2, #f2f2f2 0.4em, #e6e6e6 0.4em, #e6e6e6 0.8em); /* Indicate no color selection */ } div.FitUiControlColorPicker input[type="color"], div.FitUiControlColorPicker span { cursor: pointer; } div.FitUiControlColorPicker[data-enabled="false"] input[type="color"], div.FitUiControlColorPicker[data-enabled="false"] span { cursor: default; } div.FitUiControlColorPicker input[type="color"] { width: 100%; height: 100%; opacity: 0; /* Hide ugly native picker - selected color is applied as background-color to outer control element */ } /* Focused indicator */ div.FitUiControlColorPicker[data-focused="true"] { border-color: #4484C7; } /* Error indicator */ div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: none; } div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-focused="false"] { border-color: red; } /* Disabled indicator */ div.FitUiControlColorPicker[data-enabled="false"] { opacity: 0.7; } div.FitUiControlColorPicker[data-enabled="false"] span { opacity: 0.5; } /* Label for HEX color code */ div.FitUiControlColorPicker span:first-of-type { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; /* Allow user to start text selection far away from value */ padding-left: 0.25em; } /* Clear button */ div.FitUiControlColorPicker span:last-of-type { position: absolute; top: 50%; transform: translateY(calc(-50% - 0.05em)); right: 0.2em; font-size: 1.4em; } /* Hide label and clear button when no color is selected */ div.FitUiControlColorPicker[data-transparent="true"] span:last-of-type { display: none; } div.FitUiControlContextMenu.FitUiControlTreeView { border: 0.065em solid #BBBBBB; border-width: 1px\9; background-color: #FFFFFF; color: #333333; padding: 0.75em; position: absolute; /* top/left set using JS */ z-index: 1300; cursor: pointer; /* Prevent arrow being shown between items (padding) */ } /* Transform TreeView to context menu, unless on low-res devices */ @media (min-device-width: 600px) and (min-device-height: 400px) /* Media query not supported by IE8 */ { div.FitUiControlContextMenu.FitUiControlTreeView { overflow: visible; /* Disable scrolling to allow submenus to be displayed next to parent */ padding: 0px; } /* Padding */ div.FitUiControlContextMenu.FitUiControlTreeView li ul li { padding: 0.1em 0em 0.1em 0.5em; } div.FitUiControlContextMenu.FitUiControlTreeView li[data-deep="true"] > ul > li { padding-left: 1.5em; /* Make room for expand/collapse icon */ } div.FitUiControlContextMenu.FitUiControlTreeView li ul li > span, div.FitUiControlContextMenu.FitUiControlTreeView[data-picker="false"] li ul li:focus > span, div.FitUiControlContextMenu.FitUiControlTreeView li ul li[data-active="true"] > span { padding: 0px 1em 0px 0px; } /* Remove highlighting border for selected item - use background color instead */ div.FitUiControlContextMenu.FitUiControlTreeView[data-picker="false"] li ul li:focus > span { border: none; } div.FitUiControlContextMenu.FitUiControlTreeView[data-sticky="false"][data-keynav="false"] li ul li:hover, div.FitUiControlContextMenu.FitUiControlTreeView[data-keynav="true"] li ul li:focus, div.FitUiControlContextMenu.FitUiControlTreeView[data-sticky="true"] li ul li:focus { background: #E8E8E8; /* Legacy IE fallback */ background: rgba(0, 0, 0, 0.1); } /* Display submenu when hovering parent */ div.FitUiControlContextMenu.FitUiControlTreeView[data-sticky="false"][data-keynav="false"] li ul li:hover > ul { display: block; } /* Float submenu next to parent item */ div.FitUiControlContextMenu.FitUiControlTreeView li ul li > span { display: inline-block; width: 100%; } div.FitUiControlContextMenu.FitUiControlTreeView li ul li[data-state="expanded"] > ul, div.FitUiControlContextMenu.FitUiControlTreeView[data-sticky="false"][data-keynav="false"] li ul li:hover > ul { display: inline-block; position: absolute; z-index: 1300; border: 0.065em solid #BBBBBB; border-width: 1px\9; background-color: #FFFFFF; margin-top: -0.1em; /* Compensate for padding */ transform: translateY(-0.065em); /* Compensate for border */ } /* Boundary detection - open upward */ div.FitUiControlContextMenu.FitUiControlTreeView li ul li[data-state="expanded"] > ul[data-viewportcollision="true"], div.FitUiControlContextMenu.FitUiControlTreeView[data-sticky="false"][data-keynav="false"] li ul li:hover > ul[data-viewportcollision="true"] { bottom: 0px; } } div.FitUiControlDatePicker { height: 2em; /* Equal height for all controls */ height: auto\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE which does not render properly when input height is set to 100% of container */ } div.FitUiControlDatePicker input[type="text"] { /* Same look and feel as Fit.UI Input control */ width: 100%; height: 100%; padding: 0.2em; padding-left: 0.3em; padding-right: 0.3em; margin: 0px; font-size: inherit; border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 2px; display: block; /* Remove annoying spacing above input when outline is applied (when value is invalid) */ /* Make it look decent on iOS Safari */ -moz-appearance: none; -webkit-appearance: none; appearance: none; } /* Hide clear button within input fields in IE */ div.FitUiControlDatePicker input[type="text"]::-ms-clear { display: none; } /* Position trigger icon */ div.FitUiControlDatePicker span { position: absolute; right: 0em; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 0.5em; } div.FitUiControlDatePicker[data-time="true"] span { right: auto; left: 6em; } /* Date picker with Time picker */ div.FitUiControlDatePicker[data-time="true"] input[type="text"] { display: inline-block; } div.FitUiControlDatePicker[data-time="true"] input[type="text"]:first-child { width: 65%; /* Make sure to use the same value for input[type="date"] (mobile) */ border-right-style: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; text-align: left; } div.FitUiControlDatePicker[data-time="true"] input[type="text"] + input[type="text"] { width: 35%; /* Make sure to use the same value for input[type="time"] (mobile) */ border-left-style: none; border-top-left-radius: 0px; border-bottom-left-radius: 0px; text-align: right; } /* Error indication */ div.FitUiControlDatePicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: none; } div.FitUiControlDatePicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"] input[type="text"] { border-color: red; } /* Remove outline when controls have focus */ div.FitUiControlDatePicker input[type="text"]:focus, div.fitui-datepicker select:focus { outline: none; } /* Calendar widget styles */ div.fitui-datepicker { width: 18em; margin-top: 1px; z-index: 1300 !important; /* Using !important to override inline style */ box-shadow: 0px 0px 0.75em #D8D8D8; } /* Fluent UI compatibility */ html[data-fitui-companion="fluent-ui"] div.fitui-datepicker { /* Calendar widget is mounted in document root - make sure it stays on top of everything else in Fluent UI which use very aggressive z-index values. */ z-index: 2000000 !important; /* Using !important to override inline style */ } td.fitui-datepicker-week-col { font-weight: bold; text-align: center; } div.fitui-datepicker-header { margin: -0.2em; border: none; border-bottom: 1px solid #E4E4E4; border-radius: 0px; background-color: #F8F4F4; } div.fitui-datepicker-header a.fitui-datepicker-prev, /* Links in which arrow icons are found */ div.fitui-datepicker-header a.fitui-datepicker-next { top: 0.175em; } div.fitui-datepicker-header a.fitui-datepicker-prev { border: 1px solid transparent; left: 0.21em; } div.fitui-datepicker-rtl div.fitui-datepicker-header a.fitui-datepicker-prev /* Buttons are flipped - previous button in right side of calendar widget */ { left: auto; right: 0.21em; } div.fitui-datepicker-header a.fitui-datepicker-prev-hover { border-color: #D5D5D5; } div.fitui-datepicker-header a.fitui-datepicker-next { border: 1px solid transparent; right: 0.21em; } div.fitui-datepicker-rtl div.fitui-datepicker-header a.fitui-datepicker-next /* Buttons are flipped - next button in left side of calendar widget */ { right: auto; left: 0.21em; } div.fitui-datepicker-header a.fitui-datepicker-next-hover { border-color: #D5D5D5; } div.fitui-datepicker-header span.fitui-icon /* Arrow icons in header links */ { width: 100%; height: 100%; top: 50%; transform: translateY(-50%); left: 0; margin-top: 0; margin-left: 0; } div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-w, /* Left-side arrow icon */ div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e /* Right-side arrow icon */ { background: none; /* Remove image icon */ } div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-w:before, /* New font based left-side arrow icon */ div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e:before /* New font based right-side arrow icon */ { font-family: "FontAwesome"; content: "\f053"; /* chevron left */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #333333; text-indent: 0; } div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e:before /* New font based right-side arrow icon */ { content: "\f054"; /* chevron right */ } div.fitui-datepicker div.fitui-datepicker-title select /* Year/month pickers */ { margin: 0.2em; padding: 0.05em 0.3em; border: 1px solid #CECECE; /* Common look and feel across all browsers */ -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 2px; background-color: white; color: #333333; } div.fitui-datepicker div.fitui-datepicker-title select::-ms-expand /* IE10+ */ { display: none; } div.fitui-widget-content a.fitui-state-default /* Day cells */ { border-color: transparent; background: none; padding: 0.5em; } div.fitui-widget-content a.fitui-state-default:hover { background: #E6E6E6; } div.fitui-widget-content a.fitui-state-highlight /* Current day */ { color: #454545; background-color: #EDEDED; } div.fitui-widget-content a.fitui-state-active /* Selected day */ { background: #D2E8FF; color: #454545; border-color: #83BBE8; } /* Support for week selection */ div.fitui-datepicker[data-select-week="true"] tbody tr:hover /* Highlight rows when hovered */ { background: #E4E4E4; } div.fitui-datepicker[data-select-week="true"] tbody td a:hover /* Disable highlighting when hovering day cells */ { background: none; } div.fitui-datepicker[data-select-week="true"] tbody tr:has(a.fitui-state-active) /* Highlight row that contains (has) selected day */ { background: #D2E8FF; } div.fitui-datepicker[data-select-week="true"] tbody tr:has(a.fitui-state-active) a.fitui-state-highlight /* Change highlight color of current day if contained in selected week */ { background: #B3D8FF; } div.fitui-datepicker[data-select-week="true"] tbody a.fitui-state-active /* Disable highlighting for selected day (sunday, monday, or saturday, depending on locale) */ { background: none; border-color: transparent; } /* Mobile */ div.FitUiControlDatePicker input[type="date"], div.FitUiControlDatePicker input[type="time"] { position: absolute; top: 0px; height: 100%; opacity: 0; /* Make the mobile controls invisible but have them triggered when touched - remove this to test on Desktop */ } div.FitUiControlDatePicker input[type="date"] { left: 0px; width: 65%; } div.FitUiControlDatePicker input[type="time"] { right: 0px; width: 35%; } div.FitUiControlDialog { border: 0.065em solid #333333; border-width: 1px\9; background: #FFFFFF; width: auto; min-width: 280px; /* Must be identical to the value specified in MinimumWidth(..) in Dialog.js ! */ max-width: 800px; /* Must be identical to the value specified in MaximumWidth(..) in Dialog.js ! */ position: fixed; left: 0px; top: 0px; z-index: 1200; } div.FitUiControlDialog:not(#LegacyIE) /* :not() not supported by IE8 and below */ { border: none; box-shadow: 0px 0px 10px 0px #333333; border-radius: 2px; } div.FitUiControlDialog[data-resizable="true"] { min-width: 15em; max-width: 100%; min-height: 10em; max-height: 100%; } div.FitUiControlDialog[data-maximized="true"] { /* Using !important due to specificity above (:not(#LegacyIE)). Defining the selector like below will break it in Legacy IE: div.FitUiControlDialog[data-maximized="true"]:not(#LegacyIE), div.FitUiControlDialog[data-maximized="true"] { ... } */ top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; /* Using !important to override properties in style attribute */ width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; } div.FitUiControlDialogTitle { font-weight: bold; overflow: hidden; white-space: nowrap; } div.FitUiControlDialogTitle, div.FitUiControlDialogTitleText, div.FitUiControlDialogTitleButtons { height: 3.2em; } div.FitUiControlDialogTitleText { padding-left: 1em; line-height: 3.2em; } div.FitUiControlDialogTitleButtons { position: absolute; right: 0; top: 0; padding: 0.65em; } div.FitUiControlDialogTitle, div.FitUiControlDialogTitleButtons { background-color: white; border-bottom: 0.065em solid silver; border-bottom-width: 1px\9; } .FitUiControlDialogTitle div.FitUiControlButton + div.FitUiControlButton { margin-left: 0.5em; } div.FitUiControlDialogContent { padding: 1.5em; overflow: auto; height: 100%; } div.FitUiControlDialog[data-framed="true"] { /* Assume some sensible height that will be consistent across browsers when dialog can't adjust to content since it is framed. */ height: 40%; } div.FitUiControlDialog[data-framed="true"] div.FitUiControlDialogContent { padding: 0px; /* iFrame assumes height of content on iOS, so make surrounding div scrollable instead. All other browsers will respect the dimensions set on the iframe (width=100% x height=100%), in which case the iframe will be scrollable, and remain within the boundaries of div.FitUiControlDialogContent. So fortunately these settings will not cause problems on standard compliant browsers. */ -webkit-overflow-scrolling: touch; overflow: auto; } div.FitUiControlDialog iframe { display: block; width: 100%; height: 100%; } div.FitUiControlDialogResizer { width: 0.65em; height: 0.65em; border-left: 0.65em solid transparent; border-bottom: 0.65em solid #A0A0A0; cursor: nwse-resize; position: absolute; right: 0.1em; bottom: 0.1em; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } div.FitUiControlDialogButtons { /*background-color: white;*/ padding: 0px; border-top: 0.065em solid silver; border-top-width: 1px\9; text-align: right; } div.FitUiControlDialogButtons div.FitUiControlButton { margin: 0.75em; } div.FitUiControlDialogButtons div.FitUiControlButton + div.FitUiControlButton { margin-left: 0px; } div.FitUiControlDialogModalLayer { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1200; background-color: #333333; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } /* Alert, Confirm and Promp dialogs */ div.FitUiControlDialogBaseModalLayer, div.FitUiControlDialogBase { z-index: 50000; /* Remain on top of draggable dialogs with z-index 10000+ */ } /* Fluent UI compatibility */ html[data-fitui-companion="fluent-ui"] div.FitUiControlDialog, html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogModalLayer { z-index: 2001200; } html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogBaseModalLayer, html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogBase { z-index: 2050000; /* Remain on top of draggable dialogs with z-index 2010000+ */ } div.FitUiControlDialogEditor div.FitUiControlDialogContent { padding: 0px; overflow: hidden; /* Make sure scrollbars do not emerge when resizing dialog (reducing height) - editor has scrollbars */ } div.FitUiControlDialogEditor div.FitUiControlInput[data-designmode="true"] .cke_chrome { border: none; } div.FitUiControlDialogEditor .cke_wysiwyg_div { padding: 0.5em 1.5em; } div.FitUiControlDialogEditor .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-errormessage]:not(#LegacyIE):before { display: inline-block; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; margin-top: 0px; z-index: auto; /* Position below dialog's resize handle */ bottom: 0px; left: 0px; right: 0px; } div.FitUiControlDialogEditor .FitUiControl[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-errormessage]:not(#LegacyIE) .cke_wysiwyg_div { padding-bottom: 2em; } div.FitUiControlDropDown { min-width: 50px; /* In case width is set to 100% and control is squeezed */ text-align: left; /* To prevent incorrect rendering if parent contain has text-align:right */ /*vertical-align: bottom;*/ /* Moved to div.FitUiControl */ /* Overflow:hidden (div.FitUiControlDropDownItems) changes the baseline for inline-block elements - see CSS specification (scroll to bottom): https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align */ } div.FitUiControlDropDownItems /* Item container */ { min-height: 2em; /* Equal height for all controls */ min-height: 0\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE which otherwise does not render control properly */ border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 2px; padding: 0.1em; padding-left: 0.3em; /* Ensure consistent indentation for input text compared to e.g. Input and DatePicker */ padding-right: 2em; /* Compensate for drop down arrow button to avoid items being partially hidden behind it */ background-color: white; cursor: text; white-space: normal; /* Make sure items wrap properly if used in container with nowrap */ position: relative; /* Allow absolute positioning of arrow icon within item container */ overflow: hidden; /* Prevent large items from overflowing boundaries, in case of tiny control width */ } /*div.FitUiControlDropDown[data-focused="true"][data-device="Phone"] div.FitUiControlDropDownItems, div.FitUiControlDropDown[data-focused="true"][data-device="Tablet"] div.FitUiControlDropDownItems*/ div.FitUiControlDropDown[data-focused="true"][data-device="Touch"] div.FitUiControlDropDownItems { /* Make it obvious that a drop down has focus in case the menu is closed and no input field has focus. This will be the case when removing items using the delete button on an item, without focusing the control first. */ border: 0.07em solid #1C74CE; } div.FitUiControlDropDownItems:focus /* Remove outline when focus is temporarily assigned to prevent DropDown from losing focus */ { outline: none; } div.FitUiControlDropDownItems > i /* Box surrounding arrow icon */ { position: absolute; top: 0px; bottom: 0px; right: 0px; width: 2em; background-color: white; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: 0.065em solid #BBBBBB; border-left-width: 1px\9; cursor: pointer; } div.FitUiControlDropDownItems > i:before { /* Position arrow icon */ position: absolute; top: 50%; margin-top: -0.5em; margin-left: 0.5em; } div.FitUiControlDropDownItems > i.fa-spin { /* WSDropDown: Disable border and background when arrow icon is turned into a spinning loading indicator, when communicating with the WebService. */ border: none; background-color: transparent; } div.FitUiControlDropDownItems > i:focus /* Remove outline when focus is assigned to prevent DropDown from losing focus on mobile */ { outline: none; } div.FitUiControlDropDownItems > span /* Selection container */ { display: inline-block; white-space: nowrap; margin-top: 0.05em; margin-bottom: 0.05em; /* Equal height for all controls not enabled in legacy IE where controls assume height of content instead - apply alternative margins */ margin-top: 0.1em\9; margin-bottom: 0.1em\9; /* Make sure selection container does not exceed control boundaries */ max-width: calc(100% - 0.3em); /* 0.3em = padding-left in div.FitUiControlDropDownItems */ max-width: 90%\9; /* IE8 does not support calc(..) */ /* Make room for left and right side input fields which are positioned in padding area using negative margin */ padding-left: 5px; padding-right: 5px; } div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span /* Selection container */ { margin-top: 0.1em; margin-bottom: 0.1em; } div.FitUiControlDropDownItems > span:focus /* Remove outline when focus is temporarily assigned to prevent DropDown from losing focus */ { outline: none; } div.FitUiControlDropDownItems > span > span /* Selection */ { /* Make sure text in selected items is truncated if it is too wide */ display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; /* Vertically align with left and right side input fields */ vertical-align: middle; /* Allow positioning of delete button which is placed in padding area */ position: relative; padding-right: 1.5em; } div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span > span /* Selection (in multi selection mode only) */ { padding-top: 0.15em; padding-left: 0.25em; padding-bottom: 0.25em; border: 0.065em solid silver; border-width: 1px\9; border-radius: 2px; background-color: whitesmoke; } div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span, div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > input { font-size: 0.85em; } div.FitUiControlDropDownItems > span > span.FitUiControlDropDownInvalid /* Invalid selection */ { background-color: #F5B8B8; } div.FitUiControlDropDownItems > span > span > i /* Delete button */ { color: #CCCCCC; cursor: pointer; /* Take out of flow so delete button doesn't get truncated due to text-overflow - position in right side padding area */ position: absolute; top: 0.15em; right: 0.35em; } div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span > span > i /* Delete button */ { /* Adjust for smaller font-size in Multi Selection Mode */ top: 0.375em; } /*div.FitUiControlDropDown[data-multiselect="false"] div.FitUiControlDropDownItems > span > span > i*/ /* Delete button in selection (in single selection mode only) */ /*{ display: none; }*/ div.FitUiControlDropDownItems > span > span > i:focus /* Remove outline when focus is temporarily assigned to prevent DropDown from losing focus */ { outline: none; } div.FitUiControlDropDownItems input { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; color: inherit; white-space: pre; /* Bug fix: color:inherit triggers bug in Chrome 99 which prevents whitespaces from working: https://bugs.chromium.org/p/chromium/issues/detail?id=1309014 */ width: 5px; border-style: none; outline: none; margin: 0px; padding: 0px; /* Vertically align with selection */ vertical-align: middle; padding: 0.15em 0em; } div.FitUiControlDropDownItems > input { margin-top: 0.05em; /* Align input vertically */ margin-top: 0\9; /* Equal height for all controls not enabled in legacy IE where controls assume height of content instead - unset margin */ } div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > input { margin-top: 0.25em; /* Align input vertically - adjust for smaller font size in Multi Selection Mode */ margin-top: 0\9; /* Equal height for all controls not enabled in legacy IE where controls assume height of content instead - unset margin */ } div.FitUiControlDropDownItems > span > input:first-child /* Left input in selection container */ { /* Move left side input into item container's padding area so the content of the container doesn't exceed its max-width */ margin-left: -5px; } div.FitUiControlDropDownItems > span > span + input /* Right input in selection container */ { text-align: right; padding-right: 1px; /* IE8: Prevent cursor from disappearing */ } div.FitUiControlDropDownItems input::-ms-clear /* Remove clear button in IE10 - requires true IE10 document mode to work */ { display: none; } /* Make active input field wrap to new line when entering text in Visual Mode */ div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span + input { /* Make sure primary input field does not word wrap when DropDown is squeezed, by taking it out of flow */ position: absolute; position: static\9; /* It doesn't work in legacy IE without a position (x,y) */ } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems[data-editing="true"] > input[data-editing="true"] { position: static; /* Undo position:absolute used to prevent "word wrapping" of input (txtPrimary) if control is squeezed */ } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems[data-editing="true"] > span + input[data-editing="true"] /* Only if items have been added (span + input) */ { /* Indent text in primary input field when it "word wraps", equivalent to width of left and right input controls in selected items */ padding-left: 5px; padding-right: 5px; } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] { display: block; /* Make sure item is placed on a separate line in case it floats in front of or next to another item */ } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] > span { /* Do not assume width:100% for selection when "word wrapping" item (when item container has display:block - see above). If the control is 800px wide, then the item being "word wrapped" will also assume this width, even if the title is short. Unfortunately this also results in text-overflow being disabled, as it requires a width being set. But it's better than a short item assuming the full width of the control. However, this may also result in the item becoming wider than control, which in turn results in the item becoming partially hidden (right side input field will be hidden due to overflow). But that's fine - it doesn't pose a problem. The user can still TAB navigate to the input field that has been hidden due to overflow as it becomes visible again on TAB press. */ width: auto; } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems[data-editing="true"] > input[data-editing="true"], div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] > input[data-editing="true"] { /* Place active input field on separate line - "word wrap" input */ display: block; width: 100%; } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] > span:after { /* When the input field "word wraps" (see above), it no longer affects the calculation of max-width for the selected item's container, so we will see that it shrinks the width of the input field. To compensate for this, we introduce a hidden element within the item that takes up the same amount of space as the input field before it was wrapped to a new line. */ content: ""; display: inline-block; width: 5px; height: 1em; } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] > span + input[data-editing="true"] /* Right input in selection container */ { /* Undo right aligment */ text-align: left; padding-right: 0px; /* Undo IE8 fix to make sure text cursor does not disappear when text is aligned to the right */ } div.FitUiControlDropDown[data-selectionmode="visual"] div.FitUiControlDropDownItems > span[data-editing="true"] > input[data-editing="true"]:first-child { /* If typing into left input field, make sure it is properly indented, equivalent to the indentation of selected items */ margin-left: 0px; /* Undo negative margin used to move input field into selection container's padding area */ } /* Placeholder (not enabled on IE8/9) */ /* Placeholder attributes are only set when placeholder is supposed to be displayed. The text color for placeholders is defined i Styles.css. */ div.FitUiControlDropDownItems[data-placeholder-autoclear="false"]:after, div.FitUiControlDropDown[data-focused="false"] div.FitUiControlDropDownItems[data-placeholder-autoclear="true"]:after { content: attr(data-placeholder); } div.FitUiControlDropDownItems[data-placeholder]:after { /* Position above input field */ position: absolute; left: 0.3em; top: 0.35em; top: 0\9; width: calc(100% - 0.3em - 2em); /* 0.3em is padding-left in control, 2em is the width of the dropdown arrow - calc requires IE9+ */ white-space: nowrap; overflow: hidden; } div.FitUiControlDropDownPicker /* Picker container (drop down) */ { background-color: white; border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 2px; margin-top: -0.065em; margin-top: -1px\9; display: none; min-height: 10px; position: absolute; width: 100%; z-index: 1000; } /* Add shadows behind DropDown control when open */ div.FitUiControlDropDown[data-open="true"] { box-shadow: 0em 0em 0.25em silver; } div.FitUiControlDropDown[data-open="true"] div.FitUiControlDropDownPicker { box-shadow: 0em 0.1em 0.25em silver; } /* Error indication */ div.FitUiControlDropDown[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: none; } div.FitUiControlDropDown[data-enabled="true"][data-valid="false"][data-showinvalid="true"] div.FitUiControlDropDownItems { border-color: red; } div.FitUiControlDropDown[data-enabled="true"][data-valid="false"][data-showinvalid="true"] div.FitUiControlDropDownPicker { border-top-color: red; } /* Drag and drop */ div.FitUiControlDropDownItems > span.FitDragDropDragging { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } div.FitUiControlDropDownItems > span.FitDragDropDragging input { visibility: hidden; } div.FitUiControlDropDownItems > span[data-dropping] { position: relative; } div.FitUiControlDropDownItems > span[data-dropping="left"] > span:before, div.FitUiControlDropDownItems > span[data-dropping="right"] > span:after { content: ""; display: inline-block; background: red; position: absolute; top: 0px; bottom: 0px; width: 2px; } div.FitUiControlDropDownItems > span[data-dropping="left"] > span:before { left: -1px; } div.FitUiControlDropDownItems > span[data-dropping="right"] > span:after { right: -1px; } div.FitUiControlDropDown[data-multiselect="false"] div.FitUiControlDropDownItems > span.FitDragDropDraggable { cursor: text; /* Do not reveal that item is draggable in Single Selection Mode */ } /* PickerBase */ div.FitUiControlDropDownPicker > * { display: block; /* Make sure picker consumes the entire width of drop down (ControlBase is inline-block) */ } /* Alternative rendering - Text Selection Mode */ div.FitUiControlDropDown[data-selectionmode="text"] div.FitUiControlDropDownItems > span { display: none; /* Hide selected items - will be represented using text instead */ } div.FitUiControlDropDown[data-selectionmode="text"] div.FitUiControlDropDownItems > input { font-size: 1em; width: 100%; margin-top: 0.1em; margin-top: 0\9; /* Equal height for all controls not enabled in legacy IE where controls assume height of content instead - unset margin */ } div.FitUiControlDropDown[data-selectionmode="text"][data-focused="false"] div.FitUiControlDropDownItems > input { text-overflow: ellipsis; } /* Selection Mode toggle button (switch between Text and Visual Selection Mode) */ div.FitUiControlDropDown > span.fa { position: absolute; top: 0.5em; right: -1.5em; } div.FitUiControlDropDown[data-selectionmodetoggle="true"] { margin-right: 2em; } /* WSDropDown: Action Menu (ListView) */ div.FitUiControlDropDown span.FitUiControlDropDownActionMenuItemIconDelete { color: #DB1E1E; } /* Fluent UI compatibility */ /* Replace font-awesome X icon with more lightweight icon based on rotated plus symbol */ html[data-fitui-companion="fluent-ui"] div.FitUiControlDropDown div.FitUiControlDropDownItems > span > span > i { transform: rotate(45deg); font-size: 1.5em; top: -0.01em; } html[data-fitui-companion="fluent-ui"] div.FitUiControlDropDown div.FitUiControlDropDownItems > span > span > i:before { content: "+"; } html[data-fitui-companion="fluent-ui"] div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span > span > i { top: 0.05em; } /* Modern control (default) */ div.FitUiControlFilePicker[data-legacy="false"] input { opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: inherit; /* Inherit cursor from Button - does not work for button in native file picker on WebKit/Chrome on OSX */ } div.FitUiControlFilePicker[data-legacy="false"] div.FitUiControlButton { /* Since cursor:inherit above doesn't work properly on WebKit/Chrome, simply always use cursor:default for FilePicker button to prevent cursor from changing between Default and Pointer, when moving mouse around on top of FilePicker. It is only the button from the native file picker (which is hidden using opacity:0) that doesn't support cursor:inherit - it is quite confusing that the cursor changes. */ cursor: default; } /* Legacy control */ div.FitUiControlFilePicker[data-legacy="true"] input { display: block; } /* Dropzone */ div.FitUiControlFilePicker[data-dropzone="true"] { border: 0.15em dashed #BBBBBB; } div.FitUiControlFilePicker[data-dropzone="true"][style*="height"] { /* Make sure dropzone has a width when a height is configured, since dropzone container is positioned (taken out of flow), causing control to vertically collapse without a width. */ min-width: 15em; } div.FitUiControlFilePicker[data-dropzone="true"][style*="height"] > div /* dropzone container */ { /* Center dropzone container vertically when control height is set */ position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } div.FitUiControlFilePicker[data-dropzone="true"] > div /* dropzone container */ { text-align: center; padding: 1em; } div.FitUiControlFilePicker[data-dropzone="true"] div.FitUiControlButton { margin-top: 0.75em; } div.FitUiControlFilePicker[data-dropzone="true"][data-dropping="true"] { background-color: rgba(0, 0, 0, 0.05); } div.FitUiControlInput { height: 2em; /* Equal height for all controls */ height: auto\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE which does not render properly when input height is set to 100% of container */ } div.FitUiControlInput input:first-child, div.FitUiControlInput textarea:first-child { width: 100%; height: 100%; padding: 0.2em; padding-left: 0.3em; padding-right: 0.3em; margin: 0px; text-align: inherit; font-size: inherit; border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 2px; display: block; /* Remove annoying spacing above input when outline is applied (when value is invalid) */ /* Make it look decent on iOS Safari */ -moz-appearance: none; -webkit-appearance: none; appearance: none; } div.FitUiControlInput[data-designmode="true"] .cke_chrome { border: 0.065em solid #BBBBBB; border-width: 1px\9; } /* Default height for ordinary multi line input control (textarea) */ div.FitUiControlInput[data-multiline="true"][data-designmode="false"] { height: 150px; } /* Make control container adjust to textarea or HTML editor when it has been resized */ div.FitUiControlInput[data-resized="true"][data-resizable="enabled"] { width: auto !important; /* Using !important since dimensions are set as inline styles */ height: auto !important; /* Using !important since dimensions are set as inline styles */ } div.FitUiControlInput[data-resized="true"][data-resizable="vertical"] { height: auto !important; } div.FitUiControlInput[data-resized="true"][data-resizable="horizontal"] { width: auto !important; } div.FitUiControlInput[data-resized="true"] textarea:first-child { margin: 0px !important; /* Remove odd margin (inline style) added by Chrome when resizing */ } /* Hide clear button within input fields in IE */ div.FitUiControlInput input:first-child::-ms-clear { display: none; } /* Error indication */ div.FitUiControlInput[data-enabled="true"][data-valid="false"][data-showinvalid="true"] { outline: none; } div.FitUiControlInput[data-enabled="true"][data-valid="false"][data-showinvalid="true"] input:first-child, div.FitUiControlInput[data-enabled="true"][data-valid="false"][data-showinvalid="true"] textarea:first-child, div.FitUiControlInput[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-designmode="true"] .cke_chrome { border-color: red; } /* Maximize button */ div.FitUiControlInput > span.fa { position: absolute; bottom: -0.65em; left: 50%; margin-left: -0.67em; /* transform: translateX(-50%); */ cursor: pointer; background-color: white; border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 1em; padding: 0.1em; font-size: 0.8em; color: #BBBBBB; } div.FitUiControlInput[data-designmode="true"][data-autogrow="true"] > span.fa /* Maximize button does nothing (disabled) when auto grow is enabled in DesignMode */ { border-color: #DEDEDE; color: #DEDEDE; cursor: not-allowed; } div.FitUiControlInput > span.fa:focus { outline: none; } div.FitUiControlInput[data-maximizable="true"] textarea:first-child { padding-bottom: 0.65em; /* Add spacing at the bottom to prevent text from colliding with the maximize button */ } /* Remove outline when input has focus */ div.FitUiControlInput input:first-child:focus, div.FitUiControlInput textarea:first-child:focus, div.FitUiControlInput[data-designmode="true"]:focus /* Prevent outline if toolbar is clicked */ { outline: none; } /* Textarea resizing */ div.FitUiControlInput textarea:first-child { resize: none; } div.FitUiControlInput[data-resizable="enabled"] textarea:first-child { resize: both; } div.FitUiControlInput[data-resizable="vertical"] textarea:first-child { resize: vertical; } div.FitUiControlInput[data-resizable="horizontal"] textarea:first-child { resize: horizontal; } /* CKEditor */ /* Make control container adjust to the height of CKEditor when auto grow is enabled */ div.FitUiControlInput[data-designmode="true"][data-autogrow="true"] { height: auto; } /* Hide empty labels in dialogs (make controls align properly in Base64Image dialog) */ .cke_dialog_contents label:empty { display: none; } /* Override: Do not hide content overflow when a dialog is open - it remove scrollbars on page which affects available space and positioning slightly, which might trigger OnScroll, and might result in re-rendering. One downside of this change is that the user can now scroll the content behind the dialog, which is probably why overflow:hidden was applied. */ .cke_dialog_open /* Class is added to when a dialog is open */ { overflow: auto !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */ } /* Reduce z-index for image resize handlers to allow modal image dialog background layer to stay on top */ div#ckimgrsz { z-index: 9999; /* Defaults to 10001 but modal dialog background layer has z-index 10000 */ } /* Reduce flickering while editor is loading by hiding components */ div.FitUiControlInput[data-designmode="true"] textarea:first-child { visibility: hidden; /* Hide textarea but preserve space consumed */ } div.FitUiControlInput[data-designmode="true"] .cke_chrome { visibility: hidden; /* Hide editor but preserve space consumed - changed back to "visible" in Input.js when editor is done loading */ } /* Placeholder (not enabled on IE8/9) */ /* Placeholder attributes are only set when placeholder is supposed to be displayed. The text color for placeholders is defined i Styles.css. */ div.FitUiControlInput[data-designmode="true"] .cke_editable[data-placeholder]:before { content: attr(data-placeholder); display: block; position: absolute; /* Take out of flow to prevent it from affecting auto grow (editor height) */ /*margin: 1em 0em;*/ } /* Set identical margins for paragraphs and placeholder in HTML editor to ensure proper alignment, in case default margin for paragraphs have been changed, or if they differ across different browsers. */ div.FitUiControlInput[data-designmode="true"] .cke_editable p, div.FitUiControlInput[data-designmode="true"] .cke_editable[data-placeholder]:before { margin: 1em 0em; } /* Table plugins: Make sure user can place cursor in table cells by ensuring a minimum width */ div.FitUiControlInput[data-designmode="true"] .cke_editable td { min-width: 0.5em; } /* Table plugins: Show an outline if table borders are disabled */ div.FitUiControlInput[data-designmode="true"] .cke_editable table:not([border]), div.FitUiControlInput[data-designmode="true"] .cke_editable table[border="0"] { border-collapse: collapse; } div.FitUiControlInput[data-designmode="true"] .cke_editable table:not([border]), div.FitUiControlInput[data-designmode="true"] .cke_editable table:not([border]) th, div.FitUiControlInput[data-designmode="true"] .cke_editable table:not([border]) td, div.FitUiControlInput[data-designmode="true"] .cke_editable table[border="0"], div.FitUiControlInput[data-designmode="true"] .cke_editable table[border="0"] th, div.FitUiControlInput[data-designmode="true"] .cke_editable table[border="0"] td { border: 1px dashed silver; } /* Table plugins: Styles used when multiple table cells are selected. Overrides styling from Resources/CKEditor/plugins/tableselection/styles/tableselection.css */ div.FitUiControlInput[data-designmode="true"] .cke_table-faked-selection { background: lightgray !important; /* Using !important in case cells have inline background color applied */ color: #333333; } div.FitUiControlInput[data-designmode="true"] .cke_editable:focus .cke_table-faked-selection { background: #D4E7F5 !important; /* Using !important in case cells have inline background color applied */ color: #333333; } div.FitUiControlInput[data-designmode="true"] .cke_table-faked-selection a, div.FitUiControlInput[data-designmode="true"] .cke_editable:focus .cke_table-faked-selection a { color: #333333; } /* CKEditor - moono-lisa skin overrides */ /* Apply rounded corners */ div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"], div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_inner { border-radius: 2px; } div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_top { border-top-left-radius: 2px; border-top-right-radius: 2px; } div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_contents { border-top-left-radius: 2px; border-top-right-radius: 2px; } div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_editable { border-radius: 2px; } div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* CKEditor - bootstrapck skin overrides */ /* Override: The bootstrapck skin define margins for content areas in dialogs which makes the vertical scrollbar appear. */ .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_vbox { margin-top: 0px !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */ } .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_body label { margin-bottom: 0px !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */ } /* Override: The bootstrapck skin does not align checkboxes and labels properly */ .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input, .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input+label, .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog fieldset .cke_dialog_ui_vbox .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input, .cke_dialog_container[data-skin="bootstrapck"] .cke_dialog fieldset .cke_dialog_ui_vbox .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input+label { vertical-align: top !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */ } /* Make sure padding works properly at all times for bootstrapck skin (e.g. when hiding toolbar or when toolbar is positioning at the bottom) */ /* Override: Normalize padding for editor chrome ("editor frame") */ div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="bootstrapck"] /* cke_chrome is a
on modern browsers, a in IE */ { padding: 3px; } /* Override: Remove padding-top from toolbar when placed at the top of the editor, as it results in too much spacing at the top */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"] .cke_chrome[data-skin="bootstrapck"] .cke_top { padding-top: 0px; } /* Override: Remove margin-bottom from button groups when toolbar is positioned at the bottom of the editor, as it results in too much spacing at the bottom */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="bootstrapck"] .cke_toolgroup { margin-bottom: 0px; } /* Override: Fix padding at the bottom of the editor when it is resizable - only necessary when toolbar is positioned at the top of the editor */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="bootstrapck"] .cke_bottom { padding: 0px; } /* CKEditor - bottom panel, resize handle, and information panel */ /* Opimize resize handle when toolbar is placed at the top */ /* Allow positioning of cke_resizer outside of bottom container */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome .cke_bottom, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome .cke_bottom, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome .cke_bottom { overflow: visible; } /* Remove/collapse bottom panel - resize handle is just placed in the lower right corner */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom { padding: 0px; border-top: none; } /* Position resize handle */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome .cke_resizer { border-color: transparent #A0A0A0 transparent transparent; margin: 0; position: absolute; color: gray; } /* Position resize handle (moona-lisa skin) */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer { top: -9px; right: -1px; } /* Position resize handle (bootstrapck skin) */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer { top: -6px; right: -4px; } /* Opimize resize handle when toolbar is placed at the bottom */ /* Position resize handle (bootstrapck skin) */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="enabled"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="vertical"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="horizontal"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer { position: absolute; margin: 0px; bottom: 0px; right: -3px; } /* Position resize handle (moono-lisa skin) */ div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer, div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer { position: absolute; margin: 0px; bottom: 2px; right: 2px; } /* Make editor toolbar sticky if enabled */ @supports (position: sticky) { div.FitUiControlInput[data-designmode="true"][data-toolbar-sticky="true"][data-toolbar-position="top"] .cke_top { position: sticky; top: 0px; } div.FitUiControlInput[data-designmode="true"][data-toolbar-sticky="true"][data-toolbar-position="bottom"] .cke_bottom { position: sticky; bottom: 0px; } } /* Editor information panel at the bottom of editor (moono-lisa skin) */ div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel { font-size: 0.8em; padding-top: 0.2em; padding-bottom: 0.2em; color: #585858; } div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel { border-top: 1px solid #D1D1D1; } div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel { border-bottom: 1px solid #D1D1D1; } /* Editor information panel at the bottom of editor (bootstrapck skin) */ div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel { font-size: 0.8em; color: #585858; } div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel { padding-top: 0.2em; } div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel { padding-bottom: 0.2em; } /* CKEditor - tags/mentions support */ div.FitUiControlInput[data-designmode="true"] .cke_chrome a[data-tag-id] { background-color: #F5FbFF; border: 0.065em solid #C6dAE1; border-radius: 0.2em; text-decoration: none; font-size: 0.95em; color: blue; cursor: default; } .cke_autocomplete_panel.cke_autocomplete_opened /* Using both .cke_autocomplete_panel and .cke_autocomplete_opened to increase specificity */ { width: 225px; } @media screen /* Not supported by IE8 - modern browsers only */ { .cke_autocomplete_panel.cke_autocomplete_opened /* Using both .cke_autocomplete_panel and .cke_autocomplete_opened to increase specificity */ { width: auto; /* Adjust to width of contained items */ max-width: 350px; /* Stay within reasonable proportions */ } } @media (max-width: 400px) { .cke_autocomplete_panel.cke_autocomplete_opened { max-width: 100%; /* On lowres screens consume no more than available width */ } } /* Links in CKEditor */ div.FitUiControlInput[data-designmode="true"] [contenteditable="true"][data-command-button-active="true"] a:hover, div.FitUiControlInput[data-designmode="true"][data-toolbar="false"] [contenteditable="true"] a:hover { cursor: pointer; } /* Fluent UI compatibility */ /* The following elements are mounted in document root - make sure they stay on top of everything else in Fluent UI which use very aggressive z-index values. */ /* Image resize handlers */ html[data-fitui-companion="fluent-ui"] #ckimgrsz { z-index: 2050000; } /* Tags/mentions/autocomplete context menu */ html[data-fitui-companion="fluent-ui"] .cke_autocomplete_panel { z-index: 2050000 !important; /* Using !important to override inline style */ } /* Panels such as the toolbar's emoji panel/callout */ html[data-fitui-companion="fluent-ui"] .cke_panel { z-index: 2050000 !important; /* Using !important to override inline style */ } /* Dialogs (e.g. link and image dialogs) */ html[data-fitui-companion="fluent-ui"] .cke_dialog_background_cover { z-index: 2050010 !important; /* Using !important to override inline style */ } html[data-fitui-companion="fluent-ui"] .cke_dialog_container { z-index: 2050020 !important; /* Using !important to override inline style */ } /* Dialog buttons */ html[data-fitui-companion="fluent-ui"] a.cke_dialog_ui_button { border-radius: 2px; border: 1px solid #8A8886; background-color: white; color: #292E34; } html[data-fitui-companion="fluent-ui"] a.cke_dialog_ui_button_ok { border-color: #39A5DC; background-color: #39A5DC; color: white; } div.FitUiControlListView { overflow-y: auto; overflow-x: hidden; } div.FitUiControlListView > div /* List item */ { padding: 0.25em; white-space: nowrap; } div.FitUiControlListView[data-device="Desktop"] > div:hover { background-color: #DADADA; /*#C3D9E0*/ cursor: pointer; } div.FitUiControlListView > div[data-active="true"] { background-color: #EAEAEA; /*#A9D8E8*/ } div.FitUiControlListView:focus { outline: none; } div.FitUiControlProgressBar { height: 2em; /* Equal height for all controls */ height: auto\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE */ border: 0.065em solid #BBBBBB; border-width: 1px\9; border-radius: 3px; white-space: nowrap; /*vertical-align: bottom;*/ /* Moved to div.FitUiControl */ overflow: hidden; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.FitUiControlProgressBarStatus { overflow: visible; width: 0%; height: 100%; background: rgb(191,210,85); /* #BFD255 */ background: -webkit-linear-gradient(rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); background: -moz-linear-gradient(rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); background: -o-linear-gradient(rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); background: linear-gradient(rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); } div.FitUiControlProgressBarStatus span { display: inline-block; padding-left: 0.3em; padding-right: 0.3em; line-height: 1.87em; /* Equal height for all controls - top and bottom borders (each 0.065em) substracted */ line-height: normal\9; /* Undo equal height for all controls in IE9 and below */ } div.FitUiControlSoftLog { width: 100%; } div.FitUiControlSoftLog textarea { font-family: monospace; width: 100%; height: 100px; border: 1px solid #BBBBBB; border-radius: 2px; padding: 0.25em; /* Make it look decent on iOS Safari */ -moz-appearance: none; -webkit-appearance: none; appearance: none; } div.FitUiControlSoftLog textarea:focus { outline: none; } /* General */ /* Prevent text selection */ div.FitUiControlTreeView { text-align: left; /* To prevent incorrect rendering if parent container has text-align:right */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Picker Control */ overflow-y: auto; overflow-x: hidden; } /* Reset bullet list */ div.FitUiControlTreeView li { list-style-type: none; } div.FitUiControlTreeView ul { padding: 0px; margin: 0px; } /* Advanced */ div.FitUiControlTreeView li ul li { position: relative; /* Allow absolute positioning within node */ white-space: nowrap; /* Disable word wrap */ line-height: 1.5em; /* Ensure horizontal spacing between nodes */ padding-left: 1.5em; /* Indent content to make room for expand/collapse button */ } /* Expand/collapse button */ div.FitUiControlTreeView li ul li > div { position: absolute; left: 0px; /***display: inline-block;***/ cursor: pointer; font-family: FontAwesome; /* Increase hit zone */ width: 1.5em; text-align: center; } div.FitUiControlTreeView li ul li > div:before { content: ""; } div.FitUiControlTreeView li ul li[data-state="expanded"] > div:before { content: "\f0d7"; } div.FitUiControlTreeView li ul li[data-state="expanded"] > ul { display: block; } div.FitUiControlTreeView li ul li[data-state="collapsed"] > div:before { content: "\f0da"; } div.FitUiControlTreeView li ul li[data-state="collapsed"] > ul { display: none; } /* Checkbox */ div.FitUiControlTreeView li ul li > input { /* Take checkbox out of flow to prevent it from affecting node title indentation. This ensures that all node titles are neatly aligned, even when checkboxes are enabled for some nodes, and not for others (mixed configuration). */ position: absolute; font-size: inherit; width: 1em; height: 1em; top: 0.25em; margin: 0px; padding: 0px; } @media /* Wrapped in nested media queries to prevent targeting all versions of IE where the checkbox cannot be styled */ { @media { /* Make checkbox look identical across browsers */ /* Targeting only checkboxes since some apps are known to change the input type to radio, even though that's completely unsupported. */ div.FitUiControlTreeView li ul li > input[type="checkbox"] { appearance: none; -moz-appearance: none; /* Firefox (version 54 required for checkbox styling) */ -webkit-appearance: none; /* Safari and Chrome */ /* Copied from Fit.UI checkbox control */ border: 1px solid #909090; border-radius: 0.1em; /* 2px */ color: #333333; background-color: #FFFFFF; /* Copied from fa class (Font Awesome) */ display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } div.FitUiControlTreeView li ul li[data-selectable="false"] > input[type="checkbox"] { background-color: #E8E8E8; } div.FitUiControlTreeView li ul li > input[type="checkbox"]:focus { outline: none; } /* This is a bit controversial since pseudo elements are not supported on form elements - it is only supported on containers. But this actually works on Chrome, Safari, and Firefox 54+. Microsoft has it in the backlog for Edge as well: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11947102 */ div.FitUiControlTreeView li ul li > input[type="checkbox"]:checked:before { content: "\f00c"; /* Compensate for 1px border */ position: relative; top: -1px; left: -1px; } /* Disable styling on Edge which as of version 15 doesn't work well with the pseudo element. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11947102 MS Edge CSS work arounds: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview */ _:-ms-lang(x), div.FitUiControlTreeView li ul li > input[type="checkbox"] { -webkit-appearance: checkbox; } } } /* Node title */ div.FitUiControlTreeView li ul li > span { cursor: pointer; } div.FitUiControlTreeView[data-htmlallowed="true"] li ul li > span { display: inline-block; line-height: normal; } /* Indent node title if checkboxes are enabled. Notice: Node title is ALWAYS indented if TreeView is in Multi Selection mode, to make sure node titles are always vertically aligned if some nodes have checkboxes, and some do not. It looks odd If all checkboxes are disabled, though, since it leaves a big gap. Node title is ALWAYS indented if TreeView is in Single Selection mode, and a checkbox is injected in front of node title to prevent title from being hidden underneath checkbox, but primarily to allow all nodes to have a checkbox in Single Selection mode. */ div.FitUiControlTreeView[data-multiselect="true"] li ul li > span, div.FitUiControlTreeView[data-multiselect="false"] li ul li > input + span { margin-left: 1.25em; } /* Helper lines */ /* NOTICE: This doesn't scale well with big fonts! Line-height and images will require adjustments! */ div.FitUiControlTreeViewLines li ul li { line-height: 20px; /* Height of background image */ background: url("Controls/TreeView/gfxLine.png") repeat-y; } div.FitUiControlTreeViewLines li ul li[data-last="true"] { background-size: 1px 10px; /* background height = line-height/2 */ background-repeat: no-repeat; } div.FitUiControlTreeViewLines li ul li:before { content: ""; background: url("Controls/TreeView/gfxNode.png") no-repeat; position: absolute; left: 0px; top: 10px; /* line-height/2 */ width: 10px; /* BG width */ height: 1px; /* BG height */ } /* Push expand/collapse button, checkboxes, and node title to the right to make room for helper lines */ div.FitUiControlTreeViewLines li ul li[data-state="expanded"] > div, div.FitUiControlTreeViewLines li ul li[data-state="collapsed"] > div { left: 0.6em; } div.FitUiControlTreeViewLines li ul li > input, /* Checkboxes */ div.FitUiControlTreeViewLines li ul li > span /* Node title when checkboxes are not enabled (see below) */ { margin-left: 10px; /* gfxNode.png width */ } div.FitUiControlTreeViewLines[data-multiselect="true"] li ul li > span, div.FitUiControlTreeViewLines[data-multiselect="false"] li ul li > input + span { margin-left: 28px; /* Changed from 22px, see code further up */ } /* Dotted helper lines */ div.FitUiControlTreeViewDotLines li ul li { background: url("Controls/TreeView/gfxDotLine.png") repeat-y; } div.FitUiControlTreeViewDotLines li ul li:before { background: url("Controls/TreeView/gfxDotNode.png") no-repeat; } /* Selection */ div.FitUiControlTreeView li ul li[data-selected="true"] > span { background: #EAEAEA; /* Fallback */ background: rgba(0, 0, 0, 0.10); padding: 0px 2px 0px 2px; border: 1px solid silver; /* Fallback */ border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; } div.FitUiControlTreeView[data-selectable="true"] li ul li[data-selectable="false"] > span { font-style: italic; } /* Focus */ div.FitUiControlTreeView li:focus { outline: none; } div.FitUiControlTreeView[data-picker="false"] li ul li:focus > span, div.FitUiControlTreeView li ul li[data-active="true"] > span { padding: 0px 2px 0px 2px; border: 1px solid #419DE1; border-radius: 3px; } /* Navigation nodes */ div.FitUiControlTreeView li a { text-decoration: inherit; color: inherit; } /* Word wrap */ div.FitUiControlTreeView[data-wordwrap="true"] li ul li > span { /*display: inline-block;*/ white-space: normal; } /* Hide fake root node */ div.FitUiControlTreeView li[data-value="TREEVIEW_ROOT_NODE"] > * { display: none; } div.FitUiControlTreeView li[data-value="TREEVIEW_ROOT_NODE"] > ul { display: block; }