/* ---------------------------------------------------------------------------------------------- */ /* Minerva - Screen CSS */ /* Note : */ /* - Reset CSS based on Eric Meyer's Reset CSS ver2.0 http://meyerweb.com/eric/tools/css/reset/ */ /* ---------------------------------------------------------------------------------------------- */ /*------------------*/ /* Table of Content */ /*------------------*/ /* 1. INIT 2. BASIC ELEMENTS 3. LAYOUT - Dashboard - Admin - Dashboard - Regional Admin - Dashboard - Teacher - General Layout - General Layout - Full Width (Including Help Page) - General Layout - Pre Content Panel (Mainly for breadcrumb) - Grid - Grid - Loose - Header - Module - Header - Top - Pattern - Profile View - Pattern - Section Header - Pattern - Tool Bar - Vertical Spacing 5. Navigation 5.3. App Tab Navigation 5.4. Step Bar 5.5. Section Nav 5.6. Section Nav 2 5.7. Iconed Nav 5.9. Side Nav - Navigation - Accessibility - Navigation - Main (Global) - Navigation - Main 2nd Level 6. Content 6.1. General 6.1.3. App Forms 6.1.3.1. General 6.1.4. Overlay elements 6.1.4.1. General 6.1.4.1.2. 2 Cols 6.1.4.2. Dialog Boxes 7. COMPONENTS 7.2. Iconed Link 7.3. Navigation 7.3.3. Mini Nav 7.3.4. Search Bar Minimalist 7.4. Date Picker 7.4.1. Full Date Picker 7.4.2. Date Range Picker 7.5. Table 7.5.1. Base 7.5.2. Scrollable Table 7.5.3. Sortable Table 7.5.4. Table's Action Panel 7.5.5. Plain Table 7.5.7. Grouped Table 7.5.8. Clickable Table 7.5.9. Table Calendar 7.7. List of Items 7.7.1. Tag List 7.7.2. Route List 7.7.7. Versatile List 7.9. Notification Line 7.14. Tool Tip Pop-up 7.15. Accordion 7.15.1. Base 7.21. Masonry - Account Panel - Alert - Assessment Chart BreakDown - Button - Button - File Upload - Button - Group - Button - Help - Button - Menu (Hamburger) - Button - Split - Button - X (Remove) - CMS Copy - Dialog Box - Dialog Box - Sticky Floating Form - Drawer - Drawer - Side - Error Message - Filter Options - Active List - Filter Options - Display - Filter Options - Trigger - Form Elements - Heading - Icon (NOTE: To be replaced with font type icon) - Legend - List - Bar - List - Link - Logo - Entity - Media List - Navigation - Breadcrumb - Panel - Basic - Panel - Level - Panel - Sticky Button - Panel Tab - Photo - Profile - Progress Bar - Question Answer - Search Bar - Select - Styled - Select - Styled 2 - Table - Info View - Table - Responsive - Tick - V-Card - Widget 8. 3RD PARTY COMPONENTS - Camera - Color Picker - Kendo UI - Basic - Kendo UI - Chart - Kendo UI - Date Picker - Kendo UI - Dropdown - Kendo UI - Grid - Kendo UI - Grid - Photo - Kendo UI - Grid - PDF Page Template - Kendo UI - Multi Select - Kendo UI Mobile - Switch - Stylish Select - Toast (Notification) 9. STATE & UTILITIES */ /* -------------------------------------------------- */ /* 1. INIT /* -------------------------------------------------- */ /*! * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face{font-family:'FontAwesome';src:url('fonts/fontawesome-webfont.eot?v=4.2.0');src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.2.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}.fa-lg{font-size:1.33333333em;line-height:.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:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.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}@-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{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{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{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:#fff}.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:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.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{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: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-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.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"} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; } table, tbody, tfoot, thead, tr, th, td { font-size: 100%; font: inherit; vertical-align: baseline; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 100%; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } /* -------------------------------------------------- */ /* 2. BASIC ELEMENTS /* -------------------------------------------------- */ body { margin: 0; padding: 0; font: 12px/1.5 Arial, Helvetica, Verdana,sans-serif; color: #FFF; background-color: #141414; } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: normal; line-height: 1.3; } h1, .h1 { margin: 0 0 15px 0; font-size: 24px; } h2, .h2 { margin: 0 0 15px 0; font-size: 20px; } h3, .h3 { margin: 0 0 10px 0; font-size: 18px; } h4, .h4 { margin: 0 0 10px 0; font-size: 12px; font-weight: bold; } p { margin-bottom: 15px; } a { color: #26ACE1; text-decoration: underline; cursor: pointer; outline: none; } a:hover { text-decoration: none; } a.text-link { color: #1CB5E9; text-decoration: underline; } a.text-link:hover { text-decoration: none; } .js-display-passenger-info-d-box { font-size: 17px !important; font-weight: bold; line-height: 80%; letter-spacing: 0.09em; } .js-display-passenger-info-d-box:hover { text-decoration: none !important; } table { width: 100%; } td, th { padding: 5px; line-height: 1.5; vertical-align: middle; } input, textarea, button { margin: 0; padding: 0; border: 0; background: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; outline: none; } input::-moz-focus-inner /* Remove button padding in FF */ { border: 0; padding: 0; } input.text { display: block; border: 1px solid #c0c0c0; background: #FFF; padding: 5px; } input.std-text { margin: 0; padding: 4px 9px; width: 195px; max-width: calc(100% - 20px); height: 21px; box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; border-radius: 3px; background: #a9a8ab; /* Old browsers */ background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* IE10+ */ background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a8ab', endColorstr='#98969a',GradientType=0 ); /* IE6-9 */ color: #323232; line-height: 21px; } .txt-box-40 { width: 40px !important; } .txt-box-40 .std-text { width: 20px !important; } .txt-box-85 { width: 85px !important; } .txt-box-85 .std-text { width: 65px !important; } .txt-box-120 { width: 120px !important; } .txt-box-120 .std-text { width: 100px !important; } .txt-box-150 { width: 150px !important; } .txt-box-150 .std-text { width: 130px !important; } .txt-box-300 { width: 300px !important; } .txt-box-300 .std-text { width: 280px !important; } .txt-box-365 { width: 365px !important; } .txt-box-365 .std-text { width: 345px !important; } .txt-box-640 { width: 640px !important; } .txt-box-640 .std-text { width: 620px !important; } .txt-box-910 { width: 910px !important; } .txt-box-910 .std-text { width: 890px !important; } input.std-text-focus, input.input-validation-error, textarea.std-text-focus, textarea.input-validation-error { border: 1px solid #1aa9e1; border-radius: 3px; color: #000; background: #FFFFFF; /* Old browsers */ background: -moz-linear-gradient(top, #FFFFFF 0%, #f3f1f6 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#f3f1f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #FFFFFF 0%,#f3f1f6 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #FFFFFF 0%,#f3f1f6 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #FFFFFF 0%,#f3f1f6 50%); /* IE10+ */ background: linear-gradient(to bottom, #FFFFFF 0%,#f3f1f6 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#f3f1f6',GradientType=0 ); /* IE6-9 */ } input.input-validation-error, textarea.input-validation-error { border: 1px solid #cb0000; } input.submit, input[type="submit"], input[type="file"] { cursor: pointer; } label { display: block; margin-bottom: 5px; } textarea { margin: 0; padding: 7px 9px; width: 620px; max-width: calc(100% - 20px); height: 70px; border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; border-radius: 3px; background: #a9a8ab; /* Old browsers */ background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* IE10+ */ background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a8ab', endColorstr='#98969a',GradientType=0 ); /* IE6-9 */ color: #323232; line-height: 1.5; resize: none; } @media screen and (max-width: 767px) { textarea { height: 110px; } } .txt-area-305 { width: 305px !important; } .txt-area-400 { width: 400px !important; } .txt-area-515 { width: 515px !important; } .txt-area-662 { width: 662px !important; } .txt-area-tall { height: 250px; } select { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } input.radio, input.checkbox { display: inline; } button { cursor: pointer; } .opt-item-group-hd { margin-bottom: 10px; } .opt-item-container { } .opt-item-container input { margin-right: 7px; margin-bottom: 0; } .opt-item-container label { display: inline-block; margin-top: -2px !important; margin-bottom: 0 !important; padding: 0 !important; width: auto; vertical-align: top; line-height: 1.5; } .required-mark { margin-left: 3px; color: #cb0000; font-size: 10px; font-weight: bold; } /* the style below is on assumption that 1 styled dropdown option height is 35px tall */ .styled-dd-ul-height-1 { height: 35px !important; } .styled-dd-ul-height-2 { height: 70px !important; } .styled-dd-ul-height-3 { height: 105px !important; } .styled-dd-ul-height-4 { height: 140px !important; } .styled-dd-ul-height-5 { height: 175px !important; } .group:after, .u-clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .img-rep { display: block; text-indent: -9999px; font-size: 0; line-height: 0; } .pipe-div { font-size: 13px; position: relative; margin: 0 5px; } .c-spr, .ico { background: transparent url(img/common-sprite.png?ver=34) no-repeat 0 0; } /* -------------------------------------------------- */ /* 3. LAYOUT /* -------------------------------------------------- */ /* Dashboard - Admin /* ----------------------------------------------- */ .l-grid-area-m-admin-dashboard { } .l-grid-area-m-admin-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 8; grid-row: 1; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 12; grid-row: 1; text-align: left; } } .l-grid-area-m-admin-dashboard .l-widget-pending-approval { grid-column: 9 / span 4; grid-row: 1; text-align: right; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-pending-approval { grid-column: 1 / span 12; grid-row: 2; text-align: left; } } .l-grid-area-m-admin-dashboard .l-widget-assessment-chart { grid-column: 1 / span 12; grid-row: 2; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-assessment-chart { grid-row: 3; } } .l-grid-area-m-admin-dashboard .l-widget-work-readiness { grid-column: 1 / span 6; grid-row: 3 / 5; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-work-readiness { grid-column: 1 / span 12; grid-row: 4; } } .l-grid-area-m-admin-dashboard .l-widget-self-assessment { grid-column: 7 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-self-assessment { grid-column: 1 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-admin-dashboard .l-widget-self-assessment { grid-column: auto / span 12; grid-row: auto / auto; } } .l-grid-area-m-admin-dashboard .l-widget-teacher-assessment { grid-column: 10 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-teacher-assessment { grid-column: 7 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-admin-dashboard .l-widget-teacher-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-admin-dashboard .l-widget-employer-assessment { grid-column: 7 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-employer-assessment { grid-column: 1 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-admin-dashboard .l-widget-employer-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-admin-dashboard .l-widget-community-assessment { grid-column: 10 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .l-widget-community-assessment { grid-column: 7 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-admin-dashboard .l-widget-community-assessment { grid-column: span 12; grid-row: auto / auto; } } /* Dashboard - Regional Admin /* ----------------------------------------------- */ .l-grid-area-m-regional-admin-dashboard { } .l-grid-area-m-regional-admin-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 8; grid-row: 1; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 12; grid-row: auto; text-align: left; } } .l-grid-area-m-regional-admin-dashboard .l-widget-pending-approval { grid-column: 9 / span 4; grid-row: 1; text-align: right; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-pending-approval { grid-column: 1 / span 12; grid-row: auto; text-align: left; } } .l-grid-area-m-regional-admin-dashboard .l-widget-assessment-chart { grid-column: 1 / span 12; grid-row: 2; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-assessment-chart { grid-row: 3; } } .l-grid-area-m-regional-admin-dashboard .l-widget-work-readiness { grid-column: 1 / span 6; grid-row: 3 / 5; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-work-readiness { grid-column: 1 / span 12; grid-row: 4; } } .l-grid-area-m-regional-admin-dashboard .l-widget-self-assessment { grid-column: 7 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-self-assessment { grid-column: 1 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-regional-admin-dashboard .l-widget-self-assessment { grid-column: auto / span 12; grid-row: auto / auto; } } .l-grid-area-m-regional-admin-dashboard .l-widget-teacher-assessment { grid-column: 10 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-teacher-assessment { grid-column: 7 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-regional-admin-dashboard .l-widget-teacher-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-regional-admin-dashboard .l-widget-employer-assessment { grid-column: 7 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-employer-assessment { grid-column: 1 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-regional-admin-dashboard .l-widget-employer-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-regional-admin-dashboard .l-widget-community-assessment { grid-column: 10 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-regional-admin-dashboard .l-widget-community-assessment { grid-column: 7 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-regional-admin-dashboard .l-widget-community-assessment { grid-column: span 12; grid-row: auto / auto; } } /* Dashboard - Teacher /* ----------------------------------------------- */ .l-grid-area-m-teacher-dashboard{ } .l-grid-area-m-teacher-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 8; grid-row: 1; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-dashboard-settings { grid-column: 1 / span 12; grid-row: auto; text-align: left; } } .l-grid-area-m-teacher-dashboard .l-widget-pending-approval { grid-column: 9 / span 4; grid-row: 1; text-align: right; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-pending-approval { grid-column: 1 / span 12; grid-row: 2; text-align: left; } } .l-grid-area-m-teacher-dashboard .l-widget-assessment-chart { grid-column: 1 / span 12; grid-row: 2; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-assessment-chart { grid-row: 3; } } .l-grid-area-m-teacher-dashboard .l-widget-work-readiness { grid-column: 1 / span 6; grid-row: 3 / 5; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-work-readiness { grid-column: 1 / span 12; grid-row: 4; } } .l-grid-area-m-teacher-dashboard .l-widget-self-assessment { grid-column: 7 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-self-assessment { grid-column: 1 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-teacher-dashboard .l-widget-self-assessment { grid-column: auto / span 12; grid-row: auto / auto; } } .l-grid-area-m-teacher-dashboard .l-widget-teacher-assessment { grid-column: 10 / span 3; grid-row: 3; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-teacher-assessment { grid-column: 7 / span 6; grid-row: 5; } } @media screen and (max-width: 575px) { .l-grid-area-m-teacher-dashboard .l-widget-teacher-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-teacher-dashboard .l-widget-employer-assessment { grid-column: 7 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-employer-assessment { grid-column: 1 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-teacher-dashboard .l-widget-employer-assessment { grid-column: span 12; grid-row: auto / auto; } } .l-grid-area-m-teacher-dashboard .l-widget-community-assessment { grid-column: 10 / span 3; grid-row: 4; } @media screen and (max-width: 991px) { .l-grid-area-m-teacher-dashboard .l-widget-community-assessment { grid-column: 7 / span 6; grid-row: 6; } } @media screen and (max-width: 575px) { .l-grid-area-m-teacher-dashboard .l-widget-community-assessment { grid-column: span 12; grid-row: auto / auto; } } /* General Layout /* ---------------------------------------------------- */ .l-grand-wrapper /* NOTE: Originally for removing space on the top of page in old Opera Browser, but the position absolute is causing l-body-wrapper background issue on Chrome */ { margin: 0; padding: 0; width: 100%; /* position: absolute; top: 0; */ } .l-grand-wrapper-m-account { height: 100%; overflow-y: auto; background: #FFF ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; /* But the position absolute is essential for account type page */ top: 0; } .l-grand-wrapper-m-error { height: 100%; } .l-grand-wrapper-m-error #content { height: calc(100% - 142px); background: #323232; position: relative; } .wrapper { margin: 0 auto; width: 990px; position: relative; } @media screen and (max-width: 1025px) { .wrapper { box-sizing: border-box; margin: 0 25px; width: calc(100% - 50px); } } .l-inner-wrapper { margin: 0 auto; width: 910px; } @media screen and (max-width: 1025px) { .l-inner-wrapper { box-sizing: border-box; width: calc(100% - 50px); } } #header { width: 100%; background: #141414; position: relative; z-index: 2; } .l-module-header { padding: 15px 0 20px; } .l-module-header-m-full-width { padding: 15px 20px 20px; } .l-module-header-m-full-width--wrapper { border-bottom: 1px solid #a9abae; } .l-body-wrapper { width: 100%; height: 100%; min-height: 100%; top: 0; left: 0; background: #FFF ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; z-index: 1; } .l-body-wrapper-m-full { padding-bottom: 45px; } #content { width: 100%; position: relative; z-index: 1; } #footer { border-top: 3px solid #e1e1e1; padding: 30px 0; } #footer .wrapper { position: static; } .footer-m-full { background-color: #141414; color: #FFF; } .footer-m-full .wrapper { box-sizing: border-box; padding: 0 20px; width: 100%; } @media screen and (max-width: 1025px) { .footer-m-full .wrapper { margin: 0; } } .copy, .by { float: left; line-height: 24px; font-size: 11px; } @media screen and (max-width: 575px) { .copy, .by { float: none; margin-bottom: 25px; text-align: center; } } .copy a { color: #fff; text-decoration: none; } .copy a:hover, .copy a:focus { text-decoration: none; } .by { float: right; } @media screen and (max-width: 575px) { .by { float: none; margin: 0 auto; width: 170px; } } .by-label { float: left; margin: 0 7px 0 0; font-size: 11px; } .efinity { float: left; width: 68px; height: 36px; background: transparent url(../Content/img/logo-efinity.png) no-repeat 0 0; } .track-it-portal { float: left; width: 104px; height: 36px; background: transparent url(../Content/img/logo-track-it-portal-com-footer.png) no-repeat 0 0; } .footer-link { } .footer-link a:hover, .footer-link a:focus { text-decoration: underline; } .l-no-js-msg { width: 100%; height: 81px; position: fixed; z-index: 99999; left: 0; top: 0; background: #141414; color: #FFF; font-size: 13px; font-weight: bold; line-height: 81px; text-align: center; } .l-no-js-msg p { margin: 0; line-height: 81px; } .l-no-js-msg a { color: #FFF; text-decoration: underline; } .l-no-js-msg a:hover { text-decoration: none; } .l-sect-ext { margin-top: 20px; padding: 20px 0; border-top: 1px solid #9d9d9d; } .l-form-container-w-photo-on-left .form-line { padding-left: 167px; } .loader { position: relative; display: none; } .loader--overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; background: transparent url(../Content/img/bg-black-opa-20.png); z-index: 20000; } .loader--container { width: auto; padding: 20px; border-radius: 8px; background-color: #141414; position: fixed; top: 50%; left: 50%; z-index: 20001; } .loader--icon { vertical-align: middle; padding: 20px; width: 32px; } .loader--text { padding: 20px 20px 20px 0; color: #FFF; font-size: 13px; vertical-align: middle; line-height: 1.3; } .app-main-wrapper { padding: 0 0 67px; color: #323232; } .app-main-cont { padding: 0 10px 40px; width: 970px; background-color: #323232; position: relative; /* for help icon */ } @media screen and (max-width: 1025px) { .app-main-cont { box-sizing: border-box; width: 100%; } } .app-main-cont-m-full { box-sizing: border-box; padding-right: 15px; padding-left: 15px; margin: 0 20px; width: calc(100% - 40px); } .app-main-cont-m-no-nav { padding-top: 40px; } .app-main { border-top: 1px solid #eaeaea; border-bottom: 1px solid #9d9d9d; margin: 0 auto; padding: 35px 25px; width: 910px; background-color: #e1e1e1; } @media screen and (max-width: 1025px) { .app-main { box-sizing: border-box; width: 100%; } } .app-main-m-full-width { box-sizing: border-box; width: 100%; } .app-main-m-tight { padding: 15px 25px; } .app-main-alt { background-color: #f2f5f9; } /* General Layout - Full Width (Including Help Page) /* ------------------------------------------------------ */ .l-full-width { color: #141414; background: #e1e1e1; } .l-full-width-m-app { background: #141414; } .l-full-width .l-grand-wrapper { overflow: hidden; } .l-full-width .manage-my-skill-logo { margin-left: 20px; } .l-full-fixed-header { height: 46px; position: fixed !important; top: 0; left: 0; } .l-fixed-side { height: 100%; position: fixed; left: 0; top: 46px; overflow-x: hidden; overflow-y: auto; background-color: #323232; z-index: 2; } .l-full-width-content { padding: 30px 40px 15px; position: relative; top: 46px; } .js-sliding-content-area { margin-left: 240px; -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -o-transition: 0.7s ease; transition: 0.7s ease; } @media screen and (max-width: 1025px) { .js-sliding-content-area { margin-left: 60px; } .s-menu-visible .js-sliding-content-area { margin-left: 0; -webkit-transform: translate(240px, 0); -moz-transform: translate(240px, 0); -ms-transform: translate(240px, 0); transform: translate(240px, 0); } } /* General Layout - Pre Content Panel (Mainly for breadcrumb) /* -------------------------------------------------------------- */ .l-pre-content-panel { margin: 0 auto; padding: 25px 0 20px; width: 960px; border-bottom: 1px solid #8d8d8d; background: #e1e1e1; background: -moz-linear-gradient(top, #e1e1e1 50%, #cbcbcb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#e1e1e1), color-stop(100%,#cbcbcb)); background: -webkit-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: -o-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: -ms-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); position: relative; } @media screen and (max-width: 1025px) { .l-pre-content-panel { box-sizing: border-box; width: 100%; } } .l-pre-content-panel .hd-main { float: left; margin-right: 20px; padding: 35px 0 0 25px; } .l-pre-content-panel .filter-tools { float: left; padding: 33px 0 0 0; } .l-pre-content-panel .ico-excel { position: absolute; top: 39px; right: 32px; z-index: 1; } .l-pre-content-panel-m-full-width { width: auto; } .l-pre-content-panel-m-full-width .l-full-width-wrapper { padding: 0 20px; } /* Grid /* ----------------------------------------------- */ .l-grid-area { display: grid; grid-gap: 15px; grid-template-columns: repeat(12, 1fr); width: 100%; } /* Grid - Loose (Note: to replace grouped-els) /* ----------------------------------------------- */ .l-grid { float: left; margin-left: 10px; } .l-grid:first-child { margin-left: 0; } .l-grid-m-2-cols, .l-grid-m-3-cols, .l-grid-m-4-cols { box-sizing: border-box; margin: 0; padding: 0 7px; width: 50%; } .l-grid-m-2-cols:nth-child(odd) { padding-left: 0; } .l-grid-m-2-cols:nth-child(even) { padding-right: 0; } .l-grid-m-3-cols { width: 33%; } .l-grid-m-3-cols:nth-child(3n+1) { padding-left: 0; } .l-grid-m-3-cols:nth-child(3n) { padding-right: 0; } .l-grid-m-4-cols { width: 25%; } .l-grid-m-4-cols:nth-child(4n+1) { padding-left: 0; } .l-grid-m-4-cols:nth-child(4n) { padding-right: 0; } .l-grid-m-attached { margin-left: 0; } .l-grid-m-uniform:first-child { margin-left: 10px; } .l-grid-right { float: right; margin-left: 10px; } .l-grid-m-spacious, .l-grid-m-spacious-uniform:first-child, .l-grid-right-m-spacious { margin-left: 15px; } .l-grid-m-very-spacious, .l-grid-right-m-very-spacious { margin-left: 25px; } .l-grid-reverse { float: right; margin-right: 10px; } .l-grid-reverse:first-child { margin-right: 0 } .l-grid-reverse-m-spacious { margin-right: 15px; } /* Header - Module /* ----------------------------------------------- */ .module-header { padding: 20px 0; } .module-header .wrapper { border-bottom: 1px solid #a9abae; position: relative; } .module-header--hd { float: left; margin: 0 40px 0 0; color: #000; font-size: 22px; line-height: 45px; } .module-header--logo { float: left; margin: 0 30px 15px 0; } @media screen and (max-width: 575px) { .module-header--logo { float: none; margin-right: 0; } } .module-header--logo table { margin-bottom: 0; } .module-header--logo td { text-align: center; vertical-align: middle; padding: 0; } @media screen and (max-width: 575px) { .module-header--logo td { text-align: left; } } .module-header--logo img { width: 200px; vertical-align: top; } @media screen and (max-width: 575px) { .module-header--logo img { width: auto; height: 50px; } } .module-header--logo span, .module-header--logo a { display: block; } .module-header--instance, .module-name { margin: 7px 0 10px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #000; } @media screen and (max-width: 768px) { .module-header--instance, .module-name { padding-right: 40px; word-wrap: normal; line-height: 1.5; } } .module-header--menu { float: left; } @media screen and (max-width: 575px) { .module-header--menu { float: none; } } /* Header - Top /* ----------------------------------------------- */ .l-top-bar { position: relative; z-index: 2; } .l-top-bar a { text-decoration: none; } .l-top-bar a:hover { text-decoration: underline; } .manage-my-skill-logo { float: left; margin-top: 8px; width: 231px; height: 29px; } .manage-my-skill-logo-m-education { margin: 10px 0; width: 310px; height: 35px; } @media screen and (max-width: 575px) { .manage-my-skill-logo-m-education { margin-top: 16px; width: 200px; height: 28px; } } .manage-my-skill-logo-m-education-full-layout { width: 250px; } .manage-my-skill-logo img { width: 100%; } .logo img { vertical-align: middle; } .l-top-bar-tools { float: right; margin: 10px 0; } .l-top-bar-tools .txt-link { height: 35px; line-height: 35px; color: #FFF; } .l-top-bar-tools-m-full-width { margin-right: 20px; } .btn-hd-log-out { padding-left: 15px; background-position: -287px -100px; } .entity-info-cont { float: left; margin: 20px 0 0 15px; padding-left: 10px; border-left: 1px solid #FFF; line-height: 100%; } .entity-info-cont .pipe-div { margin: 0 10px; font-size: 12px; font-weight: bold; position: relative; top: -1px; z-index: 1; } .entity-info { color: #FFF; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; } .top-admin-menu { float: right; margin-left: 15px; position: relative; z-index: 1; } .top-admin-menu a { text-decoration: none; } .top-admin-menu a:hover { background-color: #e7f6fc; } .admin-menu-dd-btn { display: block; padding: 0 15px; width: 120px; height: 35px; background-color: #f5f5f5; color: #000; line-height: 35px; } .admin-menu-dd-btn .label { float: left; } .admin-menu-dd-btn .ico { float: right; margin-top: 13px; } .admin-menu-dd-list { display: none; position: absolute; top: 35px; left: 0; z-index: 1; } .admin-menu-dd-list a { display: block; padding: 0 15px; width: 120px; height: 35px; border-top: 1px solid #9b9b9b; background-color: #f5f5f5; color: #000; line-height: 35px; } .notification-bubble { display: block; padding-bottom: 4px; width: 21px; height: 16px; background: transparent url(img/common-sprite.png?ver=34) no-repeat -239px -45px; color: #FFF; font-size: 10px; line-height: 15px; text-align: center; } .note-detail-bubble { display: none; padding: 7px 25px 7px 15px; width: 250px; background-color: #e85a00; position: absolute; top: 34px; left: -145px; z-index: 1; } .note-detail-bubble p { margin: 5px 0; } .note-detail-bubble a { color: #FFF; text-decoration: underline; } .note-detail-bubble-close-btn { display: block; width: 11px; height: 11px; line-height: 11px; font-size: 11px; text-align: center; cursor: pointer; position: absolute; top: 5px; right: 5px; z-index: 1; } /* Pattern - Profile View /* ----------------------------------------------- */ .l-profile-view { display: flex; } @media screen and (max-width: 575px) { .l-profile-view { display: block; } } .l-profile-view--picture { margin-left: 30px; order: 2; } @media screen and (max-width: 575px) { .l-profile-view--picture { margin: 0 0 25px; text-align: center; } } .l-profile-view--info { flex: 1; order: 1; } @media screen and (max-width: 575px) { .l-profile-view--info { margin-bottom: 30px; } } /* Pattern - Section Header /* ----------------------------------------------- */ .l-section-header { display: flex; margin-bottom: 15px; } @media screen and (max-width: 575px) { .l-section-header { display: block; margin-bottom: 30px; } } .l-section-header--heading { flex: 1; } .l-section-header--heading h1, .l-section-header--heading h2, .l-section-header--heading h3, .l-section-header--heading h4, .l-section-header--heading h5, .l-section-header--heading h6 { margin-bottom: 0; } @media screen and (max-width: 575px) { .l-section-header--heading h1, .l-section-header--heading h2, .l-section-header--heading h3, .l-section-header--heading h4, .l-section-header--heading h5, .l-section-header--heading h6 { margin-bottom: 15px; } } .l-section-header--action { margin-left: 30px; } @media screen and (max-width: 575px) { .l-section-header--action { margin-left: 0; } } /* Pattern - Tool Bar /* ----------------------------------------------- */ .l-tool-bar { display: flex; flex-wrap: wrap; } @media screen and (max-width: 575px) { .l-tool-bar { display: block; margin-bottom: 30px; } } .l-tool-bar .styled-select { max-width: 180px; min-width: 180px; } @media screen and (max-width: 575px) { .l-tool-bar .styled-select { min-width: 0; max-width: none; } } .l-tool-bar--group { margin-right: 30px; margin-bottom: 15px; } @media screen and (max-width: 575px) { .l-tool-bar--group { margin-right: 0; margin-bottom: 30px; } } .l-tool-bar--group:last-child { margin-right: 0; } .l-tool-bar--group-m-flex-point { flex: 1; } @media screen and (max-width: 575px) { .l-tool-bar--group-m-flex-point { flex: none; } } .l-tool-bar--item { display: inline-block; margin-right: 13px; margin-bottom: 15px; } @media screen and (max-width: 575px) { .l-tool-bar--item { display: block; margin-right: 0; } } .l-tool-bar--item:last-child { margin-right: 0; } .l-tool-bar--item .label-inline { } @media screen and (max-width: 575px) { .l-tool-bar--item .label-inline { display: block; margin-left: 0; margin-right: 0; line-height: 1.4; } } .l-tool-bar--item .label-inline-m-after { } @media screen and (max-width: 575px) { .l-tool-bar--item .label-inline-m-after { position: relative; top: 10px; } } /* Vertical Spacing /* ----------------------------------------------- */ .l-section { padding-bottom: 35px; } .l-section-tight { padding-bottom: 15px; } .l-section-very-tight { padding-bottom: 10px; } /*---------------*/ /* 5. Navigation */ /*---------------*/ /* 5.5. Section Nav */ /* ---------------- */ .section-nav-container { border: 1px solid #8e8e8f; margin: 0 auto; width: 908px; height: 38px; overflow: hidden; -webkit-border-radius: 3px; border-radius: 3px; } .section-nav ul { margin: 0 auto; width: 1200px; height: 38px; } .section-nav li { float: left; background: #cbcbcb; /* Old browsers */ background: -moz-linear-gradient(top, #cbcbcb 30%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#cbcbcb), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* IE10+ */ background: linear-gradient(to bottom, #cbcbcb 30%,#bbbbbb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ } .section-nav a { border-left: 1px dotted #dadada; border-right: 1px dotted #8c8b8c; display: inline-block; padding: 0 43px; height: 38px; line-height: 38px; color: #323232; text-decoration: none; position: relative; } .section-nav .first a { border-left: 0; } .section-nav .last a { border-right: 0; } .section-nav a:hover { background: #B8B8BB; /* Old browsers */ background: -moz-linear-gradient(top, #B8B8BB 30%, #A5A4A4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#B8B8BB), color-stop(100%,#A5A4A4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* IE10+ */ background: linear-gradient(to bottom, #B8B8BB 30%,#A5A4A4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B8B8BB', endColorstr='#A5A4A4',GradientType=0 ); /* IE6-9 */ } .section-nav .selected a { color: #323232; background: #a6a7aa; /* Old browsers */ background: -moz-linear-gradient(top, #a6a7aa 30%, #99989b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#a6a7aa), color-stop(100%,#99989b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* IE10+ */ background: linear-gradient(to bottom, #a6a7aa 30%,#99989b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a7aa', endColorstr='#99989b',GradientType=0 ); /* IE6-9 */ } .section-nav .disabled a, .section-nav .disabled a:hover { color: #a1a1a1; background: #cbcbcb; /* Old browsers */ background: -moz-linear-gradient(top, #cbcbcb 30%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#cbcbcb), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* IE10+ */ background: linear-gradient(to bottom, #cbcbcb 30%,#bbbbbb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ cursor: default; } .section-nav-not-full { margin: 0 0 0 25px; border: 0; height: 40px; -webkit-border-radius: 0; border-radius: 0; } .section-nav-not-full ul { float: left; width: auto; border: 1px solid #8e8e8f; -webkit-border-radius: 3px; border-radius: 3px; } /* 5.6. Section Nav 2 */ /* ------------------ */ .section-nav-2-container { padding: 0 0 40px; } .section-nav-2 { border-bottom: 1px solid #9d9d9d; } .section-nav-2 li { float: left; } .section-nav-2 a { display: block; padding: 0 35px; height: 37px; position: relative; border-right: 1px dotted #9d9d9d; border-left: 1px dotted #eaeaea; color: #323232; line-height: 37px; text-decoration: none; } .section-nav-2 a:hover { color: #26ace1; } .section-nav-2 .first a { border-left: 0; } .section-nav-2 .last a { border-right: 0; } .section-nav-2 .disabled a { color: #a2a2a2; cursor: default; } .selected-state { display: none; width: 100%; height: 2px; background-color: #26ace1; position: absolute; bottom: -1px; left: 0; z-index: 10; } .section-nav-2 .selected .selected-state { display: block; } /* 5.7. Iconed Nav */ /* --------------- */ .iconed-nav { padding: 14px 25px 0; height: 65px; } .iconed-nav li { float: left; margin-left: 2px; } .iconed-nav li:first-child { margin-left: 0; } .iconed-nav a { display: block; width: 108px; height: 63px; border: 1px solid #8e8e8f; text-decoration: none; } .iconed-nav a:hover { background: #a6a7aa; /* Old browsers */ background: -moz-linear-gradient(top, #a6a7aa 30%, #99989b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#a6a7aa), color-stop(100%,#99989b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a6a7aa 30%,#99989b 100%); /* IE10+ */ background: linear-gradient(to bottom, #a6a7aa 30%,#99989b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a7aa', endColorstr='#99989b',GradientType=0 ); /* IE6-9 */ } .iconed-nav .ico { margin: 9px auto 4px; } .iconed-nav-txt { display: block; color: #000; font-size: 11px; text-align: center; } .iconed-nav .disabled-layer { display: none; width: 108px; height: 63px; background: transparent url(img/bg-white-opa-80.png); } .iconed-nav .disabled a { position: relative; cursor: default; background: none; filter: none; } .iconed-nav .disabled .disabled-layer { display: block; position: absolute; top: 0; left: 0; z-index: 1; } /* 5.9. Side Nav (e.g. Help page and pattern library page template) */ /* ---------------------------------------------------------------- */ .side-nav { width: 240px; position: relative; top: 50px; } .side-nav a { display: block; padding: 22px 35px; color: #9d9d9d; text-decoration: none; } .side-nav a:hover, .side-nav .selected a { background-color: #1e1e1e; color: #FFF; } .js-side-nav-container { -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; } .js-side-nav-toggle { display: none; padding: 20px 17px; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; } .js-hide-side-nav { display: none; position: absolute; top: 10px; right: 15px; color: #9d9d9d; font-size: 26px; line-height: 1.2; text-decoration: none; } .js-hide-side-nav:hover { color: #FFF; } @media screen and (max-width: 1025px) { .js-side-nav-container { -webkit-transform: translate(-250px, 0); -moz-transform: translate(-250px, 0); -ms-transform: translate(-250px, 0); transform: translate(-250px, 0); } .s-menu-visible .js-side-nav-container { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-side-nav-toggle { display: block; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .s-menu-visible .js-side-nav-toggle { -webkit-transition: 0.7s ease; -moz-transition: 0.7s ease; -o-transition: 0.7s ease; transition: 0.7s ease; -webkit-transform: translate(-59px, 0); -moz-transform: translate(-59px, 0); -ms-transform: translate(-59px, 0); transform: translate(-59px, 0); } .s-menu-visible .js-hide-side-nav { display: block; } } /* Navigation - Accessibility /* ----------------------------------------------- */ #nav-access { position: absolute; top: -9999px; left: -9999px; } /* Navigation - Main (Global) /* ----------------------------------------------- */ .main-nav { margin-bottom: 15px; padding: 0; } .main-nav--toggle { display: none; } @media screen and (max-width: 991px) { .main-nav--toggle { display: block; position: absolute; top: 24px; right: 0; } } @media screen and (max-width: 575px) { .main-nav--toggle { top: 15px; } } .l-full-width .main-nav--toggle { right: 20px; } .main-nav--toggle--bar { display: block; margin-top: 4px; width: 30px; height: 4px; border-radius: 1px; background-color: #333; } .main-nav--toggle:hover .main-nav--toggle--bar, .main-nav--toggle:focus .main-nav--toggle--bar { background-color: #666; } .main-nav--toggle--bar-m-1 { margin-top: 0; } .main-nav--overlay { } @media screen and (max-width: 991px) { .main-nav--overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(58, 58, 58, 0.9); z-index: -1; opacity: 0; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } } .main-nav--menu { } @media screen and (max-width: 991px) { .main-nav--menu { box-sizing: border-box; position: fixed; border-left: 1px solid #666; background-color: #3a3a3a; width: 280px; height: 100%; top: 0; right: -280px; z-index: 10000; overflow-y: auto; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } } .main-nav--menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .main-nav--menu:before { display: none; padding: 10px 20px; border-bottom: 1px solid #d1d2d4; color: #FFF; font-size: 14px; font-weight: bold; text-transform: uppercase; content: "Global Navigation"; } @media screen and (max-width: 991px) { .main-nav--menu:before { display: block; } } .main-nav--menu li { float: left; margin: 0 0 0 32px; } @media screen and (max-width: 991px) { .main-nav--menu li { float: none; margin: 0; } } .main-nav--menu li:first-child { margin-left: 0; } .main-nav--menu a { font-size: 13px; color: #000; text-decoration: none; } @media screen and (max-width: 991px) { .main-nav--menu a { display: block; border-bottom: 1px solid #666; padding: 10px 20px; color: #FFF; } } .main-nav--menu a:hover, .main-nav--menu a:focus { color: #8d8d8d; } .main-nav--menu .selected a { color: #14abe4; } @media screen and (max-width: 991px) { .main-nav--menu .selected a { border-left: 3px solid #14abe4; } } .main-nav--close { position: fixed; color: #FFF; top: 0; right: 290px; z-index: -1; font-size: 35px; opacity: 0; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .s-mobile-main-nav-active { overflow: hidden; } .s-mobile-main-nav-active .header { z-index: 1; } .s-mobile-main-nav-active .l-body-wrapper { z-index: 2; } .s-mobile-main-nav-active .main-nav--overlay { } @media screen and (max-width: 991px) { .s-mobile-main-nav-active .main-nav--overlay { opacity: 1; z-index: 9999; } } .s-mobile-main-nav-active .main-nav--menu { right: 0; } .s-mobile-main-nav-active .main-nav--close { } @media screen and (max-width: 991px) { .s-mobile-main-nav-active .main-nav--close { opacity: 1; z-index: 10001; } } /* Navigation - Main 2nd Level /* ----------------------------------------------- */ .nav-2nd-level { min-height: 40px; /* NOTE: To give a top spacing for page without 2nd level navs */ position: relative; } .nav-2nd-level:after, .nav-2nd-level--menu:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .nav-2nd-level--toggle { display: none; } .nav-2nd-level--toggle:after { font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\f142'; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } @media screen and (max-width: 991px) { .nav-2nd-level--toggle { box-sizing: border-box; padding: 0 30px 0 20px; display: block; width: calc(100% - 35px); height: 38px; position: relative; top: 15px; border: 1px solid #666; border-left: 3px solid #666; color: #FFF; text-align: left; font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .nav-2nd-level--menu { float: left; margin-left: 5px; width: 900px; } @media screen and (max-width: 1025px) { .nav-2nd-level--menu { box-sizing: border-box; width: calc(100% - 10px); } } @media screen and (max-width: 991px) { .nav-2nd-level--menu { float: none; margin: 15px 0; overflow: hidden; max-height: 0; -moz-transition: max-height 0.2s ease-in-out; -webkit-transition: max-height 0.2s ease-in-out; transition: max-height 0.2s ease-in-out; } } .nav-2nd-level--menu li { float: left; margin-right: 10px; width: auto; overflow: hidden; } @media screen and (max-width: 991px) { .nav-2nd-level--menu li { float: none; margin: 0; width: calc(100% - 25px); } } .nav-2nd-level--menu a { display: block; padding: 0 20px; height: 37px; position: relative; border-bottom: 3px solid #323232; color: #FFF; line-height: 40px; text-decoration: none; } @media screen and (max-width: 991px) { .nav-2nd-level--menu a { border-right: 1px solid #666; border-bottom: 1px solid #666; border-left: 3px solid #666; } } .nav-2nd-level--menu a:hover, .nav-2nd-level--menu a:focus { border-color: #666; background-color: #262626; color: #FFF; } @media screen and (max-width: 991px) { .nav-2nd-level--menu a:hover, .nav-2nd-level--menu a:focus { background-color: transparent; color: #8d8d8d; } } .nav-2nd-level--menu .selected a { border-color: #14abe4; } @media screen and (max-width: 991px) { .nav-2nd-level--menu .selected a { border-color: #666; border-left-color: #14abe4; color: #14abe4; } } .nav-2nd-level--menu .ico-check { position: absolute; top: 3px; left: 3px; } .nav-2nd-level--menu .disabled a { color: #8d8d8d; cursor: default; } .nav-2nd-level--menu .disabled a:hover, .nav-2nd-level--menu .disabled a:focus { border-color: #323232; background-color: transparent; color: #8d8d8d; } .nav-2nd-level-m-full { } .nav-2nd-level-m-full .nav-2nd-level--menu { box-sizing: border-box; margin-left: 0; width: calc(100% - 35px); } @media screen and (max-width: 991px) { .nav-2nd-level-m-full .nav-2nd-level--menu { width: calc(100% - 10px); } } .s-nav-2nd-level-expanded { } .s-nav-2nd-level-expanded .nav-2nd-level--menu { } @media screen and (max-width: 991px) { .s-nav-2nd-level-expanded .nav-2nd-level--menu { max-height: 1000px; /* Long enough to cover the whole menu lenght */ } } /*------------*/ /* 6. Content */ /*------------*/ /* 6.1. General */ /* 6.1.3. App Forms */ /* 6.1.3.1. General */ .txt-box-w-label-inside { position: relative; z-index: 1; } .txt-box-w-label-inside label { display: block; margin: 0; padding: 0 10px; width: 195px; height: 31px; line-height: 31px; color: #323232; position: absolute; top: 0; left: 0; z-index: 1; } .txt-box-120 { width: 120px !important; } .txt-box-120 .std-text { width: 100px !important; } .txt-box-220 { width: 220px !important; } .txt-box-220 .std-text { width: 200px !important; } .txt-box-365 { width: 365px !important; } .txt-box-365 .std-text { width: 345px !important; } .logo-cont img { margin: 0 0 10px; } .l-photo-w-upload-form { position: absolute; top: 80px; left: 30px; z-index: 10; } .l-photo-w-upload-form-m-inside-panel-tab { top: 175px; } /* 6.1.4. Overlay elements */ /* 6.1.4.1. General */ /* 6.1.4.1.2. 2 Cols */ .d-box-side { float: left; padding: 40px 30px; border-right: 1px solid #dcdcdc; width: 115px; background-color: #f5f5f5; overflow: hidden; } .d-box-side a { color: #1aa9e1; text-decoration: none; } .d-box-side a:hover, .d-box-side .selected a { color: #323232; } .d-box-content { float: right; width: 474px; height: 310px; position: relative; overflow: hidden; } .d-box-side-w-scroll-bar { width: 135px; padding-right: 10px; } .d-box-overflow-bot-padding { height: 20px; } /* -------------------------------------------------- */ /* 7. COMPONENTS /* -------------------------------------------------- */ /* 7.2. Iconed Link */ /* ---------------- */ .iconed-link { display: block; } .iconed-link .ico { float: left; margin-right: 10px; } .iconed-link .label { float: left; height: 31px; color: #26ACE1; line-height: 31px; } .iconed-link:hover .label { text-decoration: underline; } .iconed-link-copy .ico { margin-top: 7px; } .iconed-link-attach { color: #1aa9e1; } .iconed-link-attach .ico { margin-top: 6px; } .ico-btn-style { display: inline-block; width: 31px; height: 31px; -webkit-border-radius: 3px; border-radius: 3px; background: #1cb5e9; /* Old browsers */ background: -moz-linear-gradient(top, #1cb5e9 50%, #0ea2df 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#1cb5e9), color-stop(100%,#0ea2df)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); /* IE10+ */ background: linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); /* W3C */ position: relative; } .iconed-link:hover .ico-btn-style { background: #0382d7; /* Old browsers */ background: -moz-linear-gradient(top, #0382d7 50%, #0167c1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#0382d7), color-stop(100%,#0167c1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0382d7 50%,#0167c1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0382d7 50%,#0167c1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0382d7 50%,#0167c1 100%); /* IE10+ */ background: linear-gradient(top, #0382d7 50%,#0167c1 100%); /* W3C */ } .ico-btn-style-plus { margin-top: -6px; margin-left: -6px; position: absolute; top: 50%; left: 50%; } .iconed-link-small .label { height: 16px; line-height: 16px; } .iconed-link-reverse .ico { margin-right: 0; margin-left: 10px; } .tbl-iconed-link .ico { float: left; margin-right: 10px; background: none; } .tbl-iconed-link .label { float: left; margin-top: 4px; line-height: 1.5; } .tbl-iconed-link:hover .label { text-decoration: underline; } .x12-long-col .tbl-iconed-link .label { width: 440px; } .ico-font-panel { display: block; border: 1px solid #CCC; width: 14px; height: 14px; line-height: 14px; background-color: #CCC; text-align: center; -webkit-border-radius: 3px; border-radius: 3px; color: #818181; } .ico-font-panel:hover { background-color: #CADAEE; } .ico-font-panel .fa { font-size: 11px; } /* 7.3. Navigation */ /* --------------- */ /* 7.3.3. Mini Nav */ .mini-nav { display: inline-block; overflow: hidden; border: 1px solid #8e8e8f; -webkit-border-radius: 3px; border-radius: 3px; background: #cbcbcb; /* Old browsers */ background: -moz-linear-gradient(top, #cbcbcb 30%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#cbcbcb), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); /* IE10+ */ background: linear-gradient(to bottom, #cbcbcb 30%,#bbbbbb 100%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#bbbbbb',GradientType=0 ); */ /* IE6-9 */ } .mini-nav li { float: left; } .mini-nav a { display: block; padding: 0 12px; height: 30px; border-left: 1px dotted #DADADA; border-right: 1px dotted #8C8B8C; color: #000; line-height: 30px; text-decoration: none; } .mini-nav a:hover { background: #B8B8BB; /* Old browsers */ background: -moz-linear-gradient(top, #B8B8BB 30%, #A5A4A4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#B8B8BB), color-stop(100%,#A5A4A4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #B8B8BB 30%,#A5A4A4 100%); /* IE10+ */ background: linear-gradient(to bottom, #B8B8BB 30%,#A5A4A4 100%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B8B8BB', endColorstr='#A5A4A4',GradientType=0 ); */ /* IE6-9 */ } .mini-nav .selected a { background: #a9a8ab; /* Old browsers */ background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* IE10+ */ background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a8ab', endColorstr='#98969a',GradientType=0 ); */ /* IE6-9 */ } .mini-nav .first a { border-left: 0; } .mini-nav .last a { border-right: 0; } /* 7.3.4. Search Bar Minimalist */ .search-bar-min { width: 100%; height: 42px; position: relative; border-bottom: 1px solid #9d9d9d; } .search-bar-min--input { padding: 0 42px 0 8px; position: relative; } .search-bar-min--input input { padding: 0; width: 100%; height: 42px; position: relative; z-index: 2; border: 0; background: transparent; line-height: 42px; font-size: 18px; } .search-bar-min--input label { width: auto; height: 42px; z-index: 0; color: #666; font-size: 20px; line-height: 42px; } .search-bar-min--input .std-text-focus { background: none; filter: none; } .search-bar-min--button { position: absolute; top: 0; right: 0; z-index: 2; } .search-bar-min--button button { display: block; width: 42px; height: 42px; } .search-bar-min--button .ico-glass { margin: 0 auto; } /* 7.4. Date Picker */ /* ---------------- */ /* 7.4.1. Full Date Picker */ .full-date-picker { width: 295px; height: 31px; background: transparent url(../Content/img/common-sprite.png?ver=34) no-repeat 0 -69px; } .full-date-picker .text { float: left; margin: 0 15px 0 12px; padding: 0; width: 200px; height: 31px; border: 0; background: none; line-height: 31px; } .full-date-picker .submit { float: right; width: 32px; height: 31px; } .ui-datepicker-trigger { float: left; width: 36px; height: 31px; border: 0 !important; cursor: pointer; } .full-date-picker-no-button { width: 264px; background-position: 0 -347px; } /* 7.4.2. Date Range Picker */ .date-range-picker { position: relative; } .date-range-picker .text { float: left; margin-left: 10px; width: 65px; } .date-range-picker .text:first-child { margin-left: 0; } .date-range-picker .btn { float: left; margin-left: 10px; } /* 7.5. Table */ /* ---------- */ /* 7.5.1. Base */ .tbl-area { padding: 0 0 15px; } .tbl-pw-photo { width: 630px; } .tbl-def { color: #323232; } .tbl-def img { display: block; } .tbl-def a { color: #000; } .tbl-def th, .tbl-def td { padding: 7px 10px; text-align: left; vertical-align: middle; } .tbl-def th { border-left: 1px dotted #dbdbdb; border-right: 1px dotted #8e8e8e; border-bottom: 1px solid #8d8d8d; padding: 14px 10px; font-size: 13px; font-weight: bold; background: #cbcbcb; /* Old browsers */ background: -moz-linear-gradient(top, #cbcbcb 50%, #b9b9b9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cbcbcb), color-stop(100%,#b9b9b9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* IE10+ */ background: linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#b9b9b9',GradientType=0 ); */ /* IE6-9 */ } .tbl-def th.s-disable-tbl-sort:hover { border-left: 1px dotted #dbdbdb; border-right: 1px dotted #8e8e8e; border-bottom: 1px solid #8d8d8d; padding: 14px 10px; font-weight: bold; background: #cbcbcb; /* Old browsers */ background: -moz-linear-gradient(top, #cbcbcb 50%, #b9b9b9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cbcbcb), color-stop(100%,#b9b9b9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* IE10+ */ background: linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); /* W3C */ cursor: default; } .tbl-def th.selected { background: #a8a7aa; /* Old browsers */ background: -moz-linear-gradient(top, #a8a7aa 50%, #99979b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#a8a7aa), color-stop(100%,#99979b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a8a7aa 50%,#99979b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a8a7aa 50%,#99979b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a8a7aa 50%,#99979b 100%); /* IE10+ */ background: linear-gradient(top, #a8a7aa 50%,#99979b 100%); /* W3C */ } .tbl-def th.first-col { border-left: 0; -webkit-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } .tbl-def th.last-col { border-right: 0 !important; -webkit-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .tbl-def td { background-color: #f2f5f9; vertical-align: middle; height: 20px; min-height: 20px; } .tbl-def td.first-col { border-left: 1px solid #b7b7b7; } .tbl-def td.last-col { border-right: 1px solid #b7b7b7; } .tbl-def td.full-col { border-left: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } .tbl-def th .ico-black-solid-arrow { display: none; margin-top: -2px; position: absolute; top: 50%; right: 0; } .tbl-def th.selected .ico-black-solid-arrow { display: block; } .tbl-def .last-col .ico-black-solid-arrow { right: -10px; } .tbl-def th.last-col-w-disable-tbl-sort:hover { border-right: 0; padding-right: 20px; -webkit-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .tbl-pax-note-area { width: 510px; } .tbl-featured-row td { background-color: #d6e0fb !important; } .tbl-folder-row td { background-color: #d1d1d1; } .tbl-group-header-row td { background-color: #dfdfdf; font-size: 13px; font-weight: bold; } .tbl-group-footer-row td { background-color: #b9b9b9; } .tbl-group-first-row td { border-top: 1px solid #8d8d8d; } .tbl-group-first-row:first-child td { border-top: 0; } .tbl-alt-line td { background-color: #FFF; } th.tbl-single-col { border-left: 0; border-right: 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } td.tbl-single-col { border-left: 1px solid #B7B7B7; border-right: 1px solid #B7B7B7; } .auto-width-col { width: auto; } th.shortest-col { width: 19px; } th.x-short-col { width: 24px; } th.x1-short-col { width: 34px; } th.x2-short-col { width: 44px; } th.x3-short-col { width: 55px; } th.x4-short-col { width: 64px; } th.short-col { width: 69px; } th.med-col { width: 99px; } th.long-col { width: 129px; } th.x-long-col { width: 159px; } th.x2-long-col { width: 189px; } th.x3-long-col { width: 209px; } th.x4-long-col { width: 239px; } th.x5-long-col { width: 269px; } th.x6-long-col { width: 299px; } th.x7-long-col { width: 329px; } th.x8-long-col { width: 359px; } th.x9-long-col { width: 389px; } th.x10-long-col { width: 419px; } th.x11-long-col { width: 449px; } th.x12-long-col { width: 479px; } th.x13-long-col { width: 509px; } th.x14-long-col { width: 539px; } th.x15-long-col { width: 569px; } th.x16-long-col { width: 599px; } th.x17-long-col { width: 629px; } th.x18-long-col { width: 649px; } th.x19-long-col { width: 689px; } th.x20-long-col { width: 719px; } .tbl-single-line-txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; } td.shortest-col, .plain-tbl th.shortest-col { width: 20px; } td.x-short-col, .plain-tbl th.x-short-col { width: 25px; } td.x1-short-col, .plain-tbl th.x1-short-col { width: 35px; } td.x2-short-col, .plain-tbl th.x2-short-col { width: 45px; } td.x3-short-col, .plain-tbl th.x3-short-col { width: 56px; } td.x4-short-col, .plain-tbl th.x4-short-col { width: 65px; } td.short-col, .plain-tbl th.short-col { width: 70px; } td.med-col, .plain-tbl th.med-col { width: 100px; } td.long-col, .plain-tbl th.long-col, .tbl-single-line-txt-m-long { width: 130px; } td.x-long-col, .plain-tbl th.x-long-col, .tbl-single-line-txt-m-x-long { width: 160px; } td.x2-long-col, .plain-tbl th.x2-long-col { width: 190px; } td.x3-long-col, .plain-tbl th.x3-long-col { width: 210px; } td.x4-long-col, .plain-tbl th.x4-long-col { width: 240px; } td.x5-long-col, .plain-tbl th.x5-long-col { width: 270px; } td.x6-long-col, .plain-tbl th.x6-long-col { width: 300px; } td.x7-long-col, .plain-tbl th.x7-long-col { width: 330px; } td.x8-long-col, .plain-tbl th.x8-long-col { width: 360px; } td.x9-long-col, .plain-tbl th.x9-long-col { width: 390px; } td.x10-long-col, .plain-tbl th.x10-long-col { width: 420px; } td.x11-long-col, .plain-tbl th.x11-long-col { width: 450px; } td.x12-long-col, .plain-tbl th.x12-long-col { width: 480px; } td.x13-long-col, .plain-tbl th.x13-long-col { width: 510px; } td.x14-long-col, .plain-tbl th.x14-long-col { width: 540px; } td.x15-long-col, .plain-tbl th.x15-long-col { width: 570px; } td.x16-long-col, .plain-tbl th.x16-long-col { width: 600px; } td.x17-long-col, .plain-tbl th.x17-long-col { width: 630px; } td.x18-long-col, .plain-tbl th.x18-long-col { width: 650px; } td.x19-long-col, .plain-tbl th.x19-long-col { width: 690px; } td.x20-long-col, .plain-tbl th.x20-long-col { width: 720px; } .tbl-color-indicator { width: 15px; height: 15px; float: left; margin-right: 10px; } .tbl-body-w-top-border { border-top: 1px solid #B7B7B7; } .ico-in-table { display: block; padding: 1px 5px; } .tbl-colored-indicator { display: block; width: 20px; height: 20px; border-radius: 10px; background-color: #ef5d00; color: #FFF; font-size: 11px; line-height: 21px; text-align: center; } .s-inactive td { background-color: #E6E7E8; color: #BDBDBE !important; } .s-inactive a { color: #BDBDBE; } /* 7.5.2. Table Scrollable */ .tbl-scrollable .tbl-single-col { padding-right: 20px; } .tbl-scrollable-body-vp, .tbl-body { border-bottom: 1px solid #B7B7B7; } .s-tbl-scrollable .tbl-scrollable-body-vp { overflow-x: hidden; overflow-y: scroll; border-right: 1px solid #b7b7b7; } .s-tbl-scrollable .last-col { padding-right: 10px; } .s-tbl-scrollable td.tbl-single-col, .s-tbl-scrollable td.last-col { border-right: 0; } /* 7.5.3. Table Sortable */ .tbl-hdr--field { position: relative; } .tbl-w-drag-n-drop-sort td { cursor: move !important; } .tbl-sortable th { cursor: pointer; } .tbl-sortable th:hover { background: #b8b8bb; /* Old browsers */ background: -moz-linear-gradient(top, #b8b8bb 50%, #a5a4a4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#b8b8bb), color-stop(100%,#a5a4a4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b8b8bb 50%,#a5a4a4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b8b8bb 50%,#a5a4a4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b8b8bb 50%,#a5a4a4 100%); /* IE10+ */ background: linear-gradient(top, #b8b8bb 50%,#a5a4a4 100%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8b8bb', endColorstr='#a5a4a4',GradientType=0 ); */ /* IE6-9 */ } .tbl-sortable th.s-selected .ico-black-solid-arrow { display: block; } .tbl-sortable .last-col .ico-black-solid-arrow { right: 0; } /* 7.5.4. Table's Action Panel */ .tbl-act-panel .txt-label { height: 20px; line-height: 20px; } .tbl-act-panel a, .tbl-act-panel img, .tbl-act-panel .ico, .tbl-act-panel .checkbox, .tbl-act-panel .txt-label { float: left; margin-left: 3px; } .tbl-act-panel .tbl-act-panel--el-right { float: right; } .tbl-act-panel a:first-child, .tbl-act-panel img:first-child, .tbl-act-panel .ico:first-child, .tbl-act-panel .checkbox:first-child, .tbl-act-panel .txt-label:first-child { margin-left: 0; } .tbl-act-panel .checkbo { margin-top: 2px; } .tbl-act-panel .ico-check { margin-top: 3px; } .tbl-act-panel-spacious a, .tbl-act-panel-spacious img, .tbl-act-panel-spacious .ico, .tbl-act-panel-spacious .checkbox, .tbl-act-panel-spacious .txt-label { margin-left: 5px; } .tbl-act-panel-very-spacious a, .tbl-act-panel-very-spacious img, .tbl-act-panel-very-spacious .ico, .tbl-act-panel-very-spacious .checkbox, .tbl-act-panel-very-spacious .txt-label { margin-left: 15px; } /* 7.5.5. Plain Table (style used inside dialog box) */ .plain-tbl { min-width: 310px; max-width: 650px; } .plain-tbl a { font-size: 12px; } .plain-tbl th, .plain-tbl td { border-bottom: 1px solid #c5c5c5; } .plain-tbl th:first-child, .plain-tbl td:first-child { padding-left: 0; } .plain-tbl th { padding: 3px 0 3px 12px; font-size: 14px; font-weight: bold; text-align: left; } .plain-tbl td { padding: 5px 0 5px 12px; } .plain-tbl .tbl-scrollable-body-vp { border-bottom: 1px solid #c5c5c5; } .plain-tbl--hdr { margin-bottom: 0; } .plain-tbl--body { margin-bottom: 0; border-bottom: 0; } .plain-tbl--body td { border-top: 1px solid #c5c5c5; border-bottom: 0; } .plain-tbl--body tr:first-child td { border-top: 0; } /* 7.5.7. Grouped Table */ .tbl-grouped--panel { float: left; background: #FFF url(../content/img/bg-diagonal-stripe-b-n-w.png); } .tbl-grouped--panel th.first-col { -webkit-border-radius: 0; border-radius: 0; } .tbl-grouped--panel th.last-col { border-right: 1px solid #bdbdbd !important; -webkit-border-radius: 0; border-radius: 0; } .tbl-grouped--panel td.first-col { border-left: 1px solid #B7B7B7; } .tbl-grouped--panel img { display: block; } .tbl-grouped--panel .tbl-scrollable-body-vp .first-col { border-left: 0; } .tbl-grouped--panel-m-first th.first-col { border-radius: 3px 0 0 0 !important; -webkit-border-radius: 3px 0 0 0 !important; } .tbl-grouped--panel-m-first .tbl-scrollable-body-vp { border-left: 1px solid #B7B7B7; } .tbl-grouped--panel-m-last th.last-col { border-right: 0 !important; border-radius: 0 3px 0 0 !important; -webkit-border-radius: 0 3px 0 0 !important; } .tbl-grouped--panel-m-cabin-list { width: 240px; } .tbl-grouped--panel-m-cabin-list tr.selected td { background-color: #b8e6f7; } .tbl-grouped--panel-m-cabin-list .tbl-scrollable-body-vp, .tbl-grouped--panel-m-cabin-allocation .tbl-scrollable-body-vp { height: 374px; } .tbl-grouped--panel-m-cabin-allocation { width: 670px; } /* 7.5.8. Clickable Table */ .tbl-clickable tr:hover td { background-color: #ddd !important; cursor: pointer; } .tbl-clickable tr:hover .js-btn-delete-this-flag { display: block; } /* 7.5.9. Table Calendar */ .tbl-calendar { margin: 0; width: 893px; color: #8e8e8e; /* Note: can't apply overflow: hidden due to overflowing flight item drop down */ } .tbl-calendar th { border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; padding: 5px; text-align: left; } .tbl-calendar td { background-color: #FFF; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; } .tbl-calendar--vp { width: 910px; height: 600px; overflow-x: hidden; overflow-y: scroll; position: relative; } td.tbl-calendar--time-cell { padding: 0 10px 0 0; background-color: #e1e1e1; text-align: right; } th.tbl-calendar--cell { padding: 7px 5px; vertical-align: middle; } td.tbl-calendar--cell { padding: 0; cursor: pointer; } .tbl-calendar--note-cell { background-color: #bdbdbd; } .tbl-calendar--warning-cell { background: transparent url(../Content/img/bg-diagonal-stripe-orange.png); color: #323232; } td.tbl-calendar--non-work-hour-cell { background-color: #EAD5D5; } td.s-w-dd-expanded { z-index: 9998 !important; } .js-tbl-calendar--warning-txt { display: inline-block; padding: 2px 0 0 23px; background: transparent url(../Content/img/ico-exclamation.png) no-repeat 0 center; line-height: 1.3; } .js-tbl-calendar-day { } .js-tbl-calendar-day .tbl-calendar--time-cell { width: 28px; height: 22px; } .js-tbl-calendar-day th.tbl-calendar--cell { text-align: center; } .js-tbl-calendar-day td.tbl-calendar--cell { height: 26px; } .tbl-calendar-week { } .tbl-calendar-week .tbl-calendar--time-cell { height: 24px; } .tbl-calendar-week th.tbl-calendar--cell { width: 111px; } .tbl-calendar-week td.tbl-calendar--cell { width: 121px !important; height: 26px; } .js-tbl-calendar-month { width: 100%; } .js-tbl-calendar-month th.tbl-calendar--cell { width: 119px; } .js-tbl-calendar-month td.tbl-calendar--cell { width: 129px; height: 103px; vertical-align: top; } .js-tbl-calendar-month .date { display: block; padding: 6px; font-size: 11px; } .js-tbl-calendar-month .tbl-calendar--warning-cell { padding: 4px 6px; } /* 7.7. List of Items */ /* ------------------ */ /* 7.7.1. Tag List */ .l-tag-list { padding: 4px 2px; min-height: 27px; border-top: 1px solid #9a9b9e; border-left: 1px solid #9a9b9e; border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5; border-radius: 3px; background-color: #e7e9ed; } .tag-item { display: inline-block; height: 21px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #424242; color: #FFF; line-height: 21px; } .tag-item--label { float: left; padding: 0 10px; } .tag-item--btn { float: left; padding: 0 8px; height: 21px; border-left: 1px solid #5e5e5e; line-height: 18px; cursor: pointer; font-family: Verdana; } .l-tag-list .tag-item { float: left; margin: 3px; } /* 7.7.2. Route List */ .route-list--view { float: left; padding: 10px 5px; width: 730px; min-height: 11px; border-radius: 3px; background: #a9a8ab; /* Old browsers */ background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); /* IE10+ */ background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); /* W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a8ab', endColorstr='#98969a',GradientType=0 ); */ /* IE6-9 */ } .route-list--view li { margin: 5px 0 0; } .route-list--view li:first-child { margin: 0; } .route-list--item { padding: 7px 10px; width: 710px; -webkit-border-radius: 3px; border-radius: 3px; background: #f2f5f9; position: relative; } .route-list--item .ico-full-arrow-right { float: left; margin: 5px 10px 0 0; } .route-list--item .btn-remove { float: right; margin-left: 10px; } .route-list--item .btn-edit { float: right; text-align: center; margin-left: 10px; } .route-list--item-origin .ico-full-arrow-right { display: none; } .route-list--info { float: left; margin: 0; width: 480px; height: 20px; line-height: 20px; } .route-list--meeting { float: right; margin: 0 0 0 10px; height: 20px; font-weight: bold; line-height: 20px; } .route-list--control { float: left; margin-left: 10px; } /* 7.7.7. Versatilie List */ .versatile-list--item { padding: 25px 0 20px; border-top: 1px solid #9d9d9d; } .versatile-list--item:first-child { padding-top: 10px; border-top: 0; } .versatile-list--meta { float: left; margin-right: 15px; color: #999795; line-height: 20px; } @media screen and (max-width: 991px) { .versatile-list--meta { float: none; display: inline-block; margin-bottom: 7px; } } @media screen and (max-width: 575px) { .versatile-list--meta { display: block; margin-right: 0; } } .versatile-list--meta-m-sub { color: #26ace1; } .versatile-list--action { float: right; } @media screen and (max-width: 991px) { .versatile-list--action { float: none; } } .versatile-list--action .btn { margin-right: 10px; margin-bottom: 10px; } .versatile-list--action .btn:last-child { margin-right: 0; } .versatile-list-m-with-floating-box { float: right; width: calc(100% - 395px); } @media screen and (max-width: 991px) { .versatile-list-m-with-floating-box { width: calc(100% - 310px); } } @media screen and (max-width: 767px) { .versatile-list-m-with-floating-box { float: none; width: calc(100% - 52px); } } @media screen and (max-width: 575px) { .versatile-list-m-with-floating-box { float: none; width: calc(100% - 42px); } } /* 7.14. Tool Tip Pop-up */ /* --------------------- */ .tool-tip { width: 310px; border: 1px solid #1aa9e1; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; background: #fefefe; color: #141414; position: absolute; z-index: 999; visibility: hidden; } .tool-tip p, .tool-tip .form-line { margin: 4px 0; } .tool-tip-m-element-notes { display: none; padding: 0 10px; width: 180px; position: absolute; top: 90%; left: 50%; visibility: visible; background-color: #FFF; text-align: left; text-transform: none; transform: translateX(-50%); } .tool-tip-m-element-notes--content { display: block; padding: 10px 0; line-height: 1.5; } .tool-tip-pv { z-index: 10003; } .tool-tip-no-close .tool-tip--close { display: none; } .tool-tip--hd { margin: 0 0 10px; color: #1aa9e1; font-size: 15px; font-weight: bold; line-height: 100%; } .tool-tip--date { padding: 0 0 7px; height: 31px; } .tool-tip--date .text-link { height: 31px; line-height: 31px; } .tool-tip--date--view, .tool-tip--date--edit { margin-bottom: 0; height: 31px; line-height: 31px; } .tool-tip--date--edit { display: none; } .tool-tip--info-line label { display: inline; color: #8e8e8e; line-height: 14px; } .tool-tip-tbl { width: 100%; } .tool-tip-tbl tr:first-child td { border-top: 0; } .tool-tip-tbl td, .tool-tip-tbl th { padding: 5px 15px; } .tool-tip-tbl th { color: #8e8e8e; text-align: left; } .tool-tip-tbl td { border-top: 1px solid #bebebe; } .tool-tip-tbl .x-short-col, .alt-color-col { color: #13abe4; } .tool-tip--close { position: absolute; top: 15px; right: 15px; color: #7a7a7a; font-family: Verdana; font-weight: bold; text-decoration: none; } .tool-tip-arrow-decor { display: block; position: absolute; background: transparent url(../Content/img/common-sprite.png?ver=34) no-repeat; } .tool-tip-arrow-decor-ver { margin-left: -4px; width: 9px; height: 6px; left: 50%; } .tool-tip-arrow-decor-down { background-position: -104px -34px; bottom: -6px; } .tool-tip-arrow-decor-up { background-position: -104px -43px; top: -6px; } .l-tool-tip-top { padding: 28px 15px 5px; } .l-tool-tip-mid { padding-bottom: 5px; } .l-tool-tip-bot { padding: 5px 15px 20px; } .l-tool-tip-mid .form-line { padding-left: 15px; padding-right: 15px; } .l-tool-tip-view { width: 100%; overflow: hidden; } .l-tool-tip--panel-cont { width: 15500px; position: relative; left: 0; } .l-tool-tip--panel { float: left; width: 310px; } /* 7.15. Accordion */ /* --------------- */ /* 7.15.1. Base */ .accordion--hdr { padding-bottom: 15px; } .accordion--hdr .accordion--ico { float: left; margin-right: 10px; } .accordion--hdr .ico-crcl-26 { margin-top: 3px; } .accordion--hdr .accordion--hd { float: left; margin-bottom: 0; height: 31px; font-size: 22px; line-height: 33px; } .accordion--hdr .btn { float: right; } .accordion--btn { display: block; padding: 0; width: 31px; height: 31px; } .accordion--btn .ico { margin: 11px 0 0 9px; } .accordion--body { padding-top: 20px; } .js .accordion--body { display: none; } /* 7.21. Masonry */ /* ------------- */ .masonry .cms-copy ul { margin-left: 15px; } .masonry--brick { width: 100%; margin-bottom: 30px; } .js .masonry--brick { float: left; margin: 10px 10px 30px; width: 205px; } /* Account Panel /* ----------------------------------------------- */ .account-panel { width: 685px; min-width: 265px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { .account-panel { margin: 50px auto; width: 270px; position: static; transform: none; } } .account-panel .l-grid { } @media screen and (max-width: 767px) { .account-panel .l-grid { float: none; margin-left: 0; } } .account-panel .validation-summary-errors { padding: 15px; border-radius: 3px; background-color: #d64546; color: #FFF; font-weight: bold; } .account-panel .validation-summary-errors ul { margin-left: 10px; list-style-type: disc; } .account-panel--logo { display: block; margin: 0 auto 15px; width: 398px; height: 45px; } @media screen and (max-width: 767px) { .account-panel--logo { max-width: 90%; height: auto; } } .account-panel--logo img { max-width: 100%; } .account-panel--hd { border-bottom: 1px solid #060606; padding: 37px 60px 23px; margin: 0; width: 565px; font: 18px/1.3 Tahoma, Arial, Helvetica, Sans-serif; text-align: center; text-transform: uppercase; } @media screen and (max-width: 767px) { .account-panel--hd { box-sizing: border-box; padding: 37px 25px 23px; width: 100%; } } .account-panel--wrapper { margin: 0 0 15px; background-color: #141414; border-radius: 4px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3); } .account-panel--wrapper a { color: #FFF; text-decoration: none; } .account-panel--wrapper a:hover, .account-panel--wrapper a:focus { text-decoration: underline; } .account-panel--body { padding: 30px 60px; border-top: 1px solid #2c2c2c; } @media screen and (max-width: 767px) { .account-panel--body { padding: 30px 25px; } } .account-panel--body a { text-decoration: underline; } .account-panel--body input[type="text"], .account-panel--body input[type="password"] { } @media screen and (max-width: 767px) { .account-panel--body input[type="text"], .account-panel--body input[type="password"] { box-sizing: border-box; width: 100%; max-width: 100%; height: 31px; } } .account-panel--body .btn, .account-panel--body .btn:hover, .account-panel--body .btn:focus { text-decoration: none; } @media screen and (max-width: 767px) { .account-panel--body .btn { box-sizing: border-box; width: 100%; } } .account-panel--body .field-validation-error { padding-top: 5px; color: #FFF; font-weight: bold; } .account-panel--login-btn-container { margin-top: 23px; } @media screen and (max-width: 767px) { .account-panel--login-btn-container { float: none; margin-top: 10px; margin-left: 0; } } .account-panel--forgot-password-link { position: relative; } .account-panel--footer { padding: 0 10px; color: #323232; text-align: right; } .account-panel--footer a { color: #000; text-decoration: none; } .account-panel--footer a:hover, .account-panel--footer a:focus { text-decoration: underline; } .account-panel-m-long-form { margin: 50px auto; position: static; transform: none; } @media screen and (max-width: 991px) { .account-panel-m-long-form { margin-bottom: 80px; } } .account-panel-m-long-form { } .account-panel-m-long-form input[type="text"], .account-panel-m-long-form input[type="password"] { box-sizing: border-box; width: 295px; height: 31px; } @media screen and (max-width: 767px) { .account-panel-m-long-form input[type="text"], .account-panel-m-long-form input[type="password"] { width: 220px; } } .account-panel-m-long-form input[type="text"].std-text-m-half { width: 135px; } @media screen and (max-width: 767px) { .account-panel-m-long-form input[type="text"].std-text-m-half { width: 100%; } } .account-panel-m-long-form .btn { box-sizing: border-box; width: 100%; } .account-panel-m-long-form .account-panel--body { width: 295px; } @media screen and (max-width: 767px) { .account-panel-m-long-form .account-panel--body { width: 100%; } } .account-panel-m-long-form .styled-dd-m-full, .account-panel-m-long-form .styled-dd-m-full .newListSelected, .account-panel-m-long-form .styled-dd-m-full .SSContainerDivWrapper, .account-panel-m-long-form .styled-dd-m-full ul, .account-panel-m-long-form .styled-dd-m-full .selectedTxt { width: 295px !important; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-full, .account-panel-m-long-form .styled-dd-m-full .newListSelected, .account-panel-m-long-form .styled-dd-m-full .SSContainerDivWrapper, .account-panel-m-long-form .styled-dd-m-full ul, .account-panel-m-long-form .styled-dd-m-full .selectedTxt { width: 220px !important; } } .account-panel-m-long-form .styled-dd-m-full ul, .account-panel-m-long-form .styled-dd-m-full .selectedTxt { box-sizing: border-box; } .account-panel-m-long-form .styled-dd-m-full .selectedTxt { background-position: 257px 0; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-full .selectedTxt { background-position: 182px 0; } } .account-panel-m-long-form .styled-dd-m-full .newListSelHover .selectedTxt, .account-panel-m-long-form .styled-dd-m-full .newListSelFocus .selectedTxt { background-position: 257px -34px; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-full .newListSelHover .selectedTxt, .account-panel-m-long-form .styled-dd-m-full .newListSelFocus .selectedTxt { background-position: 182px -34px; } } .account-panel-m-long-form .styled-dd-m-half, .account-panel-m-long-form .styled-dd-m-half .newListSelected, .account-panel-m-long-form .styled-dd-m-half .SSContainerDivWrapper, .account-panel-m-long-form .styled-dd-m-half ul, .account-panel-m-long-form .styled-dd-m-half .selectedTxt { width: 135px !important; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-half, .account-panel-m-long-form .styled-dd-m-half .newListSelected, .account-panel-m-long-form .styled-dd-m-half .SSContainerDivWrapper, .account-panel-m-long-form .styled-dd-m-half ul, .account-panel-m-long-form .styled-dd-m-half .selectedTxt { width: 220px !important; } } .account-panel-m-long-form .styled-dd-m-half ul, .account-panel-m-long-form .styled-dd-m-half .selectedTxt { box-sizing: border-box; } .account-panel-m-long-form .styled-dd-m-half .selectedTxt { background-position: 97px 0; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-half .selectedTxt { background-position: 182px 0; } } .account-panel-m-long-form .styled-dd-m-half .newListSelHover .selectedTxt, .account-panel-m-long-form .styled-dd-m-half .newListSelFocus .selectedTxt { background-position: 97px -34px; } @media screen and (max-width: 767px) { .account-panel-m-long-form .styled-dd-m-half .newListSelHover .selectedTxt, .account-panel-m-long-form .styled-dd-m-half .newListSelFocus .selectedTxt { background-position: 182px -34px; } } /* Alert /* -------------------------------------------------- */ .alert { margin: 0; padding: 15px; border-radius: 3px; background-color: #FFF; } .alert .fa { margin-right: 15px; } .alert-m-success { background-color: #97C538; color: #FFF; } .alert-m-error { background-color: #cb0000; color: #FFF; } /* Assessment Chart BreakDown /* -------------------------------------------------- */ .assessment-chart-breakdown { box-sizing: border-box; margin-left: 60px; padding: 25px 7px; } @media screen and (max-width: 767px) { .assessment-chart-breakdown { margin-left: 0; } } /* Button /* ----------------------------------------------- */ .btn { display: inline-block; padding: 0 15px; height: 31px; outline: none; border-radius: 3px; background: #1cb5e9; background: -moz-linear-gradient(top, #1cb5e9 50%, #0ea2df 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#1cb5e9), color-stop(100%,#0ea2df)); background: -webkit-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); background: -o-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); background: -ms-linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); background: linear-gradient(top, #1cb5e9 50%,#0ea2df 100%); color: #FFF !important; line-height: 31px; text-decoration: none; } .btn:hover, .btn:focus { background: #0382d7; background: -moz-linear-gradient(top, #0382d7 50%, #0167c1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#0382d7), color-stop(100%,#0167c1)); background: -webkit-linear-gradient(top, #0382d7 50%,#0167c1 100%); background: -o-linear-gradient(top, #0382d7 50%,#0167c1 100%); background: -ms-linear-gradient(top, #0382d7 50%,#0167c1 100%); background: linear-gradient(top, #0382d7 50%,#0167c1 100%); text-decoration: none !important; } .btn-m-flex { box-sizing: border-box; padding: 7px 15px; height: auto; min-height: 31px; line-height: 1.5; vertical-align: middle; text-align: center; } .btn-m-full { padding: 0; width: 100%; text-align: center; } .btn-m-navigational { background: #e3498e; } .btn-m-navigational:hover, .btn-m-navigational:focus { background: #993366; } .btn-m-small { padding: 0 7px; height: 20px; line-height: 20px; font-size: 11px !important; } .btn-m-small--arrow { font-family: "Trebuchet MS"; font-weight: bold; } .btn-iconed { padding-right: 0; } .btn-iconed .btn-label { -webkit-border-radius: 0; border-radius: 0; } .btn-label { float: left; padding: 0 15px 0 0; border-right: 1px dotted #147fa3; -webkit-border-radius: 3px 0 3px 0; border-radius: 3px 0 3px 0; } .btn-icon { float: left; padding: 0 12px; border-left: 1px dotted #61ccf0; height: 31px; } .btn-icon .ico-list { margin-top: 9px; } .s-btn-disabled, .s-btn-disabled:hover, .s-btn-disabled:focus { background: #CFCFCF; cursor: default; -webkit-box-shadow: none; box-shadow: none; } .s-btn-disabled .btn-icon { border-left: #cfcfcf; } .s-link-disabled, .s-link-disabled:hover, .s-link-disabled:focus { color: #CFCFCF; cursor: default; } /* Button - File Upload /* ----------------------------------------------- */ .file-upload { overflow: hidden; cursor: pointer; position: relative; } .file-upload:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .file-upload .file { display: block; margin: 0; padding: 30px 0; width: 1000px; height: 31px; border: 0; background-color: transparent; font-size: 999px; cursor: pointer; outline: none; position: absolute; top: 0; left: 0; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; } .file-upload-notification { float: left; margin-top: 7px; margin-right: 15px; } .file-upload-notification .notification { margin-top: 0; } /* Button - Group /* ----------------------------------------------- */ .btn-group { } .btn-group .btn { margin-right: 10px; } .btn-group .btn:last-child { margin-right: 0; } /* Button - Help /* ----------------------------------------------- */ .btn-help { display: block; width: 31px; height: 31px; position: absolute; top: 0; right: 0; z-index: 1; border-left: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; color: #14abe3; font-size: 14px; font-weight: bold; line-height: 31px; text-align: center; text-decoration: none; } .btn-help:hover, .btn-help:focus { color: #FFF; } /* Button - Menu (Hamburger) /* ----------------------------------------------- */ .btn-menu { cursor: pointer; } .btn-menu--bar { display: block; margin-top: 4px; width: 30px; height: 4px; border-radius: 1px; background-color: #3d3d3d; -moz-transition: all .35s ease-in-out; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .btn-menu:hover .btn-menu--bar { background-color: #14abe4; } .btn-menu--bar-m-1 { margin-top: 0; } /* Button - Split /* ----------------------------------------------- */ .btn-split { position: relative; } .btn-split:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .btn-split .btn { float: left; -webkit-border-radius: 0; border-radius: 0; border-right: 1px dotted #137ea3; border-left: 1px dotted #57c0e9; } .btn-split .btn:first-child { border-left: 0; border-right: 1px dotted #137ea3; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .btn-split .btn:last-child, .btn-split--more { margin-left: 0 !important; border-right: 0 !important; border-left: 1px dotted #57c0e9 !important; -webkit-border-radius: 0 3px 3px 0 !important; border-radius: 0 3px 3px 0 !important; } .btn-split .fa-ellipsis-v { font-size: 15px; position: relative; top: 2px; } .btn-split--menu { box-sizing: border-box; display: none; padding: 7px 0; border: 1px solid #999; width: 140px; background: #d5d6d8; position: absolute; top: 0; left: 0; z-index: 1; } .btn-split--menu--btn { display: block; padding: 3px 10px; color: #000; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-split--menu--btn:hover, .btn-split--menu--btn:focus { background-color: #000; color: #FFF; } /* Button - X (Remove) /* -------------------------------------------------- */ .btn-x { display: block; width: 23px; height: 23px; background-color: #26ace1; color: #FFF; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: bold; } .btn-x:hover, .btn-x:focus { background-color: #0167c1; } /* CMS Copy /* -------------------------------------------------- */ .cms-copy h2, .cms-copy h3, .cms-copy h4 { margin: 0; padding: 25px 0 10px 0; font-weight: normal; } .cms-copy h2 { font-size: 24px; } .cms-copy h3 { padding: 20px 0 8px 0; font-size: 22px; } .cms-copy h4 { padding: 7px 0 8px 0; font-size: 18px; } .cms-copy p { margin: 0; padding: 7px 0; } .cms-copy img { margin: 10px 0; max-width: 100%; } .cms-copy ul { list-style: disc outside none; margin: 5px 0 15px 20px; } .cms-copy ul li ul, .cms-copy ol li ul { margin-top: 10px; list-style: disc outside none; } .cms-copy ol { list-style: decimal outside none; margin: 5px 0 15px 24px; } .cms-copy ul li ol, .cms-copy ol li ol { margin-top: 10px; list-style: lower-latin outside none; } .cms-copy li { margin-bottom: 5px; line-height: 1.5; } .cms-copy li p { margin: 0; } .cms-copy table, .cms-copy td, .cms-copy th { border-color: #000; } .cms-copy td, .cms-copy th { padding: 5px; } /* Dialog Box /* -------------------------------------------------- */ .d-box-overlay, .overlay { display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 10000; } .d-box-overlay { display: block; overflow: hidden; } .overlay-m-drawer { background: transparent url(../Content/img/bg-black-opa-50.png); z-index: 8000; } .d-box { min-width: 215px; max-width: 745px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; border-radius: 3px; background: #FFF; visibility: hidden; } @media screen and (max-width: 575px) { .d-box { width: calc(100% - 50px); } } .d-box .cms-copy, .d-box label, .d-box p { color: #323232; } .d-box--hdr { box-sizing: border-box; padding: 10px 20px; min-height: 44px; position: relative; overflow: hidden; border-bottom: 1px solid #8d8d8d; border-radius: 3px 3px 0 0; background: #cbcbcb; background: -moz-linear-gradient(top, #cbcbcb 30%, #bbbbbb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#cbcbcb), color-stop(100%,#bbbbbb)); background: -webkit-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); background: -o-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); background: -ms-linear-gradient(top, #cbcbcb 30%,#bbbbbb 100%); background: linear-gradient(to bottom, #cbcbcb 30%,#bbbbbb 100%); } .d-box--hdr:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .d-box--title { margin: 0; padding: 0 40px 0 0; font-size: 14px; font-weight: bold; line-height: 23px; color: #141414; } .d-box--body { padding: 20px; color: #555; } .d-box--footer { padding: 10px 15px; border-top: 1px solid #a3a3a3; } .d-box--footer-isolated { padding: 15px 25px; } .d-box--close { position: absolute; top: 10px; right: 15px; width: 23px; height: 23px; border-radius: 3px; background: #f0f0f0; background: -moz-linear-gradient(top, #f0f0f0 50%, #d5d5d5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f0f0f0), color-stop(100%,#d5d5d5)); background: -webkit-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: -o-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: -ms-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); color: #0d729a; font-size: 25px; line-height: 25px; text-align: center; text-decoration: none; } .d-box--close:hover { color: #141414; } .d-box-m-filter-options { box-sizing: border-box; width: 630px; } @media screen and (max-width: 767px) { .d-box-m-filter-options { width: calc(100% - 60px); max-width: 630px; } } .d-box-m-floated-box { float: left; width: 365px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); visibility: visible; position: static; top: 20px; left: 0; transform: none; } @media screen and (max-width: 991px) { .d-box-m-floated-box { width: 280px; } } @media screen and (max-width: 767px) { .d-box-m-floated-box { display: none; } } /* Dialog Box - Sticky Floating Form /* -------------------------------------------------- */ .sticky-floating-form { } @media screen and (max-width: 767px) { .sticky-floating-form { position: absolute !important; right: 20px; } } .sticky-floating-form--invoker { display: none; } @media screen and (max-width: 767px) { .sticky-floating-form--invoker { display: inline-block; } } .sticky-floating-form--close { display: none; } @media screen and (max-width: 767px) { .sticky-floating-form--close { display: inline-block; position: absolute; top: 10px; right: 15px; z-index: 1; width: 23px; height: 23px; border-radius: 3px; background: #f0f0f0; background: -moz-linear-gradient(top, #f0f0f0 50%, #d5d5d5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f0f0f0), color-stop(100%,#d5d5d5)); background: -webkit-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: -o-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: -ms-linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); background: linear-gradient(top, #f0f0f0 50%,#d5d5d5 100%); color: #0d729a; font-size: 25px; line-height: 25px; text-align: center; text-decoration: none; } } .s-sticky-floating-form-default-pos { } @media screen and (max-width: 767px) { .s-sticky-floating-form-default-pos { top: 20px !important; } } .sticky-floating-form--invoker .ico { margin: 0; } .s-sticky-floating-form-displayed { } .s-sticky-floating-form-displayed .sticky-floating-form--overlay { display: none; } @media screen and (max-width: 767px) { .s-sticky-floating-form-displayed .sticky-floating-form--overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(58, 58, 58, 0.9); z-index: 99998; } } .s-sticky-floating-form-displayed .sticky-floating-form--box { } @media screen and (max-width: 767px) { .s-sticky-floating-form-displayed .sticky-floating-form--box { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; } } /* Drawer /* -------------------------------------------------- */ .drawer--header--wrapper:after, .drawer--body--wrapper:after, .drawer--footer--wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .drawer { box-sizing: border-box; display: none; width: 90%; position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: 9000; color: #323232; } .drawer--wrapper { box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); } .drawer--header { border-right: 1px solid #141414; border-left: 1px solid #141414; background-color: #141414; height: 46px; color: #FFF; line-height: 46px; } .drawer--header--wrapper { box-sizing: border-box; padding: 0 25px; width: 100%; } .drawer--title { box-sizing: border-box; width: calc(100% - 40px); margin-bottom: 0; font-size: 20px; line-height: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer--close-btn { background: transparent; color: #FFF; font-size: 50px; font-family: Times, serif; text-decoration: none; } .drawer--body { padding: 30px 0; height: auto; min-height: 300px; max-height: 500px; overflow: auto; border-right: 1px solid #E1E1E1; border-left: 1px solid #E1E1E1; background: #E1E1E1; } .drawer--body--wrapper { box-sizing: border-box; padding: 0 25px; width: 100%; position: relative; } .drawer--body--wrapper .l-inner-wrapper { width: 100%; } .drawer--inner-drawer { width: 0; position: absolute; overflow: hidden; top: 46px; left: 0; background-color: #333; color: #FFF; z-index: 2; } .drawer--inner-drawer a, .drawer--inner-drawer h2, .drawer--inner-drawer h3, .drawer--inner-drawer h4, .drawer--inner-drawer h5 { color: #FFF; } .drawer--inner-drawer .required-mark, .drawer--inner-drawer .form-line label.error { color: #FFADAD; } .drawer--inner-drawer--close { color: #FFF; font-size: 50px; line-height: 50px; font-family: Times, serif; text-decoration: none; position: absolute; top: 0; right: 30px; } .drawer--inner-drawer--wrapper { box-sizing: border-box; border-bottom: 45px solid #333; overflow-x: hidden; overflow-y: auto; } .drawer--inner-drawer--wrapper:after { content: ' '; width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0) 0, #333 96%); } .drawer--inner-drawer--body { margin-bottom: 40px; padding: 38px 76px 38px 60px; height: auto; } .drawer--footer { background: #E1E1E1; border-top: 1px solid #333; } .drawer--footer--wrapper { box-sizing: border-box; padding: 20px 25px; width: 100%; } .s-body-w-drawer-open { overflow: hidden; } .s-body-w-drawer-open .ui-datepicker { z-index: 9001 !important; } .s-content-w-drawer-open { z-index: 3 !important; /* Note: make this z-index higher than the #header z-index to avoid the header being on the top of the overlay */ } .l-full-width-m-w-fixed-header .s-content-w-drawer-open { z-index: 1 !important /* Note: to make sure the z-index positioning between the fixed header and content are in the right order */ } /* Drawer - Side /* -------------------------------------------------- */ .side-drawer { display: none; height: 100%; position: fixed; top: 46px; left: 0; z-index: 9000; overflow-x: hidden; background-color: #333; color: #FFF; } .side-drawer a { color: #FFF; } .side-drawer hr { color: #FFF; background-color: #FFF; } .side-drawer--wrapper { padding: 25px; min-width: 150px; overflow-y: auto; } .side-drawer--close-btn { position: absolute; top: 5px; right: 20px; color: #FFF; font-size: 50px; font-family: Times, serif; line-height: 100%; text-decoration: none; } /* Error Message /* -------------------------------------------------- */ .error-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .error-message h1 { font-size: 48px; font-weight: bold; } .error-message p { font-size: 20px; } /* Filter Options - Active List /* -------------------------------------------------- */ .filter-list { margin-top: 15px; font-size: 11px; line-height: 1.8; } .filter-list strong { color: #8d8d8d; } .filter-list span { margin-left: 2px; } .filter-list--hd { margin-bottom: 5px; color: #181818; font-weight: bold; } /* Filter Options - Display /* -------------------------------------------------- */ .filter-option--wrapper { display: flex; } .filter-option-list-cont { box-sizing: border-box; border: 1px solid #a3a3a3; flex: 1; margin-right: 15px; width: calc(100% - 120px); height: 354px; overflow: hidden; position: relative; } .filter-option-list { box-sizing: border-box; display: none; margin: 20px 0 0 12px; width: calc(100% - 24px); height: calc(100% - 30px); overflow-x: hidden; overflow-y: scroll; position: absolute; top: 0; left: 0; } .filter-option-list li { padding-right: 10px; } .filter-option-list .opt-item-container { margin-bottom: 7px; } .filter-option-list .opt-item-container input { float: left; } .filter-option-list .opt-item-container label { float: left; width: 380px; } .s-filter-option-list-selected { display: block; z-index: 9999; } .filter-opt-category { padding: 5px 0 36px 0; width: 120px; position: relative; } @media screen and (max-width: 575px) { .filter-opt-category { width: 80px; } } .filter-opt-cat-hd { margin-bottom: 10px; color: #a3a3a3; } .filter-opt-category .filter-go-btn { position: absolute; bottom: 5px; left: 0; } .filter-opt-category-list { } .filter-opt-category-list li { margin-bottom: 7px; } .filter-opt-category-list a { color: #1aa9e1; text-decoration: none; } .filter-opt-category-list a:hover, .filter-opt-category-list .selected a { color: #141414; } .filter-group--hd { margin-bottom: 10px; font-size: 13px; font-weight: bold; } .filter-group--hd a { color: #000; text-decoration: none; } .filter-group--hd--ico { display: inline-block; margin-right: 5px; width: 12px; text-align: center; } .filter-group--list { display: none; } /* Filter Options - Trigger /* -------------------------------------------------- */ .filter-options { } .filter-options:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .filter-options--btn { float: left; } .filter-options--clear { float: left; display: none; margin-left: 15px; height: 31px; line-height: 31px; color: #1CB5E9; text-decoration: underline; } .filter-options--clear:hover, .filter-options--clear:focus { text-decoration: none; } /* Form Elements /* -------------------------------------------------- */ .form-line { margin-bottom: 20px; position: relative; z-index: 1; } .form-line:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .form-line label.error { color: #cb0000; } .form-line input + label.error, .form-line textarea + label.error { margin: 5px 0 0; } .field-validation-error { display: block; padding-top: 7px; color: #cb0000; } .validation-summary-errors { color: #cb0000; } .validation-summary-errors span { display: block; margin-bottom: 5px; } .label-inline { display: inline-block; margin-bottom: 0; margin-right: 10px; line-height: 31px; } .label-inline-m-after { margin-left: 10px; margin-right: 0; } /* Heading /* -------------------------------------------------- */ .hd-label { margin-bottom: 15px; font-size: 12px; font-weight: normal; } .hd-main { margin-bottom: 15px; font-size: 22px; } .hd-section { margin-bottom: 25px; font-size: 17px; text-transform: uppercase; } .hd-small { margin-bottom: 5px; font-size: 13px; font-weight: bold; } .hd-sub { margin-bottom: 10px; font-size: 14px; font-weight: bold; color: #323232; } .hd-title { margin-bottom: 0; font-size: 28px; } /* Icon (NOTE: To be replaced with font type icon) /* -------------------------------------------------- */ .ico-black-arrow-vertical { width: 10px; height: 6px; } .ico-black-arrow-down { background-position: -157px -48px; } .ico-black-arrow-up { background-position: -157px -57px; } .ico-black-solid-arrow { width: 9px; height: 5px; } .ico-black-solid-arrow-down { background-position: -41px -45px; } .ico-black-solid-arrow-up { background-position: -54px -45px; } .ico-black-solid-arrow-hor { width: 5px; height: 9px; } .ico-black-solid-arrow-right { background-position: -168px -34px; } .ico-black-solid-arrow-left { background-position: -160px -34px; } .ico-full-arrow-hor { width: 9px; height: 7px; } .ico-full-arrow-right { background-position: -63px -53px; } .ico-copy { width: 16px; height: 16px; background-position: -85px -34px; } .ico-plus { width: 12px; height: 12px; background-position: -75px -53px; } .ico-text { border-left: 1px dotted #137ea3; padding-left: 10px; width: 10px; height: 24px; line-height: 24px; font-size: 17px; font-weight: bold; text-align: center; margin: 0 !important; } .ico-check { width: 11px; height: 11px; } .ico-check-green { background-position: -116px -34px; } .ico-check-gray { background-position: -130px -34px; } .ico-check-plain-white { width: 16px; height: 13px; background-position: -264px -241px; } .ico-check-plain-white-m-centered { position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -6px; } .ico-list { width: 13px; height: 12px; background-position: -90px -53px; } .ico-solid-white-arrow { width: 6px; height: 4px; } .ico-solid-white-arrow-down { background-position: -106px -53px; } .ico-solid-white-arrow-up { background-position: -106px -60px; } .ico-black-arrow { width: 6px; height: 10px; } .ico-black-arrow-left { background-position: -115px -53px; } .ico-black-arrow-right { background-position: -124px -53px; } .ico-print { width: 20px; height: 18px; background-position: -134px -48px; } .ico-excel { width: 20px; height: 18px; background-position: -218px -34px; } .ico-option-cog { width: 39px; height: 24px; background-position: -176px -34px; } .ico-create { width: 30px; height: 30px; background-position: 0 -174px; } .ico-close-off { width: 30px; height: 30px; background-position: -33px -174px; } .ico-update { width: 24px; height: 30px; background-position: -66px -174px; } .ico-display { width: 31px; height: 30px; background-position: -93px -174px; } .ico-sqr-16 { width: 16px; height: 16px; } .ico-bump { background-position: -129px -175px; } .ico-cross { background-position: -147px -175px; } .ico-move { background-position: -165px -175px; } .ico-flag { background-position: -183px -175px; } .ico-unflag { background-position: -201px -175px; } .ico-sqr-16-arrow-right { background-position: -237px -175px; } .ico-failed { background-position: -219px -175px; } .ico-checked { background-position: -219px -192px; } .ico-sqr-16-plus { background-position: -255px -175px; } .ico-red-cross { background-position: -274px -175px; } .ico-edit { background-position: -248px -141px; } .ico-bump:hover { background-position: -129px -192px; } .ico-cross:hover { background-position: -147px -192px; } .ico-move:hover { background-position: -165px -192px; } .ico-flag:hover { background-position: -183px -192px; } .ico-unflag:hover { background-position: -201px -192px; } .ico-sqr-16-arrow-right:hover { background-position: -237px -192px; } .ico-sqr-16-plus:hover { background-position: -255px -192px; } .ico-sqr-16-drag-handler { cursor: move; } .ico-checked-blue-bg { background-position: -51px -440px; } .ico-edit:hover { background-position: -248px -158px; } .ico-crcl-26 { width: 26px; height: 26px; } .ico-crcl-26-check { background-position: 0 -413px; } .ico-crcl-26-cross { background-position: -27px -413px; } .ico-crcl-26-marker { background-position: -54px -413px; } .ico-menu { width: 13px; height: 8px; background-position: -240px -34px; } .ico-menu-big { width: 25px; height: 19px; background-position: -270px -413px; } .ico-menu-big-m-gray { background-position: -270px -433px; } .ico-media { width: 22px; height: 17px; background-position: 0 -211px; } .ico-media-video { width: 15px; height: 13px; background-position: 0 -231px; } .ico-media-img { width: 16px; height: 12px; background-position: 0 -247px; } .ico-media-doc { width: 12px; height: 16px; background-position: -25px -211px; } .ico-media-audio { width: 11px; height: 16px; background-position: -19px -231px; } .ico-media-other { width: 16px; height: 14px; background-position: 0 -262px; } .ico-clip { width: 16px; height: 16px; background-position: -19px -250px; } .ico-infinite { width: 15px; height: 15px; background-position: -263px -46px; } .ico-pencil { width: 8px; height: 10px; background-position: -216px -53px; } .ico-check-medium { width: 16px; height: 13px; background-position: 0 -398px; } .ico-thumb { width: 14px; height: 16px; } .ico-thumb-m-up { background-position: -68px -440px; } .ico-thumb-m-up:hover, .ico-thumb-m-up-selected { background-position: -83px -440px; } .ico-thumb-m-down { background-position: -98px -440px; } .ico-thumb-m-down:hover, .ico-thumb-m-down-selected { background-position: -113px -440px; } .ico-glass { width: 20px; height: 20px; background-position: -264px -241px; } /* Legend /* -------------------------------------------------- */ .legend { } .legend:after, .legend-area:after, .legend-item::after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .legend-item--ico { float: left; width: 16px; height: 16px; text-align: center; position: relative; } .legend-item--ico-m-circle { box-sizing: border-box; border: 1px solid #6d6d6d; background-color: #FFF; border-radius: 50%; overflow: hidden; position: relative; } .legend-item--ico-m-color { -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFF; } .legend-item--ico-m-triangle-top-left { width: 0; height: 0; border-top: 16px solid #FFF; border-right: 16px solid transparent !important; } .legend-item--ico-m-only { display: block; float: none; } .legend-item--ico-m-img { width: auto; } .legend-item--ico-m-circle--quarter-top-right { width: 8px; height: 8px; position: absolute; top: 0; right: 0; } .legend-item--ico-m-triangle-white-bg { background-position: 0 -440px; } .legend-item--ico-m-triangle-light-gray-bg { background-position: -17px -440px; } .legend-item--ico-m-triangle-gray-bg { background-position: -34px -440px; } .legend-item--ico-m-black { background-color: #141414; } .legend-item--txt { margin-left: 10px; float: left; color: #141414; line-height: 16px; } .legend-item--txt-m-only { margin-left: 0; } .legend-item--ico-bigger { display: block; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 11px; } .legend-area { } .legend-area .legend-item { display: inline-block; margin: 0 25px 10px 0; } .legend-area .legend-item:last-child { margin-right: 0; } .legend-group { float: left; margin-right: 50px; } .legend-group:last-child { float: right; margin-right: 0; } @media screen and (max-width: 575px) { .legend-group, .legend-group:last-child { float: none; } } /* List - Link /* -------------------------------------------------- */ .link-list { padding: 20px 0 10px; border-bottom: 1px solid #9d9d9d; } .link-list--title { display: block; margin: 0; padding-bottom: 5px; font-weight: bold; font-size: 14px; } .link-list--meta { padding-bottom: 10px; /* max-width: 45%; NOTE: not sure why this one is set */ font-size: 13px; color: #999795; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* List - Bar /* -------------------------------------------------- */ .bar-list { padding: 5px 0; } .bar-list--heading { padding-bottom: 5px; color: #999795; font-weight: bold; } .bar-list--item { display: flex; box-sizing: border-box; margin-bottom: 15px; border: 1px solid #999795; background: #FFFFFF; position: relative; } @media screen and (max-width: 575px) { .bar-list--item { display: block; } } .bar-list--item:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .bar-list--item--panel { box-sizing: border-box; width: 100%; padding: 0 20px; min-height: 70px; position: relative; line-height: 70px; } @media screen and (max-width: 767px) { .bar-list--item--panel { height: auto; min-height: 70px; line-height: 1.4; } } .bar-list--item--panel p { margin-bottom: 0; padding-top: 5px; padding-bottom: 5px; } .bar-list--item--panel label, .bar-list--item--panel .opt-item-container { margin-bottom: 0; padding: 5px 0; } .bar-list--item--panel .form-line > label { padding-top: 0; } .bar-list--item--panel .ico-menu-big, .bar-list--item--panel .btn-m-small { margin-top: 25px; } .bar-list--item--panel .ico-crcl-26 { margin-top: 22px; } .bar-list--item--panel .legend-item--ico { position: absolute; top: 0; left: 0; } .bar-list--item--panel-m-main { width: calc(100% - 185px); } @media screen and (max-width: 575px) { .bar-list--item--panel-m-main { width: 100%; } } .bar-list--item--panel-m-side { box-sizing: border-box; width: 185px; background-color: #E5E5E4; } @media screen and (max-width: 575px) { .bar-list--item--panel-m-side { width: 100%; } } .bar-list--item--panel-m-multi-line { padding: 8px 20px; line-height: 1.5; } .bar-list--item--indicator { display: block; margin-top: 10px; width: 50px; height: 50px; position: relative; border-radius: 25px; color: #FFF; font-size: 12px; line-height: 52px; text-align: center; text-decoration: none; text-transform: capitalize; } .bar-list--item--indicator .ico-check-medium { margin-top: -6px; margin-left: -8px; position: absolute; top: 50%; left: 50%; } .bar-list--item--indicator--img { display: inline-block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } .bar-list--item--indicator--img img { max-width: 100%; } .bar-list--item--label-area { display: flex; } @media screen and (max-width: 767px) { .bar-list--item--label-area { display: block; } } .bar-list--item--label { display: inline-block; margin-right: 25px; } @media screen and (max-width: 767px) { .bar-list--item--label { display: block; margin-right: 0; } } .bar-list--item--label:last-child { margin-right: 0; } .bar-list--item--label-m-status { color: #26ace1; } .bar-list--item--label-m-opposite-side { flex: 1; text-align: right; } @media screen and (max-width: 767px) { .bar-list--item--label-m-opposite-side { flex: none; text-align: left; } } .bar-list--item--copy-area { position: relative; overflow: hidden; } .bar-list--item--copy-area--wrapper { box-sizing: border-box; width: 150%; } .bar-list--item--copy { display: inline-block; overflow: hidden; color: #999795; } .bar-list--item--copy--toggle { position: absolute; top: 5px; right: 0; } .bar-list--item-m-active { border-color: #1fa9e1; } .bar-list--item-m-media { display: flex; margin-bottom: 7px; padding: 9px; } .bar-list--item-m-media--icon { margin-top: 2px; margin-right: 10px; } .bar-list--item-m-media--name { flex: 1; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-list--item-m-media--remove { text-align: right; } .ui-sortable .bar-list--item { cursor: move; } .s-bar-list-item-long-description { } .s-bar-list-item-long-description .bar-list--item--copy-area { padding-right: 15px; } .s-bar-list-item-long-description .bar-list--item--copy-area--wrapper { width: 100%; } .s-bar-list-item-long-description .bar-list--item--copy { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .s-bar-list-item-expanded { } .s-bar-list-item-expanded .bar-list--item--copy { padding-bottom: 20px; white-space: normal; } .s-bar-list-item-expanded .bar-list--item--panel-m-main { height: auto; } .s-bar-list-item-indicator-neutral { background-color: #b4b4b4; } .s-bar-list-item-indicator-ok { background-color: #76CB00; } .s-bar-list-item-indicator-warning { background-color: #CB0000; } .s-bar-list-item-indicator-active { background-color: #26ace1; } .s-bar-list-item-indicator-locked { cursor: default; } /* Logo - Entity /* -------------------------------------------------- */ .logo-entity { display: table-cell; height: 118px; vertical-align: middle; } .logo-entity img { height: 65%; } /* Media List /* -------------------------------------------------- */ .media-list-area { padding-top: 15px; } .media-list-area-m-update-form { box-sizing: border-box; margin-top: 15px; padding: 7px 0; border-top: 1px solid #c0c0c0; border-left: 1px solid #c0c0c0; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-radius: 3px; background-color: #f8f8f8; } .media-list-area-m-update-form--wrapper { box-sizing: border-box; margin: 0 auto; width: 94%; height: 65px; overflow-x: hidden; overflow-y: auto; } .media-list { width: 100%; border-top: 1px solid #a9abae; } .media-list td { border-bottom: 1px solid #a9abae; min-height: 20px; vertical-align: middle; } .media-list--item-ico { display: inline-block; margin-right: 5px; } .media-list--item-name { display: inline-block; line-height: 16px; width: calc(100% - 21px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-list-m-update-form { display: block; border-top: 0; } .media-list-m-update-form tbody, .media-list-m-update-form tr { display: block; } .media-list-m-update-form tr:first-child td { border-top: 0; } .media-list-m-update-form td { display: block; border-top: 1px solid #bfbfbf; border-bottom: 0; } /* Navigation - Breadcrumb /* -------------------------------------------------- */ .b-crumb { } .b-crumb:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .b-crumb span, .b-crumb a { display: inline-block; margin-right: 15px; height: 31px; color: #000; font-size: 13px; line-height: 31px; text-decoration: none; } .b-crumb a:hover, .b-crumb a:focus { text-decoration: underline; } .b-crumb--curr { margin-right: 0; color: #26ace1 !important; } .b-crumb .ico-black-arrow { display: inline-block; margin-right: 15px; height: 10px; position: relative; top: 10px; } /* Panel - Basic /* -------------------------------------------------- */ .panel { margin-bottom: 25px; padding: 20px; border: 1px solid #c5c5c5; background: #FFF; color: #323232; } .panel::after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .panel-m-removeable { position: relative; width: 93%; } .panel-m-removeable .btn-x { position: absolute; top: -1px; right: -23px; } .panel-m-actions { } .panel-m-actions > .l-grid, .panel-m-actions > .l-grid-right { } @media screen and (max-width: 575px) { .panel-m-actions > .l-grid, .panel-m-actions > .l-grid-right { float: none; margin: 0; margin-top: 15px; } } .panel-m-actions > .l-grid:first-child, .panel-m-actions > .l-grid-right:first-child { } @media screen and (max-width: 575px) { .panel-m-actions > .l-grid:first-child, .panel-m-actions > .l-grid-right:first-child { margin-top: 0; } } /* Panel - Level /* -------------------------------------------------- */ .level-panel-area { padding-top: 25px; } .level-panel { padding-bottom: 15px; } .level-panel:first-child .level-panel--area-indicator { padding-top: 2px; top: -1px; } .level-panel:first-child .level-panel--select-indicator-label { display: block; } .level-panel .bar-list--item { width: 705px; } .level-panel .bar-list--item--panel-m-main { width: 550px; } .level-panel .bar-list--item--panel-m-side { width: 153px; } .level-panel--content { float: left; padding: 20px; width: 780px; border: 1px solid #999795; background-color: #f2f5f9; position: relative; } .level-panel--content .btn-x { position: absolute; top: -1px; right: -24px; } .level-panel--label { float: left; margin: 0; padding-top: 15px; width: 60px; } .level-panel--area-indicator { position: absolute; top: -16px; right: -52px; padding-top: 17px; width: 1px; height: 100%; background-color: #9d9d9d; } .level-panel--select-indicator-label { display: none; position: absolute; top: -23px; right: -87px; } .level-panel--select-indicator { margin-top: -14px; width: 28px; height: 28px; position: absolute; top: 50%; right: -66px; -webkit-border-radius: 14px; border-radius: 14px; background-color: #26ace1; text-align: center; } .level-panel--select-indicator input { margin: 7px 0 0 1px; vertical-align: middle; } .level-panel--alt-desc-input--txt-area { width: 682px; position: relative; } .level-panel--alt-desc-input--txt-area textarea { -webkit-border-radius: 3px 0 3px 3px; border-radius: 3px 0 3px 3px; } .level-panel--alt-desc-input--txt-area .btn-x { position: absolute; top: 0; right: -23px; } /* Panel - Sticky Button /* -------------------------------------------- */ .s-sticky-panel { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 1000; } .s-sticky-panel .btn-container { margin: 0 auto; padding: 15px 25px; border-top: 1px solid #9d9d9d; width: 910px; background: transparent url('img/bg-white-opa-70.png'); } @media screen and (max-width: 1025px) { .s-sticky-panel .btn-container { box-sizing: border-box; width: calc(100% - 70px); } } /* Panel Tab /* -------------------------------------------- */ .panel-tab--nav:after, .panel-tab--content--body:after, .panel-tab--content--body--wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .panel-tab { box-sizing: border-box; } @media screen and (max-width: 767px) { .panel-tab { border: 1px solid #c5c5c5; border-bottom: 0; } } .panel-tab--nav { margin-bottom: 40px; border-bottom: 1px solid #9d9d9d; } @media screen and (max-width: 767px) { .panel-tab--nav { display: none; } } .panel-tab--nav li { float: left; } .panel-tab--nav li:first-child a { border-left: 0; } .panel-tab--nav a { display: block; padding: 0 35px; height: 37px; position: relative; border-left: 1px dotted #9d9d9d; color: #323232; line-height: 37px; text-decoration: none; } @media screen and (max-width: 991px) { .panel-tab--nav a { padding: 0 20px; } } .panel-tab--nav a:hover { color: #26ace1; } .panel-tab--nav--selected-state { display: none; width: 100%; height: 2px; background-color: #26ace1; position: absolute; bottom: -1px; left: 0; z-index: 10; } .panel-tab--nav .notification-bubble { position: absolute; top: -10px; right: 23px; } .panel-tab--content { display: none; padding: 20px 0 10px 0; position: relative; } @media screen and (max-width: 767px) { .panel-tab--content { display: block !important; padding: 0; min-height: 0 !important; /* Ovewrite settings */ } } .panel-tab--content--title { display: none; box-sizing: border-box; padding: 0 40px 0 20px; height: 40px; border-bottom: 1px solid #c5c5c5; position: relative; overflow: hidden; cursor: pointer; line-height: 37px; white-space: nowrap; text-overflow: ellipsis; } @media screen and (max-width: 767px) { .panel-tab--content--title { display: block; } } .panel-tab--content--title--icon { background: none; font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; right: 20px; line-height: 37px; } .panel-tab--content--title--icon:after { content: "\f107"; } .panel-tab--content--title:hover, .panel-tab--content--title:focus { color: #26ace1; } .panel-tab--content--body { position: relative; } @media screen and (max-width: 767px) { .panel-tab--content--body { box-sizing: border-box; overflow: hidden; max-height: 0; } } .panel-tab--content--body--wrapper { } @media screen and (max-width: 767px) { .panel-tab--content--body--wrapper { box-sizing: border-box; padding: 20px; } } .s-active-panel-tab-nav { } .s-active-panel-tab-nav .panel-tab--nav--selected-state { display: block; } .s-active-panel-tab-content { display: block; } .s-active-panel-tab-content .panel-tab--content--title { border-bottom: 2px solid #26ace1; } .s-active-panel-tab-content .panel-tab--content--title--icon:after { content: "\f106"; } .s-active-panel-tab-content .panel-tab--content--body { } @media screen and (max-width: 767px) { .s-active-panel-tab-content .panel-tab--content--body { max-height: none; border-bottom: 1px solid #c5c5c5; } } /* Photo - Profile Page /* -------------------------------------------------- */ .photo { background-color: #FFF; overflow: hidden; text-align: center; vertical-align: middle; } .photo img { display: block; max-width: 100%; } .photo-m-profile { display: inline-block; margin-bottom: 10px; width: 132px; min-height: 132px; line-height: 145px; overflow: hidden; border: 1px solid #aeaeae; vertical-align: middle; } /* Progress Bar /* -------------------------------------------------- */ .progress-bar { position: relative; } .progress-bar--bg { width: 100%; height: 60px; overflow: hidden; background-color: #e5e5e4; border: 1px solid #aeaeae; } .progress-bar--text { padding: 0 20px; height: 100%; font-size: 18px; line-height: 60px; position: absolute; top: 0; left: 0; z-index: 3; color: #141414; } @media screen and (max-width: 575px) { .progress-bar--text { box-sizing: border-box; display: flex; width: 100%; justify-content: center; flex-direction: column; height: 60px; line-height: 1.4; font-size: 13px; } } .progress-bar--dynamic { height: 100%; background-color: #26ace1; position: relative; z-index: 2; } .progress-bar--median { margin-left: -1px; width: 2px; height: 135%; position: absolute; top: 0; z-index: 4; background-color: #196989; } .progress-bar--median-caption { padding-top: 5px; margin-left: -40px; width: 80px; position: absolute; top: 135%; text-align: center; } .progress-bar--median-caption-m-left { text-align: left; margin-left: -1px; } .progress-bar--median-caption-m-right { text-align: right; margin-left: -79px; } .progress-bar-m-with-median { margin: 20px 0 70px; } /* Question Answer /* -------------------------------------------------- */ .qa { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #c6c6c6; } .qa:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .qa--question { margin-top: 7px; margin-bottom: 15px; } .qa--answer { box-sizing: border-box; padding: 10px 15px; min-height: 38px; background-color: #F0F0F0; border-radius: 3px; } .qa-m-close-ended { } .qa-m-close-ended .qa--question { float: left; width: calc(100% - 95px); margin-right: 15px; margin-bottom: 0; } @media screen and (max-width: 319px) { .qa-m-close-ended .qa--question { float: none; width: 100%; margin-bottom: 15px; height: auto; } } .qa-m-close-ended .qa--answer { float: right; padding: 0; width: 80px; height: 31px; min-height: 0; background-color: #21a7cd; color: #FFF; line-height: 31px; text-align: center; } @media screen and (max-width: 319px) { .qa-m-close-ended .qa--answer { float: none; } } .qa-m-close-ended-m-edit { } .qa-m-close-ended-m-edit .qa--question { width: calc(100% - 158px); } @media screen and (max-width: 575px) { .qa-m-close-ended .qa--question { float: none; margin-bottom: 15px; width: 100%; } } .qa-m-close-ended-m-edit .qa--answer { width: 143px; min-height: 0; background-color: transparent; color: #323232; line-height: normal; } @media screen and (max-width: 575px) { .qa-m-close-ended .qa--answer { float: none; } } .qa-m-close-ended-m-edit .qa--answer input[type="text"], .qa-m-close-ended-m-edit .qa--answer input[type="number"] { box-sizing: border-box; width: 100%; height: 31px; } /* Search Bar /* -------------------------------------------------- */ .search-bar { box-sizing: border-box; width: 215px; height: 31px; overflow: hidden; position: relative; border-radius: 3px; background: #a9a8ab; background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); } @media screen and (max-width: 575px) { .search-bar { width: 100%; } } .search-bar:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .search-bar input[type="text"] { box-sizing: border-box; margin: 0; padding: 0 47px 0 10px; border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; width: 100%; height: 31px; background: transparent; box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); position: relative; z-index: 2; } .search-bar--button { display: block; width: 37px; height: 31px; position: absolute; top: 0px; right: 0px; z-index: 3; overflow: hidden; text-indent: -9999px; background: transparent url(img/common-sprite.png?ver=34) no-repeat -226px 0; } .s-search-bar-disabled { } .s-search-bar-disabled .search-bar--button { background-position: -226px -381px; cursor: default; } /* Select - Styled /* -------------------------------------------------- */ .styled-select { box-sizing: border-box; display: inline-block; width: 100%; border-radius: 3px; height: 31px; box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; background: #a9a8ab; background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a8ab', endColorstr='#98969a',GradientType=0 ); position: relative; } .styled-select select { margin: 0; padding: 0 53px 0 4px; width: 100%; height: 30px; border: none; background: none; color: #323232; line-height: 30px; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; z-index: 1; left: 1px; outline: none; } .styled-select select::-ms-expand { /* NOTE: For removing the default select arrow on IE11 */ display: none; } .styled-select--btn { display: block; width: 38px; height: 31px; border-radius: 0 3px 3px 0; background: transparent url(img/common-sprite.png?ver=34) no-repeat 0 0; position: absolute; top: -1px; right: -1px; z-index: 0; } .styled-select-m-215 { max-width: 215px; } /* Select - Styled 2 /* -------------------------------------------------- */ .styled-select-2 { box-sizing: border-box; display: inline-block; max-width: 100%; border-radius: 3px; height: 31px; border: 1px solid #323232; background: #FFF; position: relative; } .styled-select-2 select { margin: 0; padding: 0 33px 0 4px; width: 100%; height: 30px; border: none; background: none; color: #818181; line-height: 30px; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; z-index: 1; left: 1px; outline: none; } .styled-select-2 select::-ms-expand { /* NOTE: For removing the default select arrow on IE11 */ display: none; } .styled-select-2--btn { display: block; width: 28px; height: 31px; position: absolute; top: -1px; right: 0px; z-index: 0; } .styled-select-2--btn:before { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\f107'; } /* Table - Info View /* -------------------------------------------------- */ .info-view-tbl-cont { padding: 15px 0 25px; position: relative; z-index: 1; } .info-view-tbl-cont-pw-photo { margin-right: 280px; } .info-view-tbl { width: 100%; max-width: 630px; } .info-view-tbl th, .info-view-tbl td { padding: 6px 0; width: 50%; border-bottom: 1px solid #aeaeae; color: #555; word-wrap: break-word; word-break: break-all; } @media screen and (max-width: 575px) { .info-view-tbl th, .info-view-tbl td { display: block; width: auto; } } .info-view-tbl th { text-align: left; } @media screen and (max-width: 575px) { .info-view-tbl th { padding-top: 15px; border-bottom: 0; font-weight: bold; } } .info-view-tbl td { text-align: right; } @media screen and (max-width: 575px) { .info-view-tbl td { padding-bottom: 15px; text-align: left; } } .info-view-tbl .color-legend--color, .info-view-tbl #bcTarget { float: right; } .info-view-tbl-m-full { width: 100%; max-width: none; } /* Table - Responsive /* -------------------------------------------------- */ .tbl-responsive { overflow-y: hidden; overflow-x: auto; } .tbl-responsive--wrapper { width: 100%; } @media screen and (max-width: 1119px) { .tbl-responsive--wrapper { width: 910px; } } /* Tick /* -------------------------------------------------- */ /* TODO: Projected to replace the .opt-item */ .tick { margin-bottom: 0; position: relative; } .tick input[type="checkbox"], .tick input[type="radio"], .tick--input { position: absolute; top: 2px; left: 0; } .tick--label, .tick label { display: block; padding-left: 20px; } .tick-m-input-only { } .tick-m-input-only input[type="checkbox"], .tick-m-input-only input[type="radio"], .tick-m-input-only .tick--input { position: relative; } .tick-m-reverse { } .tick-m-reverse input[type="checkbox"], .tick-m-reverse input[type="radio"], .tick-m-reverse .tick--input { position: relative; } .tick-m-reverse label, .tick-m-reverse .tick--label { padding: 0 7px 0 0; display: inline-block; } .tick-group { } .tick-group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .tick-group .l-grid { } @media screen and (max-width: 767px) { .tick-group .l-grid { float: none; margin-left: 0; } } /* V-Card /* -------------------------------------------------- */ .v-card { } @media screen and (max-width: 767px) { .v-card { display: block; width: 100%; } } .v-card--img { float: left; width: 116px; height: 116px; position: relative; overflow: hidden; border-radius: 50%; border: 1px solid #333; } @media screen and (max-width: 767px) { .v-card--img { float: none; display: block; margin: 0 auto 15px; } } .v-card--img img { display: block; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .v-card--text { margin-left: 140px; display: block; height: 118px; font-size: 22px; } @media screen and (max-width: 767px) { .v-card--text { margin: 0 auto 15px; height: auto; } } .v-card--text--wrapper { display: table-cell; height: 118px; vertical-align: middle; } @media screen and (max-width: 767px) { .v-card--text--wrapper { display: block; height: auto; text-align: center; } } /* Widget /* -------------------------------------------------- */ /* Base */ .widget { box-sizing: border-box; height: 100%; border-radius: 6px; position: relative; overflow: hidden; } .widget--hd { font-size: 15px; line-height: 31px; } @media screen and (max-width: 575px) { .widget--hd { line-height: normal; } } .widget--wrapper { box-sizing: border-box; padding: 15px 20px; background-color: #f7f7f7; height: 100%; } .widget--wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .widget--wrapper-m-alt { background-color: #FFF; } .widget--loader { box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f7f7f7; z-index: 3; } .widget--loader .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Widget - Flexible */ .widget-m-flexible { margin-bottom: 0; display: inline-block; height: auto; } /* Widget - Pending Approval */ .widget-m-pending-approval { } @media screen and (max-width: 767px) { .widget-m-pending-approval { display: block; text-align: center; } } .widget-m-pending-approval--total { display: inline-block; margin-right: 15px; padding-right: 15px; border-right: 1px solid #7e7e7e; height: 31px; line-height: 31px; } @media screen and (max-width: 575px) { .widget-m-pending-approval--total { display: block; margin: 0; padding: 0; border-right: 0; border-bottom: 1px solid #7e7e7e; } } .widget-m-pending-approval--pending { display: inline-block; padding-right: 40px; height: 31px; position: relative; line-height: 31px; text-decoration: none; color: #323232; } @media screen and (max-width: 575px) { .widget-m-pending-approval--pending { margin-top: 10px; } } .widget-m-pending-approval--pending--value { position: absolute; top: 0; right: 0; } .widget-m-pending-approval--pending--value .fa { position: relative; top: -2px; } .widget-m-pending-approval--pending--value--number { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #878787; color: #FFF; text-align: center; font-weight: bold; line-height: 20px; position: absolute; bottom: 3px; right: -8px; } .l-grid-area-m-admin-dashboard .widget-m-pending-approval, .l-grid-area-m-regional-admin-dashboard .widget-m-pending-approval, .l-grid-area-m-teacher-dashboard .widget-m-pending-approval { } @media screen and (max-width: 991px) { .l-grid-area-m-admin-dashboard .widget-m-pending-approval, .l-grid-area-m-regional-admin-dashboard .widget-m-pending-approval, .l-grid-area-m-teacher-dashboard .widget-m-pending-approval { display: block; text-align: center; } } /* Widget - Student Assessment */ .widget-m-student-assessment { } .widget-m-student-assessment .widget--hd { } @media screen and (max-width: 767px) { .widget-m-student-assessment .widget--hd { margin-top: 7px; width: calc(100% - 140px); line-height: normal; } } @media screen and (max-width: 575px) { .widget-m-student-assessment .widget--hd { margin-top: 0; width: 100%; } } .widget-m-student-assessment--actions { position: absolute; top: 15px; right: 20px; } @media screen and (max-width: 575px) { .widget-m-student-assessment--actions { position: static; margin-bottom: 15px; } } /* Widget - Dashboard Settings */ .widget-m-dashboard-settings { height: 61px; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings { height: auto; text-align: center; } } .widget-m-dashboard-settings .widget--wrapper { padding: 0 !important; } .widget-m-dashboard-settings label { text-align: left; } .widget-m-dashboard-settings .styled-select-2 { display: inline-block; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings .styled-select-2 { width: 100%; } } .widget-m-dashboard-settings--campus-select { float: left; margin-right: 15px; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings--campus-select { float: none; display: block; margin: 0 0 15px; padding: 0; border: 0; } } .widget-m-dashboard-settings--department-select { float: left; margin-right: 15px; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings--department-select { float: none; display: block; margin: 0 0 15px; padding: 0; border: 0; } } .widget-m-dashboard-settings--class-select { float: left; margin-right: 15px; padding-right: 15px; border-right: 1px solid #7e7e7e; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings--class-select { float: none; display: block; margin: 0 0 15px; padding: 0; border: 0; } } .widget-m-dashboard-settings--assessment-switch { float: left; position: relative; top: 19px; } @media screen and (max-width: 767px) { .widget-m-dashboard-settings--assessment-switch { float: none; display: inline-block; height: 31px; top: 0; } } .widget-m-dashboard-settings--assessment-switch .k-switch { top: -4px; } .widget-m-dashboard-settings--assessment-switch .k-switch-on .k-switch-handle, .widget-m-dashboard-settings--assessment-switch .k-switch-off .k-switch-handle { background-color: #878787; border-color: #878787; } .widget-m-dashboard-settings--assessment-switch .k-switch-on .k-switch-wrapper, .widget-m-dashboard-settings--assessment-switch .k-switch-off .k-switch-wrapper { background-color: #cbcbcb; border-color: #cbcbcb; } .l-grid-area-m-teacher-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 180px; } @media screen and (max-width: 767px) { .l-grid-area-m-teacher-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 100%; } } .l-grid-area-m-regional-admin-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 150px; } @media screen and (max-width: 767px) { .l-grid-area-m-regional-admin-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 100%; } } .l-grid-area-m-admin-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 125px; } @media screen and (max-width: 767px) { .l-grid-area-m-admin-dashboard .widget-m-dashboard-settings .styled-select-2 { width: 100%; } } /* Widget - Transparent */ .widget-m-transparent { border-radius: 0; } .widget-m-transparent .widget--wrapper { padding: 15px 0; background: transparent; } /* Widget - Value */ .widget-m-value { } .widget-m-value--primary { display: inline-block; color: #20a8e0; font-size: 22px; font-weight: bold; } .widget-m-value--primary--val { margin-right: 3px; } .widget-m-value--primary--unit { display: inline-block; margin-right: 5px; font-size: 15px; } .widget-m-value--secondary { display: inline-block; font-weight: bold; font-size: 17px; } /* Widget - Work Readiness */ .widget-m-work-readiness { height: 255px; } @media screen and (max-width: 575px) { .widget-m-work-readiness { height: auto; } } .widget-m-work-readiness--type-select { position: absolute; top: 15px; right: 20px; } @media screen and (max-width: 575px) { .widget-m-work-readiness--type-select { position: static; margin-bottom: 15px; } } .widget-m-work-readiness--type-select label { display: inline-block; margin: 0 15px 0 0; line-height: 31px; } @media screen and (max-width: 575px) { .widget-m-work-readiness--type-select label { display: block; margin: 0 0 5px; line-height: normal; } } .widget-m-work-readiness--type-select .styled-select-2 { display: inline-block; } @media screen and (max-width: 575px) { .widget-m-work-readiness--type-select .styled-select-2 { display: block; } } .widget-m-work-readiness--question-select { position: relative; z-index: 2; } .widget-m-work-readiness--question-select label { display: none; } @media screen and (max-width: 575px) { .widget-m-work-readiness--question-select label { display: block; } } .widget-m-work-readiness--chart { position: relative; top: -25px; z-index: 1; } @media screen and (max-width: 575px) { .widget-m-work-readiness--chart { top: 0; } } /* -------------------------------------------------- */ /* 8. 3RD PARTY COMPONENTS /* -------------------------------------------------- */ /* Camera /* -------------------------------------------------- */ #jsCamera { margin: 0 0 15px; width: 550px; height: 250px; overflow: hidden; z-index: 0; } /* Color Picker /* -------------------------------------------------- */ /* Base */ .smallColorPicker_button_back { border: solid 1px #4A4A4A; width: 32px; height: 21px; background: url(img/picker_back.jpg); cursor: pointer; position: relative; } .smallColorPicker_button_color { margin: 16px 0 0 2px; width: 17px; height: 4px; position: absolute; overflow: hidden; } .smallColorPicker_button_back_popup { height: 22px; border-bottom: none; z-index: 2; } .picker_panel { display: none; margin-top: -1px; border: solid 1px #4A4A4A; width: 178px; background-color: #fff; position: absolute; z-index: 1; } .picker_panel_header { height: 10px; background: url(img/picker_popup_back.jpg) no-repeat scroll center 3px transparent; } .clear { clear: both; } .color_parent { float: left; display: inline; padding: 2px; overflow: hidden; } .color_parent a { display: block; padding: 2px; } .color_parent a:hover { border: solid 1px #1b253e; } .color_parent a div { border: solid 1px #808080; width: 11px; height: 10px; overflow: hidden; } /* Custom */ .picker_panel { height: 130px; overflow: hidden; } /* Kendo UI - Basic /* -------------------------------------------------- */ .k-nodata { text-transform: none; font-size: 12px; } /* Kendo UI - Chart /* -------------------------------------------------- */ .responsive-chart { overflow-x: auto; overflow-y: hidden; } .responsive-chart-m-locked-on-md { } @media screen and (max-width: 575px) { .responsive-chart-m-locked-on-md .responsive-chart--view { width: 416px; } } .responsive-chart-m-widget { box-sizing: border-box; } @media screen and (max-width: 575px) { .responsive-chart-m-widget { width: calc(100vw - 180px); } } /* Kendo UI - Date Picker /* -------------------------------------------------- */ .kendo-date-picker { box-sizing: border-box; width: 215px; height: 31px; overflow: hidden; position: relative; border-radius: 3px; } .kendo-date-picker .k-widget { width: 100%; } .kendo-date-picker .k-state-focused, .kendo-date-picker .k-state-active { box-shadow: none; } .kendo-date-picker .k-picker-wrap { border: 0; padding-right: 0; } .kendo-date-picker input[type="text"] { box-sizing: border-box; box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); padding: 0 39px 0 9px; width: 100%; height: 31px; border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; background: #a9a8ab; background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); color: #323232; text-indent: 0; line-height: 31px; } .kendo-date-picker .k-state-focused input[type="text"] { border-top: 1px solid #838284; border-bottom: 1px solid #97979a; border-left: 1px solid #7f7f81; border-right: 1px solid #a4a2a5; } .kendo-date-picker .k-select { width: 37px; border: 0; line-height: 29px; } .kendo-date-picker .k-icon { background: none; font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .kendo-date-picker .k-icon:before { color: #323232; content: '\f073'; } .kendo-date-picker-m-small { width: 115px; } .k-calendar-container { border-radius: 0 !important; box-shadow: none; } .k-calendar { } .k-calendar .k-i-arrow-60-left, .k-calendar .k-i-arrow-60-right { background: none; font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .k-calendar .k-i-arrow-60-left:before { content: "\f0d9"; } .k-calendar .k-i-arrow-60-right:before { content: "\f0da"; } .k-calendar .k-today { box-shadow: none; } .k-calendar .k-link:hover { background-color: #EEE; border-radius: 0; } .k-calendar .k-state-focused { box-shadow: none !important; } .k-calendar .k-state-selected, .k-calendar .k-state-selected:hover, .k-calendar .k-state-selected:focus { border-radius: 0; background: #0382d7; } /* Kendo UI - Dropdown /* -------------------------------------------------- */ .styled-dd-kendo { position: relative; } .styled-dd-kendo .k-dropdown { width: 100%; max-width: 215px; height: 31px !important; border-radius: 3px; overflow: hidden; } .styled-dd-kendo .k-dropdown-wrap { padding: 0; border: 0; height: 31px; box-shadow: none; background: #a9a8ab; background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); } .styled-dd-kendo .k-input { box-sizing: border-box; padding: 0 50px 0 10px; width: 100%; height: 31px; color: #323232 !important; line-height: 31px; text-indent: 0; } .styled-dd-kendo .k-input:after { display: block; width: 38px; height: 31px; background-image: url(img/common-sprite.png?v8); background-repeat: no-repeat; background-position: 0 0; position: absolute; top: 0; right: 0; z-index: 1; content: ' '; } .styled-dd-kendo .k-state-hover .k-input:after, .styled-dd-kendo .k-state-focused .k-input:after { background-position: 0 -34px; } .styled-dd-kendo .k-select { display: none; } .styled-dd-kendo--no-data { } .styled-dd-kendo--no-data--txt { font-size: 12px; line-height: 1.4; overflow: hidden; text-align: left; text-transform: none; } .styled-dd-kendo--no-data--input-txt { white-space: pre-wrap; } .styled-dd-kendo--no-data--act { padding-top: 7px; } .styled-dd-kendo--no-data--btn { margin-top: 5px; max-width: 158px; text-transform: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .k-list-container { padding: 0 !important; box-shadow: none; background: #FFF; border-radius: 0 !important; } .k-list-container .k-state-hover { background-color: #EEE; } .k-list-container .k-state-selected { border: 0; color: #323232; background: #999; } .k-list-container .k-nodata { box-sizing: border-box; width: 100%; padding: 10px; border-top: 1px solid #CCC; } .k-list-container .k-nodata > div { padding: 0; text-align: left; } .k-list-filter { margin-bottom: 0; padding: 10px; } .k-list-filter .k-textbox { padding: 0 25px 0 10px; width: 100% !important; height: 31px; border-radius: 0; text-indent: 0; } .k-list-filter .k-textbox:focus { box-shadow: none; } .k-list-filter .k-icon { right: 16px; display: inline-block; background-image: none; color: #a9a8ab; font: normal normal normal 15px/1 FontAwesome; text-rendering: auto; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .k-list-filter .k-i-zoom:before { content: '\f002'; } .k-list-optionlabel { padding: 7px 10px !important; border-radius: 0; } .k-list-scroller { } .k-list-scroller .k-list .k-item { padding: 7px 10px; border-radius: 0; } .k-list-scroller .k-list .k-state-focused { box-shadow: none; } .k-popup > .k-group-header { padding: 7px 10px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; background: none; color: #141414; font-size: 12px; font-weight: bold; text-align: left; text-transform: none; } .k-popup .k-list .k-item > .k-group { padding: 7px 10px; background: #FFF; position: absolute; top: 0; left: 0; color: #141414; line-height: 1.5; font-size: 12px; font-weight: bold; text-align: left; text-transform: none; } .k-popup .k-item.k-first { padding-top: 39px; } .k-column-menu .k-item.k-first { padding-top: 0; } /* Kendo UI - Grid /* -------------------------------------------------- */ .k-grid { border-color: #b7b7b7; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; background-color: #f0f0f0; } .k-grid td { padding: 7px 10px; background-color: #f2f5f9; border: 0; color: #323232; overflow: visible; } .k-grid tr:hover td { background-color: #ddd; } .k-grid tr.k-state-selected:hover td { background-color: #ddd; color: #323232; } .k-grid .k-state-selected td { background-color: #1cb5e9 !important; color: #FFF; } .k-grid .k-alt td { background-color: #fff; } .k-grid .k-alt .k-group-cell { background-color: #e1e1e1; } .k-grid td a { color: #323232; } .k-grid .k-grouping-row td { background-color: #e1e1e1; } .k-grid .k-grouping-row td { border-top: 1px solid #b7b7b7; } .k-grid .k-grouping-row:first-child td { border-top: 0; } .k-grid .k-group-cell { background-color: #e1e1e1; } .k-grid .k-detail-cell { padding: 0; } .k-detail-cell--area { box-sizing: border-box; display: table; width: 100%; border-top: 1px solid #EFEFEF; border-left: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF; } .k-detail-cell--row { display: table-row; } .k-detail-cell--col { display: table-cell; padding: 7px 10px; } .k-grid .k-detail-row:hover td { background-color: #f2f5f9; } .k-grid .k-detail-row.k-alt:hover td { background-color: #FFF; } .k-detail-cell--col:hover { background-color: #ddd !important; } .k-detail-cell--row:nth-child(even) .k-detail-cell--col, .k-alt .k-detail-cell--row:nth-child(odd) .k-detail-cell--col { background: #f2f5f9; } .k-detail-cell--row:nth-child(odd) .k-detail-cell--col, .k-alt .k-detail-cell--row:nth-child(even) .k-detail-cell--col { background: #FFF; } .k-grid .k-state-selected { background-color: #ddd; } .k-grid .k-group-footer td { border-top: 1px solid #b7b7b7; background-color: #e1e1e1; } .k-grid-header { border-top: 0; border-color: #b7b7b7; background: #cbcbcb; } .k-grid-header th.k-header { padding: 15px 11px 15px 10px; border-left: 1px dotted #8e8e8e; background: #cbcbcb; color: #323232; font-weight: bold; vertical-align: middle; } .k-grid-header th.k-header > .k-link { margin: 0 25px 0 0; padding: 0; color: #323232; font-weight: bold; line-height: 1.5; min-height: 0; white-space: normal; } .k-grid-header .k-link .k-icon { display: block; margin: -8px 0 0 0 !important; position: absolute; top: 50%; right: 9px; } .k-grid-header .k-sort-order { width: 12px; height: 12px; border: 1px solid #acacac; border-radius: 50%; background-color: #b9b9b9; font-size: 10px; line-height: 11px; text-align: center; } .k-grid-header-wrap { border-right: 1px dotted #8e8e8e; } .k-grid-content { background-color: #f2f5f9; } .k-grid-footer { border-color: #b7b7b7; background: #e1e1e1; background: -moz-linear-gradient(top, #e1e1e1 50%, #cbcbcb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#e1e1e1), color-stop(100%,#cbcbcb)); background: -webkit-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: -ms-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); } .k-grid-m-no-footer .k-grid-footer { display: none; } .k-grid-footer-wrap { border-right: 0; } .k-grid-footer td { border-top: 1px solid #b7b7b7; background: #b7b7b7; background: -moz-linear-gradient(top, #e1e1e1 50%, #cbcbcb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#e1e1e1), color-stop(100%,#cbcbcb)); background: -webkit-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: -ms-linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); background: linear-gradient(top, #e1e1e1 50%,#cbcbcb 100%); color: #323232; font-weight: bold; vertical-align: middle; } .k-auto-scrollable + .k-grid-footer td { border-top: 0; } .k-grid-norecords { padding: 7px 10px; height: 20px; line-height: 20px; text-align: left; } .k-grid--icon-img { width: 45px; vertical-align: middle; } .k-grid-pager { border-color: #b7b7b7; } .k-grid-pager-m-top { border-top: 0; border-bottom: 1px solid #a9a8ab; } .k-grid--group-header-label { margin-right: 5px; } .k-grid--group-header-val { margin-right: 20px; font-weight: normal; } .k-grid--group-header-val-m-part { margin-right: 0; } .k-grid-m-multi-header-features { } .k-grid-m-multi-header-features th.k-header { padding-top: 30px; padding-bottom: 30px; } .k-grid-m-multi-header-features th.k-header > .k-link { margin-right: 0; } .k-grid-m-multi-header-features .k-header > .k-grid-filter { margin: 0; top: 4px; right: 5px; } .k-grid-m-multi-header-features .k-grid-header .k-link .k-icon { margin: 0 !important; position: absolute; top: auto; bottom: 9px; right: 9px; } .k-grid-m-multi-header-features .k-sort-order { display: block; margin: 0; position: absolute; bottom: 10px; right: 25px; } .k-pager-wrap { padding: 0.6em 0 0.6em 0.8em; background: #cbcbcb; background: -moz-linear-gradient(top, #cbcbcb 50%, #b9b9b9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cbcbcb), color-stop(100%,#b9b9b9)); background: -webkit-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); background: -ms-linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); background: linear-gradient(top, #cbcbcb 50%,#b9b9b9 100%); } .k-pager-numbers { } .k-pager-numbers .k-state-selected { background: #0ea2df; } .k-pager-numbers .k-link:hover, .k-pager-numbers .k-pager-nav:hover { background: #DDD; } .k-ff .k-grid .k-pager-numbers { } @media screen and (max-width: 1024px) { .k-ff .k-grid .k-pager-numbers { left: 5.4em; } } .k-loading-pdf-mask { overflow: hidden; } .pdf-page-template { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .pdf-page-template--logo { margin-right: 10px; width: 300px; height: 37px; position: relative; top: 1px; } .pdf-page-template--title-divider { margin-right: 10px; } .pdf-page-template--title { } .pdf-page-template--header { padding-bottom: 10px; position: absolute; top: 25px; left: 30px; right: 30px; border-bottom: 1px solid #323232; color: #323232; } .pdf-page-template--header--pagination { float: right; position: relative; top: 25px; } .pdf-page-template--footer { padding-top: 10px; position: absolute; bottom: 30px; left: 30px; right: 30px; border-top: 1px solid #323232; text-align: center; color: #323232; } .k-header { position: relative; } .k-header > .k-grid-filter { color: #323232; margin-top: -12px; padding-top: 1px; padding-bottom: 1px; border: 1px solid transparent; position: absolute; top: 50%; right: 12px; } .k-header > .k-grid-filter.k-state-border-down, .k-header > .k-grid-filter:hover, .k-header > .k-grid-filter:focus { border: 1px solid #acacac; background-color: #b9b9b9; } .k-header > .k-header-column-menu { padding: 0; position: absolute; top: calc(50% + 6px); right: 10px; transform: translateY(-50%); } .k-header-column-menu { color: #323232; } .k-menu { } .k-menu .k-item > .k-link:hover { background-color: #b9b9b9; } .k-menu .k-item > .k-link > .k-icon:first-child { margin-right: 5px; } .k-menu .k-state-focused { box-shadow: none !important; } .k-menu .k-state-selected > .k-link { background-color: #999; color: #323232; } .k-menu .k-menu-group .k-item .k-link { position: relative; top: 1px; padding-left: 30px; } .k-menu .k-menu-group .k-item .k-link br { display: none; } .k-menu .k-menu-group .k-link input { position: absolute; top: 4px; left: 10px; } .k-menu .k-menu-group .k-link input:before { display: block; width: 10px; background-color: #cb0000; content: ' '; } .k-dirty { display: none !important; } .k-drag-clue { } .k-drag-clue br { display: none; } .k-filter-menu { padding: 10px; border-radius: 0; border-color: #a7a7a7; } .k-filter-menu .k-item { line-height: 1.5; } .k-filter-menu .k-item .k-label { margin: 5px 0; padding-left: 20px; position: relative; } .k-filter-menu .k-item input { position: absolute; top: 2px; left: 0; } .k-pdf-export .k-grid-toolbar, .k-pdf-export .k-pager-wrap { display: none; } .s-warning-row td, .s-warning-row + .k-detail-row td { color: #cb0000 !important; } /* Kendo UI - Grid - Photo /* -------------------------------------------------- */ .k-grid--photo { position: relative; top: -4px; } .k-grid--photo:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } .k-grid--photo--img { display: inline-block; width: 32px; height: 32px; position: absolute; top: 0; left: 0; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); } .k-grid--photo--text { display: inline-block; margin: 7px 0 0 42px; vertical-align: middle; } /* Kendo UI - Grid - PDF Page Template /* -------------------------------------------------- */ .page-template { font-family: "DejaVu Sans", "Arial", sans-serif; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .page-template .header { position: absolute; top: 30px; left: 30px; right: 30px; border-bottom: 1px solid #888; color: #888; } .page-template .footer { position: absolute; bottom: 30px; left: 30px; right: 30px; border-top: 1px solid #888; text-align: center; color: #888; } .page-template .watermark { font-weight: bold; font-size: 400%; text-align: center; margin-top: 30%; color: #aaaaaa; opacity: 0.1; transform: rotate(-35deg) scale(1.7, 1.5); } /* Kendo UI - Multi Select /* -------------------------------------------------- */ .k-multiselect, .k-multiselect.k-state-hover { padding: 3px 5px; min-height: 27px; border-top: 1px solid #9a9b9e; border-left: 1px solid #9a9b9e; border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5; border-radius: 3px; background: #e7e9ed !important; } .k-multiselect > .k-multiselect-wrap > .k-i-close { margin-top: -1px; margin-right: 0; cursor: pointer; } .k-multiselect-wrap { background-color: transparent; } .k-multiselect-wrap .k-input { padding: 0; height: 24px; line-height: 24px; position: relative; top: 1px; } .k-multiselect-wrap li { margin: 3px; padding-left: 7px; padding-right: 27px; } .k-multiselect-wrap .k-button { color: #FFF; background: #424242; border-color: #424242; } .k-multiselect-wrap .k-button .k-i-close { font-size: 13px; } .k-multiselect-wrap .k-select { color: #FFF; border-left: 1px solid #5e5e5e; } .k-multiselect.k-state-focused { box-shadow: none; } .k-multiselect.k-state-focused .k-clear-value { display: block; } /* Kendo UI Mobile - Switch /* -------------------------------------------------- */ .k-switch { display: inline-block; width: 60px; height: 40px; border: 0; background: transparent; position: relative; overflow: hidden; } .k-switch input[type="checkbox"] { display: none; } .k-switch-wrapper { box-sizing: border-box; margin: 0 auto; display: block; width: 50px; height: 20px; border: 1px solid #999; background: black; position: relative; top: 10px; border-radius: 10px; } .k-switch-handle { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #999; position: absolute; top: 5px; left: 0; cursor: pointer; } .k-switch-label-on { display: none; } .k-switch-label-off { display: none; } .k-switch-on { } .k-switch-on .k-switch-handle { background-color: #52e739; border-color: #66cc33; } .k-switch-on .k-switch-wrapper { background-color: #9bed8d; border-color: #99cc99; } .k-switch-off { } .k-switch-off .k-switch-handle { background-color: #fc2658; border-color: #cc3366; } .k-switch-off .k-switch-wrapper { background-color: #ff9999; border-color: #cc9999; } /* Stylish Select /* -------------------------------------------------- */ /* Base CSS */ .stylish-select .SSContainerDivWrapper { left: -9999px; } .stylish-select .SSContainerDivWrapper { margin: 0; padding: 0; width: 290px; position: absolute; top: 22px; left: 0; z-index: 2; } .stylish-select ul.newList { margin: 0; padding: 0; list-style: none; color: #000; background: #fff; border: 1px solid #ccc; overflow: auto; } .stylish-select ul.newList * { margin: 0; padding: 0; } .stylish-select ul.newList a { color: #000; text-decoration: none; display: block; padding: 3px 8px; } .stylish-select .newListSelected { float: left; padding: 3px 0 0 6px; width: 285px; height: 19px; color: #000; } .stylish-select ul.newList li a:focus { -moz-outline-style: none; } .stylish-select .selectedTxt { width: 258px; overflow: hidden; height: 31px; padding: 0 23px 0 0; } .stylish-select .hiLite { background: #650101 !important; color: #fff !important; } .stylish-select .newListHover { color: #000 !important; cursor: default; } .stylish-select .newListDisabled { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .stylish-select .newListItemDisabled { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .stylish-select .newListOptionDisabled { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .stylish-select .newListSelHover, .stylish-select .newListSelFocus { height: 31px; cursor: default; } .stylish-select .newListOptionTitle { font-weight: bold; } .stylish-select .newListOptionTitle ul { margin: 3px 0 0; } .stylish-select .newListOptionTitle li { font-weight: normal; } /* Custom CSS */ .styled-select select::-ms-expand { /* NOTE: For removing the default select arrow on IE11 */ display: none; } .newListSelected { padding: 0 !important; height: 31px !important; color: #323232; background: #a9a8ab; background: -moz-linear-gradient(top, #a9a8ab 0%, #98969a 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a8ab), color-stop(50%,#98969a)); background: -webkit-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -o-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: -ms-linear-gradient(top, #a9a8ab 0%,#98969a 50%); background: linear-gradient(to bottom, #a9a8ab 0%,#98969a 50%); -webkit-border-radius: 3px; border-radius: 3px; } .newListSelected .selectedTxt { padding: 0 50px 0 12px !important; line-height: 31px; color: #323232; background: transparent url(img/common-sprite.png?ver=34) no-repeat 0 0; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); box-shadow: inset 1px 1px 1px 1px rgba(102, 102, 102, 0.1); } .styled-dd-80, .styled-dd-80 .newListSelected, .styled-dd-80 .SSContainerDivWrapper { width: 80px !important; } .styled-dd-92, .styled-dd-92 .newListSelected, .styled-dd-92 .SSContainerDivWrapper { width: 92px !important; } .styled-dd-128, .styled-dd-128 .newListSelected, .styled-dd-128 .SSContainerDivWrapper { width: 128px !important; } .styled-dd-178, .styled-dd-178 .newListSelected, .styled-dd-178 .SSContainerDivWrapper { width: 178px !important; } .styled-dd-215, .styled-dd-215 .newListSelected, .styled-dd-215 .SSContainerDivWrapper { width: 215px !important; } .styled-dd-365, .styled-dd-365 .newListSelected, .styled-dd-365 .SSContainerDivWrapper { width: 365px !important; } .styled-dd-705, .styled-dd-705 .newListSelected, .styled-dd-705 .SSContainerDivWrapper { width: 705px !important; } .styled-dd-80 ul { width: 78px !important; } .styled-dd-92 ul { width: 90px !important; } .styled-dd-128 ul { width: 126px !important; } .styled-dd-178 ul { width: 176px !important; } .styled-dd-215 ul { width: 213px !important; } .styled-dd-365 ul { width: 363px !important; } .styled-dd-705 ul { width: 703px !important; } .styled-dd-80 .selectedTxt { width: 18px !important; background-position: 42px 0; } .styled-dd-80 .newListSelHover .selectedTxt, .styled-dd-80 .newListSelFocus .selectedTxt { background-position: 42px -34px; } .styled-dd-92 .selectedTxt { width: 30px !important; background-position: 54px 0; } .styled-dd-92 .newListSelHover .selectedTxt, .styled-dd-92 .newListSelFocus .selectedTxt { background-position: 54px -34px; } .styled-dd-128 .selectedTxt { width: 66px !important; background-position: 90px 0; } .styled-dd-128 .newListSelHover .selectedTxt, .styled-dd-128 .newListSelFocus .selectedTxt { background-position: 90px -34px; } .styled-dd-178 .selectedTxt { width: 116px !important; background-position: 140px 0; } .styled-dd-178 .newListSelHover .selectedTxt, .styled-dd-178 .newListSelFocus .selectedTxt { background-position: 140px -34px; } .styled-dd-215 .selectedTxt { width: 153px !important; background-position: 177px 0; } .styled-dd-215 .newListSelHover .selectedTxt, .styled-dd-215 .newListSelFocus .selectedTxt { background-position: 177px -34px; } .styled-dd-365 .selectedTxt { width: 303px !important; background-position: 326px 0; } .styled-dd-365 .newListSelHover .selectedTxt, .styled-dd-365 .newListSelFocus .selectedTxt { background-position: 326px -34px; } .styled-dd-705 .selectedTxt { width: 643px !important; background-position: 666px 0; } .styled-dd-705 .newListSelHover .selectedTxt, .styled-dd-705 .newListSelFocus .selectedTxt { background-position: 666px -34px; } .stylish-select ul.newList { overflow-x: hidden; overflow-y: scroll; } .stylish-select ul.newList a { display: block; padding: 10px 14px; min-height: 16px; line-height: 1.3; } .optGroupTitle { display: block; padding: 5px 10px !important; } .newList a:hover { color: #323232 !important; background-color: #EEE !important; } .stylish-select ul.newList .hiLite { color: #323232 !important; background-color: #999 !important; } .s-styled-dd-active { z-index: 999; } /* Toast (Notification) /* -------------------------------------------------- */ /* Base CSS */ .jq-toast-wrap, .jq-toast-wrap * { margin: 0; padding: 0; } .jq-toast-wrap { display: block; position: fixed; width: 250px; pointer-events: none !important; letter-spacing: normal; z-index: 9000 !important; } .jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; } .jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; } .jq-toast-wrap.top-left { top: 20px; left: 20px; } .jq-toast-wrap.top-right { top: 20px; right: 40px; } .jq-toast-single { display: block; width: 100%; padding: 10px; margin: 0 0 5px; border-radius: 4px; font-size: 12px; font-family: arial,sans-serif; line-height: 17px; position: relative; pointer-events: all !important; background-color: #444; color: #fff; } .jq-toast-single h2 { font-family: arial,sans-serif; font-size: 14px; margin: 0 0 7px; background: 0 0; color: inherit; line-height: inherit; letter-spacing: normal; } .jq-toast-single a { color: #eee; text-decoration: none; font-weight: 700; border-bottom: 1px solid #fff; padding-bottom: 3px; font-size: 12px; } .jq-toast-single ul { margin: 0 0 0 15px; background: 0 0; padding: 0; } .jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: 0 0; margin: 0; padding: 0; letter-spacing: normal; } .close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; } .jq-toast-loader { display: block; position: absolute; top: -2px; height: 5px; width: 0; left: 0; border-radius: 5px; background: #cb0000; } .jq-toast-loaded { width: 100%; } .jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; } .jq-icon-info { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=); background-color: #31708f; color: #d9edf7; border-color: #bce8f1; } .jq-icon-warning { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=); background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; } .jq-icon-error { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=); background-color: #a94442; color: #f2dede; border-color: #ebccd1; } .jq-icon-success { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==); color: #dff0d8; background-color: #3c763d; border-color: #d6e9c6 } /* Custom CSS */ .jq-toast-wrap { z-index: 20001 !important } /* -------------------------------------------------------------------- /* 9. STATE & UTILITIES /* -------------------------------------------------------------------- */ .s-body-locked { overflow: hidden; } .s-d-box-visible { visibility: visible !important; } .s-error, .s-warning { color: #cb0000 !important; } .s-hidden { display: none; } .s-vp-flag-xxl { display: block; } .s-vp-flag-xl { display: none; } .s-vp-flag-lg { display: none; } .s-vp-flag-md { display: none; } .s-vp-flag-sm { display: none; } .s-vp-flag-xs { display: none; } @media screen and (max-width: 1119px) { .s-vp-flag-xxl { display: none; } .s-vp-flag-xl { display: block; } .s-vp-flag-lg { display: none; } .s-vp-flag-md { display: none; } .s-vp-flag-sm { display: none; } .s-vp-flag-xs { display: none; } } @media screen and (max-width: 991px) { .s-vp-flag-xxl { display: none; } .s-vp-flag-xl { display: none; } .s-vp-flag-lg { display: block; } .s-vp-flag-md { display: none; } .s-vp-flag-sm { display: none; } .s-vp-flag-xs { display: none; } } @media screen and (max-width: 767px) { .s-vp-flag-xxl { display: none; } .s-vp-flag-xl { display: none; } .s-vp-flag-lg { display: none; } .s-vp-flag-md { display: block; } .s-vp-flag-sm { display: none; } .s-vp-flag-xs { display: none; } } @media screen and (max-width: 575px) { .s-vp-flag-xxl { display: none; } .s-vp-flag-xl { display: none; } .s-vp-flag-lg { display: none; } .s-vp-flag-md { display: none; } .s-vp-flag-sm { display: block; } .s-vp-flag-xs { display: none; } } @media screen and (max-width: 319px) { .s-vp-flag-xxl { display: none; } .s-vp-flag-xl { display: none; } .s-vp-flag-lg { display: none; } .s-vp-flag-md { display: none; } .s-vp-flag-sm { display: none; } .s-vp-flag-xs { display: block; } } .s-print-only, .s-sr-only, .u-page-break { display: none !important; } .u-cursor-move { cursor: move !important; } .u-display-inline-block { display: inline-block; } .u-float-right { float: right; } .u-line-height-20 { line-height: 20px; } .u-line-height-31 { line-height: 31px; } .u-margin-bottom-0 { margin-bottom: 0 !important; } .u-margin-left-5 { margin-left: 5px; } .u-margin-top-2 { margin-top: 2px; } .u-margin-top-4 { margin-top: 4px; } .u-margin-top-5 { margin-top: 5px; } .u-margin-top-7 { margin-top: 7px; } .u-margin-top-15 { margin-top: 15px; } .u-margin-top-23 { margin-top: 23px; } .u-margin-top-27 { margin-top: 27px; } .u-padding-bottom-0 { padding-bottom: 0; } .u-pos-relative { position: relative; } .u-pos-top-3 { position: relative; top: 3px; } .u-text-align-center { text-align: center; } .u-text-align-right { text-align: right; } .u-vertical-align-top { vertical-align: top; } .u-width-215 { width: 215px; } .u-z-index-3 { position: relative !important; z-index: 3 !important; } .u-z-index-9 { position: relative; z-index: 9 !important; } .u-z-index-10 { position: relative; z-index: 10 !important; }