/** -------------------------------------------------- * * THEME STYLE * * TABLE OF CONTENTS * imports * * -------------------------------------------------- **/ /** -------------------------------------------------- #imports -------------------------------------------------- */ /* base */ /* **** */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * Fonts * Colors * Measurement * * -------------------------------------------------- */ :root { /* BEGIN ROOT */ /* PLACE ALL VARIABLES INSIDE THE ROOT! */ /*! -------------------------------------------------- Fonts -------------------------------------------------- */ /*! -------------------------------------------------- Colors -------------------------------------------------- */ /* blue */ /*! -------------------------------------------------- Measurement -------------------------------------------------- */ /* GLOBAL */ } /* END ROOT*/ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * urbanist * Muli * Gilroy * icon font * * -------------------------------------------------- */ /** -------------------------------------------------- * #urbanist * -------------------------------------------------- */ /* normal */ /* ****** */ @font-face { font-family: 'Urbanist'; src: url('../fonts/urbanist/urbanist-v10-latin/urbanist-v10-latin-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('../fonts/urbanist/urbanist-v10-latin/urbanist-v10-latin-italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; } /* bold */ /* **** */ @font-face { font-family: 'Urbanist'; src: url('../fonts/urbanist/urbanist-v10-latin/urbanist-v10-latin-700.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('../fonts/urbanist/urbanist-v10-latin/urbanist-v10-latin-700italic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; } /** -------------------------------------------------- * #Muli * -------------------------------------------------- */ @font-face { font-family: 'Muli'; src: url('../fonts/Muli/Muli-light.woff2') format('woff2'), url('../fonts/Muli/Muli-light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Muli'; src: url('../fonts/Muli/Muli-regular.woff2') format('woff2'), url('../fonts/Muli/Muli-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Muli'; src: url('../fonts/Muli/Muli-bold.woff2') format('woff2'), url('../fonts/Muli/Muli-bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } /** -------------------------------------------------- * #Gilroy * -------------------------------------------------- */ @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy/gilroy-extrabold-webfont.woff2') format('woff2'), url('../fonts/Gilroy/gilroy-extrabold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy/gilroy-extrabold-webfont.woff2') format('woff2'), url('../fonts/Gilroy/gilroy-extrabold-webfont.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /*! -------------------------------------------------- #icon font -------------------------------------------------- */ /* Icon Font */ @font-face { font-family: 'duo_frontend_font'; src: url("../fonts/duo_frontend_font/duo_frontend_font.eot") format('embedded-opentype'), url("../fonts/duo_frontend_font/duo_frontend_font.woff2") format('woff2'), url("../fonts/duo_frontend_font/duo_frontend_font.woff") format('woff'), url("../fonts/duo_frontend_font/duo_frontend_font.ttf") format('truetype'), url("../fonts/duo_frontend_font/duo_frontend_font.svg") format('svg'); font-weight: normal; font-style: normal; } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * basic font-icon styles * icons * * -------------------------------------------------- */ /*! -------------------------------------------------- #basic font-icon styles -------------------------------------------------- */ /*! -------------------------------------------------- #icons -------------------------------------------------- */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * android highlight color * btn basic * * -------------------------------------------------- */ :root{ /*! -------------------------------------------------- #android highlight color -------------------------------------------------- */; } /** -------------------------------------------------- * * MIXINS - buttons * * TABLE OF CONTENTS * button skeleton * basic buttons * rounded buttons * collapse buttons * yes/no buttons * text buttons * * -------------------------------------------------- */ /** -------------------------------------------------- #button skeleton -------------------------------------------------- */ /* all button mixins should start off * from the button skeleton */ :root { /* --btnSkeleton */ } /* :root */ /** -------------------------------------------------- #basic buttons -------------------------------------------------- */ :root { /* --btnBasic */ /* --btnDetail */ } /* :root */ /** -------------------------------------------------- #rounded buttons -------------------------------------------------- */ :root { /* --btnRounded */ /* --btnRounded--light */ /* --btnRounded */ /* --btnRounded */ /* --btnRounded--invertedblack */ /* --btnRounded--invertedblue */ /* with arrow icon */ /* *************** */ /* --btnRounded */ /* with arrow icon */ /* *************** */ /* --btnRounded */ /* with save icon */ /* ************** */ /* --btnRounded--save-icon */ } /* :root */ /** -------------------------------------------------- #collapse buttons -------------------------------------------------- */ /* buttons used to toggle a part of the page * (eg. a table) */ :root { /* --btnCollapse */ /* --btnCollapse--light */ } /* :root */ /** -------------------------------------------------- #yes/no buttons -------------------------------------------------- */ /* * coloured buttons used to close a dialog/modal */ :root { /* --btnChoice */ /* --btnChoice-yes */ /* --btnChoice-yes--neutral */ /* --btnChoice-yes */ } /* :root */ /** -------------------------------------------------- #text buttons -------------------------------------------------- */ :root { /* --btnText */ /* --btnText-delete */ } /* :root */ /** -------------------------------------------------- * * MIXINS - text content * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ :root { /* note: * if you can, don't use this mixin, but add * the class ".text-content" (see 'global') to the element * that will contain the textContent; */ /* --textContent */ } /* :root */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * Global * Woop * * -------------------------------------------------- */ /*! -------------------------------------------------- Global -------------------------------------------------- */ @keyframes animationRotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes moveFromBottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } /*! -------------------------------------------------- Woop -------------------------------------------------- */ @keyframes loadingColorChange { 0% { background-color: #F8F8F8; } 50% { background-color: #EEEEEE; } 100% { background-color: #F8F8F8; } } /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * reset list styles * hide text * set max width * set media queries * clearfix * * -------------------------------------------------- */ /*! -------------------------------------------------- #reset list styles -------------------------------------------------- */ /*! -------------------------------------------------- #hide text -------------------------------------------------- */ /*! -------------------------------------------------- #set max width -------------------------------------------------- */ /*! -------------------------------------------------- #set media queries @media (--mqS) { } -------------------------------------------------- */ :root{ } /*! -------------------------------------------------- #clearfix --------------------------------------------------*/ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * global styles * media queries * * -------------------------------------------------- */ /* ----------------------------------------------------- #global styles -------------------------------------------------- */ *, :after, :before { box-sizing: border-box; } /* menu lists */ ul.menu, ul.links, ol.menu, ol.links, nav[role="navigation"] ul, nav[role="navigation"] ol { margin: 0; padding: 0; } ul.menu li, ul.links li, ol.menu li, ol.links li, nav[role="navigation"] ul li, nav[role="navigation"] ol li { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } img { width: auto; max-width: 100%; height: auto; } iframe { border: none; } table { width: 100%; } .flr { float: right; } /* visible hidden */ .visible-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* -------------------------------------------------- #media queries -------------------------------------------------- */ /* set content value to communicate with javascript */ body:after { display: none } @media (max-width: 1300px) { body:after { content: 'xl'; } } @media (max-width: 980px) { body:after { content: 'l'; } } @media (max-width: 768px) { body:after { content: 'm'; } } @media (max-width: 568px) { body:after { content: 's'; } } body:before { display: none } @media (max-width: 1150px) { body:before { content: 'menu'; } } /* vendor */ /* ****** */ /** * Stylish Select 0.4.9 - $ plugin to replace a select drop down box with a stylable unordered list * http://github.com/scottdarby/Stylish-Select/ * * Copyright (c) 2009 Scott Darby * * Requires: jQuery 1.3 or newer * * Dual licensed under the MIT and GPL licenses. */ /** * Hide lists on page load ---------------------------------------------------------*/ form { text-align: center; } /* input:focus, select:focus, textarea:focus, button:focus, * { outline: none; } */ .stylish-select .SSContainerDivWrapper { left:-9999px; font-size: 16px; } /* * Red example ---------------------------------------------------------*/ .stylish-select .SSContainerDivWrapper { margin:0; padding:0; width: 100%; position:absolute; top:36px !important; left:0; z-index:2; } .select2-container .select2-dropdown { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; transition: opacity 0.3s; } .stylish-select ul.newList { margin:0; padding:0; list-style:none; color:#000; background:#fff; border:1px solid #ccc; overflow:auto; text-align: left; height: 100% !important; max-height: 500px !important; border-top: none; } .stylish-select ul.newList * { margin:0; padding:0; } .stylish-select ul.newList a { color: #000; text-decoration:none; display:block; padding:3px 8px; padding-bottom: 7px; cursor: pointer; transition: all .3s; font-size: 16px; } .stylish-select .newListSelected { width:285px; color:#000; height: 40px; /* padding:4px 5px 5px 10px; */ padding: 0; border: 1px solid #F9F9FB; margin: auto; font-size: 16px; background-color: white; transition: all .3s; position: relative !important } @media (max-width: 568px) { .stylish-select .newListSelected { width: 100%; } } .stylish-select .newListSelected:after { position: absolute; z-index: 0; content: " "; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; top: 14px; right: 13px; border-top: 7px solid #2d2c2b; transition: border-color .3s; } .stylish-select .newListSelected:before { position: absolute; z-index: 0; content: " "; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; top: 14px; right: 13px; border-top: 9px solid #214ebf; } .stylish-select .newListSelected:hover { background-color: #214ebf; transition: all .3s; } .stylish-select .newListSelected:hover:after { border-top: 7px solid white; transition: border-color .3s; } .stylish-select .newListSelected:hover .selectedTxt { color: white; transition: all .3s; } .stylish-select ul.newList li a:focus { -moz-outline-style: none; } .stylish-select .selectedTxt { width: auto; overflow:hidden; height:38px; padding: 8px 0 5px 5px; cursor: pointer; color: #000; transition: all .3s; margin: auto; display: block; position: relative !important; z-index: 1; } .stylish-select .hiLite { background: transparent !important } .stylish-select .hiLite.newListHover { background: transparent !important; } .stylish-select .newListHover { background: #D8D8D8 !important; color: #000 !important; cursor:default; transition: .3s all; } .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 { background-position:0 -22px; cursor:default; } .stylish-select .newListOptionTitle { font-weight:bold; } .stylish-select .newListOptionTitle ul { margin:3px 0 0; } .stylish-select .newListOptionTitle li { font-weight:normal; } .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; /*border: 1px solid #aaa;*/ border: none; border-radius: 11px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(87,69,202, 0.75); border: 1px solid rgba(87,69,202, 0.1); border-radius: 11px; color: #ffffff; font-size: 15px; font-size: 1.5rem; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px 4px 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; color: #ffffff; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { /*border: solid black 1px;*/ border: none; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role=group] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(255, 238, 238, 0.93333)', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 238, 238, 0.93333)', endColorstr='rgba(255, 204, 204, 0.8)', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(255, 238, 238, 0.93333)', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 238, 238, 0.93333)', endColorstr='rgba(255, 255, 255, 1)', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role=group] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } /** -------------------------------------------------- * * vendor - TOOLTIPSTER * * INFO * base css styles for tooltipster plugin * -> http://iamceege.github.io/tooltipster * -> v4.2.6 * * TABLE OF CONTENTS * base styles * * -------------------------------------------------- */ /** -------------------------------------------------- #base styles -------------------------------------------------- */ /* This is the core CSS of Tooltipster */ /* GENERAL STRUCTURE RULES (do not edit this section) */ .tooltipster-base { /* this ensures that a constrained height set by functionPosition, if greater that the natural height of the tooltip, will be enforced in browsers that support display:flex */ display: -ms-flexbox; display: flex; pointer-events: none; /* this may be overriden in JS for fixed position origins */ position: absolute; } .tooltipster-box { /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10- and flex-basis auto for IE11- (at least) */ -ms-flex: 1 1 auto; flex: 1 1 auto; } .tooltipster-content { /* prevents an overflow if the user adds padding to the div */ box-sizing: border-box; /* these make sure we'll be able to detect any overflow */ max-height: 100%; max-width: 100%; overflow: auto; } .tooltipster-ruler { /* these let us test the size of the tooltip without overflowing the window */ bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; visibility: hidden; } /* ANIMATIONS */ /* Open/close animations */ /* fade */ .tooltipster-fade { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition-property: opacity; } .tooltipster-fade.tooltipster-show { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } /* grow */ .tooltipster-grow { -ms-transform: scale(0,0); transform: scale(0,0); transition-property: transform; -webkit-backface-visibility: hidden; } .tooltipster-grow.tooltipster-show { -ms-transform: scale(1,1); transform: scale(1,1); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } /* swing */ .tooltipster-swing { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); transition-property: transform; } .tooltipster-swing.tooltipster-show { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); } /* fall */ .tooltipster-fall { transition-property: top; transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-fall.tooltipster-initial { top: 0 !important; } .tooltipster-fall.tooltipster-show { } .tooltipster-fall.tooltipster-dying { transition-property: all; top: 0 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } /* slide */ .tooltipster-slide { transition-property: left; transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-slide.tooltipster-initial { left: -40px !important; } .tooltipster-slide.tooltipster-show { } .tooltipster-slide.tooltipster-dying { transition-property: all; left: 0 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } /* Update animations */ /* We use animations rather than transitions here because transition durations may be specified in the style tag due to animationDuration, and we try to avoid collisions and the use of !important */ /* fade */ @keyframes tooltipster-fading { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } } .tooltipster-update-fade { animation: tooltipster-fading 400ms; } /* rotate */ @keyframes tooltipster-rotating { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(0); } } .tooltipster-update-rotate { animation: tooltipster-rotating 600ms; } /* scale */ @keyframes tooltipster-scaling { 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .tooltipster-update-scale { animation: tooltipster-scaling 600ms; } /** * DEFAULT STYLE OF THE SIDETIP PLUGIN * * All styles are "namespaced" with .tooltipster-sidetip to prevent * conflicts between plugins. */ /* .tooltipster-box */ .tooltipster-sidetip .tooltipster-box { background: #565656; border: 2px solid black; border-radius: 4px; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-box { margin-top: 8px; } .tooltipster-sidetip.tooltipster-left .tooltipster-box { margin-right: 8px; } .tooltipster-sidetip.tooltipster-right .tooltipster-box { margin-left: 8px; } .tooltipster-sidetip.tooltipster-top .tooltipster-box { margin-bottom: 8px; } /* .tooltipster-content */ .tooltipster-sidetip .tooltipster-content { color: white; line-height: 18px; padding: 6px 14px; } /* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that corresponds to the arrow we want to display */ .tooltipster-sidetip .tooltipster-arrow { overflow: hidden; position: absolute; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow { height: 10px; /* half the width, for centering */ margin-left: -10px; top: 0; width: 20px; } .tooltipster-sidetip.tooltipster-left .tooltipster-arrow { height: 20px; margin-top: -10px; right: 0; /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not been positioned yet */ top: 0; width: 10px; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow { height: 20px; margin-top: -10px; left: 0; /* same as .tooltipster-left .tooltipster-arrow */ top: 0; width: 10px; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow { bottom: 0; height: 10px; margin-left: -10px; width: 20px; } /* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */ .tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border { height: 0; position: absolute; width: 0; } /* .tooltipster-arrow-background */ .tooltipster-sidetip .tooltipster-arrow-background { border: 10px solid transparent; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: #565656; left: 0; top: 3px; } .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background { border-left-color: #565656; left: -3px; top: 0; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background { border-right-color: #565656; left: 3px; top: 0; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { border-top-color: #565656; left: 0; top: -3px; } /* .tooltipster-arrow-border */ .tooltipster-sidetip .tooltipster-arrow-border { border: 10px solid transparent; left: 0; top: 0; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: black; } .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color: black; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { border-right-color: black; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: black; } /* tooltipster-arrow-uncropped */ .tooltipster-sidetip .tooltipster-arrow-uncropped { position: relative; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped { top: -10px; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped { left: -10px; } /* components */ /* ********** */ /** -------------------------------------------------- * * components - TABLES * * TABLE OF CONTENTS * tasks table * data table * * -------------------------------------------------- */ /** -------------------------------------------------- #tasks table -------------------------------------------------- */ .tasks-table-wrapper { } .tasks-table { } .tasks-table th { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; } .tasks-table tbody tr, .tasks-table thead tr { background: #fff; border-bottom: 2px solid #F9F9FB; } .tasks-table tbody tr[class*='details-task'] { background: transparent; } .tasks-table tbody td { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; border-top: 2px solid #F9F9FB; color: #5745ca; } .tasks-table tbody tr[class*='details-project'] { cursor: pointer; transition: background-color 0.15s ease-out; } .tasks-table tbody tr[class*='details-project']:hover { background-color: #f7f7f7; } .tasks-table tbody tr[class*='details-task'] td, .tasks-table tbody tr[class*='details-task'] td { color: #000; } .tasks-table tbody td:empty { border: 0 !important; } /* .tasks-table */ /** -------------------------------------------------- #data table -------------------------------------------------- */ .data-table-wrapper { overflow-x: auto; } .data-table { min-width: 900px } .data-table td { padding: 15px 10px; } /* .data-table */ /* vendor */ /** -------------------------------------------------- * * components - vendor - SELECT2 * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ /* select */ /* ****** */ #select2-calendar_search_company-container { } .select2-container { width: 100% !important; /* -> overwrite inline style */ } .select2-container--default .select2-selection--single, .select2-container--no-textbox .select2-selection--single{ background-color: transparent; border: 0; /*border-bottom: 2px solid var(--brand-blue);*/ border-radius: 0; height: 36px; } .select2-container .select2-selection--single .select2-selection__rendered { font-size: 14px; font-size: 1.4rem; line-height: 34px; color: #5745ca; text-align: left; padding: 0 12px; padding-right: 36px; background-image: url('../images/distribution/icons/dropdown-arrow--purple-down.svg'); background-size: 10px 6px; background-position: top 16px right 17px; background-repeat: no-repeat; } /* arrow */ .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--no-textbox .select2-selection--single .select2-selection__arrow { display: none; } /* dropdown */ /* ******** */ .select2-dropdown { border: 0; box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .15); font-size: 12px; font-size: 1.2rem; line-height: 1.2; } .select2-results__option { padding: 6px 8px; padding: 0.6rem 0.8rem; } .select2-container--default .select2-results__option[aria-selected=true], .select2-container--no-textbox .select2-results__option[aria-selected=true] { background-color: #5745ca; color: #fff; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--no-textbox .select2-results__option--highlighted[aria-selected] { background-color: #ededed; color: #000; } /* search block */ /* ------------ */ .select2-search--dropdown { padding: 0; } .select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--no-textbox .select2-search--dropdown .select2-search__field { border: 0; border-bottom: 2px solid #5745ca; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: normal; height: 32px; } /** -------------------------------------------------- * * components - vendor - JQUERY UI GENERAL * * TABLE OF CONTENTS * border radius * * -------------------------------------------------- */ /** -------------------------------------------------- #border radius -------------------------------------------------- */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0; } /** -------------------------------------------------- * * components - vendor - JQUERY UI CALENDAR * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .ui-datepicker { padding: 0; } /* header */ /* ****** */ .ui-datepicker .ui-datepicker-header { background: transparent; border: 0; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-transform: lowercase; padding: 0; } /* calendar part */ /* ************* */ /* labels */ .ui-datepicker th { font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1; font-weight: bold; text-transform: lowercase; } /* dates */ .ui-datepicker td span.ui-state-default, .ui-datepicker td a.ui-state-default { border: none; background: transparent; padding: 2px; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1; font-weight: 200; } /** -------------------------------------------------- * * components - vendor - JQUERY UI DIALOG * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .ui-dialog.ui-widget.ui-widget-content { border: 0; border-radius: 0; background: #fff; box-shadow: 0 2px 4px 0 rgba(14,11,11, 0.5); padding: 0; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1; z-index: 199 !important; } /* fonts */ /* ***** */ .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; } /* titlebar */ /* ******** */ .ui-dialog .ui-dialog-titlebar { padding: 0; border: 0; background: #fff; min-height: 44px; } /* .ui-dialog .ui-dialog-titlebar */ /* close button */ .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background-color: transparent; background-image: url('../images/distribution/icons/dialog-close-cross.svg'); background-repeat: no-repeat; background-position: center center; background-size: 16px 16px } .ui-dialog .ui-dialog-titlebar-close .ui-icon { display: none; background-image: none; } /* .ui-dialog .ui-dialog-titlebar-close */ /* dialog content */ /* ************** */ .ui-dialog .ui-dialog-content { width: 100% !important; padding: 0; } /** -------------------------------------------------- * * components - vendor - PERFECT SCROLLBAR * * TABLE OF CONTENTS * base styles * * -------------------------------------------------- */ /** -------------------------------------------------- #base styles -------------------------------------------------- */ /* container style */ /* *************** */ .ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; } /* scrollbar rail styles */ /* ********************* */ .ps__rail-x { display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 10px; bottom: 0px; position: absolute; } .ps__rail-y { display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 10px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; /* please don't change 'position' */ position: absolute; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { display: block; background-color: #f7f7f7; } .ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; opacity: 0.6; } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: #eee; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; opacity: 0.9; } /* scrollbar thumb styles */ /* ********************** */ .ps__thumb-x { background-color: #d3cfcb; transition: background-color .2s linear, height .2s ease-in-out; height: 10px; bottom: 0; position: absolute; } .ps__thumb-y { background-color: #d3cfcb; transition: background-color .2s linear, width .2s ease-in-out; width: 6px; right: 2px; position: absolute; } .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background-color: #999; height: 10px; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: #999; width: 10px; } /* MS supports */ /* *********** */ @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important; } } /** -------------------------------------------------- * * components - vendor - TOOLTIPSTER * * TABLE OF CONTENTS * planner tooltip * planner tooltip - light * radiobutton tooltip * * -------------------------------------------------- */ /** -------------------------------------------------- #planner tooltip -------------------------------------------------- */ .planner-tooltip { /* & .tooltipster-content */ /* arrow */ /* **** */ } .planner-tooltip .tooltipster-box { background: rgba(2, 2, 2, .85); border: none; border-radius: 0; } .planner-tooltip .tooltipster-content { padding: 3px 6px; font-size: 12px; font-size: 1.2rem; line-height: 1.5; color: #fff; } .planner-tooltip.tooltipster-top .tooltipster-arrow { height: 6px; bottom: 2px; margin-left: -6px; width: 12px; } .planner-tooltip .tooltipster-arrow-border { border: 6px solid transparent; } .planner-tooltip .tooltipster-arrow-background { border: 6px solid transparent; } .planner-tooltip.tooltipster-top .tooltipster-arrow-border { border-top-color: rgba(2, 2, 2, .85); } .planner-tooltip.tooltipster-top .tooltipster-arrow-background { border-top-color: transparent; } .planner-tooltip.tooltipster-bottom .tooltipster-arrow { height: 6px; top: 2px; margin-left: -6px; width: 12px; } .planner-tooltip.tooltipster-bottom .tooltipster-arrow-uncropped { top: -6px; } .planner-tooltip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: rgba(2, 2, 2, .85); } .planner-tooltip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: transparent; } /* .planner-tooltip */ /** -------------------------------------------------- #planner tooltip - light -------------------------------------------------- */ .planner-tooltip--light { /* & .tooltipster-content */ /* arrow */ /* **** */ } .planner-tooltip--light .tooltipster-box { background: #fff; border: 2px solid #5745ca; border-radius: 0; } .planner-tooltip--light .tooltipster-content { padding: 3px 6px; font-size: 12px; font-size: 1.2rem; line-height: 1.5; color: #000; } .planner-tooltip--light.tooltipster-top .tooltipster-arrow { height: 6px; bottom: 2px; margin-left: -6px; width: 12px; } .planner-tooltip--light .tooltipster-arrow-border { border: 6px solid transparent; } .planner-tooltip--light .tooltipster-arrow-background { border: 6px solid transparent; } .planner-tooltip--light.tooltipster-top .tooltipster-arrow-border { border-top-color: #5745ca; } .planner-tooltip--light.tooltipster-top .tooltipster-arrow-background { border-top-color: transparent; } .planner-tooltip--light.tooltipster-bottom .tooltipster-arrow { height: 6px; top: 2px; margin-left: -6px; width: 12px; } .planner-tooltip--light.tooltipster-bottom .tooltipster-arrow-uncropped { top: -6px; } .planner-tooltip--light.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: #5745ca; } .planner-tooltip--light.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: transparent; } /* .planner-tooltip--light */ /** -------------------------------------------------- #radiobutton tooltip -------------------------------------------------- */ .radiobutton-tooltip { /* & .tooltipster-content */ /* arrow */ /* **** */ } .radiobutton-tooltip .tooltipster-box { background: rgba(2, 2, 2, .85); border: none; border-radius: 0; } .radiobutton-tooltip .tooltipster-content { padding: 3px 6px; font-size: 12px; font-size: 1.2rem; line-height: 1.5; color: #fff; text-align: center; } .radiobutton-tooltip.tooltipster-top .tooltipster-arrow { height: 6px; bottom: 2px; margin-left: -6px; width: 12px; } .radiobutton-tooltip .tooltipster-arrow-border { border: 6px solid transparent; } .radiobutton-tooltip .tooltipster-arrow-background { border: 6px solid transparent; } .radiobutton-tooltip.tooltipster-top .tooltipster-arrow-border { border-top-color: rgba(2, 2, 2, .85); } .radiobutton-tooltip.tooltipster-top .tooltipster-arrow-background { border-top-color: transparent; } .radiobutton-tooltip.tooltipster-bottom .tooltipster-arrow { height: 6px; top: 2px; margin-left: -6px; width: 12px; } .radiobutton-tooltip.tooltipster-bottom .tooltipster-arrow-uncropped { top: -6px; } .radiobutton-tooltip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: rgba(2, 2, 2, .85); } .radiobutton-tooltip.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: transparent; } /* .radiobutton-tooltip */ /* page parts */ /** -------------------------------------------------- * * components - page parts - PAGE TOP * * TABLE OF CONTENTS * general * page title * navigation block * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .page-top { position: relative; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } /** -------------------------------------------------- #page title -------------------------------------------------- */ .page-top__title-block { -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center; } .page-top__title { } .page-top__subtitle { font-size: 20px; font-size: 2.0rem; font-weight: bold; } /** -------------------------------------------------- #navigation block -------------------------------------------------- */ .page-top__navigation-block { position: absolute; top: 18px; right: 0; z-index: 200; } /* fixed navigation block */ /* ********************** */ .page-top__navigation-block--fixed { position: fixed; right: 70px; top: 73px } @media (max-width: 1300px) { .page-top__navigation-block--fixed { right: 35px; } } /* .page-top__navigation-block--fixed */ /* sidebar */ /** -------------------------------------------------- * * components - sidebar - SIDEBAR TOP * * TABLE OF CONTENTS * logo * clock * * -------------------------------------------------- */ /** -------------------------------------------------- #logo -------------------------------------------------- */ .sidebar__logo-zone { position: relative; padding-top: 62px; } .sidebar__logo__link { display: block; width: 110px; height: auto; margin: 0 auto } .sidebar__logo__link svg { width: 100%; } .sidebar__logo__link path { transition: fill 0.2s ease-out; } /* .sidebar__logo__link */ /** -------------------------------------------------- #clock -------------------------------------------------- */ .sidebar__time-zone { margin: 35px 0; } .sidebar__time__container { color: #0a006f; text-align: center; } .sidebar__week, .sidebar__dash, .sidebar__sprint { font-size: 13px; font-size: 1.3rem; } .sidebar__time { display: block; margin-top: 5px; color: #0a006f; font-family: "Urbanist", "Gilroy", "Muli", Arial, Helvetica, sans-serif; font-size: 35px; font-size: 3.5rem; line-height: 1.35; font-weight: bold; letter-spacing: 0.16px; } /** -------------------------------------------------- * * components - sidebar - SIDEBAR BOTTOM * * TABLE OF CONTENTS * quick links * * -------------------------------------------------- */ /** -------------------------------------------------- #quick links -------------------------------------------------- */ .sidebar-quick-links { margin-top: 25px; } .sidebar-quick-links__inner { margin-left: 10px; /* -> to align with white extending filter-block */ } .sidebar-quick-links__list { margin: 0; padding: 0; list-style: none; } .sidebar-quick-links__list__item { margin-bottom: 3px } .sidebar-quick-links__list__item:last-child { margin-bottom: 0; } .sidebar-quick-links__list__link { position: relative; display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 1.9; font-weight: bold; color: #5745ca; padding-left: 15px } .sidebar-quick-links__list__link:hover, .sidebar-quick-links__list__link:focus { color: #0a006f; } .sidebar-quick-links__list__link:before { content: ''; display: block; width: 6px; height: 10px; position: absolute; top: 50%; margin-top: -4px; left: 0; background-image: url('../images/distribution/icons/link-arrow--purple--right.svg'); background-repeat: no-repeat; background-position: center center; background-size: 6px 10px; } /* .sidebar-quick-links__list__link */ /** -------------------------------------------------- * * components - sidebar - FILTER BLOCKS * * TABLE OF CONTENTS * general * filter content - extended filters * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .sidebar__filter-zone__block { /* background-color: var(--white); padding: 20px 18px; */ } /* block that extends to the right */ /* ******************************* */ .sidebar__filter-zone__block--extended { margin-left: 10px; margin-right: -105px; padding-right: 30px; } /** -------------------------------------------------- #filter content - extended filters -------------------------------------------------- */ .sidebar-extended-search-form__row { background-color: #fff; padding: 14px 18px; margin-bottom: 4px; box-shadow: 0 12px 14px 0 rgba(10,0,111, 0.04) } .sidebar-extended-search-form__row:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; } .sidebar-extended-search-form__row:last-child, .sidebar-extended-search-form__row.sidebar-extended-search-form__row--actions { border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; } .sidebar-extended-search-form__row--filter { position: relative; } .sidebar-extended-search-form__filter-label { padding-top: 14px; color: #0a006f; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-align: right; width: 75px; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 10px; left: 0; text-transform: lowercase; } /* label-container - used if we can't easily add a * class to the label: */ .sidebar-extended-search-form__filter-label-container { position: absolute; top: 23px; left: 0; width: 65px; text-align: right; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold } .sidebar-extended-search-form__filter-label-container label { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-transform: lowercase; overflow: hidden; text-overflow: ellipsis; } /* .sidebar-extended-search-form__filter-label-container */ .sidebar-extended-search-form__filter-input-block { margin-left: 75px; } .sidebar-extended-search-form__row--actions { position: relative; z-index: 20; text-align: center; margin-top: -4px; margin-bottom: 0; padding-top: 3px; padding-bottom: 18px } .sidebar-extended-search-form__row--actions .form-submit, .sidebar-extended-search-form__row--actions button[type="submit"] { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; padding: 6px 37px 8px 20px; background-image: url('../images/distribution/bg-arrow--white.svg'); background-repeat: no-repeat; background-size: 13px 10px; background-position: center right 13px; transition: background 0.25s ease; border: 2px solid #e776a2; color: #fff; background-color: #e776a2; } .sidebar-extended-search-form__row--actions .form-submit:hover, .sidebar-extended-search-form__row--actions .form-submit:focus, .sidebar-extended-search-form__row--actions button[type="submit"]:hover, .sidebar-extended-search-form__row--actions button[type="submit"]:focus { background-color: #86dfbd; border-color: #86dfbd; } .sidebar-extended-search-form__row--actions .form-submit:focus, .sidebar-extended-search-form__row--actions .form-submit:hover, .sidebar-extended-search-form__row--actions button[type="submit"]:focus, .sidebar-extended-search-form__row--actions button[type="submit"]:hover { background-position: center right 11px; } .sidebar-extended-search-form__row--actions .form-submit::after, .sidebar-extended-search-form__row--actions button[type="submit"]::after { display: none; } .sidebar-extended-search-form__row--actions .form-submit:hover, .sidebar-extended-search-form__row--actions .form-submit:focus, .sidebar-extended-search-form__row--actions button[type="submit"]:hover, .sidebar-extended-search-form__row--actions button[type="submit"]:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } /* .burndown-search-row--actions */ /* planner */ /** -------------------------------------------------- * * components - planner - TOP BAR * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .planner-top-bar { position: -webkit-sticky; position: sticky; z-index: 200; top: 0; width: 100%; padding-left: 20px; padding-left: 2rem; background: #f7f7f7; box-shadow: 0 0 12px 0 rgba(10,0,111, 0.04); } .planner-top-bar__inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; padding: 6px 0; padding: 0.6rem 0; } /* actions */ /* ******* */ .planner-top-bar__actions { padding-right: 10px; padding-right: 1rem; } .planner-top-bar__actionbutton { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; border: 2px solid #e776a2; color: #e776a2; background-color: #fff; font-size: 12px; font-size: 1.2rem; padding: 7px 10px 8px 10px; padding: 0.7rem 1rem 0.8rem 1rem; text-transform: lowercase } .planner-top-bar__actionbutton:hover, .planner-top-bar__actionbutton:focus { background-color: #86dfbd; border-color: #86dfbd; } .planner-top-bar__actionbutton:hover, .planner-top-bar__actionbutton:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } @media (max-width: 1150px) { .planner-top-bar__actionbutton { display: none; } } /* filters */ /* ******* */ .select2-selection--multiple { max-height: 39px; overflow-y: auto; } .planner-top-bar__filters { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 10px; } .planner-top-bar__filters__form { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .planner-top-bar-filter-item { -ms-flex: 1 1 auto; flex: 1 1 auto; } .planner-top-bar-filter-item__inner { padding: 0 10px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .planner-top-bar-filter-item__label { position: relative; top: 11px; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: normal; padding-right: 5px; } .planner-top-bar-filter-item__input-block { background-color: #fff; border-radius: 11px; width: 100%; } /* filter overrides */ /* ---------------- */ .planner-top-bar-filter-item--company { max-width: 200px; max-width: 20rem; } .planner-top-bar-filter-item--team { } .planner-top-bar-filter-item--user { max-width: 300px; max-width: 30rem; } .planner-top-bar-filter-item--project { } @media (max-width: 980px) { .planner-top-bar-filter-item--project { display: none; } } /* navigation */ /* ********** */ .planner-top-bar__navigation { width: 76px } .planner-top-bar__navigation .header__menutoggle { position: absolute; top: 0; right: 20px; } @media (max-width: 1150px) { .planner-top-bar__navigation .header__menutoggle { right: 10px; } } /** -------------------------------------------------- * * components - planner - BOTTOM BAR * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .banner-bottom-bar { position: fixed; z-index: 150; bottom: 0; right: 40px; padding-bottom: 8px; background: #fbfaf9; box-shadow: 0 0 12px 0 rgba(10,0,111, 0.08); } .banner-bottom-bar__inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding: 2px 0; padding: 0.2rem 0; } /* filters */ /* ******* */ .planner-bottom-bar__filters { padding: 0 10px; } .planner-bottom-bar__filters__form { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .planner-bottom-bar-filter-item__inner { padding: 0 10px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .planner-bottom-bar-filter-item__label { position: relative; top: 11px; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: normal; padding-right: 5px; } .planner-bottom-bar-filter-item__input-block input[type="checkbox"] { float: left; margin-left: 10px; margin-right: 10px; margin-top: 11px; } .planner-bottom-bar-filter-item__input-block .select2 { background-color: #fff; border-radius: 11px; } /* period filter */ /* ------------- */ .planner-bottom-bar-filter-item--view { } .planner-bottom-bar-filter-item--view .planner-bottom-bar-filter-item__input-block { width: 130px; } /** -------------------------------------------------- * * components - planner - TOP LEGEND * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .planner-top-legend-container { position: -webkit-sticky; position: sticky; top: 0; z-index: 198; } .planner-top-legend { font-size: 14px; font-size: 1.4rem; line-height: 1.2; color: #8c8c8c; position: relative; } .planner-calendars-date-legend { background: #fff; left: 150px; width: 100%; } /* year */ /* **** */ .planner-top-legend__year { position: relative } .planner-top-legend__year:after { content: ''; display: block; clear: both } .planner-top-legend__year .planner-calendars-year { position: relative; float: left; } .planner-top-legend__year .planner-calendars-year__text { font-weight: bold; } /* month */ /* ***** */ .planner-top-legend__month { position: relative /* line */ /* months */ } .planner-top-legend__month:after { content: ''; display: block; clear: both } .planner-top-legend__month:after { content: ''; width: 100%; background: #8c8c8c; height: 2px; position: absolute; top: 11px; left: 0; z-index: 1; } .planner-top-legend__month .planner-calendars-month { position: relative; z-index: 2; float: left;/* hide a bit of the grey line: */ } .planner-top-legend__month .planner-calendars-month .planner-calendars-month__text { font-weight: bold; display: inline-block; background: #fff; padding: 0 4px 0 0; } .planner-top-legend__month .planner-calendars-month:before { content: ''; width: 4px; background: #fff; height: 2px; position: absolute; top: 11px; left: -4px; } /* week */ /* **** */ .planner-top-legend__week { position: relative /* line */ /* weeks */ } .planner-top-legend__week:after { content: ''; display: block; clear: both } .planner-top-legend__week:after { content: ''; width: 100%; background: #8c8c8c; height: 2px; position: absolute; top: 11px; left: 0; z-index: 1; } .planner-top-legend__week .planner-calendars-week { position: relative; z-index: 2; float: left;/* hide a bit of the grey line: */ } .planner-top-legend__week .planner-calendars-week .planner-calendars-week__text { font-weight: bold; display: inline-block; background: #fff; padding: 0 4px 0 0; } .planner-top-legend__week .planner-calendars-week:before { content: ''; width: 4px; background: white; height: 2px; position: absolute; top: 11px; left: -4px; } .planner-top-legend__sprint { position: relative /* line */ /* weeks */ } .planner-top-legend__sprint:after { content: ''; display: block; clear: both } .planner-top-legend__sprint:after { content: ''; width: 100%; background: #8c8c8c; height: 2px; position: absolute; top: 11px; left: 0; z-index: 1; } .planner-top-legend__sprint .planner-calendars-sprint { position: relative; z-index: 2; float: left;/* hide a bit of the grey line: */ } .planner-top-legend__sprint .planner-calendars-sprint .planner-calendars-sprint__text { font-weight: bold; display: inline-block; background: #fff; padding: 0 4px 0 0; } .planner-top-legend__sprint .planner-calendars-sprint:before { content: ''; width: 4px; background: white; height: 2px; position: absolute; top: 11px; left: -4px; } /* day */ /* *** */ .planner-top-legend__day { position: relative /* days */ /* day variations */ } .planner-top-legend__day:after { content: ''; display: block; clear: both } .planner-top-legend__day .planner-calendars-day { position: relative; float: left; text-align: center; } .planner-top-legend__day .planner-calendars-day--past { color: #aeaeae; } .planner-top-legend__day .planner-calendars-day--today { font-weight: bold; } .planner-top-legend__day .planner-calendars-day--weekend { color: #aeaeae; } .planner-top-legend__day .planner-calendars-day--dayoff { position: relative; background-image: linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 1) 100%), linear-gradient(135deg, transparent 16.67%, rgba(0, 0, 0, .04) 16.67%, rgba(0, 0, 0, .04) 50%, transparent 50%, transparent 66.67%, rgba(0, 0, 0, .04) 66.67%, rgba(0, 0, 0, .04) 100%); background-size: 100% auto, 8.49px 8.49px; } .planner-top-legend__day .planner-calendars-day--dayoff:after { content: ''; display: block; width: 20px; height: 20px; background-image: url('../images/distribution/icons/holiday-sun--teal.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: 0.8; } /** -------------------------------------------------- * * components - planner - USER LEGEND * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .planner-calendars-user-legend { position: -webkit-sticky; position: sticky; left: 0; z-index: 99; height: auto; background-color: #fff; } /* user block */ /* ********** */ .planner-calendars-user { position: relative; padding: 0 10px; } .planner-calendars-user-avatar { display: block; width: 44px; height: 44px; margin: 0 auto 4px; border-radius: 50%; background-color: #f7f7f7; background-repeat: no-repeat; background-position: center center; background-size: contain; } .planner-calendars-user-name { font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-align: center; } /** -------------------------------------------------- * * components - planner - GRID LAYOUT * * TABLE OF CONTENTS * general * custom scrollbar * change view buttons * time line * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .planner-grid-zone { position: relative; } .planner-grid-zone-corner { position: absolute; top: 0; left: 0; background: #fff; z-index: 199; } /* horizontal scroll zone */ /* ********************** */ .planner-calendars-wrapper { display: none; position: relative; width: 100%; height: auto; overflow: auto; height: calc(100vh - 114px); } .planner-calendars { position: relative; height: auto; background-color: #fff; } .planner-persontask-view { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; position: relative; } /** -------------------------------------------------- #change view buttons -------------------------------------------------- */ .planner-change-view-button { position: fixed; top: 50%; z-index: 5; display: block; background: #5745ca; color: #fff; border: 0; cursor: pointer; text-indent: -999999px; width: 54px; height: 100px; background-image: url('../images/distribution/icons/basic-arrow--white--left.svg'); background-repeat: no-repeat; background-position: center center; background-size: 10px 16px; transition: background-color 0.2s ease-out, transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; will-change: transform, opacity } .planner-change-view-button:hover, .planner-change-view-button:focus { background-color: #2d2c2b; } .planner-change-view-button.js-visible { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } .planner-change-view-button--previous { left: 150px; } .planner-change-view-button--next { right: 0; background-image: url('../images/distribution/icons/basic-arrow--white--right.svg'); } /** -------------------------------------------------- #time line -------------------------------------------------- */ .planner-time-line { position: absolute; top: 0; width: 2px; height: 100%; background-color: #e71a4b; z-index: 10; pointer-events: none; } /** -------------------------------------------------- * * components - planner - CALENDAR ROW * * TABLE OF CONTENTS * general * planner blocks * planner blocks - tooltips * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .planner-calendar-wrapper { position: relative; height: auto; background-color: #f7f7f7; /* -> catch any floating elements */ } .planner-calendar-wrapper:after { content: ''; display: block; clear: both; } /* borders between dates */ /* ********************* */ .planner-calendar-wrapper { } .planner-calendar-wrapper .day-off { background-image: linear-gradient(135deg, transparent 16.67%, rgba(0, 0, 0, .08) 16.67%, rgba(0, 0, 0, .08) 50%, transparent 50%, transparent 66.67%, rgba(0, 0, 0, .08) 66.67%, rgba(0, 0, 0, .08) 100%); background-size: 8.49px 8.49px; } .planner-calendar-wrapper .weekday-ma { border-left: 1px #8C8C8C solid; } .planner-calendar-wrapper .weekday-di, .planner-calendar-wrapper .weekday-wo, .planner-calendar-wrapper .weekday-do, .planner-calendar-wrapper .weekday-vr { border-left: 1px #D2CFCA solid; } .planner-calendar-wrapper .weekday-vr { border-right: 1px #8C8C8C solid; } .planner-calendar-wrapper .sprint-start { border-left: 1px black solid; } .planner-calendar-wrapper .sprint-end { border-right: 1px black solid; } /* top legend */ /* ********** */ .planner-calendar-blocks-legend { position: relative; } .planner-calendar-blocks-legend:after { content: ''; display: block; clear: both; } .planner-day-block-legend { position: relative; float: left; } .planner-day-block-legend__text { margin: 0; padding: 0; font-size: 12px; font-size: 1.2rem; line-height: 1.2; text-align: center; color: #e2e2e2 } .planner-day-block-legend__text.positive-hours { } .planner-day-block-legend__text .no-hours { } .planner-day-block-legend__text .negative-hours { } /* calendar blocks */ /* *************** */ .planner-calendar-blocks { position: relative; height: auto; } .planner-calendar-blocks:after { content: ''; display: block; clear: both; } .planner-day-block { position: relative; float: left /* for hover: */ /* work at home */ } .planner-day-block:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .04); padding: 2px 3px 2px 3px; background-clip: content-box; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } .planner-day-block:hover { } .planner-day-block:hover:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } .planner-day-block.work-at-home { } .planner-day-block.work-at-home::after { content: ''; display: block; width: 20px; height: 20px; background-image: url('../images/distribution/icons/work-at-home--mif-orange.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: 50%; bottom: 5px; -ms-transform: translateX(-50%); transform: translateX(-50%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: 0.8; } /* events legend */ /* ************* */ .planner-calendar-events-legend { position: relative; } .planner-calendar-events-legend:after { content: ''; display: block; clear: both; } .planner-day-event-legend { position: relative; float: left; } .planner-day-event-legend p { font-size: 12px; font-size: 1.2rem; line-height: 1.2; margin: 0; text-align: center; color: #01cbc9; } /* events */ /* ****** */ .planner-calendar-events { position: relative; } .planner-calendar-events:after { content: ''; display: block; clear: both; } .planner-day-event { position: relative; float: left; overflow: hidden; } .planner-event { position: relative; float: left; width: 100%; height: 6px; padding: 1px; background-clip: content-box; background-color: #01cbc9; transition: background-color 0.2s ease; } .planner-day-event:hover .planner-event { background-color: #0bb7b5; } /** -------------------------------------------------- #planner blocks -------------------------------------------------- */ .planner-block { position: absolute; z-index: 1; cursor: pointer; transition: opacity 0.2s ease-out; overflow: hidden; } /* when dragging */ /* ************* */ .planner-block.dragging { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } /* when done */ /* ********* */ .planner-block.done { } .planner-block.done .planner-block-content__inner { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; text-decoration: line-through; } /* block content */ /* ************* */ .planner-block-content { position: relative; float: left; width: 100%; height: 100%; padding: 2px 3px 2px 3px; background-clip: content-box; color: #fff; font-size: 14px; font-size: 1.4rem; line-height: 1.4; } .planner-block-content__inner { height: 100%; color: #fff; transition: box-shadow 0.15s ease; } .planner-block-content:hover .planner-block-content__inner { box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .25); } .planner-block-content-name-jobtype { font-size: 12px; font-size: 1.2rem; line-height: 1.4; padding: 6px 4px 0 7px; } .planner-block-content-name-jobtype, .planner-block-content-project { font-weight: 300; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .planner-block-content-name { display: inline-block; font-weight: 300 } .planner-block-content-name.none { display: none; } .planner-block-content-jobtype { display: inline-block; font-weight: normal; margin-left: 4px } .planner-block-content-jobtype:before { content: '-'; padding: 0 4px 0 0; } .planner-block-content-jobtype:empty { margin-left: 0; } .planner-block-content-jobtype:empty:before { display: none; } .planner-block-content-name.none + .planner-block-content-jobtype { margin-left: 0 } .planner-block-content-name.none + .planner-block-content-jobtype:before { display: none; } .planner-block-content-project { font-size: 11px; font-size: 1.1rem; line-height: 1.4; padding: 3px 20px 2px 7px; } /* ac link */ /* ------- */ .planner-block-content-task-url { display: none } .planner-block-content-task-url.none { display: none; } /* hours */ /* ----- */ .planner-block-content-hours { position: absolute; width: 40px; height: 20px; bottom: 6px; right: 0; background-color: #fff; z-index: 5; font-size: 14px; font-size: 1.4rem; line-height: 16px; text-align: center; } .planner-block-content-hours.none { display: none; color: #e45959; } /* resizable - handles */ /* ------------------- */ .planner-block { } .planner-block .ui-resizable-e { right: 1px; width: 12px; z-index: 90; cursor: ew-resize; } .planner-block .ui-resizable-w { left: 1px; width: 12px; z-index: 90; cursor: ew-resize; } /* placeholder block */ /* ***************** */ .planner-block-placeholder { position: absolute; } .planner-block-placeholder-content { position: relative; float: left; width: 100%; height: 100%; padding: 2px 3px 2px 3px; background-clip: content-box; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; opacity: 0.3; } /** -------------------------------------------------- #planner blocks - tooltips -------------------------------------------------- */ .planner-tooltip .tooltipster-content { padding: 3px 6px; font-size: 12px; font-size: 1.2rem; line-height: 1.5; color: #fff } .planner-tooltip .tooltipster-content .tooltip-name-jobtype { } .planner-tooltip .tooltipster-content .tooltip-name { display: inline-block; } .planner-tooltip .tooltipster-content .tooltip-jobtype { display: inline-block; font-weight: bold; } .planner-tooltip .tooltipster-content .tooltip-name + .tooltip-jobtype { margin-left: 4px; } .planner-tooltip .tooltipster-content .tooltip-name + .tooltip-jobtype:before { content: '-'; padding: 0 4px 0 0; } .planner-tooltip .tooltipster-content .tooltip-name + .tooltip-jobtype:empty { margin-left: 0; } .planner-tooltip .tooltipster-content .tooltip-name + .tooltip-jobtype:empty:before { display: none; } .planner-tooltip .tooltipster-content .tooltip-project { color: #fff; } .planner-tooltip .tooltipster-content .tooltip-aclink { margin-top: 2px; } .planner-tooltip .tooltipster-content .tooltip-aclink a { position: relative; display: inline-block; color: #fff; padding-left: 10px; } .planner-tooltip .tooltipster-content .tooltip-aclink a:before { content: ''; display: block; position: absolute; top: 50%; margin-top: -4px; left: 0; width: 6px; height: 8px; background-image: url('../images/distribution/icons/basic-arrow--white--right.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; } .planner-tooltip .tooltipster-content .tooltip-aclink a:hover, .planner-tooltip .tooltipster-content .tooltip-aclink a:focus { color: #fff; text-decoration: underline; } /** -------------------------------------------------- * * components - planner - DIALOGS * * TABLE OF CONTENTS * create/edit dialog * events dialog * delete event dialog * * -------------------------------------------------- */ /** -------------------------------------------------- #create/edit dialog -------------------------------------------------- */ .ui-dialog-createedit { position: fixed; } .planner-dialog__inner { padding: 20px; padding-top: 0; } .planner-dialog-container { overflow: hidden; } .planner-dialog__row { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin: 0 -10px; margin-bottom: 5px; } .planner-dialog__block { -ms-flex: 1 1 50%; flex: 1 1 50%; width: 50%; } .planner-dialog__block__inner { padding: 0 10px; position: relative; } .planner-dialog__form__label { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-align: right; width: 65px; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 10px; left: 0; text-transform: lowercase; } .planner-dialog__form__input-zone { margin-left: 75px; } /* jobtype / hours */ /* *************** */ .planner-block-create-dialog-jobtype { -ms-flex-preferred-size: 60%; flex-basis: 60%; width: 60%; } .planner-block-create-dialog-hours { -ms-flex-preferred-size: 40%; flex-basis: 40%; width: 40%; } /* status - color inputs */ /* ********************* */ .planner-dialog__form__input-zone--colours { padding: 5px 0; text-align: left; } .planner-dialog__form__input-zone--colour-item { display: inline-block; margin: 4px 4px /* & .custom-color-radiobutton */ } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton { display: block; position: relative; margin: 0;/* & label *//* colour variations *//* ----------------- */ } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input { -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background: transparent; border: none; margin: 0; padding: 0; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton label { position: relative; display: block; text-indent: -99999px; cursor: pointer; width: 18px; height: 18px; border: 2px solid #939598; border-radius: 50%; background-color: #fff; transition: border-color 0.2s ease; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton label:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 14px; height: 14px; background: rgba(147,149,152, 0.5); border: 2px solid #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; border-radius: 50%; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; -ms-transform: scale(0.7); transform: scale(0.7); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:hover + label, .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:focus + label { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:hover + label:before, .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:focus + label:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton label:hover { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton label:hover:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:checked + label { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton input:checked + label:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); background-color: #5745ca; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#214EBF'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#214EBF'] label { border-color: #214EBF; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#214EBF'] label:before { background: rgba(33,78,191, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#214EBF'] input:checked + label:before { background-color: #214EBF; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#01CBC9'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#01CBC9'] label { border-color: #01CBC9; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#01CBC9'] label:before { background: rgba(1,203,201, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#01CBC9'] input:checked + label:before { background-color: #01CBC9; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#E71A4B'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#E71A4B'] label { border-color: #E71A4B; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#E71A4B'] label:before { background: rgba(231,26,75, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#E71A4B'] input:checked + label:before { background-color: #E71A4B; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F58231'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F58231'] label { border-color: #F58231; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F58231'] label:before { background: rgba(245,130,49, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F58231'] input:checked + label:before { background-color: #F58231; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#9926FF'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#9926FF'] label { border-color: #9926FF; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#9926FF'] label:before { background: rgba(153,38,255, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#9926FF'] input:checked + label:before { background-color: #9926FF; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#8C8C8C'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#8C8C8C'] label { border-color: #8C8C8C; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#8C8C8C'] label:before { background: rgba(140,140,140, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#8C8C8C'] input:checked + label:before { background-color: #8C8C8C; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F5C52C'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F5C52C'] label { border-color: #F5C52C; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F5C52C'] label:before { background: rgba(245,197,44, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#F5C52C'] input:checked + label:before { background-color: #F5C52C; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#6ECC00'] { } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#6ECC00'] label { border-color: #6ECC00; } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#6ECC00'] label:before { background: rgba(110,204,0, 0.5); } .planner-dialog__form__input-zone--colour-item .custom-color-radiobutton[data-colour='#6ECC00'] input:checked + label:before { background-color: #6ECC00; } /* .planner-dialog__form__input-zone--colour-item */ /* status - disabled */ /* ***************** */ .planner-dialog__form__input-zone--colours input[disabled] + label { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; cursor: default; } /* note */ /* **** */ .planner-block-create-dialog-note { } .planner-block-create-dialog-note textarea { min-height: 36px; height: 36px; resize: vertical; } /* .planner-block-create-dialog-note */ /* status - ready */ /* ************** */ .planner-block-create-dialog-done { /* & .planner-dialog__form__input-zone */ } .planner-block-create-dialog-done .planner-dialog__form__input-zone { padding: 9px 0; } .planner-block-create-dialog-done .planner-dialog__form__input-zone .planner-dialog__form__input-zone__inner { position: relative; } .planner-block-create-dialog-done .planner-dialog__form__input-zone .planner-dialog__form__input-zone__inner:after { content: ''; display: block; clear: both; } .planner-block-create-dialog-done .planner-dialog__form__input-zone input { -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background: transparent; border: none; margin: 0; padding: 0; } .planner-block-create-dialog-done .planner-dialog__form__input-zone label { display: block; text-indent: -99999px; width: 18px; height: 18px; background-color: transparent; border: 2px solid #939598; border-radius: 50%; cursor: pointer; float: left;/* -> because we want to be able to put the creator-text next to this */ } .planner-block-create-dialog-done .planner-dialog__form__input-zone label:before { content: ''; display: block; width: 18px; height: 18px; position: absolute; z-index: 1; top: 0; left: 0; border-radius: 50%; background-color: rgba(157,204,203, 0.4); background-size: 12px 10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, background-color 0.2s ease, background-image 0.2s ease; } .planner-block-create-dialog-done .planner-dialog__form__input-zone input:hover + label, .planner-block-create-dialog-done .planner-dialog__form__input-zone input:focus + label { } .planner-block-create-dialog-done .planner-dialog__form__input-zone input:hover + label:before, .planner-block-create-dialog-done .planner-dialog__form__input-zone input:focus + label:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } .planner-block-create-dialog-done .planner-dialog__form__input-zone label:hover { } .planner-block-create-dialog-done .planner-dialog__form__input-zone label:hover:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } .planner-block-create-dialog-done .planner-dialog__form__input-zone input:checked + label { border-color: transparent; } .planner-block-create-dialog-done .planner-dialog__form__input-zone input:checked + label:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; background-color: #9DCCCB; background-image: url('../images/distribution/icons/input-checkbox--white.svg'); background-repeat: no-repeat; background-position: center center; } /* .planner-block-create-dialog-done */ /* creator label */ /* ************* */ .planner-dialog__creator-label { margin-left: 25px; text-align: right; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: 200; color: #939598; } /* .planner-dialog__creator-label */ /* actions container */ /* ***************** */ .planner-actions-container { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; } .planner-actions-container__primary { text-align: right; } /* .planner-actions-container__primary */ .planner-actions-container__secondary { -ms-flex-order: -1; order: -1; text-align: left } .planner-actions-container__secondary .planner-actions-container__item { display: inline-block; margin-right: 5px; } /* .planner-actions-container__secondary */ .planner-actions-container__item { /* save + add button */ /* ----------------- */ /* duplicate / delete */ /* ------------------ */ } .planner-actions-container__item.planner-block-create-dialog-save { } .planner-actions-container__item.planner-block-create-dialog-save button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; padding: 8px 45px 10px 20px; } .planner-actions-container__item.planner-block-create-dialog-save button:hover, .planner-actions-container__item.planner-block-create-dialog-save button:focus { background-color: #86dfbd; border-color: #86dfbd; } .planner-actions-container__item.planner-block-create-dialog-save button:after { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -9px; right: 20px; background-image: url('../images/distribution/icons/button-save-floppy--white.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .planner-actions-container__item.planner-block-create-dialog-save button:hover, .planner-actions-container__item.planner-block-create-dialog-save button:focus { } .planner-actions-container__item.planner-block-create-dialog-save button:hover:after, .planner-actions-container__item.planner-block-create-dialog-save button:focus:after { background-image: url('../images/distribution/icons/button-save-floppy--blue.svg'); } .planner-actions-container__item.planner-block-create-dialog-add { } .planner-actions-container__item.planner-block-create-dialog-add button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; padding: 8px 45px 10px 20px; } .planner-actions-container__item.planner-block-create-dialog-add button:hover, .planner-actions-container__item.planner-block-create-dialog-add button:focus { background-color: #86dfbd; border-color: #86dfbd; } .planner-actions-container__item.planner-block-create-dialog-add button:after { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -9px; right: 20px; background-image: url('../images/distribution/icons/button-save-floppy--white.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .planner-actions-container__item.planner-block-create-dialog-add button:hover, .planner-actions-container__item.planner-block-create-dialog-add button:focus { } .planner-actions-container__item.planner-block-create-dialog-add button:hover:after, .planner-actions-container__item.planner-block-create-dialog-add button:focus:after { background-image: url('../images/distribution/icons/button-save-floppy--blue.svg'); } .planner-actions-container__item.planner-block-create-dialog-duplicate { } .planner-actions-container__item.planner-block-create-dialog-duplicate button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; border: 2px solid #e776a2; color: #e776a2; background-color: #fff; } .planner-actions-container__item.planner-block-create-dialog-duplicate button:hover, .planner-actions-container__item.planner-block-create-dialog-duplicate button:focus { background-color: #86dfbd; border-color: #86dfbd; } .planner-actions-container__item.planner-block-create-dialog-duplicate button:hover, .planner-actions-container__item.planner-block-create-dialog-duplicate button:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } .planner-actions-container__item.planner-block-create-dialog-delete { } .planner-actions-container__item.planner-block-create-dialog-delete button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: transparent; color: #214ebf; text-decoration: underline; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; padding: 8px 20px 10px 20px; transition: color 0.2s ease; border: 2px solid transparent; color: #e45959; padding: 8px 10px 10px 10px; } .planner-actions-container__item.planner-block-create-dialog-delete button:hover, .planner-actions-container__item.planner-block-create-dialog-delete button:focus { background: transparent; color: #000; text-decoration: none; } .planner-actions-container__item.planner-block-create-dialog-delete button:hover, .planner-actions-container__item.planner-block-create-dialog-delete button:focus { color: #000; } /* .planner-actions-container__item */ /** -------------------------------------------------- #events dialog -------------------------------------------------- */ .ui-dialog.ui-widget.ui-widget-content.ui-dialog-planner-events { background: transparent; box-shadow: none } .ui-dialog.ui-widget.ui-widget-content.ui-dialog-planner-events .ui-dialog-content { overflow: visible; } .ui-dialog.ui-widget.ui-widget-content.ui-dialog-planner-events .ui-dialog-titlebar { background: transparent; } .ui-dialog.ui-widget.ui-widget-content.ui-dialog-planner-events .ui-dialog-titlebar .ui-dialog-titlebar-close { background-color: #f7f7f7; box-shadow: 0 0 3px 0 rgba(14, 11, 11, .25); } /* .ui-dialog.ui-widget.ui-widget-content.ui-dialog-planner-events */ .events-dialog { } .events-dialog__inner { background: #fff; box-shadow: 0 2px 4px 0 rgba(14,11,11, 0.5); } /* events table */ /* ************ */ .events-dialog__events-table { table-layout: fixed /* & tr */ /* & td */ /* & .events-dialog__events-table__actions */ /* & .events-dialog__events-table__duration */ } .events-dialog__events-table tr { border-top: 2px solid #F9F9FB; } .events-dialog__events-table tr:first-child { border-top: 0; } .events-dialog__events-table tr:nth-child(odd) { background-color: #F7F7F7; } .events-dialog__events-table td { font-size: 14px; font-size: 1.4rem; line-height: 1.2; border-left: 0; } .events-dialog__events-table .events-dialog__events-table__time { width: 112px; font-weight: bold; vertical-align: top; } .events-dialog__events-table .events-dialog__events-table__info { vertical-align: top; } .events-dialog__events-table .events-dialog__events-table__info__eventname { font-weight: bold; margin-bottom: 4px; } .events-dialog__events-table .events-dialog__events-table__info__organizer { color: #8c8c8c; overflow: hidden; text-overflow: ellipsis; } .events-dialog__events-table .events-dialog__events-table__actions { width: 24px; padding: 0;/* & .planner-event-delete */ } .events-dialog__events-table .events-dialog__events-table__actions .planner-event-delete { display: block; text-indent: -99999px; border: 0; background: transparent; cursor: pointer; width: 24px; height: 24px; background-image: url('../images/distribution/icons/delete-bin--red.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .events-dialog__events-table .events-dialog__events-table__duration { width: 40px; position: relative; } .events-dialog__events-table .events-dialog__events-table__duration .planner-event-duration { position: absolute; top: 50%; margin-top: -10px; right: -8px; min-width: 34px; height: 20px; padding: 0 1px; border: 2px solid #5745ca; color: #5745ca; background: #fff; font-size: 14px; font-size: 1.4rem; line-height: 16px; text-align: center; } /* .events-dialog__events-table */ /** -------------------------------------------------- #delete event dialog -------------------------------------------------- */ .ui-dialog.ui-widget.ui-widget-content.ui-dialog-delete-event { position: fixed; } /* .ui-dialog.ui-widget.ui-widget-content.ui-dialog-delete-event */ .delete-dialog { } .delete-dialog__inner { text-align: center; padding: 0 10px 10px; } .delete-dialog__message { font-size: 14px; font-size: 1.4rem; line-height: 1.4; font-weight: bold; } .delete-dialog__message__recurring-event-text { font-weight: normal; } .delete-dialog__actions { margin: 30px 0 20px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: center; justify-content: center; } .delete-dialog-action { display: block; margin: 0 3px; } .delete-dialog-action--no { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #5745ca; color: #fff; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; padding: 8px 20px 10px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #5745ca; background: #e71a4b; border-color: #e71a4b; padding: 8px 45px 10px 20px; } .delete-dialog-action--no:hover, .delete-dialog-action--no:focus { background: #fff; color: #214ebf; } .delete-dialog-action--no:after { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -9px; right: 20px; background-image: url('../images/distribution/icons/button-icon-no.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .delete-dialog-action--no:hover, .delete-dialog-action--no:focus { color: #e71a4b; } .delete-dialog-action--no:hover:after, .delete-dialog-action--no:focus:after { background-image: url('../images/distribution/icons/button-icon-no--red.svg'); } .delete-dialog-action--yes { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #5745ca; color: #fff; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; padding: 8px 20px 10px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #5745ca; background: #a1d90a; border-color: #a1d90a; padding: 8px 45px 10px 20px; } .delete-dialog-action--yes:hover, .delete-dialog-action--yes:focus { background: #fff; color: #214ebf; } .delete-dialog-action--yes:after { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -9px; right: 20px; background-image: url('../images/distribution/icons/button-icon-yes.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .delete-dialog-action--yes:hover, .delete-dialog-action--yes:focus { color: #a1d90a; } .delete-dialog-action--yes:hover:after, .delete-dialog-action--yes:focus:after { background-image: url('../images/distribution/icons/button-icon-yes--green.svg'); } .delete-dialog-action--all { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #5745ca; color: #fff; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; padding: 8px 20px 10px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #5745ca; background: #a1d90a; border-color: #a1d90a; padding: 8px 45px 10px 20px; color: #000; background: #fff; border-color: #000; } .delete-dialog-action--all:hover, .delete-dialog-action--all:focus { background: #fff; color: #214ebf; } .delete-dialog-action--all:after { content: ''; display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -9px; right: 20px; background-image: url('../images/distribution/icons/button-icon-yes.svg'); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; } .delete-dialog-action--all:hover, .delete-dialog-action--all:focus { color: #a1d90a; } .delete-dialog-action--all:hover:after, .delete-dialog-action--all:focus:after { background-image: url('../images/distribution/icons/button-icon-yes--green.svg'); } .delete-dialog-action--all:after { background-image: url('../images/distribution/icons/button-icon-yes--black.svg'); } .delete-dialog-action--all:hover, .delete-dialog-action--all:focus { background-color: #000; color: #fff; } .delete-dialog-action--all:hover:after, .delete-dialog-action--all:focus:after { background-image: url('../images/distribution/icons/button-icon-yes.svg'); } /* evaluation */ /** -------------------------------------------------- * * components - evaluations - MODAL * * TABLE OF CONTENTS * general * page title * navigation block * * -------------------------------------------------- */ /** -------------------------------------------------- #Modal general -------------------------------------------------- */ body.evaluation .ui-dialog.ui-widget.ui-widget-content { box-shadow: 0px 10px 30px rgba(0,0,0, 0.3) } body.evaluation .ui-dialog.ui-widget.ui-widget-content .ui-dialog-content { padding: 0px 30px 30px 30px; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .plan-dialog__message { margin-bottom: 20px; font-size: 18px; font-size: 1.8rem; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .plan-dialog__message p { font-weight: 300; line-height: 1.5em; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .sidebar-extended-search-form__row--filter { position: relative; margin: 0px -30px 0px -30px; padding: 20px 30px 20px 30px; background: #f7f7f7; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .sidebar-extended-search-form__row--filter .sidebar-extended-search-form__filter-label-container { display: none; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .sidebar-extended-search-form__row--filter .sidebar-extended-search-form__filter-input-block { margin: 0px; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .sidebar-extended-search-form__row--actions { margin-top: 40px; } body.evaluation .ui-dialog.ui-widget.ui-widget-content .sidebar-extended-search-form__row--actions button#evaluation_pop_review_plan_no { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; cursor: default; overflow: hidden; padding: 8px 20px 10px 20px; border: 0px; border-radius: 37px; background: #939598; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; color: #fff; } /** -------------------------------------------------- * * components - evaluations - FORMS * * TABLE OF CONTENTS * 360 & POP question form * * -------------------------------------------------- */ /** -------------------------------------------------- #360 & POP question form -------------------------------------------------- */ .evaluation-360-form-errors { background: #b0413e; color: white; padding: 8px; padding-left: 50px; text-align: center; margin: 0 -30px; } .evaluation-360-review-page-inner-content { max-width: 800px; margin: auto; padding: 0px 30px 0px 30px; border: 3px solid #ededed; box-shadow: 0px 20px 70px rgba(0,0,0, 0.05) /* & .top */ /* error message */ /* Submit */ } .evaluation-360-review-page-inner-content .top { padding: 30px 0px 30px 0px; } .evaluation-360-review-page-inner-content .top h2 { margin-bottom: 20px; } .evaluation-360-review-page-inner-content .subtitle { padding: 30px 0px 30px 0px; } .evaluation-360-review-page-inner-content .top + .subtitle { position: relative; margin-top: -20px; padding-top: 0px; } .evaluation-360-review-page-inner-content .fullwidth--bg { position: relative; margin: 0px -30px 0px -30px; border-top: 2px solid #ededed; background: #f7f7f7; } .evaluation-360-review-page-inner-content .feedback-items .feedback-item:last-child { border-bottom: 0px; } .evaluation-360-review-page-inner-content .evaluation-item { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; padding: 20px 30px 20px 30px; border-bottom: 2px solid #ededed; } .evaluation-360-review-page-inner-content .evaluation-item label { display: block; margin-bottom: 5px; } .evaluation-360-review-page-inner-content .evaluation-item p { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } .evaluation-360-review-page-inner-content .evaluation-item .left { -ms-flex: 1 1 65%; flex: 1 1 65%; width: 65%; text-align: left; } @media (max-width: 1300px) { .evaluation-360-review-page-inner-content .evaluation-item .left { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; } } .evaluation-360-review-page-inner-content .evaluation-item .left__inner { padding-right: 10%; } @media (max-width: 1300px) { .evaluation-360-review-page-inner-content .evaluation-item .left__inner { padding-right: 0; } } .evaluation-360-review-page-inner-content .evaluation-item .right { -ms-flex: 1 1 35%; flex: 1 1 35%; width: 35%; text-align: right; } @media (max-width: 1300px) { .evaluation-360-review-page-inner-content .evaluation-item .right { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; text-align: left; margin-top: 10px; } } .evaluation-360-review-page-inner-content .evaluation-item .right > div { display: inline-block; } .evaluation-360-review-page-inner-content .feedback-item { position: relative; } .evaluation-360-review-page-inner-content .feedback-item__number { font-size: 18px; font-size: 1.8rem; line-height: 1.2; font-weight: normal; position: absolute; top: 18px; left: 20px; } .evaluation-360-review-page-inner-content .feedback-item input { height: auto; padding: 20px 30px 20px 50px; border-bottom: 2px solid #ededed; background: #f7f7f7; text-align: left; transition: box-shadow 0.15s ease-out; } .evaluation-360-review-page-inner-content .feedback-item input:focus { border-color: #ededed; box-shadow: inset 3px 0px 0 0px #2d2c2b; } .evaluation-360-review-page-inner-content .feedback-item textarea { height: auto; min-height: 160px; padding: 20px 30px 20px 50px; border-bottom: 2px solid #ededed; background: #fff; text-align: left; transition: box-shadow 0.15s ease-out; } .evaluation-360-review-page-inner-content .feedback-item textarea:focus { border-color: #ededed; box-shadow: inset 3px 0px 0 0px #2d2c2b; } .evaluation-360-review-page-inner-content .feedback-item ul { list-style: none; background: #b0413e; color: white; padding: 8px; padding-left: 50px; text-align: left; } .evaluation-360-review-page-inner-content .feedback-item-action { margin: 0; } .evaluation-360-review-page-inner-content .evaluation-item-action { margin: 0px -30px 0px -30px; } .evaluation-360-review-page-inner-content .feedback-item-action, .evaluation-360-review-page-inner-content .evaluation-item-action { position: relative; border: 0; } .evaluation-360-review-page-inner-content .feedback-item-action button, .evaluation-360-review-page-inner-content .evaluation-item-action button { width: 100%; padding: 20px 30px 20px 30px; border: 0px; background: #5745ca; color: #fff; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-weight: bold; cursor: pointer; transition: all 0.3s; } .evaluation-360-review-page-inner-content .feedback-item-action button:hover, .evaluation-360-review-page-inner-content .feedback-item-action button:focus, .evaluation-360-review-page-inner-content .evaluation-item-action button:hover, .evaluation-360-review-page-inner-content .evaluation-item-action button:focus { box-shadow: 0px 10px 40px rgba(87,69,202, 0.3); } .evaluation-pop-review-page-inner-content { max-width: 95%; margin: auto; padding: 0px 30px 0px 30px; border: 3px solid #ededed; box-shadow: 0px 20px 70px rgba(0,0,0, 0.05) /* error message */ /* Submit */ } .evaluation-pop-review-page-inner-content .top { padding: 30px 0px 30px 0px; } .evaluation-pop-review-page-inner-content .top h2 { margin-bottom: 20px; } .evaluation-pop-review-page-inner-content .evaluation-feedback .top { text-align: left; } .evaluation-pop-review-page-inner-content .evaluation-feedback .top h3 { font-size: 38px; font-size: 3.8rem; } .evaluation-pop-review-page-inner-content .subtitle { margin-right: -30px; margin-left: -30px; padding: 15px 30px; background-color: #214ebf; color: #fff; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 24px; font-size: 2.4rem; font-weight: bold; text-align: left; } .evaluation-pop-review-page-inner-content .feedback-items .subtitle { margin-right: 0; margin-left: 0; } .evaluation-pop-review-page-inner-content .top + .subtitle { position: relative; margin-top: -20px; padding-top: 0px; } .evaluation-pop-review-page-inner-content .fullwidth--bg { position: relative; margin: 0px -30px 0px -30px; border-top: 2px solid #ededed; background: #f7f7f7; } .evaluation-pop-review-page-inner-content .feedback-items .feedback-item:last-child { border-bottom: 0px; } .evaluation-pop-review-page-inner-content .evaluation-item { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; padding: 20px 30px 20px 30px; border-bottom: 2px solid #ededed; } .evaluation-pop-review-page-inner-content .evaluation-item label { display: block; margin-bottom: 5px; } .evaluation-pop-review-page-inner-content .evaluation-item p { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } .evaluation-pop-review-page-inner-content .evaluation-item .left { -ms-flex: 1 1 55%; flex: 1 1 55%; width: 55%; text-align: left; } @media (max-width: 1300px) { .evaluation-pop-review-page-inner-content .evaluation-item .left { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; } } .evaluation-pop-review-page-inner-content .evaluation-item .left__inner { padding-right: 10%; } @media (max-width: 1300px) { .evaluation-pop-review-page-inner-content .evaluation-item .left__inner { padding-right: 0; } } .evaluation-pop-review-page-inner-content .evaluation-item .right { -ms-flex: 1 1 45%; flex: 1 1 45%; width: 45%; text-align: right; } @media (max-width: 1300px) { .evaluation-pop-review-page-inner-content .evaluation-item .right { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; text-align: left; margin-top: 10px; } } .evaluation-pop-review-page-inner-content .evaluation-item .right > div { display: inline-block; } .evaluation-pop-review-page-inner-content .feedback-item { position: relative; } .evaluation-pop-review-page-inner-content .feedback-item__number { font-size: 18px; font-size: 1.8rem; line-height: 1.2; font-weight: normal; position: absolute; top: 18px; left: 20px; } .evaluation-pop-review-page-inner-content .feedback-item input { height: auto; padding: 20px 30px 20px 50px; border-bottom: 2px solid #ededed; background: #f7f7f7; text-align: left; transition: box-shadow 0.15s ease-out; } .evaluation-pop-review-page-inner-content .feedback-item input:focus { border-color: #ededed; box-shadow: inset 3px 0px 0 0px #2d2c2b; } .evaluation-pop-review-page-inner-content .feedback-item textarea { height: auto; min-height: 160px; padding: 20px 30px 20px 50px; border-bottom: 2px solid #ededed; background: #fff; text-align: left; transition: box-shadow 0.15s ease-out; } .evaluation-pop-review-page-inner-content .feedback-item textarea:focus { border-color: #ededed; box-shadow: inset 3px 0px 0 0px #2d2c2b; } .evaluation-pop-review-page-inner-content .feedback-item ul { list-style: none; background: #b0413e; color: white; padding: 8px; padding-left: 50px; text-align: left; } .evaluation-pop-review-page-inner-content .feedback-item-action { margin: 0; } .evaluation-pop-review-page-inner-content .evaluation-item-action { margin: 0px -30px 0px -30px; } .evaluation-pop-review-page-inner-content .feedback-item-action, .evaluation-pop-review-page-inner-content .evaluation-item-action { position: relative; border: 0; } .evaluation-pop-review-page-inner-content .feedback-item-action button, .evaluation-pop-review-page-inner-content .evaluation-item-action button { width: 100%; padding: 20px 30px 20px 30px; border: 0px; background: #5745ca; color: #fff; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-weight: bold; cursor: pointer; transition: all 0.3s; } .evaluation-pop-review-page-inner-content .feedback-item-action button:hover, .evaluation-pop-review-page-inner-content .feedback-item-action button:focus, .evaluation-pop-review-page-inner-content .evaluation-item-action button:hover, .evaluation-pop-review-page-inner-content .evaluation-item-action button:focus { box-shadow: 0px 10px 40px rgba(87,69,202, 0.3); } /** -------------------------------------------------- * * components - evaluations - FORM ELEMENTS * * TABLE OF CONTENTS * radio buttons * * -------------------------------------------------- */ /** -------------------------------------------------- #radio buttons -------------------------------------------------- */ .evaluation-form-item { position: relative; margin: 0 3px /* & input[type="radio"] */ /* & input[type="radio"] + label */ /* & input[type="radio"]:checked + label */ } .evaluation-form-item input[type="radio"] { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 60px; } .evaluation-form-item input[type="radio"]:hover, .evaluation-form-item input[type="radio"]:focus { } .evaluation-form-item input[type="radio"]:hover + label:after, .evaluation-form-item input[type="radio"]:focus + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .evaluation-form-item input[type="radio"] + label { position: relative; display: block; min-width: 30px; padding: 18px 5px 18px 5px; height: 60px; border-radius: 20px; background: #fff; text-align: center; color: #939598; font-weight: 400; cursor: pointer; } .evaluation-form-item input[type="radio"] + label:after { content: ''; display: block; width: 100%; height: 100%; border: 2px solid #5745ca; border-radius: 20px; position: absolute; top: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: opacity 0.05s ease; } .evaluation-form-item input[type="radio"] + label:hover:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .evaluation-form-item input[type="radio"]:checked + label { z-index: 50; background: #5745ca; color: #fff; font-weight: bold; } /* .evaluation-form-item */ /** -------------------------------------------------- * * components - evaluations - RESULTS * * TABLE OF CONTENTS * general * value result blocks * text result blocks * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .evaluation-result-block { max-width: 800px; margin: 0 auto; border: 3px solid #ededed; box-shadow: 0px 20px 70px rgba(0,0,0, 0.05); } /** -------------------------------------------------- #value result blocks -------------------------------------------------- */ .evaluation-result-block__item { background: #f7f7f7; padding: 20px 30px 20px 30px; border-bottom: 2px solid #ededed; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; } /* description block */ /* ***************** */ .evaluation-result-block__item__info { -ms-flex: 1 1 65%; flex: 1 1 65%; } .evaluation-result-block__item__title { font-weight: normal; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } .evaluation-result-block__item__description { margin-top: 5px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /* score block */ /* *********** */ .evaluation-result-block__item__score { -ms-flex: 1 1 35%; flex: 1 1 35%; text-align: right; } .evaluation-result-block__item__score__value { font-size: 24px; font-size: 2.4rem; line-height: 1.2; color: #5745ca; font-weight: bold; } .evaluation-result-block__item__score__value__scale { font-size: 20px; font-size: 2.0rem; } /** -------------------------------------------------- #text result blocks -------------------------------------------------- */ .evaluation-result-block__text-item { background: #f7f7f7; padding: 20px 30px 20px 30px; border-bottom: 2px solid #ededed; } .evaluation-result-block__item__list { margin: 5px 0 0 20px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; color: #5745ca; } .evaluation-result-block__item__no-result { margin-top: 5px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; font-style: italic; color: #5745ca; } /* layout */ /* ****** */ /** -------------------------------------------------- * * GLOBAL * * TABLE OF CONTENTS * resets * html & body * typography * * -------------------------------------------------- */ /* -------------------------------------------------- #resets -------------------------------------------------- */ body, div, section, article, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, figure, figcaption, p, blockquote, th, td { margin: 0; padding: 0; } /* -------------------------------------------------- #html & body -------------------------------------------------- */ html { font-size: 62.5%; /* prevent the scrollbar from overlapping the content on IE: */ -ms-overflow-style: scrollbar; } body { font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; color: #000; overflow-x: hidden; } #wrapper { overflow-x: hidden; /* -> because we might use viewport-widths */ } /* -------------------------------------------------- #typography -------------------------------------------------- */ /* links */ /* ***** */ a { text-decoration: none; color: inherit; } a:hover, a:focus { color: rgb(75, 56, 199); } /* headers */ /* ******* */ h1, h2, h3, h4, h5, h6 { font-family: "Urbanist", "Gilroy", "Muli", Arial, Helvetica, sans-serif; font-weight: bold; word-wrap: break-word; line-height: 1.2; } h1 { font-size: 48px; font-size: 4.8rem; display: block; width: 100%; text-align: center } @media (max-width: 568px) { h1 { font-size: 3.2rem; } } h2 { font-size: 38px; font-size: 3.8rem } @media (max-width: 568px) { h2 { font-size: 2.4rem; } } h3 { font-size: 24px; font-size: 2.4rem; } h4 { font-size: 20px; font-size: 2rem; } h5 { font-size: 14px; font-size: 1.4rem; } h6 { font-size: 12px; font-size: 1.2rem; } table { border-collapse: collapse; border: none } table tbody table tr { border: none; } table th, table td { padding: 5px 5px 5px 5px; border: none; border-left: 1px solid #F9F9FB; font-size: 14px; font-size: 1.4rem; line-height: 1.2; text-align: left; } table th:first-child, table td:first-child { border-left: none; } table th { text-align: left; border-bottom: 1px solid #F9F9FB; font-family: "Muli", Arial, Helvetica, sans-serif; text-transform: uppercase; } /* table */ .hidden { display: none; } /* -------------------------------------------------- #text content -------------------------------------------------- */ .text-content { font-size: 14px; font-size: 1.4rem; line-height: 1.28; /* paragraphs */ /* ********** */ /* headings */ /* ******** */ /** link inside heading: **/ /* font sizes */ /* hyperlinks */ /* ********** */ /* a */ /* tables */ /* ****** */ /* lists */ /* ***** */ /* & .fancy-list */ /* quotes */ /* ****** */ /* hr - break */ /* ********** */ } .text-content p { margin-bottom: 1em; } .text-content p:last-child { margin-bottom: 0; } .text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6 { color: #5745ca; font-weight: bold; margin-bottom: 0.5em; } .text-content h1:last-child, .text-content h2:last-child, .text-content h3:last-child, .text-content h4:last-child, .text-content h5:last-child, .text-content h6:last-child { margin-bottom: 0; } .text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6 { } .text-content h1 a, .text-content h2 a, .text-content h3 a, .text-content h4 a, .text-content h5 a, .text-content h6 a { text-decoration: none; } .text-content h1 { font-size: 30px; font-size: 3.0rem; } @media (max-width: 768px) { .text-content h1 { font-size: 3.25rem; } } .text-content h2 { font-size: 28px; font-size: 2.8rem; } @media (max-width: 768px) { .text-content h2 { font-size: 3.25rem; } } .text-content h3 { font-size: 24px; font-size: 2.4rem; } @media (max-width: 768px) { .text-content h3 { font-size: 2rem; } } .text-content h4 { font-size: 20px; font-size: 2rem; } @media (max-width: 768px) { .text-content h4 { font-size: 1.875rem; } } .text-content h5 { font-size: 17.5px; font-size: 1.75rem; } .text-content h6 { font-size: 12.5px; font-size: 1.25rem; } .text-content a { color: #5745ca; font-weight: inherit; text-decoration: none; word-wrap: break-word; word-break: break-word; } .text-content a:hover, .text-content a:focus { text-decoration: underline; } .text-content table { margin-bottom: 1em; border: none; color: inherit;/* prevent inline table width: */ width: 100% !important; } .text-content table tr, .text-content table th, .text-content table thead, .text-content table tbody, .text-content table tfoot, .text-content table td { border: none; } .text-content table tr { border-bottom: 1px solid #F9F9FB; } .text-content table th, .text-content table td { padding: 0.75em 0.5em; } .text-content table th { font-weight: 700; text-align: left; background-color: #ededed; } .text-content table caption { text-align: center; font-size: 1em; } .text-content ul, .text-content ol { margin: 1em 0; margin-left: 1.5em; list-style: outside; } .text-content ul { list-style-type: disc; } .text-content ul ul { list-style-type: circle; } .text-content ol { list-style-type: decimal; } .text-content .fancy-list { position: relative; list-style-type: none; counter-reset: fancy-list; margin-left: 0;/* & li */ } .text-content .fancy-list li { position: relative; line-height: 1.6; padding-left: 28px; counter-increment: fancy-list; margin-bottom: 5px; } .text-content .fancy-list li:last-child { margin-bottom: 0; } .text-content .fancy-list li:before { content: counter(fancy-list); position: absolute; top: -1px; left: 0; width: 22px; color: #fff; font-weight: bold; text-align: center; line-height: 22px; } .text-content .fancy-list li:after { content: ''; background: #5745ca; border-radius: 50%; width: 22px; height: 22px; z-index: -1; position: absolute; top: 0; left: 0; } .text-content blockquote { position: relative; margin-bottom: 1em; } .text-content hr { width: 100%; margin: 1em auto; border: none; border-bottom: 1px solid #F9F9FB; } /* -------------------------------------------------- #colours -------------------------------------------------- */ .expected { color: #000; font-weight: bold; } .blue { color: #214ebf; } .green { color: #6ecc00; } .parallax-window { min-height: 400px; } .yellow svg rect, .yellow svg path { fill: #F7C61C !important; } .green svg rect, .green svg path { fill: #6ecc00 !important; } .grey svg rect, .grey svg path { fill: #D8D8D8 !important; } /** -------------------------------------------------- * * LOGIN PAGE * * TABLE OF CONTENTS * general * header * page content * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ body.login { position: relative; width: 100vw; height: 100vh; background-color: #fbfaf9 } @media screen and (min-height: 350px) { body.login { overflow: hidden; } } .login-wrapper { } #curator-feed { width: 800px; margin: auto; margin-bottom: 100px; position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); background: #F6F7FB; padding: 0 20px; } .login-content { position: relative; } .crt-tag { display: none !important; } .disabled .login-content__greeting { display: block !important; } /** -------------------------------------------------- #header -------------------------------------------------- */ .login-header { position: absolute; top: 62px; left: 62px; z-index: 10; width: 100% } @media screen and (max-width: 1070px) { .login-header { position: relative; top: auto; left: auto; margin-top: 50px; } } .login-header__inner { } /* logo */ /* **** */ .login-header__logo { } @media screen and (max-width: 1070px) { .login-header__logo { width: 209px; max-width: 100%; margin-left: auto; margin-right: auto; } } /** -------------------------------------------------- #page content -------------------------------------------------- */ .login-content { width: 100%; text-align: center; padding-top: 40px; } /* .login-content */ /* greetings */ /* ********* */ .login-content__greetings { max-width: 680px; margin: 0 auto; padding: 0 20px; } .login-content__greeting { /* hide - this gets shown via javascript: */ display: none; } .login-content__greeting__title { margin-bottom: 20px; color: #0a006f; font-size: 72px; font-size: 7.2rem; line-height: 1.2 } @media (max-width: 568px) { .login-content__greeting__title { font-size: 5.0rem; font-size: 10vw; } } /* .login-content__greeting__title */ .login-content__greeting__text { margin-bottom: 20px; color: #0a006f; font-size: 38px; font-size: 3.8rem; line-height: 1.2 } @media (max-width: 568px) { .login-content__greeting__text { font-size: 2.0rem; } } /* .login-content__greeting__text */ /* login button */ /* ************ */ .login-action-zone { padding-top: 25px; } .login-action-zone__login-button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; padding: 6px 37px 8px 20px; background-image: url('../images/distribution/bg-arrow--white.svg'); background-repeat: no-repeat; background-size: 13px 10px; background-position: center right 13px; transition: background 0.25s ease; padding: 6px 37px 8px 20px; border: 2px solid #e776a2; color: #fff; background-color: #e776a2 } .login-action-zone__login-button:hover, .login-action-zone__login-button:focus { background-color: #86dfbd; border-color: #86dfbd; } .login-action-zone__login-button:focus, .login-action-zone__login-button:hover { background-position: center right 11px; } .login-action-zone__login-button::after { display: none; } .login-action-zone__login-button:hover, .login-action-zone__login-button:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } /* login line decoration */ /* ********************* */ .login__line-decoration { position: absolute; z-index: -1; top: 30px; top: 3rem; right: 25px; right: 2.5rem; width: 3610px; width: 361rem; height: 1460px; height: 146rem; background-image: url('../images/distribution/bg__header-line--full.svg'); background-repeat: no-repeat; background-size: contain; background-position: top right; } /** -------------------------------------------------- * * SIDEBAR LAYOUT * * TABLE OF CONTENTS * layout * collapsible sidebar * * -------------------------------------------------- */ /** -------------------------------------------------- #layout -------------------------------------------------- */ .sidebar-layout { display: block; overflow: hidden; } .nascom { } .nascom .sidebar-quick-links { display: none; } .nascom .nascom-hide { display: none; } /* sidebar */ /* ******* */ .sidebar { width: 257px; position: fixed; z-index: 100; top: 0; left: 0; height: 100%; background: #fbfaf9 } .sidebar::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 0; background-image: url('../images/distribution/bg-oval.svg'); background-repeat: no-repeat; background-size: contain; background-position: top right; } .sidebar__inner { position: relative; z-index: 100; padding: 0 32px; } /* main content */ /* ************ */ .main-content { padding-left: 288px; } .main-content__inner { padding: 0 70px 0 85px } @media (max-width: 1300px) { .main-content__inner { padding: 0 35px 0 75px; } } /** -------------------------------------------------- #collapsible sidebar -------------------------------------------------- */ /* toggle button */ /* ************* */ .sidebar__toggle { position: absolute; z-index: 250; top: 0; right: 0; width: 50px; height: 50px; } .sidebar-layout--collapsible.js-collapsed .sidebar__toggle { height: 100%; } .sidebar__toggle__button { display: block; width: 100%; height: 100%; cursor: pointer; border: 0; background: transparent; } .sidebar__toggle__icon { display: block; text-indent: -99999px; width: 24px; height: 24px; position: absolute; top: 18px; left: 50%; margin-left: -12px; background-image: url('../images/distribution/icons/basic-arrow--dark--right.svg'); background-repeat: no-repeat; background-position: center center; background-size: 10px 16px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; opacity: 0.35; -ms-transform: scaleX(-1); transform: scaleX(-1); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .sidebar-layout--collapsible.js-collapsed .sidebar__toggle__icon { -ms-transform: scaleX(1); transform: scaleX(1); } .sidebar__toggle__button:hover, .sidebar__toggle__button:focus { } .sidebar__toggle__button:hover .sidebar__toggle__icon, .sidebar__toggle__button:focus .sidebar__toggle__icon { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } /* page layout */ /* *********** */ .sidebar-layout--collapsible { /* &.js-collapsed .sidebar */ } .sidebar-layout--collapsible .sidebar { transition: transform 0.4s ease-out; will-change: transform; } .sidebar-layout--collapsible .sidebar__inner { transition: opacity 0.3s ease; } .sidebar-layout--collapsible.js-collapsed .sidebar { -ms-transform: translateX(-208px); transform: translateX(-208px); } .sidebar-layout--collapsible.js-collapsed .sidebar .sidebar__inner { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } .sidebar-layout--collapsible .main-content { padding-left: 0; } .sidebar-layout--collapsible .main-content__inner { padding: 0 0 0 50px; } /* .sidebar-layout--collapsible */ /** -------------------------------------------------- * * AGENDA * * TABLE OF CONTENTS * general * agenda header * agenda content * loading * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ body.agenda { padding-bottom: 55px } body.agenda .ui-widget-content { z-index: 999; } .agenda-page-content { padding: 55px 0; } /** -------------------------------------------------- #agenda header -------------------------------------------------- */ .agenda-header { position: relative; z-index: 101; margin-bottom: 55px; } /* header actions */ /* ************** */ .agenda-header__actions { position: absolute; top: 18px; left: 0 } @media (max-width: 1300px) { .agenda-header__actions { display: none; } } .agenda-header-actionbutton { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; border: 2px solid #e776a2; color: #e776a2; background-color: #fff; padding: 7px 20px 9px 20px; text-transform: lowercase; } .agenda-header-actionbutton:hover, .agenda-header-actionbutton:focus { background-color: #86dfbd; border-color: #86dfbd; } .agenda-header-actionbutton:hover, .agenda-header-actionbutton:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } /* agenda navigation */ /* ***************** */ .agenda-navigation { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; } .agenda-navigation__label-zone { text-align: center; padding: 0 55px; min-width: 390px } @media (max-width: 980px) { .agenda-navigation__label-zone { min-width: 290px; } } /* .agenda-navigation__label-zone */ .agenda-navigation__label { font-size: 48px; font-size: 4.8rem; line-height: 1.2; font-weight: bold } @media (max-width: 980px) { .agenda-navigation__label { font-size: 3.2rem; } } /* .agenda-navigation__label */ .agenda-navigation__arrow-container { } .agenda-navigation__arrow-container--previous { -ms-flex-order: -1; order: -1; } .agenda-navigation-arrow { display: block; width: 48px; height: 48px; text-indent: -99999px; margin-top: 5px; background: transparent; border: none; cursor: pointer; background-image: url('../images/distribution/icons/agenda-arrow--previous.svg'); background-repeat: no-repeat; background-position: center center; background-size: 10px 16px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; opacity: 0.35; transition: opacity 0.2s ease-out } .agenda-navigation-arrow:hover, .agenda-navigation-arrow:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } /* .agenda-navigation-arrow */ .agenda-navigation-arrow--previous { } .agenda-navigation-arrow--next { -ms-transform: rotate(180deg); transform: rotate(180deg); } /* site navigation */ /* *************** */ .agenda-site-navigation-block { position: fixed; top: 73px; right: 70px; z-index: 300 } @media (max-width: 1300px) { .agenda-site-navigation-block { right: 35px; } } @media (max-width: 980px) { .agenda-site-navigation-block { display: none; } } /* .agenda-site-navigation-block */ /** -------------------------------------------------- #agenda content -------------------------------------------------- */ .agenda-wrapper { position: relative; height: auto; } .agenda-wrapper:after { content: ''; display: block; clear: both; } /* left - agenda blocks */ /* ******************** */ .agenda-blocks { position: relative; float: left; width: 48%; height: auto /* & .agenda-block-content-project */ /* & .agenda-block-content-task */ /* -> when block is 'done': */ } .agenda-blocks .agenda-hour { position: relative; width: 100%; border: 0; border-top: 2px solid #F9F9FB; } .agenda-blocks .agenda-block { position: absolute; width: 90%; left: 5%; margin-top: 1px; } .agenda-blocks .agenda-block-content { position: relative; float: left; width: 100%; height: 100%; padding: 3px 0; box-sizing: border-box; background-clip: content-box; background-color: #214EBF; } .agenda-blocks .agenda-block-content__text-content { color: #fff; } .agenda-blocks .agenda-block-content-name-jobtype { font-size: 13px; font-size: 1.3rem; line-height: 1.4; padding: 1px 18px 0 8px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-blocks .agenda-block-content-name { display: inline-block; margin-right: 4px; } .agenda-blocks .agenda-block-content-name:after { content: '-'; padding: 0 2px 0 4px; } .agenda-blocks .agenda-block-content-name.none { display: none; } .agenda-blocks .agenda-block-content-jobtype { display: inline-block; font-weight: bold; } .agenda-blocks .agenda-block-content-project { font-size: 12px; font-size: 1.2rem; line-height: 1.4; padding: 0 20px 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .agenda-blocks .agenda-block-content-project a { color: inherit; font-size: 12px; font-size: 1.2rem; line-height: 1px; display: inline; transition: all .3s; } .agenda-blocks .agenda-block-content-project a:hover, .agenda-blocks .agenda-block-content-project a:focus { text-decoration: underline; } .agenda-blocks .agenda-block-content-task { position: relative; margin-left: 8px; font-size: 11px; font-size: 1.1rem; line-height: 1.2; color: #fff; } .agenda-blocks .agenda-block-content-task a { font-size: 11px; font-size: 1.1rem; line-height: 1.2; padding: 0 20px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;/* &:before { content: ''; display: block; width: 10px; height: 10px; position: absolute; top: 50%; margin-top: -5px; left: 0; background-color: transparent; background-image: url('../images/distribution/icons/ac-logo-link.svg'); background-repeat: no-repeat; background-size: 10px 10px; } */ } .agenda-blocks .agenda-block-content-task a.none { display: none; } .agenda-blocks .agenda-block-content-task a:hover, .agenda-blocks .agenda-block-content-task a:focus { color: #fff; text-decoration: underline; } .agenda-blocks .agenda-block-content-hours { display: inline-block; position: absolute; right: -3px; bottom: 7px; border: 1px solid #fff; width: 40px; text-transform: center; text-align: center; color: #214ebf; background: #fff; border: 2px solid #214ebf; font-size: 12px; font-weight: bold; } .agenda-blocks .agenda-block.done { } .agenda-blocks .agenda-block.done .agenda-block-content__text-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; text-decoration: line-through; } /* .agenda-blocks */ /* center - agenda legend */ /* ********************** */ .agenda-legend { position: relative; float: left; width: 4%; height: auto; text-align: center; border: 0 } .agenda-legend .agenda-hour { border: 0px; } .agenda-legend .agenda-hour p { position: relative; top: -14px; color: #F9F9FB; } /* .agenda-legend */ /* right - events block */ /* ******************** */ .agenda-events { position: relative; float: left; width: 48%; height: auto; border: 0 /* & .agenda-event */ /* & .small-event */ /* & .full-day-event */ /* overlapping events: */ /* & .same-start */ } .agenda-events .agenda-hour { outline: 0; border: 0; border-top: 2px solid #F9F9FB; } .agenda-events .agenda-event { position: absolute; z-index: 2; width: 90%; left: 5%; margin-top: 1px; } .agenda-events .agenda-event-content { position: relative; float: left; width: 100%; height: 100%; padding: 3px 0; } .agenda-events .agenda-event-content__inner { height: 100%; background-color: #01CBC9; padding: 2px 8px 0 8px; margin: 0; color: #fff; border: 2px solid #03c5c3; } .agenda-events .agenda-event-content__inner:after { content: ''; display: block; clear: both; } .agenda-events .agenda-event__summary { float: left; max-width: calc(100% - 80px); font-size: 13px; font-size: 1.3rem; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-events .agenda-event__time { float: right; font-size: 11px; font-size: 1.1rem; line-height: 1.1; margin-top: 2px; } .agenda-events .small-event { } .agenda-events .small-event .agenda-event-content__inner { padding-top: 0; } .agenda-events .small-event .agenda-event__summary { font-size: 11px; font-size: 1.1rem; position: relative; top: -4px; } .agenda-events .small-event .agenda-event__time { margin-top: 0; position: relative; top: -4px; } .agenda-events .full-day-event { width: 100%; left: 0; right: 0; z-index: 1; margin-top: -35px; } .agenda-events .full-day-event .agenda-event-content__inner { background: rgba(68, 203, 201, .9); } .agenda-events .full-day-event .agenda-event-content__inner .agenda-event__summary { } .agenda-events .overlapping { } .agenda-events .overlapping-2 { padding: 0 2.5%; } .agenda-events .overlapping-3 { padding: 0 5%; } .agenda-events .overlapping-4 { padding: 0 7.5%; } .agenda-events .overlapping-5 { padding: 0 10%; } .agenda-events .overlapping-6 { padding: 0 12.5%; } .agenda-events .overlapping-5 { padding: 0 15%; } .agenda-events .overlapping-6 { padding: 0 17.5%; } .agenda-events .overlapping-7 { padding: 0 20%; } .agenda-events .same-start { width: 70%; } .agenda-events .same-start .agenda-event-content { transition: transform 0.2s ease; } .agenda-events .same-start:hover { z-index: 5; } .agenda-events .same-start:hover .agenda-event-content { -ms-transform: translateY(-20px); transform: translateY(-20px); } /* .agenda-events */ /* time line */ /* ********* */ .agenda-time-line { position: absolute; height: 2px; width: 48%; right: 0; background-color: #E71A4B; z-index: 100; pointer-events: none } .agenda-time-line:before { content: ''; display: block; position: absolute; width: 100%; height: 700px; bottom: 2px; right: 0; background: rgba(255, 255, 255, .5); } /* .agenda-time-line */ /** -------------------------------------------------- #loading -------------------------------------------------- */ .agenda-legend, .agenda-blocks, .agenda-events { transition: opacity 0.07s ease-in; } .blocks-loading { } .blocks-loading .agenda-blocks, .blocks-loading .agenda-legend { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; opacity: 0.4; } .events-loading { } .events-loading .agenda-events, .events-loading .agenda-legend { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; opacity: 0.4; } /** -------------------------------------------------- * * PLANNER * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .nascom { } .nascom .planner-top-legend__sprint { display: none; } body.planner { } body.planner .sidebar { z-index: 999 !important; } .planner-wrapper { padding: 0; } .main__nav--responsive--visible body.planner { } .main__nav--responsive--visible body.planner .sidebar { z-index: 20 !important; } /** -------------------------------------------------- * * PLANNER FULLNESS * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ #planner-content { } #planner-content h1 { margin: 80px 0 40px 0; margin: 8rem 0 4rem 0; font-size: 48px; font-size: 4.8rem; font-weight: normal; } #planner-content h2 { margin: 40px 0 70px 0; margin: 4rem 0 7rem 0; font-size: 24px; font-size: 2.4rem; font-weight: normal; } .planner-fullness table { margin-top: 5px } .planner-fullness table td { border-left: 1px solid black; } .planner-fullness table td:first-child { border-left: none; } /** -------------------------------------------------- #planner-fullness tiles -------------------------------------------------- */ .planner-fullness-tiles { max-width: 100%; margin: 0 -30px; margin: 0 -3rem; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } /* .planner-fullness-tiles */ .planner-fullness-tile-wrapper { -ms-flex: 0 1 auto; flex: 0 1 auto; width: 165px; margin: 0 30px; margin: 0 3rem; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; position: relative /* border-right: 2px solid var(--border-color); */ } .planner-fullness-tile-wrapper:nth-child(n+4) { } /* .planner-fullness-tile-wrapper */ .planner-fullness-tile { /* padding: 28px; */ /* & .title-wrapper */ /* & .planner-fullness-svg-wrapper */ } .planner-fullness-tile .title-wrapper {/* min-height: 87px; */ width: 100%; display: -ms-flexbox; display: flex; text-align: center; } .planner-fullness-tile .title-wrapper h3 { font-size: 18px; font-size: 1.8rem; font-weight: normal; line-height: 1.16; -ms-flex-item-align: end; align-self: flex-end; width: 100%; text-align: center; } .planner-fullness-tile .planner-fullness-svg-wrapper { padding: 20px 0; width: 100%; position: relative; } .planner-fullness-tile .planner-fullness-svg-wrapper > p { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; color: #5745ca; font-size: 24px; font-size: 2.4rem; line-height: 1.2; text-align: center;/* @media (--mqL) { font-size: 2.4rem; font-size: 4vw; } */ } .planner-fullness-tile .desc { text-align: center; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; } /* .planner-fullness-tile */ .planner-fullness-tile-wrapper:nth-child(n+4) { } .planner-fullness-tile-wrapper:nth-child(n+4) .planner-fullness-tile .planner-fullness-svg-wrapper > p { color: #6ecc00; } /** -------------------------------------------------- #planner-fullness jobtypes -------------------------------------------------- */ .planner-fullness-jobtype-wrapper { position: relative; } .planner-fullness-jobtype-wrapper:after { content: ''; display: block; clear: both; } .planner-fullness-jobtype-element { position: relative; float: left; } .planner-fullness-jobtype-element-bar { position: relative; width: 100%; height: 50px; border-bottom: 15px solid transparent; } .planner-fullness-jobtype-element-info { text-align: center; padding-top: 18px; } .planner-fullness-jobtype-element-info__value { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; overflow: hidden; text-overflow: ellipsis; } .planner-fullness-jobtype-element-info__label { font-size: 10px; font-size: 1.0rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } .planner-fullness-jobtype-marker { position: relative; z-index: 100; width: 4px; height: 96px; background-color: black; } /** -------------------------------------------------- #planner-fullness jobtype -------------------------------------------------- */ .planner-fullness-jobtype-wrapper { } /** -------------------------------------------------- #planner-fullness availablity -------------------------------------------------- */ .planner-fullness-availability { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 700px; max-width: 70rem; margin: 48px 0 70px 0; margin: 4.8rem 0 7rem 0; } .planner-fullness__cat-item { -ms-flex: 0 1 47%; flex: 0 1 47%; position: relative; margin-bottom: 10px; margin-bottom: 1rem; padding-left: 28px; padding-left: 2.8rem; } .fullness__color-ref { position: absolute; top: 0; left: 5px; left: 0.5rem; width: 9px; width: 0.9rem; height: 100%; } .fullness__legend { height: 60px; height: 6rem; padding: 8px 0 0 13px; padding: 0.8rem 0 0 1.3rem; background: #f7f7f7; font-size: 14px; font-size: 1.4rem; line-height: 1.14; } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * bar wrapper * chart-jobtypes-wrapper * * -------------------------------------------------- */ /* -------------------------------------------------- #bar wrapper -------------------------------------------------- */ .bar-wrapper { clear: both; padding-bottom: 20px; text-align: center /* intro */ /* ******** */ /* bar charts */ /* ******** */ /* logged detail */ /* ******** */ /* .logged-detail-wrapper */ } .bar-wrapper h2 { margin-top: 0; } .bar-wrapper .bar-charts-intro { padding-bottom: 80px; } .bar-wrapper .bar-charts-intro p { width: 700px; margin: auto; max-width: 90%; } .bar-wrapper .bar-chart-outer-wrapper { display: inline-block; padding-bottom: 70px; } @media (max-width: 768px) { .bar-wrapper .bar-chart-outer-wrapper { display: inline-block;/* margin-bottom: 150px; */ } } .bar-wrapper .bar-chart-outer-wrapper:last-of-type { } @media (max-width: 768px) { .bar-wrapper .bar-chart-outer-wrapper:last-of-type { margin-bottom: 0px; } } .bar-wrapper .bar-chart-outer-wrapper-first { } @media (max-width: 568px) { .bar-wrapper .bar-chart-outer-wrapper-first { min-width: 220px; } } .bar-wrapper .bar-chart-wrapper { border: 1px solid #D8D8D8; display: inline-block; margin: 0px 30px; position: relative; } .bar-wrapper .bar-chart-wrapper .bar-chart { position: relative; } .bar-wrapper .bar-chart-wrapper .bar-chart-target { position: absolute; content: ""; width: 100%; height: 1px; display: block; border-top: 1px dashed #D8D8D8; top: 5%; left: 0; } .bar-wrapper .bar-chart-wrapper svg { box-sizing: border-box; -ms-transform: rotate(180deg); transform: rotate(180deg); } .bar-wrapper .bar-chart-wrapper rect.individual { fill: var (--mid-gray); } .bar-wrapper .bar-chart-wrapper rect.team { fill: #6ecc00; } .bar-wrapper .bar-chart-wrapper rect.duo { fill: #F7C61C; } .bar-wrapper .bar-chart-wrapper .bar-chart-image-wrapper { padding-top: 25px; position: absolute; width: 100%; } .bar-wrapper .bar-chart-wrapper .bar-chart-image-wrapper img { height: 36px; width: auto; margin: auto; display: block; } .bar-wrapper .bar-chart-wrapper .bar-chart-text { position: absolute; left: -75px; width: 100%; } .bar-wrapper .bar-chart-wrapper .bar-chart-text img { width: 75%; height: auto; } .bar-wrapper .hide-target-percentage { } .bar-wrapper .hide-target-percentage .bar-chart-target { border-color: white; } .bar-wrapper .bar-chart-percentage.dark-percentage-text p { color: #000; } .bar-wrapper .bar-chart-percentage { position: absolute; bottom: 0; width: 100%; } .bar-wrapper .bar-chart-percentage p { color: white; width: 100%; display: block; text-align: center; font-size: 18px; font-size: 1.8rem; } .bar-wrapper .logged-detail-button-wrapper { padding-top: 20px; } .bar-wrapper .logged-detail-button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; display: inline-block; padding: 10px 25px 12px 25px; background-color: transparent; border: 1px solid #F9F9FB; border-radius: 50px; color: #2d2c2b; transition: all 0.3s; } .bar-wrapper .logged-detail-button:hover, .bar-wrapper .logged-detail-button:focus { background-color: #214ebf; border-color: #214ebf; color: #fff; } .bar-wrapper .logged-detail-wrapper { display: none; margin-top: 30px;/* .logged-detail-table */ } .bar-wrapper .logged-detail-wrapper .logged-detail-table-wrapper { overflow-x: auto; max-width: 1400px; margin: 0 auto; } .bar-wrapper .logged-detail-wrapper .logged-detail-table {/* tr.subtasks */ } .bar-wrapper .logged-detail-wrapper .logged-detail-table td { width: 15%; } .bar-wrapper .logged-detail-wrapper .logged-detail-table td.logged-project-name { width: auto; color: #214ebf; font-weight: bold; cursor: pointer; } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks { display: none; background-color: #f7f7f7; } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table { } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table th, .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table td { padding-top: 5px; padding-bottom: 5px; } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table th:first-child, .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table td:first-child { padding-left: 0; border-left: none; } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table th:last-child, .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table td:last-child { padding-right: 0; } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table td { } .bar-wrapper .logged-detail-wrapper .logged-detail-table tr.subtasks table td.subtask { width: auto; } /* .bar-wrapper */ /* -------------------------------------------------- #chart-jobtypes-wrapper -------------------------------------------------- */ .chart-jobtypes-wrapper { clear: both; padding: 40px 0 0 0 /* intro */ /* ******** */ /* chart jobtypes */ /* ******** */ /* legend */ /* ******** */ /* bar chart jobtypes */ /* ******** */ } .chart-jobtypes-wrapper .chart-jobtypes-intro { padding-bottom: 40px; text-align: center; } .chart-jobtypes-wrapper .chart-jobtypes-intro p { width: 700px; max-width: 90%; margin: 0 auto; } .chart-jobtypes-wrapper .chart-jobtypes { width: 500px; max-width: 90%; margin: 0 auto; } .chart-jobtypes-wrapper .chart-jobtypes:after { content: ''; display: block; clear: both; } @media (max-width: 568px) { .chart-jobtypes-wrapper .chart-jobtypes { text-align: center; } } .chart-jobtypes-wrapper .legend { margin: 0; padding: 0; float: left; padding-right: 20px; } .chart-jobtypes-wrapper .legend li { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } @media (max-width: 568px) { .chart-jobtypes-wrapper .legend { float: none; display: inline-block; text-align: left; } } .chart-jobtypes-wrapper .legend li { position: relative; margin: 10px 0; padding-left: 30px; } .chart-jobtypes-wrapper .legend span { display: inline-block; } .chart-jobtypes-wrapper .legend .color-jobtype { position: absolute; top: -2px; left: 0; width: 24px; height: 24px; border-radius: 50%; } .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper { position: relative; float: right; width: 100px; padding-bottom: 70px; } .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper:after { content: ''; display: block; clear: both; } @media (max-width: 568px) { .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper { float: none; margin: 20px auto 0 auto; } } .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper .bar-chart-jobtypes { padding-bottom: 70px; } .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper .chart-jobtypes-image-wrapper { position: absolute; width: 100%; padding-top: 25px; } .chart-jobtypes-wrapper .chart-jobtypes-outer-wrapper .chart-jobtypes-image-wrapper img { display: block; width: auto; height: 36px; margin: auto; } /* .chart-jobtypes-wrapper */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * pie charts * * -------------------------------------------------- */ /*! -------------------------------------------------- * * #pie charts * * -------------------------------------------------- */ .pie-charts-wrapper { padding-bottom: 20px; text-align: center /* intro */ /* ******** */ /* individual types */ /* ******** */ /* pie chart */ /* ******** */ } .pie-charts-wrapper .pie-charts-intro { padding-bottom: 40px; } .pie-charts-wrapper .pie-charts-intro p { width: 600px; margin: auto; border-top: 1px solid #D8D8D8; padding: 30px 50px 20px 50px; max-width: 90%; } @media (max-width: 568px) { .pie-charts-wrapper .pie-charts-intro p { padding: 30px 0 20px 0; } } .pie-charts-wrapper #individual-types { text-align: left; } .pie-charts-wrapper .pie-chart { position: relative; margin: 0px 20px 0 20px; padding: 10px 0px 10px 0px; } @media (max-width: 768px) { .pie-charts-wrapper .pie-chart { padding-bottom: 50px; } } .pie-charts-wrapper .pie-task-individual { display: inline-block; } .pie-charts-wrapper .svg-wrapper { position: relative; } .pie-charts-wrapper .pie-chart svg { -ms-transform: rotate(-90deg); transform: rotate(-90deg);/* width: 240px; height: 240px; */ width: 160px; height: 160px; } .pie-charts-wrapper .pie-chart-image-wrapper { padding-top: 25px; } .pie-charts-wrapper .pie-chart-image-wrapper img { height: 36px; width: auto; margin: auto; display: block; } .pie-charts-wrapper .svg-text { position: absolute; top: -20px; left: -52px; } .pie-charts-wrapper .svg-text img { width: 40%; height: auto; } .pie-charts-wrapper .svg-underlay { position: absolute; display: block; width: 160px; height: 160px; z-index: -1; top: 0; left: 0; border-radius: 50%; overflow: hidden; border: 1px solid #D8D8D8; } .pie-charts-wrapper .pie-chart-percentage { position: absolute; bottom: 10px; width: 100%; } .pie-charts-wrapper .pie-chart-percentage p { color: white; width: 100%; display: block; text-align: center; font-size: 22px; font-size: 2.2rem; } .pie-charts-wrapper .pie-chart-percentage.dark-percentage-text { } .pie-charts-wrapper .pie-chart-percentage.dark-percentage-text p { color: #000; } .pie-charts-wrapper .hide-target-percentage { } .pie-charts-wrapper .hide-target-percentage .svg-text { display: none; } .pie-charts-wrapper .hide-svg-100 .svg-wrapper svg { border-radius: 50%; background-color: rgb(161, 223, 0); } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * Sickness absence * * -------------------------------------------------- */ /*! -------------------------------------------------- Sickness absence -------------------------------------------------- */ .sick-days-wrapper { text-align: center /* sick detail */ /* ******** */ /* table */ /* .sick-detail-table */ /* text */ /* .sick-detail-text */ } .sick-days-wrapper:after { content: ''; display: block; clear: both } .sick-days-wrapper .sick-detail-wrapper { display: none; margin-top: 30px; text-align: center; } .sick-days-wrapper .sick-detail-wrapper:after { content: ''; display: block; clear: both; } .sick-days-wrapper .sick-detail-wrapper-inner { display: inline-block; margin: auto; border-top: 1px solid #D8D8D8; padding: 50px 75px 0px; } @media (max-width: 768px) { .sick-days-wrapper .sick-detail-wrapper-inner { padding: 50px 50px 0px; } } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-wrapper-inner { display: block; padding: 50px 0; } } .sick-days-wrapper h2 { margin-top: 0; text-align: center; } .sick-days-wrapper .sick-intro-text { text-align: center; } .sick-days-wrapper .sick-intro-text p { margin: 0px; max-width: 90%; margin: auto; } .sick-days-wrapper .sick-points-wrapper { font-size: 24px; font-size: 2.4rem; padding: 0px 0px 20px 0px; display: inline-block; margin-top: 10px; } .sick-days-wrapper .sick-points-wrapper .sick-points, .sick-days-wrapper .sick-points-wrapper .sick-points-detail { display: inline-block; padding-right: 5px; font-size: 48px; font-size: 4.8rem; } .sick-days-wrapper .svg-face { width: 80px; height: auto; margin: auto; padding-top: 30px; display: none; } .sick-days-wrapper .sick-detail-button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; display: inline-block; padding: 10px 25px 12px 25px; background-color: transparent; border: 1px solid #F9F9FB; border-radius: 50px; color: #2d2c2b; transition: all 0.3s; } .sick-days-wrapper .sick-detail-button:hover, .sick-days-wrapper .sick-detail-button:focus { background-color: #214ebf; border-color: #214ebf; color: #fff; } .sick-days-wrapper .sick-detail-table-wrapper { float: left; margin-bottom: 20px; padding-right: 100px; } @media (max-width: 768px) { .sick-days-wrapper .sick-detail-table-wrapper { padding-right: 50px; } } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-table-wrapper { float: none; padding-right: 0; } } .sick-days-wrapper .sick-detail-table-wrapper h3 { margin-top: 0; font-size: 18px; font-size: 1.8rem; text-align: left; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-table-wrapper h3 { text-align: center; } } .sick-days-wrapper .sick-detail-table { position: relative; width: auto; border: 1px solid #F9F9FB; border-left: none; border-radius: 0 12px 12px 0; line-height: 1; text-align: left; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-table { margin: 0 auto; } } @media screen and (max-width: 613px) { .sick-days-wrapper .sick-detail-table { padding-right: 0px; float: none; text-align: center; padding-bottom: 20px; } } .sick-days-wrapper .sick-detail-table:before { content: ''; position: absolute; z-index: 10; top: 50%; right: -6px; width: 7px; height: 0; margin-top: -7.5px; border-left: 7px solid #f7f7f7; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-table:before { display: none; } } .sick-days-wrapper .sick-detail-table:after { content: ''; position: absolute; z-index: 5; top: 50%; right: -8px; width: 8px; height: 0; margin-top: -8px; border-left: 8px solid #F9F9FB; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-table:after { display: none; } } .sick-days-wrapper .sick-detail-table td { padding: 4px 40px 4px 0; } .sick-days-wrapper .sick-detail-table td.period-group-even { color: #939598; } .sick-days-wrapper .sick-detail-table td span { display: inline-block; padding-right: 5px; } .sick-days-wrapper .sick-detail-table tr:first-child { } .sick-days-wrapper .sick-detail-table tr:first-child td { padding-top: 20px; } .sick-days-wrapper .sick-detail-table tr:last-child { } .sick-days-wrapper .sick-detail-table tr:last-child td { padding-bottom: 20px; } .sick-days-wrapper .sick-detail-text { float: left; } .sick-days-wrapper .sick-detail-text .sick-detail-summary { margin-top: 0px; } .sick-days-wrapper .sick-detail-text .sick-detail-summary .sick-days-total { font-weight: bold; } .sick-days-wrapper .sick-detail-text .face-points-wrapper { position: relative; margin: 40px 0; } .sick-days-wrapper .sick-detail-text .face-points-wrapper:after { content: ''; display: block; clear: both; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-text .face-points-wrapper { margin-top: 60px; } } .sick-days-wrapper .sick-detail-text .face-points-wrapper:before { content: ''; position: absolute; top: -40px; left: 50%; width: 20px; height: 40px; margin-left: -10px; background: url(../images/distribution/misc-icons/arrow_down.svg) center / 20px auto no-repeat; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-text .face-points-wrapper:before { top: -50px; } } .sick-days-wrapper .sick-detail-text .svg-face { float: left; margin: 0 20px 0 0; padding: 0; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-text .svg-face { float: none; margin: 0 auto; } } .sick-days-wrapper .sick-detail-text .sick-points-wrapper { float: left; margin: 0; padding: 0; } @media (max-width: 568px) { .sick-days-wrapper .sick-detail-text .sick-points-wrapper { float: none; } } .sick-days-wrapper .sick-detail-text .asterix-detail { clear: both; text-align: center; font-size: 12px; } @media screen and (max-width: 613px) { .sick-days-wrapper .sick-detail-text { padding-right: 0px; float: none; } } /** -------------------------------------------------- * * CALENDAR * * TABLE OF CONTENTS * general * calendar view * info block * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .calendar-page-content { padding: 55px 0; } .calendar .time-marker { top: 58px !important; height: calc(100% - 58px) !important; } /** -------------------------------------------------- #calendar view -------------------------------------------------- */ .calendar-week-wrapper { padding-top: 30px; overflow-x: auto; } /* weeks */ /* ***** */ .calendar-week { position: relative; min-width: 750px; } .calendar-week-toggle { position: relative; cursor: pointer; padding: 20px 10px; padding-left: 58px /* toggle arrow */ } .calendar-week-toggle:before { content: ''; display: block; width: 12px; height: 8px; position: absolute; top: 50%; margin-top: -4px; left: 24px; background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); background-repeat: no-repeat; background-size: 12px 8px; background-position: center center; transition: transform 0.15s ease; } .calendar-week-toggle.js-closed:before { -ms-transform: scale(-1); transform: scale(-1); } @media (max-width: 980px) { .calendar-week-toggle { padding-left: 10px; } .calendar-week-toggle:before { display: none; } } /* .calendar-week-toggle */ .calendar-week-toggle__title { margin: 0p; font-family: "Muli", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; font-size: 1.4rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.075em; } /* days */ /* **** */ .calendar-day { } .event-date { position: relative; font-family: "Urbanist", "Gilroy", "Muli", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; font-size: 1.4rem; line-height: 1.3; color: #fff; padding: 19px 10px; padding-left: 58px; margin: 2px 0; background-color: #5745ca; cursor: pointer /* toggle arrow */ } .event-date:before { content: ''; display: block; width: 12px; height: 8px; position: absolute; top: 50%; margin-top: -4px; left: 24px; background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); background-repeat: no-repeat; background-size: 12px 8px; background-position: center center; transition: transform 0.15s ease; } .event-date.js-closed:before { -ms-transform: scale(-1); transform: scale(-1); } @media (max-width: 980px) { .event-date { padding-left: 10px; } .event-date:before { display: none; } } /* .event-date */ /* events */ /* ****** */ .day-event-wrapper { position: relative; } .day-event-wrapper .event { position: relative; padding: 10px; padding-left: 58px; border-bottom: 2px solid #D2CFCA; cursor: pointer } @media (max-width: 980px) { .day-event-wrapper .event { padding-left: 10px; } } .day-event-wrapper .event:nth-of-type(2n) { background-color: #f7f7f7; } .day-event-wrapper .event:last-of-type { border-bottom: 0; } /* .day-event-wrapper .event */ /* visual time display */ /* ------------------- */ .event-visual-display-wrapper { position: absolute; top: 50%; left: 350px; width: calc(100% - 350px); -ms-transform: translateY(-50%); transform: translateY(-50%) /* colour bar */ /* & .color-bar */ } .event-visual-display-wrapper .color-bar { width: 0; background-color: #5745ca; display: block; height: 8px; position: relative;/** time display **/ } .event-visual-display-wrapper .color-bar .before, .event-visual-display-wrapper .color-bar .after { display: block; width: auto; position: absolute; top: -2px; font-size: 10px; font-size: 1.0rem; line-height: 1.2; color: #2d2c2b; } .event-visual-display-wrapper .color-bar .before { left: 0; -ms-transform: translateX(-120%); transform: translateX(-120%); } .event-visual-display-wrapper .color-bar .after { right: 0; -ms-transform: translateX(120%); transform: translateX(120%); } /* .event-visual-display-wrapper */ /* summary */ /* ******* */ .event-summary-organizer { font-size: 14px; font-size: 1.4rem; line-height: 1.28; max-width: 350px /* & .summary */ /* & .organizer */ } .event-summary-organizer .summary { font-weight: bold; margin-bottom: 2px; } .event-summary-organizer .organizer { color: #8c8c8c; } /* .event-summary-organizer */ /* tooltip */ /* ------- */ .event-info-wrapper { position: absolute; z-index: 999; left: -9999px; bottom: 25px; background-color: white; border: 2px solid #5745ca; padding: 10px; max-width: 350px; font-size: 14px; font-size: 1.4rem; line-height: 1.28 /* arrow */ /* location */ /* attendees */ /* & .attendees */ } .event-info-wrapper:before { content: ''; position: absolute; bottom: -2px; left: -14px; width: 0; height: 0; border-bottom: 14px solid #214ebf; border-left: 14px solid transparent; } .event-info-wrapper .location { margin-bottom: 4px; } .event-info-wrapper .attendees { margin-bottom: 4px; word-wrap: break-word; } .event-info-wrapper .attendees .internal-attendee, .event-info-wrapper .attendees .external-attendee { display: block; } .event-info-wrapper .attendees .internal-attendee { color: #214ebf; } .event-info-wrapper .attendees .external-attendee { color: #F7C61C; } /* .event-info-wrapper */ /* -------------------------------------------------- #info block -------------------------------------------------- */ .calendar-info { margin-top: 30px; } /* .calendar-info */ /** -------------------------------------------------- * * MAINNAV * * TABLE OF CONTENTS * toggle button * navigation block * header bar * menu * page overlay * menu open * * -------------------------------------------------- */ /** -------------------------------------------------- #toggle button -------------------------------------------------- */ .header__menutoggle { position: relative; display: block; /*background-color: rgba(var(--white), 0.5);*/ background-color: transparent; border: none; padding: 10px; border-radius: 50%; cursor: pointer; color: #000; font-weight: bold; font-size: 18px; text-transform: lowercase; } .header__menutoggle:after { content: ''; display: block; clear: both; } .header__menutoggle__icon { position: relative; display: block; width: 38px; height: 34px; float: left; } .header__menutoggle__icon__bar { display: block; height: 3px; width: 28px; position: absolute; top: 8px; right: 0; background: #000; transition: width 0.2s ease-out; } .header__menutoggle__icon__bar--top { transition-delay: 0; } .header__menutoggle__icon__bar--middle { width: 38px; top: 14px; transition-delay: 0.1s; } .header__menutoggle__icon__bar--bottom { top: 20px; transition-delay: 0.2s; } .header__menutoggle:hover, .header__menutoggle:focus { } .header__menutoggle:hover .header__menutoggle__icon__bar--top, .header__menutoggle:focus .header__menutoggle__icon__bar--top { width: 32px; } .header__menutoggle:hover .header__menutoggle__icon__bar--middle, .header__menutoggle:focus .header__menutoggle__icon__bar--middle { width: 32px; } .header__menutoggle:hover .header__menutoggle__icon__bar--bottom, .header__menutoggle:focus .header__menutoggle__icon__bar--bottom { width: 32px; } .header__menutoggle__text { display: none; float: right; } /** -------------------------------------------------- #navigation block -------------------------------------------------- */ .header__navigation { position: fixed; z-index: 201; background: #fff; will-change: opacity, transform, visibility; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: scale3d(0.8, 0.8,0.8); transition: transform 0.35s, opacity 0.35s, visibility 0.35s; padding: 0 40px; /* menu position */ top: 20px; right: 20px; bottom: 20px; left: 20px; } /* .header__navigation */ /** -------------------------------------------------- #header bar -------------------------------------------------- */ .menu__headerbar { display: none; width: 100%; position: absolute; z-index: 2; top: 40px; left: 0; display: block } @media (max-width: 568px) { .menu__headerbar { top: 20px; } } /* .menu__headerbar */ .menu__logo { display: block; margin-left: 20px; width: 125px; height: auto } .menu__logo svg { width: 100%; height: auto; } /* .overlaymenu__logo */ .menu__closebutton { display: block; border: none; outline: none; cursor: pointer; width: 40px; height: 40px; text-indent: -99999px; position: absolute; top: 0; right: 40px; background: url('../images/distribution/resp-nav/close-button--grey.svg') center center no-repeat transparent; background-size: 40px 40px; transition: transform 0.2s ease-out } .menu__closebutton:hover, .menu__closebutton:focus { -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } @media (max-width: 568px) { .menu__closebutton { right: 20px; } } /* .overlaymenu__closebutton */ /** -------------------------------------------------- #menu -------------------------------------------------- */ .menu__content__wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-x: auto; z-index: 1; } .menu__content { display: table; width: 100%; max-width: 610px; height: 100%; margin: 0 auto; padding: 10px 20px; } .menu__content__inner { display: table-cell; width: 100%; vertical-align: middle; } .menu-main { } /* .menu-main */ .menu-main__list { list-style-type: none; padding: 0; margin: 0 /* & li */ } .menu-main__list li { display: block; margin: 18px 0;/* & a *//* &.logout-link */ } .menu-main__list li a { color: #000; font-family: "Urbanist", "Gilroy", "Muli", Arial, Helvetica, sans-serif; font-weight: 700; text-transform: lowercase; font-size: 28px; font-size: 2.8rem; line-height: 1.2; transition: color 0.25s ease; } @media (max-height: 740px) { .menu-main__list li a { font-size: 2.4rem; } } .menu-main__list li a:hover, .menu-main__list li a:focus { color: #5745ca; } .menu-main__list li.logout-link { } .menu-main__list li.logout-link a { color: #D8D8D8; font-weight: normal; } .menu-main__list li.logout-link a:hover, .menu-main__list li.logout-link a:focus { color: #5745ca; } /* .menu-main__list */ /** -------------------------------------------------- #page overlay -------------------------------------------------- */ .main-navigation-overlay { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; transition: all 0.5s; } /** -------------------------------------------------- #menu open -------------------------------------------------- */ .main__nav--responsive--visible body { overflow: hidden; } .main__nav--responsive--visible .main-navigation-overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } .main__nav--responsive--visible { } .main__nav--responsive--visible .header__navigation { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: scale3d(1,1,1); } /* .main__nav--responsive--visible */ /** -------------------------------------------------- * * layout - FORMS * * INFO * basic form styles * * TABLE OF CONTENTS * form inputs * custom radiobuttons * * -------------------------------------------------- */ /** -------------------------------------------------- #form inputs -------------------------------------------------- */ input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select { height: 36px; } input.form-text, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], textarea, select { width: 100%; padding: 6px 12px; background-color: #fff; border: 0; /*border-bottom: 2px solid var(--brand-blue);*/ border-radius: 0; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; transition: border-color 0.2s ease; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.45; color: #5745ca } input.form-text:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-color: #2d2c2b; } input.form-text.error, input[type="text"].error, input[type="number"].error, input[type="email"].error, input[type="tel"].error, input[type="date"].error, textarea.error, select.error { border-color: #e45959; } input.form-text[disabled], input[type="text"][disabled], input[type="number"][disabled], input[type="email"][disabled], input[type="tel"][disabled], input[type="date"][disabled], textarea[disabled], select[disabled] { background-color: #eee; cursor: default; } /* textarea */ /* ******** */ textarea { min-height: 160px; vertical-align: top; } /* select styles */ /* ************* */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: url('../images/distribution/icons/dropdown-arrow--purple-down.svg'); background-size: 10px 6px; background-position: top 16px right 17px; background-repeat: no-repeat; line-height: 1.2; padding: 6px 12px; padding-right: 36px /* hide default select-arrow in IE: */ } select::-ms-expand { display: none; } /* select */ /* -------------------------------------------------- #custom radiobuttons -------------------------------------------------- */ .custom-radiobutton { position: relative; min-height: 14px } .custom-radiobutton > input { -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 50%; margin-top: -15px; left: 0; width: 14px; height: 14px; background: transparent; border: none; } .custom-radiobutton > label { display: inline-block; position: relative; margin: 0; padding-left: 45px; cursor: pointer; } .custom-radiobutton > label:before, .custom-radiobutton > label:after { content: ''; display: block; } .custom-radiobutton > label:before { position: absolute; top: 50%; margin-top: -15px; left: 0; width: 14px; height: 14px; border: 2px solid #939598; border-radius: 50%; background-color: #939598; transition: border-color 0.2s ease; } .custom-radiobutton > label:after { position: absolute; top: 50%; margin-top: -9px; left: 6px; width: 10px; height: 10px; background: rgba(147,149,152, 0.1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; border-radius: 50%; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; -ms-transform: scale(0.7); transform: scale(0.7); } .custom-radiobutton > input:hover + label, .custom-radiobutton > input:focus + label { } .custom-radiobutton > input:hover + label:after, .custom-radiobutton > input:focus + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); } .custom-radiobutton label:hover { } .custom-radiobutton label:hover:before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); } .custom-radiobutton > input:checked + label { } .custom-radiobutton > input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; -ms-transform: scale(1); transform: scale(1); background-color: red; } /* .custom-radiobutton */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * service desk * serivce desk dialog * * -------------------------------------------------- */ /* -------------------------------------------------- #service desk -------------------------------------------------- */ #servicedesk-wrapper { overflow-x: auto; max-width: 1400px; margin: 0 auto /* &.servicedesk-table */ } #servicedesk-wrapper h2 { margin-top: 0; } #servicedesk-wrapper .servicedesk-table { } #servicedesk-wrapper .servicedesk-table tr:not(.tr-thead) { } #servicedesk-wrapper .servicedesk-table tr:not(.tr-thead):hover { background: #f7f7f7; } #servicedesk-wrapper .servicedesk-table th, #servicedesk-wrapper .servicedesk-table td { padding: 6px 15px 6px 15px; } #servicedesk-wrapper .servicedesk-table th:first-child, #servicedesk-wrapper .servicedesk-table td:first-child { padding-left: 0; border-left: none; } #servicedesk-wrapper .servicedesk-table th:last-child, #servicedesk-wrapper .servicedesk-table td:last-child { padding-right: 0; } #servicedesk-wrapper .servicedesk-table th.sd-external, #servicedesk-wrapper .servicedesk-table td.sd-external { color: #D8D8D8; } #servicedesk-wrapper .servicedesk-table td { } #servicedesk-wrapper .servicedesk-table td:not(.sd-project) { white-space: nowrap; } #servicedesk-wrapper .servicedesk-table td.sd-project { color: #214ebf; font-weight: bold; } .service-desk .main-content__inner { padding-left: 70px; padding-right: 20px } .service-desk .main-content__inner .page-top__title { padding: 55px 0; } .service-desk .main-content__inner .service-desk-top-wrapper { padding-bottom: 30px; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } .service-desk .main-content__inner .service-desk-top-wrapper .prognosis { width: 100%; } .service-desk .main-content__inner .service-desk-top-wrapper .count { width: 40%; } .service-desk .main-content__inner .service-desk-top-wrapper .logged-hours { width: 30%; color: #e776a2; font-size: 12px; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; text-decoration: underline; text-align: right; } .service-desk .main-content__inner .service-desk-top-wrapper .logged-hours:hover, .service-desk .main-content__inner .service-desk-top-wrapper .logged-hours:focus { text-decoration: none; } .service-desk .main-content__inner .service-desk-top-wrapper form { width: 30%; position: relative; padding-left: 45px; } .service-desk .main-content__inner .service-desk-top-wrapper form input { padding-right: 45px; background-color: #E6E6EB; border-radius: 11px; } .service-desk .main-content__inner .service-desk-top-wrapper form button { width: 25px; height: 25px; position: absolute; top: 5px; right: 11px; text-indent: -9990px; text-indent: -999rem; background-color: transparent; background-image: url('../images/distribution/icons/icon__search.svg'); background-position: center center; background-repeat: no-repeat; background-size: 14px 14px; cursor: pointer; border: none; } .service-desk .main-content__inner .table__wrapper--service-desk-inner button { border: 2px solid #eae9ef; background-color: #eae9ef; color: rgba(10,0,111, 0.65); padding: 10px 15px; border-bottom: 0; border-radius: 3px 3px 0 0; font-weight: 600; font-size: 15px; font-size: 1.5rem; transition: all .3s; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } .service-desk .main-content__inner .table__wrapper--service-desk-inner button:hover, .service-desk .main-content__inner .table__wrapper--service-desk-inner button:focus { border-color: #fbfaf9; background-color: #fbfaf9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .service-desk .main-content__inner .table__wrapper--service-desk-inner button.service-desk-status-selected { border-color: #fbfaf9; background-color: #fbfaf9; color: #0a006f; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .service-desk .main-content__inner .table__wrapper--service-desk-inner > a { text-decoration: underline; float: right; transition: color .3s; margin-right: 10%; } .service-desk .main-content__inner .xkcd2 { overflow: auto; border-top: 2px solid #fbfaf9; background-color: #fbfaf9; } .service-desk .main-content__inner table thead { background-color: #fff; } .service-desk .main-content__inner table thead tr { border-bottom: none; } .service-desk .main-content__inner table tr { border-bottom: 2px solid #fbfaf9; } .service-desk .main-content__inner table tr.service-desk-task-extra-row { border-left: none !important; } .service-desk .main-content__inner table tr.service-desk-task-extra-row td { background-color: #5745ca; color: #fff !important; font-weight: bold; font-size: 13px; font-size: 1.3rem; } .service-desk .main-content__inner table tr:last-child { border-bottom: none; } .service-desk .main-content__inner table td, .service-desk .main-content__inner table th { border: none; padding: 15px; font-size: 13px; font-size: 1.3rem; } .service-desk .main-content__inner table td { } .service-desk .main-content__inner table td.service-desk-task-good-to-go { background: rgba(141,198,63, 0.5); } .service-desk .main-content__inner table td a { cursor: pointer; transition: all .3s; } .service-desk .main-content__inner table tr td { } .service-desk .main-content__inner table tr td:nth-of-type(1), .service-desk .main-content__inner table tr td:nth-of-type(2), .service-desk .main-content__inner table tr td:nth-of-type(3) { color: #e45959; } .service-desk .main-content__inner table tr td .select2 { background-color: #fbfaf9; border-radius: 11px; } .service-desk .main-content__inner table th { cursor: pointer; position: relative; text-transform: none; } .service-desk .main-content__inner table th:before { content: ""; position: absolute; right: 0; width: 9px; height: 13px; background-position: center center; background-repeat: no-repeat; background-size: 9px 13px; } .service-desk .main-content__inner table th.service-desk-sort:before { background-image: url('../images/distribution/icons/icon_sort.svg'); } .service-desk .main-content__inner table th.service-desk-sort-desc:before { background-image: url('../images/distribution/icons/icon_sort--desc.svg'); } .service-desk .main-content__inner table th.service-desk-sort-asc:before { background-image: url('../images/distribution/icons/icon_sort--asc.svg'); } .service-desk .main-content__inner .table--service-desk tbody tr { border-left: 40px solid #fff; background-color: #fff; } .service-desk .main-content__inner .table--service-desk tbody tr.service-desk-task-warned-row { border-left-color: #e45959; } .service-desk .main-content__inner .section_tasks-at-duo { margin-bottom: 25px; margin-bottom: 2.5rem;/* Tab *//* Data *//* Data item title *//* Data item estimate */ } .service-desk .main-content__inner .section_tasks-at-duo:first-child { margin-top: 25px; margin-top: 2.5rem; } .service-desk .main-content__inner .section_tasks-at-duo .tab--service-desk { position: relative; width: 100%; padding: 40px 55px 40px 35px; padding: 4rem 5.5rem 4rem 3.5rem; background-color: #fbfaf9; color: #0a006f; border: 1px solid #d3d3d3; border: 0.1rem solid #d3d3d3; border-radius: 0; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.06px; letter-spacing: 0.006rem; text-transform: uppercase; text-align: left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .service-desk .main-content__inner .section_tasks-at-duo .tab--service-desk .tab__icon { transition: transform 0s ease; } .service-desk .main-content__inner .section_tasks-at-duo .tab--service-desk.is-tab--open { border-color: transparent; } .service-desk .main-content__inner .section_tasks-at-duo .tab--service-desk.is-tab--open .tab__icon { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .service-desk .main-content__inner .section_tasks-at-duo .tab__tasks { font-weight: normal; } .service-desk .main-content__inner .section_tasks-at-duo .tab__icon { position: absolute; top: 50%; margin-top: -8px; margin-top: -0.8rem; right: 35px; right: 3.5rem; transition: transform 0.2s ease; will-change: transform; } .service-desk .main-content__inner .section_tasks-at-duo .sd-table { width: 100%; padding: 0 35px 20px 35px; padding: 0 3.5rem 2rem 3.5rem; background-color: #fbfaf9; } .service-desk .main-content__inner .section_tasks-at-duo .sd-table.is-sd-table--open .table--service-desk { overflow: hidden; } .service-desk .main-content__inner .section_tasks-at-duo .table-wrapper { overflow-x: auto; box-shadow: 0 4px 17px -4px rgba(10,0,111, 0.1); border-radius: 0 0 0.3rem 0.3rem; } .service-desk .main-content__inner .section_tasks-at-duo .table--service-desk { width: 100%; background-color: #fff; border: none !important; } .service-desk .main-content__inner .section_tasks-at-duo .service-desk-table-title { width: 100%; padding: 10px 20px; padding: 1rem 2rem; background-color: #e6e6eb; border-radius: 0.3rem 0.3rem 0 0; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; font-size: 13px; font-size: 1.3rem; letter-spacing: 0.06px; letter-spacing: 0.006rem; } .service-desk .main-content__inner .section_tasks-at-duo .service-desk-task-estimate { } .service-desk .main-content__inner .section_tasks-at-duo .service-desk-task-estimate__link { text-decoration: underline; } .service-desk .main-content__inner .section_tasks-at-duo .service-desk-task-estimate__link:hover, .service-desk .main-content__inner .section_tasks-at-duo .service-desk-task-estimate__link:focus { text-decoration: none; } .service-desk .ui-dialog { } .service-desk .ui-dialog button { z-index: 999; } .service-desk .ui-dialog .ui-dialog-titlebar { display: block; min-height: 0 !important; } .service-desk .ui-dialog .ui-dialog-title { display: none; } .service-desk-legend { width: 80%; margin: auto; padding: 25px 0 50px 0; margin-top: 25px; border-top: 2px solid #F9F9FB } .service-desk-legend:after { content: ''; display: block; clear: both } .service-desk-legend h3 { display: block; margin-bottom: 25px; } .service-desk-legend div { display: block; width: 50%; float: left; padding-left: 90px; padding-right: 120px; position: relative; } .service-desk-legend div:before { content: ""; display: block; position: absolute; top: 8px; left: 0; width: 75px; height: 62px; background: rgba(141,198,63, 0.5); } .service-desk-legend div:last-of-type { } .service-desk-legend div:last-of-type:before { background: rgba(228,89,89, 1); } /* -------------------------------------------------- #service desk dialog -------------------------------------------------- */ .ui-dialog.ui-widget.ui-widget-content[aria-describedby='service-desk-task-estimate'] { border-radius: 0.3rem; box-shadow: 0 4px 17px -4px rgba(10,0,111, 0.1); background-color: #fff } .ui-dialog.ui-widget.ui-widget-content[aria-describedby='service-desk-task-estimate']::after { content: ''; position: fixed; z-index: 500; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(10,0,111, 0.15); } .ui-dialog.ui-widget.ui-widget-content[aria-describedby='service-desk-task-estimate'] * { z-index: 600; } .ui-dialog.ui-widget.ui-widget-content[aria-describedby='service-desk-task-estimate'] .ui-dialog-titlebar-close { background-size: 13px 13px; } .ui-dialog.ui-widget.ui-widget-content[aria-describedby='service-desk-task-estimate'] .service-desk-dialog { z-index: 550; padding: 30px 0 0 0; padding: 3rem 0 0 0; background-color: #fff; } .service-desk-dialog-content { } .service-desk-dialog-content p { line-height: 24px; } .service-desk-dialog-content table { background-color: #fff; } .service-desk-dialog-content table + div { padding: 20px 40px; padding: 2rem 4rem; background: #f3f2f8; text-align: right; } .service-desk-dialog-content thead { } .service-desk-dialog-content thead td { padding: 14px 40px; padding: 1.4rem 4rem; border: none; border-bottom: 3px solid #f3f2f8; border-bottom: 0.3rem solid #f3f2f8; color: #5745ca; font-size: 13px; font-size: 1.3rem; letter-spacing: 0.06px; letter-spacing: 0.006rem; } .service-desk-dialog-content thead td:first-child { color: #0a006f; font-weight: bold; } .service-desk-dialog-content tbody { background-color: #f3f2f8; } .service-desk-dialog-content tbody td { padding: 14px 40px; padding: 1.4rem 4rem; border: none; color: #5745ca; } .service-desk-dialog-content tbody td:first-child { color: #0a006f; font-weight: bold; font-size: 13px; font-size: 1.3rem; letter-spacing: 0.06px; letter-spacing: 0.006rem; } .service-desk-dialog-content tbody input { display: inline-block; width: 150px; width: 15rem; margin-right: 10px; margin-right: 1rem; border-radius: 0.3rem; } .service-desk-dialog-content tbody .select2 { display: inline-block; width: 215px !important; width: 21.5rem !important; margin-left: 10px; margin-left: 1rem; background-color: #fff; border-radius: 0.3rem; } .service-desk-dialog-content tbody .split-estimate-delete { cursor: pointer; } #service-desk-task-estimate-submit { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; border: 2px solid #e776a2; color: #e776a2; background-color: #fff; background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff } #service-desk-task-estimate-submit:hover, #service-desk-task-estimate-submit:focus { background-color: #86dfbd; border-color: #86dfbd; } #service-desk-task-estimate-submit:hover, #service-desk-task-estimate-submit:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } #service-desk-task-estimate-submit:hover, #service-desk-task-estimate-submit:focus { border: 2px solid #e776a2; color: #e776a2; background-color: #fff; } /** -------------------------------------------------- * * PERFORMANCE (PAGE) * * TABLE OF CONTENTS * general * performance tiles * blocks - general * block "timesheets" * block "jobtypes" * block "estimate vs logged" * block "bug ratio" * block "sickness" * block "nps score" * block "service desk" * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .performance-page-content { padding: 55px 0 0; } /** -------------------------------------------------- #print-button -------------------------------------------------- */ .print-button-wrapper { position: absolute; top: 75px; cursor: pointer; transition: all .3s } .print-button-wrapper rect { width: 89px; transition: all .3s; } .print-button-wrapper polygon, .print-button-wrapper path, .print-button-wrapper circle { display: none; } .print-button-wrapper:hover { } .print-button-wrapper:hover rect { fill: #5745ca !important; transition: fill .3s; } /** -------------------------------------------------- #performance tiles -------------------------------------------------- */ .performance-tiles { max-width: 752px; margin: 0 auto; padding: 50px 0; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: center; justify-content: center; } /* .performance-tiles */ .performance-tile-wrapper { -ms-flex: 0 1 33.333%; flex: 0 1 33.333%; width: 33.333%; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; position: relative /* border-right: 2px solid var(--border-color); */ /* (--mqL) */ } .performance-tile-wrapper:nth-child(n+4) { border-bottom: 0;/* border-top: 2px solid var(--border-color); */ } .performance-tile-wrapper:nth-of-type(3n) { border-right: 0; } @media (max-width: 980px) { .performance-tile-wrapper { -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 50%; } .performance-tile-wrapper:nth-child(n+4) { border-top: 0; } .performance-tile-wrapper:nth-child(n+3) {/* border-top: 2px solid var(--border-color); */ } .performance-tile-wrapper:nth-of-type(3n) {/* border-right: 2px solid var(--border-color); */ } .performance-tile-wrapper:nth-of-type(2n) { border-right: 0; } } /* .performance-tile-wrapper */ .performance-tiles[data-tile-count="4"] { max-width: 100% } .performance-tiles[data-tile-count="4"] .performance-tile-wrapper { -ms-flex: 0 1 25%; flex: 0 1 25%; width: 25%; } .performance-tile { padding: 28px /* & .title-wrapper */ /* & .performance-svg-wrapper */ } .performance-tile .title-wrapper { min-height: 87px; width: 100%; display: -ms-flexbox; display: flex; text-align: center; } .performance-tile .title-wrapper h3 { font-size: 24px; font-size: 2.4rem; line-height: 29px; line-height: 2.9rem; -ms-flex-item-align: end; align-self: flex-end; width: 100%; text-align: center; } .performance-tile .performance-svg-wrapper { padding: 20px 0; width: 100%; position: relative; } .performance-tile .performance-svg-wrapper > p { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; font-size: 48px; font-size: 4.8rem; line-height: 1.2; font-weight: bold; } @media (max-width: 980px) { .performance-tile .performance-svg-wrapper > p { font-size: 3rem; font-size: 4vw; } } .performance-tile .timesheet-desc { text-align: left; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; } /* .performance-tile */ /** -------------------------------------------------- #blocks - general -------------------------------------------------- */ .performance-section { position: relative; padding: 50px 0; } .performance-section--dark { background-color: #f7f7f7; margin: 0 -56px; padding: 50px 70px } @media (max-width: 1300px) { .performance-section--dark { margin: 0 -35px; padding: 50px 35px; } } /* .performance-section--dark */ /* section title */ /* ************* */ .performance-section__title { text-align: center; font-size: 48px; font-size: 4.8rem; } /* graph blocks */ /* ************ */ .performance__graph-blocks { max-width: 650px; margin: 30px auto 0; } .performance__graph-block { padding: 30px 0; border-bottom: 2px solid #F9F9FB } .performance__graph-block:last-of-type { border-bottom: 0; } /* .performance__graph-block */ /* intro */ /* ----- */ .performance__graph-block__intro { padding: 0 10px; margin-bottom: 20px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; text-align: center; } /* graph */ /* ----- */ .performance__graph-block__graph-zone { position: relative; max-width: 300px; margin: 0 auto; } .performance__graph-block__graph { position: relative } .performance__graph-block__graph .graph-inner-text { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-align: center; } .performance__graph-block__graph .graph-inner-text .chart-percentage { font-size: 48px; font-size: 4.8rem; } /* .performance__graph-block__graph */ /* graph info */ .performance__graph-block__graphinfo { margin-top: 20px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } .performance__graph-block__graphinfo__column { -ms-flex: 0 1 auto; flex: 0 1 auto; text-align: center; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold } .performance__graph-block__graphinfo__column .label { } .performance__graph-block__graphinfo__column .chart-percentage { font-size: 36px; font-size: 3.6rem; } /* .performance__graph-block__graphinfo__column */ /* action zone */ /* *********** */ .performance-section__toggle-block-row { position: relative; margin: 20px 0; text-align: center; } /* collapse buttons */ .performance-section__toggle-details { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #000; color: #fff; font-size: 13px; font-size: 1.3rem; line-height: 1.2; font-weight: bold; padding: 5px 40px 7px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #000; min-width: 160px; } .performance-section__toggle-details:hover, .performance-section__toggle-details:focus { background: #fff; color: #000; border-color: #000; } .performance-section__toggle-details:hover:after, .performance-section__toggle-details:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); } .performance-section__toggle-details:after { content: ''; display: block; width: 10px; height: 6px; background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); background-repeat: no-repeat; background-size: 10px 6px; background-position: center center; position: absolute; top: 50%; margin-top: -3px; right: 20px; } .performance-section__toggle-details.closed { } .performance-section__toggle-details.closed:after { -ms-transform: scale(-1); transform: scale(-1); } .performance-section__toggle-all { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #000; color: #fff; font-size: 13px; font-size: 1.3rem; line-height: 1.2; font-weight: bold; padding: 5px 40px 7px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #000; min-width: 160px; position: absolute; top: 0; right: 0; } .performance-section__toggle-all:hover, .performance-section__toggle-all:focus { background: #fff; color: #000; border-color: #000; } .performance-section__toggle-all:hover:after, .performance-section__toggle-all:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); } .performance-section__toggle-all:after { content: ''; display: block; width: 10px; height: 6px; background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); background-repeat: no-repeat; background-size: 10px 6px; background-position: center center; position: absolute; top: 50%; margin-top: -3px; right: 20px; } .performance-section__toggle-all.closed { } .performance-section__toggle-all.closed:after { -ms-transform: scale(-1); transform: scale(-1); } /** -------------------------------------------------- #block "timesheets" -------------------------------------------------- */ .performance-section--timesheets { } /* .performance-section--timesheets */ .performance-section-timesheets__columns { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; padding-top: 50px; max-width: 694px; margin: 0 auto; } .performance-section-timesheets__column { -ms-flex: 1 0 50%; flex: 1 0 50%; width: 50% /* (--mqL)*/ } .performance-section-timesheets__column:first-of-type { border-right: 2px solid #F9F9FB; } @media (max-width: 980px) { .performance-section-timesheets__column { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; } .performance-section-timesheets__column:first-of-type { border-right: 0; border-bottom: 2px solid #F9F9FB; } } /* .performance-section-timesheets__column */ .performance-section-timesheets__column__inner { padding: 35px /* text */ /* **** */ /* & .title-wrapper */ /* graph */ /* ***** */ /* & .performance-svg-wrapper */ /* graph info */ /* ********** */ } .performance-section-timesheets__column__inner .title-wrapper { height: 72px; width: 100%; display: -ms-flexbox; display: flex; } @media (max-width: 980px) { .performance-section-timesheets__column__inner .title-wrapper { height: auto; display: block; } } .performance-section-timesheets__column__inner .title-wrapper p { -ms-flex-item-align: end; align-self: flex-end; text-align: left; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; } .performance-section-timesheets__column__inner .performance-svg-wrapper { padding: 20px 0; position: relative;/* & .center-align */ } .performance-section-timesheets__column__inner .performance-svg-wrapper .center-align { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 14px; font-size: 1.4rem; line-height: 1.2; text-align: center; font-weight: bold; } .performance-section-timesheets__column__inner .performance-svg-wrapper .center-align .chart-percentage { font-size: 48px; font-size: 4.8rem; } .performance-section-timesheets__column__inner .performance-timesheets-graphinfo { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } .performance-section-timesheets__column__inner .performance-timesheets-graphinfo__column { -ms-flex: 0 1 auto; flex: 0 1 auto; } .performance-section-timesheets__column__inner .performance-timesheets-graphinfo__column__label { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; text-align: center; } .performance-section-timesheets__column__inner .performance-timesheets-graphinfo__column__value { font-size: 36px; font-size: 3.6rem; line-height: 1.2; font-weight: bold; } /* .performance-section-timesheets__column__inner */ /** -------------------------------------------------- #block "jobtypes" #block "estimated vs logged" #block "bug ratio" -------------------------------------------------- */ .hide-desktop { display: none; } .performance-section--jobtypes { text-align: center; } .performance-jobtype-wrapper { position: relative; padding-top: 50px; } .performance-jobtype-wrapper:after { content: ''; display: block; clear: both; } .performance-jobtype-element { position: relative; float: left; } .performance-jobtype-element-logo { position: relative; width: 32px; height: 32px; margin: 0 auto 18px; background-repeat: no-repeat; background-size: contain; } .performance-jobtype-element-bar { position: relative; width: 100%; border-bottom: 15px solid transparent; } .performance-jobtype-element-info { text-align: center; padding-top: 18px; } .performance-jobtype-element-info__value { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; } .performance-jobtype-element-info__label { font-size: 10px; font-size: 1.0rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } /* jobtypes legend */ .jobtype-section__toggle { margin-top: 68px; margin-bottom: 68px } .jobtype-section__toggle button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; background: transparent; font-family: "sofia-pro", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #000000; color: #ffffff; font-size: 14px; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; padding: 8px 40px 10px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #000000; min-width: 160px; } .jobtype-section__toggle button:hover { color: #000; background-color: #fff; } .jobtype-section__toggle button:hover:after { background-image: url('../images/distribution/icons/toggle-arrow--black--down.svg'); } .jobtype-section__toggle button.active:after { background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); } .jobtype-section__toggle button.active:hover:after { background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); } .jobtype-section__toggle button:after { content: ''; display: block; width: 12px; height: 8px; background-image: url('../images/distribution/icons/toggle-arrow--white--down.svg'); background-repeat: no-repeat; background-size: 12px 8px; background-position: center center; position: absolute; top: 50%; margin-top: -4px; right: 20px; } .jobtype-legend { } .jobtype-legend .jobtype-inner-wrapper { width: 660px; max-widht: 90%; margin: auto; padding: 24px; background: #f7f7f7; margin-bottom: 18px; display: none; } .jobtype-legend .jobtype-inner-wrapper:after { content: ''; display: block; clear: both; } .jobtype-legend .jobtype-inner-wrapper.active { display: block; } .jobtype-legend .jobtype-inner-wrapper .left, .jobtype-legend .jobtype-inner-wrapper .middle { border-right: 1px solid #F9F9FB; } .jobtype-legend .jobtype-inner-wrapper .middle, .jobtype-legend .jobtype-inner-wrapper .right { padding-left: 23px; } .jobtype-legend .jobtype-inner-wrapper .left, .jobtype-legend .jobtype-inner-wrapper .middle, .jobtype-legend .jobtype-inner-wrapper .right { width: 33.33333%; float: left; text-align: left; height: 264px; } .jobtype-legend .jobtype-inner-wrapper .left div, .jobtype-legend .jobtype-inner-wrapper .middle div, .jobtype-legend .jobtype-inner-wrapper .right div { padding: 6px 0px; } .jobtype-legend .jobtype-inner-wrapper .left div img, .jobtype-legend .jobtype-inner-wrapper .middle div img, .jobtype-legend .jobtype-inner-wrapper .right div img { height: 32px; width: auto; } .jobtype-legend .jobtype-inner-wrapper .left div p, .jobtype-legend .jobtype-inner-wrapper .middle div p, .jobtype-legend .jobtype-inner-wrapper .right div p { display: inline; padding-left: 10px; } /** -------------------------------------------------- #block "estimate vs logged" -------------------------------------------------- */ .performance-section--estimatevslogged { } /** -------------------------------------------------- #block "estimate vs logged table details" -------------------------------------------------- */ #estimate-vs-logged-details { } /** -------------------------------------------------- #block "bug ratio" -------------------------------------------------- */ /** -------------------------------------------------- #block "sickness" -------------------------------------------------- */ .performance-section--sickness { } .performance-sickness-content { margin-top: 50px; } /* intro */ /* ***** */ .performance-sickness__intro { padding: 0 10px; max-width: 650px; margin: 0 auto; margin-bottom: 20px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; text-align: center; } /* score */ /* ***** */ .performance-sickness__score { max-width: 300px; margin: 0 auto; margin-bottom: 20px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } .performance-sickness__score__item { -ms-flex: 0 1 auto; flex: 0 1 auto; text-align: center } .performance-sickness__score__item .value { font-size: 36px; font-size: 3.6rem; line-height: 1.2; font-weight: bold; } .performance-sickness__score__item .label { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; } /* .performance-sickness__score__item */ /* chart */ /* ***** */ .performance-sickness__chart { position: relative; max-width: 300px; margin: 0 auto; margin-bottom: 70px; } .performance-sickness__chart__overlay { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 48px; font-size: 4.8rem; line-height: 1.2; text-align: center; font-weight: bold; } /* .performance-sickness__chart__overlay */ /* calendars */ /* ********* */ /* calendar arrows */ .performance_sickness_calendars__outer { position: relative } .performance_sickness_calendars__outer .calendar-arrow-left { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: -20px; } .performance_sickness_calendars__outer .calendar-arrow-right { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); right: -20px; } .performance-sickness__calendars { background: #fff; overflow-x: auto } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline { display: inline-block !important; width: auto !important; white-space: nowrap; padding: 0 12px; border: 0; border-radius: 0; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table { table-layout: fixed; width: auto; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table span { text-align: center; color: #454545; padding: 7px 0px 6px 0px; z-index: 2; position: relative; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table .ui-datepicker-current-day a { text-align: center; color: #454545 !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table a { cursor: default; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table .ui-datepicker-current-day { color: #454545; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline table .ui-state-disabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5 !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group { float: none !important; display: inline-block; padding: 12px 12px 5px; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group.ui-state-disabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; pointer-events: auto; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group td { padding: 0px !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group td a { text-align: center; padding: 7px 0px 6px 0px; z-index: 2; position: relative; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group .sick-day { color: #fff !important; position: relative; z-index: 22; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group .sick-day:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-bottom: 27px solid rgba(33,78,191, 0.5) !important; display: block; z-index: -1; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group .sick-day-single { background: none !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group .sick-day-single:after { display: none !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group th { width: 28px !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr { } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single { border-radius: 50px 0px 0px 50px; overflow: hidden; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single a { color: white !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end { border-radius: 0px 50px 50px 0px; overflow: hidden; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end a { color: white !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single { } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single a { color: white !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single { position: relative; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end a, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single a { color: white !important; } .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-start:before, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-end:before, .performance-sickness__calendars #sickness-calendars .ui-datepicker-inline .ui-datepicker-group tr .sick-day-single:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";/* border-bottom: 27px solid var(--brand-blue); */ display: block; z-index: 0; border-radius: 50px; overflow: hidden; background-color: #214ebf; } /* .performance-sickness__calendars */ /** -------------------------------------------------- #block "nps score" -------------------------------------------------- */ .performance-section--npsscore { } .performance-nps-score-value-block { margin-top: 40px; font-size: 24px; font-size: 2.4rem; line-height: 1.2; font-weight: bold; text-align: center; } /** -------------------------------------------------- #block "service desk" -------------------------------------------------- */ .performance-servicedesk-block { margin-top: 50px; } .performance-servicedesk-block__title { font-size: 24px; font-size: 2.4rem; margin-bottom: 20px; } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * sales * * -------------------------------------------------- */ /* sales body */ .sales { } .sales .page-top { padding: 55px 0px; } .sales .main-content__inner > button { display: none; } .sales .table__wrapper--sales-inner { overflow: hidden; overflow-x: auto; } .sales .main-content__inner { padding-bottom: 55px; } /* -------------------------------------------------- #sales -------------------------------------------------- */ .table__wrapper--sales { padding: 0 60px; } table.table--sales { } table.table--sales tr { } table.table--sales tr.team-groups { background-color: rgba(45,44,43, 0.9); color: #fff; } table.table--sales tr.team-groups:hover { background-color: rgba(45,44,43, 0.9); color: #fff; } table.table--sales tr.avg { background-color: rgba(33,78,191, 0.7); color: #fff; } table.table--sales tr.avg:hover { background-color: rgba(33,78,191, 0.7); color: #fff; } table.table--sales tr.avg th { padding-left: 27px; } table.table--sales tr.odd {/* background: #ebebeb; */ background-color: rgba(45,44,43, 0.1); } table.table--sales tr:not(.team-groups):not(.required-projected):not(.avg):hover { background-color: rgba(45,44,43, 0.25); } table.table--sales th, table.table--sales td { padding: 5px 15px; } table.table--sales th:first-child, table.table--sales td:first-child { padding-left: 15px; } table.table--sales td { white-space: nowrap; } table.table--sales td span { position: relative; display: inline-block; } table.table--sales td span:before { content: ''; display: inline-block; margin-right: 4px; width: 8px; height: 8px; border-radius: 4px; } table.table--sales td.eighty { } table.table--sales td.eighty span:before { background-color: #6ecc00; } table.table--sales td.less { } table.table--sales td.less span:before { background-color: #F7C61C; } /** -------------------------------------------------- * * BURNDOWN * * TABLE OF CONTENTS * general * info block * burndown chart * current status zone * burndown details - general * burndown details - assignee block* * burndown table * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ body.burndown { } .burndown-page-content { padding: 55px 0; } /** -------------------------------------------------- #info block -------------------------------------------------- */ .burndown-info-container { margin-top: 35px; } .burndown-info__text { font-size: 14px; font-size: 1.4rem; line-height: 1.5; } .burndown-info-toggle { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; border: 2px solid #e776a2; color: #e776a2; background-color: #fff; min-width: 140px; margin: 20px 0; } .burndown-info-toggle:hover, .burndown-info-toggle:focus { background-color: #86dfbd; border-color: #86dfbd; } .burndown-info-toggle:hover, .burndown-info-toggle:focus { background-color: rgba(231,118,162, 0.8); border: 2px solid rgba(231,118,162, 0.1); color: #fff; } .burndown-info__toggle-zone { } .burndown-info__group { margin-top: 20px } .burndown-info__group:first-child { margin-top: 0; } .burndown-info__group__title { font-size: 24px; font-size: 2.4rem; line-height: 1.2; font-weight: bold; margin-bottom: 20px; } .burndown-info__assignee { margin-top: 10px } .burndown-info__assignee:first-child { margin-top: 0; } .burndown-info__assignee__inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; } .burndown-info__assignee__main-info { width: 40%; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding-right: 40px; } .burndown-info__assignee__user-image { display: block; text-indent: -99999px; width: 28px; height: 28px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; margin-right: 12px; } .burndown-info__assignee__user-name { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .burndown-info__assignee__user-velocity { margin-left: 10px; font-size: 13px; font-size: 1.3rem; line-height: 1.2; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .burndown-info__assignee__extra-info { width: 60%; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .burndown-info__assignee__user-logged { width: 50%; font-size: 13px; font-size: 1.3rem; line-height: 1.2; padding-right: 40px; width: 40%; } .burndown-info__assignee__user-progress { font-size: 13px; font-size: 1.3rem; line-height: 1.2; } /** -------------------------------------------------- #burndown chart -------------------------------------------------- */ .burndown-chart-zone { } /* legend */ /* ****** */ .burndown-chart-legend { /* ul */ } .burndown-chart-legend ul { padding: 0; margin: 0; list-style: none;/* li */ } .burndown-chart-legend ul li { margin: 5px 0; font-size: 15px; font-size: 1.5rem; line-height: 1.4; font-weight: 300; } .burndown-chart-legend ul li:before { content: ''; display: inline-block; width: 25px; height: 3px; margin-right: 7px; } .burndown-chart-legend ul li.ideal-burndown { } .burndown-chart-legend ul li.ideal-burndown:before { background-color: lightgreen; } .burndown-chart-legend ul li.projected-burndown { } .burndown-chart-legend ul li.projected-burndown:before { background-color: red; } .burndown-chart-legend ul li.logged-burndown { } .burndown-chart-legend ul li.logged-burndown:before { background-color: blue; } .burndown-chart-legend ul li.remaining-tasks { } .burndown-chart-legend ul li.remaining-tasks:before { background-color: lightblue; } .burndown-chart-legend ul li.planner-dates { } .burndown-chart-legend ul li.planner-dates:before { background-color: orange; } /* .burndown-chart-legend */ /* axes */ /* **** */ /* x-axis */ /* ------ */ .burndown-chart-x-axis { text-align: center } .burndown-chart-x-axis.odd { padding-top: 15px; } .burndown-chart-x-axis .date-1 { font-size: 14px; font-size: 1.4rem; } .burndown-chart-x-axis .date-2 { font-size: 10px; font-size: 1rem; } /* .burndown-chart-x-axis */ /* y-axis */ /* ------ */ .burndown-chart-y-axis { } .burndown-chart-y-axis.axis-left { text-align: right; } .burndown-chart-y-axis.axis-left p { margin: 12px 6px 0 0; } .burndown-chart-y-axis.axis-right { } .burndown-chart-y-axis.axis-right p { margin: 12px 0 0 6px; } /* .burndown-chart-y-axis */ /** -------------------------------------------------- #current status zone -------------------------------------------------- */ .burndown-current-status-zone { margin-top: 60px; border-top: 4px solid #F9F9FB; padding-top: 60px; } .burndown-current-status-zone__title { font-size: 38px; font-size: 3.8rem; text-align: center; margin-bottom: 20px; } .burndown-current-status-zone__info { font-size: 14px; font-size: 1.4rem; line-height: 1.5; text-align: center; } /** -------------------------------------------------- #burndown details - general -------------------------------------------------- */ .burndown-details { } .burndown-details__block { margin: 60px 0; } .burndown-details__block__title { font-size: 24px; font-size: 2.4rem; line-height: 1.2; font-weight: bold; } .burndown-details__block__content { margin-top: 15px; } /** -------------------------------------------------- #burndown details - assignee block -------------------------------------------------- */ .burndown-details__assignee-block { margin-bottom: 28px; } /* assignee - top block */ /* ******************** */ .burndown-details__assignee-top { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 5px; } .burndown-details__assignee-top__info { -ms-flex: 1 0 auto; flex: 1 0 auto; display: -ms-flexbox; display: flex; } .burndown-details__assignee-top__info__inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; } .burndown-details__assignee-top__info__user-image { display: block; text-indent: -99999px; width: 28px; height: 28px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; margin-right: 12px; } .burndown-details__assignee-top__info__user-name { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .burndown-details__assignee-top__info__user-velocity { margin-left: 10px; font-size: 13px; font-size: 1.3rem; line-height: 1.2; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .burndown-details__assignee-top__actions { -ms-flex: 1 0 auto; flex: 1 0 auto; text-align: right } .burndown-details__assignee-top__actions .burndown-details-button { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #000; color: #fff; font-size: 13px; font-size: 1.3rem; line-height: 1.2; font-weight: bold; padding: 5px 40px 7px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #000; min-width: 160px; background: #D8D8D8; border-color: #D8D8D8; color: #fff; } .burndown-details__assignee-top__actions .burndown-details-button:hover, .burndown-details__assignee-top__actions .burndown-details-button:focus { background: #fff; color: #000; border-color: #000; } .burndown-details__assignee-top__actions .burndown-details-button:hover:after, .burndown-details__assignee-top__actions .burndown-details-button:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); } .burndown-details__assignee-top__actions .burndown-details-button:after { content: ''; display: block; width: 10px; height: 6px; background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); background-repeat: no-repeat; background-size: 10px 6px; background-position: center center; position: absolute; top: 50%; margin-top: -3px; right: 20px; } .burndown-details__assignee-top__actions .burndown-details-button.closed { } .burndown-details__assignee-top__actions .burndown-details-button.closed:after { -ms-transform: scale(-1); transform: scale(-1); } .burndown-details__assignee-top__actions .burndown-details-button:hover, .burndown-details__assignee-top__actions .burndown-details-button:focus { background: #fff; color: #D8D8D8; border-color: #D8D8D8; } .burndown-details__assignee-top__actions .burndown-details-button:hover:after, .burndown-details__assignee-top__actions .burndown-details-button:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--light--up.svg'); } /* .burndown-details__assignee-top__actions */ /** -------------------------------------------------- #burndown table -------------------------------------------------- */ .burndown-table-wrapper { overflow-x: auto; } .burndown-table { min-width: 900px /* completed tasks */ /* *************** */ /* column widths */ /* ************* */ } .burndown-table th { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; } .burndown-table tr { background: #fff; border-bottom: 2px solid #F9F9FB; } .burndown-table tr.total th { color: #5745ca; } .burndown-table tr.detail { background-color: #f7f7f7; } .burndown-table td { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; border-top: 2px solid #F9F9FB; } .burndown-table td.number { color: #5745ca; } .burndown-table td.completed { text-decoration: line-through; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; opacity: 0.7; } .burndown-table td.completed a:hover, .burndown-table td.completed a:focus { color: #000; } .burndown-table .burndown-table__column--task { width: 45%; } .burndown-table .burndown-table__column--number { width: 11%; } /* .burndown-table */ /*! -------------------------------------------------- * * TABLE OF CONTENTS * * bug * * -------------------------------------------------- */ /* -------------------------------------------------- #bug -------------------------------------------------- */ #bug-wrapper { } #bug-wrapper h2 { width: 600px; max-width: 90%; margin-left: auto; margin-right: auto; } #bug-wrapper .bugs-wrapper, #bug-wrapper .hours-wrapper { width: 600px; max-width: 90%; margin: 0 auto 20px auto; } #bug-wrapper .bugs-wrapper .intro, #bug-wrapper .hours-wrapper .intro { border-top: 1px solid #D8D8D8; margin: 0; padding: 30px 50px 10px 50px; text-align: center; } @media (max-width: 568px) { #bug-wrapper .bugs-wrapper .intro, #bug-wrapper .hours-wrapper .intro { padding: 30px 0 20px 0; } } #bug-wrapper .bugs-wrapper .bugs-items, #bug-wrapper .bugs-wrapper .hours-items, #bug-wrapper .hours-wrapper .bugs-items, #bug-wrapper .hours-wrapper .hours-items { width: 500px; margin-left: auto; margin-right: auto; } #bug-wrapper .bugs-wrapper .bugs-items:after, #bug-wrapper .bugs-wrapper .hours-items:after, #bug-wrapper .hours-wrapper .bugs-items:after, #bug-wrapper .hours-wrapper .hours-items:after { content: ''; display: block; clear: both; } @media (max-width: 568px) { #bug-wrapper .bugs-wrapper .bugs-items, #bug-wrapper .bugs-wrapper .hours-items, #bug-wrapper .hours-wrapper .bugs-items, #bug-wrapper .hours-wrapper .hours-items { width: 100%; } } #bug-wrapper .bugs-wrapper section, #bug-wrapper .hours-wrapper section { display: block; float: left; width: 156.66667px; margin-right: 10px; margin-bottom: 20px; } @media (max-width: 568px) { #bug-wrapper .bugs-wrapper section, #bug-wrapper .hours-wrapper section { width: calc(100% / 3 - 10px); } } #bug-wrapper .bugs-wrapper .bug-percentage, #bug-wrapper .hours-wrapper .bug-percentage { text-align: center; } #bug-wrapper .bugs-wrapper .bug-percentage span, #bug-wrapper .hours-wrapper .bug-percentage span { font-size: 40px; font-size: 4rem; } @media (max-width: 568px) { #bug-wrapper .bugs-wrapper .bug-percentage span, #bug-wrapper .hours-wrapper .bug-percentage span { font-size: 3.2rem; } } #bug-wrapper .bugs-wrapper .bug-percentage span.percent, #bug-wrapper .hours-wrapper .bug-percentage span.percent { font-size: 22px; font-size: 2.2rem; } #bug-wrapper .bugs-wrapper .bug-percentage span.yellow, #bug-wrapper .hours-wrapper .bug-percentage span.yellow { color: #F7C61C; } #bug-wrapper .bugs-wrapper .bug-percentage span.green, #bug-wrapper .hours-wrapper .bug-percentage span.green { color: #6ecc00; } #bug-wrapper .bugs-wrapper .bug-percentage span.red, #bug-wrapper .hours-wrapper .bug-percentage span.red { color: #e45959; } #bug-wrapper .bugs-wrapper .bug-image-wrapper, #bug-wrapper .hours-wrapper .bug-image-wrapper { text-align: center; } #bug-wrapper .bugs-wrapper .bug-image-wrapper img, #bug-wrapper .hours-wrapper .bug-image-wrapper img { height: 70px; } @media (max-width: 568px) { #bug-wrapper .bugs-wrapper .bug-image-wrapper img, #bug-wrapper .hours-wrapper .bug-image-wrapper img { height: 55px; } } #bug-wrapper .hours-wrapper { } #bug-wrapper .hours-wrapper .intro { border-top: none; } #bug-wrapper .bug-detail-button-wrapper { padding-top: 20px; text-align: center; } #bug-wrapper .bug-detail-button-wrapper span { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; display: inline-block; padding: 10px 25px 12px 25px; background-color: transparent; border: 1px solid #F9F9FB; border-radius: 50px; color: #2d2c2b; transition: all 0.3s; } #bug-wrapper .bug-detail-button-wrapper span:hover, #bug-wrapper .bug-detail-button-wrapper span:focus { background-color: #214ebf; border-color: #214ebf; color: #fff; } #bug-wrapper .bug-detail-wrapper { display: none; margin-top: 30px; } #bug-wrapper .bug-detail-wrapper .bug-detail-table-wrapper { overflow-x: auto; max-width: 1400px; margin: 0 auto; } #bug-wrapper .bug-detail-wrapper .bug-detail-table { } #bug-wrapper .bug-detail-wrapper .bug-detail-table tbody tr { } #bug-wrapper .bug-detail-wrapper .bug-detail-table tbody tr:hover { background: #fff; } #bug-wrapper .bug-detail-wrapper .bug-detail-table tbody tr.subtasks { display: none; background: #fff; } #bug-wrapper .bug-detail-wrapper .bug-detail-table td { width: 10%; } #bug-wrapper .bug-detail-wrapper .bug-detail-table td.project-name { width: auto; color: #214ebf; font-weight: bold; cursor: pointer; } #bug-wrapper .bug-detail-wrapper .bug-detail-table td.yellow { color: #F7C61C; } #bug-wrapper .bug-detail-wrapper .bug-detail-table td.green { color: #6ecc00; } #bug-wrapper .bug-detail-wrapper .bug-detail-table td.red { color: #e45959; } #bug-wrapper .bug-detail-wrapper .bug-detail-table tfoot th { border-bottom: none; } #bug-wrapper .bug-detail-wrapper .bug-detail-table tfoot th.yellow { color: #F7C61C; } #bug-wrapper .bug-detail-wrapper .bug-detail-table tfoot th.green { color: #6ecc00; } #bug-wrapper .bug-detail-wrapper .bug-detail-table tfoot th.red { color: #e45959; } /** -------------------------------------------------- * * RAG * * TABLE OF CONTENTS * general * rag projects table * rag dialog * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ body.rag { } body.rag .sidebar { display: none; } body.rag .main-content__inner { padding: 0 50px; } .rag-page-content { padding: 55px 0 0; } .rag-page-inner-content { margin: 55px 0; } .rag-page__top-action__inner .select2 { background-color: #fbfaf9; border-radius: 11px; } /** -------------------------------------------------- #rag projects table -------------------------------------------------- */ .rag-page__top-actions { margin: 0 -20px; margin-bottom: 30px; text-align: right; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .rag-page__top-action { -ms-flex: 1 1 auto; flex: 1 1 auto } @media (max-width: 768px) { .rag-page__top-action { -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .rag-page__top-action--tab-toggle { -ms-flex: 0 1 auto; flex: 0 1 auto } @media (max-width: 768px) { .rag-page__top-action--tab-toggle { -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-top: 10px; } } .rag-page__top-action__inner { padding: 0 20px; } /* tab toggle */ /* ********** */ .rag-page__tab-toggle { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background: #000; color: #fff; font-size: 13px; font-size: 1.3rem; line-height: 1.2; font-weight: bold; padding: 5px 40px 7px 20px; border-radius: 37px; transition: background-color 0.2s ease, color 0.2s ease; border: 2px solid #000; min-width: 160px; background: #D8D8D8; border-color: #D8D8D8; color: #fff; } .rag-page__tab-toggle:hover, .rag-page__tab-toggle:focus { background: #fff; color: #000; border-color: #000; } .rag-page__tab-toggle:hover:after, .rag-page__tab-toggle:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--black--up.svg'); } .rag-page__tab-toggle:after { content: ''; display: block; width: 10px; height: 6px; background-image: url('../images/distribution/icons/toggle-arrow--white--up.svg'); background-repeat: no-repeat; background-size: 10px 6px; background-position: center center; position: absolute; top: 50%; margin-top: -3px; right: 20px; } .rag-page__tab-toggle.closed { } .rag-page__tab-toggle.closed:after { -ms-transform: scale(-1); transform: scale(-1); } .rag-page__tab-toggle:hover, .rag-page__tab-toggle:focus { background: #fff; color: #D8D8D8; border-color: #D8D8D8; } .rag-page__tab-toggle:hover:after, .rag-page__tab-toggle:focus:after { background-image: url('../images/distribution/icons/toggle-arrow--light--up.svg'); } /* table */ /* ***** */ .rag-projects-table-wrapper { overflow-x: auto; } .rag-projects-table { min-width: 900px; /* sort icons */ /* column widths */ /* ------------- */ & .rag-projects-table__column-id, .rag-projects-table__column-rm, .rag-projects-table__column-pm { width: 5%; } /* info icon */ /* --------- */ /* & .rag-info */ } .rag-projects-table th { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; vertical-align: bottom; } .rag-projects-table .rag-sort { position: relative; cursor: pointer; } .rag-projects-table .rag-sort:after { content: ''; display: inline-block; width: 10px; height: 10px; background-image: url('../images/distribution/icons/icon_sort.svg'); background-repeat: no-repeat; background-position: center center; background-size: 10px 10px; transition: background-image 0.2s ease-out; margin-left: 6px; position: relative; top: 0; } .rag-projects-table .rag-sort-none { } .rag-projects-table .rag-sort-desc:after { background-image: url('../images/distribution/icons/icon_sort--desc.svg'); } .rag-projects-table .rag-sort-asc:after { background-image: url('../images/distribution/icons/icon_sort--asc.svg'); } .rag-projects-table tr { background: #fff; border-bottom: 2px solid #F9F9FB; } .rag-projects-table tr.rag-project { cursor: pointer; transition: background-color 0.1s ease; } .rag-projects-table tr.rag-project:hover { background-color: #fffcfc; } .rag-projects-table tr.rag-project-details { background-color: #f7f7f7; } .rag-projects-table td { padding: 15px 10px 15px 10px; border: 0; border-bottom: 2px solid #F9F9FB; border-top: 2px solid #F9F9FB; } .rag-projects-table tr.rag-project-details td { font-weight: 200; } .rag-projects-table .rag-projects-table__details-project-name { display: block; position: relative; padding-left: 25px; } .rag-projects-table .rag-projects-table__details-project-name:before { content: ''; display: block; width: 5px; height: 5px; background-color: #9c9c9b; border-radius: 50%; position: absolute; top: 5px; left: 5px; } .rag-projects-table .rag-projects-table__column-project { width: 35%; } .rag-projects-table .rag-projects-table__column-number { width: 10%; } .rag-projects-table .rag-info { display: inline-block; text-indent: -99999px; width: 20px; height: 20px; background-image: url('../images/distribution/icons/icon_info.svg'); background-repeat: no-repeat; background-position: center center; background-size: 12px 12px; border: 2px solid #000; border-radius: 50%; margin-left: 5px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; opacity: 0.4; transition: opacity 0.2s ease-out; } .rag-projects-table .rag-info:hover, .rag-projects-table .rag-info:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } /* .rag-projects-table */ /** -------------------------------------------------- #rag projects table - price items -------------------------------------------------- */ .rag-price-item { position: relative; } .rag-price-item__colour { display: block; position: absolute; top: 50%; left: 0; margin-top: -8px; margin-top: -0.8rem } .rag-price-item__colour.round { width: 16px; width: 1.6rem; height: 16px; height: 1.6rem; border-radius: 50%; box-shadow: 0 0 4px 1px rgba(0, 0, 0, .06); background-color: #9ccc1f; } .rag-price-item__colour.triangle { width: 0px; height: 0px; border-left: 8px solid white; border-left: 0.8rem solid white; border-right: 8px solid white; border-right: 0.8rem solid white; border-bottom: 16px solid #ff9825; border-bottom: 1.6rem solid #ff9825; } .rag-price-item__colour.square { width: 16px; width: 1.6rem; height: 16px; height: 1.6rem; background-color: #d41f1b; box-shadow: 0 0 4px 1px rgba(0, 0, 0, .06); } .rag-price-item__content { padding-left: 24px; padding-left: 2.4rem; filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: brightness(52%); } .rag-price-item__amount { } .rag-price-item__hours { display: block; font-size: 0.9em; line-height: 1.1; } /* in collapsible zone */ .rag-price-item--mini { } .rag-price-item--mini .rag-price-item__colour { width: 12px; width: 1.2rem; height: 12px; height: 1.2rem; margin-top: -6px; margin-top: -0.6rem; left: 2px; left: 0.2rem; } /* .rag-price-item--mini */ /** -------------------------------------------------- #rag dialog -------------------------------------------------- */ .ui-dialog .rag-dialog { padding: 0 20px 20px /* text */ /* **** */ /* tasks table */ /* *********** */ /* .rag-popup__tasks-table */ /* budget table */ /* ************ */ /* & .rag-popup__budget-table */ } .ui-dialog .rag-dialog > p { font-size: 14px; font-size: 1.4rem; line-height: 1.25; font-weight: 200; } .ui-dialog .rag-dialog .rag-popup__tasks-table { margin-top: 10px;/* & td */ } .ui-dialog .rag-dialog .rag-popup__tasks-table th { font-weight: bold; padding: 6px 5px; } .ui-dialog .rag-dialog .rag-popup__tasks-table td { font-weight: 200; border-bottom: 1px solid #eee; padding: 6px 5px; } .ui-dialog .rag-dialog .rag-popup__tasks-table td a { transition: color 0.15s ease-out; } .ui-dialog .rag-dialog .rag-popup__tasks-table td a:hover, .ui-dialog .rag-dialog .rag-popup__tasks-table td a:focus { text-decoration: underline; } .ui-dialog .rag-dialog .rag-popup__budget-table { margin-top: 10px;/* & td */ } .ui-dialog .rag-dialog .rag-popup__budget-table th { font-weight: bold; padding: 6px 5px; } .ui-dialog .rag-dialog .rag-popup__budget-table td { font-weight: 200; border-bottom: 1px solid #eee; padding: 6px 5px; } .ui-dialog .rag-dialog .rag-popup__budget-table td a { transition: color 0.15s ease-out; } .ui-dialog .rag-dialog .rag-popup__budget-table td a:hover, .ui-dialog .rag-dialog .rag-popup__budget-table td a:focus { text-decoration: underline; } .ui-dialog .rag-dialog .rag-popup__budget-table .rag-popup__budget-table__label { } .ui-dialog .rag-dialog .rag-popup__budget-table .rag-popup__budget-table__value { text-align: right; } .ui-dialog .rag-dialog .rag-popup__tasks-table + .rag-popup__budget-table { margin-top: 20px; } /* .ui-dialog .rag-dialog */ /** -------------------------------------------------- #rag fixed table header -------------------------------------------------- */ /* body.rag.sticky-table-header { & .rag-projects-table-wrapper { padding-top: 6.2rem; } & thead { position: fixed; background: var(--white); z-index: 9; top: 0; } & table { display: block; width: 100%; & tr td:nth-child(1), & th:nth-child(1) { width: 54px; min-width: 54px; } & tr td:nth-child(2), & th:nth-child(2) { width: 478px; min-width: 187px; } & tr td:nth-child(3), & th:nth-child(3) { width: 84px; min-width: 84px; } & tr td:nth-child(4), & th:nth-child(4) { width: 83px; min-width: 83px; } & tr td:nth-child(5), & th:nth-child(5) { width: 139px; min-width: 90px; } & tr td:nth-child(6), & th:nth-child(6) { width: 139px; min-width: 96px; } & tr td:nth-child(7), & th:nth-child(7) { width: 139px; min-width: 98px;} & tr td:nth-child(8), & th:nth-child(8) { width: 139px; min-width: 104px;} & tr td:nth-child(9), & th:nth-child(9) { width: 139px; min-width: 104px;} & th:nth-child(1) { width: 54px; min-width: 54px; } & th:nth-child(2) { width: 478px; min-width: 187px; } & th:nth-child(3) { width: 84px; min-width: 84px; } & th:nth-child(4) { width: 83px; min-width: 83px; } & th:nth-child(5) { width: 139px; min-width: 90px; } & th:nth-child(6) { width: 139px; min-width: 96px; } & th:nth-child(7) { width: 139px; min-width: 98px;} & th:nth-child(8) { width: 139px; min-width: 104px;} & th:nth-child(9) { width: 139px; min-width: 104px;} & tr td:nth-child(1) { width: 54px; min-width: 54px; } & tr td:nth-child(2) { width: 478px; min-width: 187px; } & tr td:nth-child(3) { width: 84px; min-width: 84px; } & tr td:nth-child(4) { width: 83px; min-width: 83px; } & tr td:nth-child(5) { width: 139px; min-width: 90px; } & tr td:nth-child(6) { width: 139px; min-width: 96px; } & tr td:nth-child(7) { width: 139px; min-width: 98px;} & tr td:nth-child(8) { width: 139px; min-width: 104px;} & tr td:nth-child(9) { width: 139px; min-width: 104px;} } } */ /** -------------------------------------------------- * * EVALUATIONS * * TABLE OF CONTENTS * general * evaluation actions * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .evaluation-page-content { padding: 55px 0 } .evaluation-page-content .page-top { margin-bottom: 55px; } /** -------------------------------------------------- #evaluation actions -------------------------------------------------- */ .evaluation-action-item { display: block; min-width: 120px; text-align: center } .evaluation-action-item.open { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; background-color: #000; color: #fff; font-size: 12px; font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-transform: uppercase; padding: 9px 20px 9px 20px; border-radius: 4rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid #000; } .evaluation-action-item.open:hover, .evaluation-action-item.open:focus { background-color: #86dfbd; border-color: #86dfbd; } .evaluation-action-item.completed { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; cursor: default; overflow: hidden; padding: 8px 20px 10px 20px; border: 2px solid #6ecc00; border-radius: 37px; background: #6ecc00 no-repeat center center; background-image: url('../images/distribution/icons/icon--check--white.svg'); background-size: 40px auto; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; color: #fff; text-align: left; text-indent: -9999px; } .evaluation-action-item.pending { position: relative; display: inline-block; cursor: pointer; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; font-family: "Urbanist", "Muli", Arial, Helvetica, sans-serif; white-space: normal; text-decoration: none; cursor: default; overflow: hidden; padding: 8px 20px 10px 20px; border: 0px; border-radius: 37px; background: #939598; font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; color: #fff; } /* .evaluation-action-item */ /** -------------------------------------------------- * * layout - evaluations - OVERVIEW * * TABLE OF CONTENTS * overview block layout * overview block layout - intro * overview block layout - summary * overview - evaluation block * overview - 360 block * * -------------------------------------------------- */ /** -------------------------------------------------- #overview block layout -------------------------------------------------- */ .evaluation-home-overview-items { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -20px; } .evaluation-home-overview-item { -ms-flex: 1 1 50%; flex: 1 1 50% /* (--mqXL) */ } @media (max-width: 1300px) { .evaluation-home-overview-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .evaluation-home-overview-item + .evaluation-home-overview-item { margin-top: 50px; } } /* .evaluation-home-overview-item */ .evaluation-home-overview-item__inner { margin: 0 20px; border: 3px solid #ededed; } /** -------------------------------------------------- #overview block layout - intro -------------------------------------------------- */ .evaluation-home-overview-item__intro { padding: 20px 40px 20px 40px; } .evaluation-home-overview-item__title { font-size: 35px; font-size: 3.5rem; margin-bottom: 20px; } .evaluation-home-overview-item__description { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /** -------------------------------------------------- #overview block layout - summary -------------------------------------------------- */ .evaluation-home-overview-item__summary { position: relative; margin: 0; padding: 20px 40px 20px 40px; border-top: 3px solid #ededed; background: #f7f7f7 /* status - nothing planned */ /* ************************ */ } .evaluation-home-overview-item__summary .pop-block__nothing-planned-zone { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /** -------------------------------------------------- #overview - evaluation block -------------------------------------------------- */ .evaluation-block { margin-bottom: 20px } .evaluation-block:last-of-type { margin-bottom: 0; } /* .evaluation-block */ /* header block */ /* ************ */ .evaluation-block__header { } .evaluation-block__header__inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .evaluation-block__header__info { -ms-flex: 1 1 60%; flex: 1 1 60%; } .evaluation-block__header__title { font-size: 22px; font-size: 2.2rem; line-height: 1.8; margin: 0; } .evaluation-block__header__message { font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; color: #000; } .evaluation-block__header__message__highlight { } .evaluation-block__header__actions { -ms-flex: 1 1 40%; flex: 1 1 40%; text-align: right; } /* content block */ /* ************* */ .evaluation-block__content { } /* message */ /* ------ */ .evaluation-block__content__message { font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; color: #000; } .evaluation-block__content__message__highlight { } /* result */ /* ------ */ .evaluation-block__content__result { margin-top: 20px; border-left: 2px solid #F9F9FB; padding: 10px; } /* title */ .evaluation-block__content__result__title { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .evaluation-block__content__result__title__label { -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; color: #000; } .evaluation-block__content__result__title__value { -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: right; font-size: 16px; font-size: 1.6rem; font-weight: bold; color: #5745ca; } .evaluation-block__content__result__title__value__scale { font-size: 12px; font-size: 1.2rem; } /* details */ .evaluation-block__content__result__details { margin-top: 10px; } .evaluation-block__content__result__details__table { /* & thead */ /* & tbody */ } .evaluation-block__content__result__details__table thead { cursor: pointer; } .evaluation-block__content__result__details__table thead.closed { } .evaluation-block__content__result__details__table thead:hover, .evaluation-block__content__result__details__table thead:focus { outline: 2px solid #ededed; } .evaluation-block__content__result__details__table thead:hover th, .evaluation-block__content__result__details__table thead:focus th { background: #ededed; } .evaluation-block__content__result__details__table thead th { font-size: 13px; font-size: 1.3rem; line-height: 1.2; font-weight: bold; border: none; color: #5745ca; padding: 5px 0; } .evaluation-block__content__result__details__table tbody { } .evaluation-block__content__result__details__table tbody tr { border-bottom: 1px solid #F9F9FB; } .evaluation-block__content__result__details__table td { font-size: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: 300; padding: 5px 0; border: 0; } .evaluation-block__content__result__details__table .evaluation-table__label-header-col { text-transform: uppercase; } .evaluation-block__content__result__details__table .evaluation-table__value--header-col { text-align: right; } .evaluation-block__content__result__details__table .evaluation-table__label-col { } .evaluation-block__content__result__details__table .evaluation-table__value-col { text-align: right; font-weight: bold; color: #5745ca; } /* .evaluation-block__content__result__details__table */ /** -------------------------------------------------- #overview - 360 block -------------------------------------------------- */ .threesixty-block { } /* status - nothing planned */ /* ************************ */ .threesixty-block__nothing-planned-zone { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /* status - complete */ /* ***************** */ .threesixty-block__complete-zone { } .threesixty-block__complete-zone__title { font-size: 22px; font-size: 2.2rem; line-height: 1.8; margin: 0; } .threesixty-block__complete-zone__result-block { margin-top: 15px; border-left: 2px solid #F9F9FB; padding: 10px; } .threesixty-block__complete-zone__result-block__score-wrapper { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .threesixty-block__complete-zone__result-block__score__label { -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; color: #000; } .threesixty-block__complete-zone__result-block__score__value { -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: right; font-size: 16px; font-size: 1.6rem; font-weight: bold; color: #5745ca; } .threesixty-block__complete-zone__result-block__score__value__scale { font-size: 12px; font-size: 1.2rem; } .threesixty-block__complete-zone__result-block__detail-link { display: inline-block; margin-top: 5px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: normal; color: #5745ca } .threesixty-block__complete-zone__result-block__detail-link:hover, .threesixty-block__complete-zone__result-block__detail-link:focus { color: #000; } /* .threesixty-block__complete-zone__result-block__detail-link */ /* status - incomplete */ /* ******************* */ .threesixty-block__incomplete-zone { } /* title */ /* ----- */ .threesixty-block__incomplete-zone__title-zone { } .threesixty-block__incomplete-zone__title { font-size: 22px; font-size: 2.2rem; line-height: 1.8; margin: 0; } .threesixty-block__incomplete-zone__notice { font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; } /* user list */ /* --------- */ .threesixty-block__incomplete-zone__items-zone { margin-top: 20px; } .threesixty-user-list { margin: 0; padding: 0; list-style: none; } .threesixty-user-list__item { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #F9F9FB; margin-bottom: 10px } .threesixty-user-list__item:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .threesixty-user-list__user-info { -ms-flex: 1 1 55%; flex: 1 1 55%; } .threesixty-user-list__user-info__name { font-size: 15px; font-size: 1.5rem; line-height: 1.4; font-weight: normal; } .threesixty-user-list__user-info__title { font-size: 14px; font-size: 1.4rem; line-height: 1.4; font-weight: 300; } .threesixty-user-list__action-zone { -ms-flex: 1 1 45%; flex: 1 1 45%; text-align: right; } /** -------------------------------------------------- * * layout - evaluations - RESULTS * * TABLE OF CONTENTS * general * * -------------------------------------------------- */ /** -------------------------------------------------- #general -------------------------------------------------- */ .evaluation-result { } .evaluation-result-page-content { padding: 55px 0 } .evaluation-result-page-content .page-top { margin-bottom: 55px; } /* .evaluation-result-page-content */ /** -------------------------------------------------- * * layout - mif evaluations * FORM PAGE * * TABLE OF CONTENTS * intro * form * form parts * feedback block * form actions * * -------------------------------------------------- */ /** -------------------------------------------------- * #intro * -------------------------------------------------- */ .mif-360-intro { max-width: 1280px; max-width: 128rem; margin: 0 auto; margin-bottom: 40px; margin-bottom: 4rem; border: 1px solid #000; border: 0.1rem solid #000; border-radius: 2.4rem; padding: 24px; padding: 2.4rem; } .mif-360-intro__title { font-size: 20px; font-size: 2rem; line-height: 1.4; } .mif-360-intro__title-highlight { } .mif-360-intro__text { margin-top: 10px; margin-top: 1rem; font-size: 16px; font-size: 1.6rem; line-height: 1.6; } /** -------------------------------------------------- * #form * -------------------------------------------------- */ .mif-360-form-block { max-width: 1280px; max-width: 128rem; margin: 0 auto; } /** -------------------------------------------------- * #form parts * -------------------------------------------------- */ .mif-360-form-part { } .mif-360-form-part + .mif-360-form-part { margin-top: 40px; margin-top: 4rem; } .mif-360-form-part__header { background-color: #000; color: #fff; padding: 12px 24px; padding: 1.2rem 2.4rem; border-top-left-radius: 24px; border-top-left-radius: 2.4rem; border-top-right-radius: 24px; border-top-right-radius: 2.4rem; } .mif-360-form-part__title { font-size: 20px; font-size: 2rem; line-height: 1.4; } .mif-360-form-part__content { border: 1px solid #000; border: 0.1rem solid #000; border-bottom-left-radius: 24px; border-bottom-left-radius: 2.4rem; border-bottom-right-radius: 24px; border-bottom-right-radius: 2.4rem; } .mif-360-form-part__info-block { text-align: left; padding: 24px; padding: 2.4rem; } .mif-360-form-part__info-block-title { font-size: 18px; font-size: 1.8rem; line-height: 1.4; } .mif-360-form-part__info-block-content { margin-top: 20px; margin-top: 2rem } .mif-360-form-part__info-block-content dl { } .mif-360-form-part__info-block-content dl > div + div { margin-top: 5px; margin-top: 0.5rem; } .mif-360-form-part__info-block-content dt { font-weight: bold; } .mif-360-form-part__info-block-content dd { font-style: italic; } .mif-360-form-part__question-block { margin-top: 20px; margin-top: 2rem; text-align: left; padding: 0 24px; padding: 0 2.4rem; } .mif-360-form-part__question-block-title { font-size: 18px; font-size: 1.8rem; line-height: 1.4; } .mif-360-form-part__question-block-content { margin-top: 4px; margin-top: 0.4rem; } .mif-360-evaluation-items { } .mif-360-evaluation-item { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; padding: 18px 0; padding: 1.8rem 0 } .mif-360-evaluation-item label { display: block; margin-bottom: 5px; } .mif-360-evaluation-item p { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } .mif-360-evaluation-item .left { -ms-flex: 1 1 65%; flex: 1 1 65%; width: 65%; text-align: left; } @media (max-width: 1300px) { .mif-360-evaluation-item .left { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; } } .mif-360-evaluation-item .left__inner { padding-right: 10%; } @media (max-width: 1300px) { .mif-360-evaluation-item .left__inner { padding-right: 0; } } .mif-360-evaluation-item .right { -ms-flex: 1 1 35%; flex: 1 1 35%; width: 35%; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1300px) { .mif-360-evaluation-item .right { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; text-align: left; margin-top: 10px; } } .mif-360-evaluation-item + .mif-360-evaluation-item { border-top: 1px solid #000; border-top: 0.1rem solid #000; } .mif-360-evaluation-item-question-block { font-style: italic } .mif-360-evaluation-item-question-block span { font-style: normal; font-weight: bold; } .mif-360-evaluation-scores { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; } .mif-360-evaluation-score { position: relative; margin: 0 3px } .mif-360-evaluation-score input[type="radio"] { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 60px; } .mif-360-evaluation-score input[type="radio"]:hover, .mif-360-evaluation-score input[type="radio"]:focus { } .mif-360-evaluation-score input[type="radio"]:hover + label:after, .mif-360-evaluation-score input[type="radio"]:focus + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .mif-360-evaluation-score input[type="radio"] + label { position: relative; display: block; min-width: 30px; padding: 18px 5px 18px 5px; height: 60px; border-radius: 20px; border: 1px solid #000; border: 0.1rem solid #000; background: #fff; text-align: center; color: #000; font-weight: bold; cursor: pointer; } .mif-360-evaluation-score input[type="radio"] + label:after { content: ''; display: block; width: 100%; height: 100%; border: 2px solid #0a006f; border-radius: 20px; position: absolute; top: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: opacity 0.05s ease; } .mif-360-evaluation-score input[type="radio"] + label:hover:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .mif-360-evaluation-score input[type="radio"]:checked + label { z-index: 50; background: #0a006f; color: #fff; font-weight: bold; } /** -------------------------------------------------- * #feedback block * -------------------------------------------------- */ .mif-360-evaluation-feedback { margin-top: 40px; margin-top: 4rem; text-align: left; } .mif-360-evaluation-feedback__header { background-color: #000; color: #fff; padding: 12px 24px; padding: 1.2rem 2.4rem; border-top-left-radius: 24px; border-top-left-radius: 2.4rem; border-top-right-radius: 24px; border-top-right-radius: 2.4rem; text-align: center; } .mif-360-evaluation-feedback__title { font-size: 20px; font-size: 2rem; line-height: 1.4; } .mif-360-evaluation-feedback__subtitle { font-size: 16px; font-size: 1.6rem; line-height: 1.5; } .mif-360-evaluation-feedback__content { border: 1px solid #000; border: 0.1rem solid #000; border-bottom-left-radius: 24px; border-bottom-left-radius: 2.4rem; border-bottom-right-radius: 24px; border-bottom-right-radius: 2.4rem; padding: 24px; padding: 2.4rem; } .mif-360-evaluation-feedback-section { } .mif-360-evaluation-feedback-section + .mif-360-evaluation-feedback-section { margin-top: 40px; margin-top: 4rem; } .mif-360-evaluation-feedback-section__subtitle { margin-bottom: 4px; margin-bottom: 0.4rem; } /** -------------------------------------------------- * #form actions * -------------------------------------------------- */ .mif-360-form-actions { margin-top: 40px; margin-top: 4rem; } .mif-360-form-action button { background-color: #000; padding: 16px 32px; padding: 1.6rem 3.2rem; color: #fff; border-radius: 4rem; border: 2px solid #000; border: 0.2rem solid #000; line-height: 1; font-size: 12px; font-size: 1.2rem; text-transform: uppercase; font-weight: bold; letter-spacing: 0.04em; transition: all 0.3s ease-in-out; cursor: pointer } .mif-360-form-action button:hover, .mif-360-form-action button:focus { background-color: #86dfbd; border-color: #86dfbd; } /** -------------------------------------------------- * * layout - mif evaluations * OVERVIEW * * TABLE OF CONTENTS * general * intro * summary * 360 block * * -------------------------------------------------- */ /** -------------------------------------------------- * #general * -------------------------------------------------- */ .mif-360-home-overview-items { } .mif-360-home-overview-item { max-width: 1280px; max-width: 128rem; margin: 0 auto; } .mif-360-home-overview-item__inner { margin: 0 20px; border: 1px solid #000; border-radius: 2.4rem; } /** -------------------------------------------------- * #intro * -------------------------------------------------- */ .mif-360-home-overview-item__intro { padding: 24px; } .mif-360-home-overview-item__title { font-size: 35px; font-size: 3.5rem; margin-bottom: 20px; } .mif-360-home-overview-item__description { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /** -------------------------------------------------- * #summary * -------------------------------------------------- */ .mif-360-home-overview-item__summary { position: relative; margin: 0; padding: 24px; border-top: 1px solid black /* status - nothing planned */ /* ************************ */ } .mif-360-home-overview-item__summary .pop-block__nothing-planned-zone { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /** -------------------------------------------------- * #360 block * -------------------------------------------------- */ .mif-360-overview-result {} /* status - nothing planned */ /* ************************ */ .mif-360-overview-result__nothing-planned-zone { font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /* status - complete */ /* ***************** */ .mif-360-overview-result__complete-zone {} .mif-360-overview-result__complete-zone__title { font-size: 22px; font-size: 2.2rem; line-height: 1.8; margin: 0; } .mif-360-overview-result__complete-zone__result-block { margin-top: 15px; } .mif-360-overview-result__complete-zone__result-block__score-wrapper { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .mif-360-overview-result__complete-zone__result-block__score__label { -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; color: #000; } .mif-360-overview-result__complete-zone__result-block__score__value { -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: right; font-size: 16px; font-size: 1.6rem; font-weight: bold; color: #5745ca; } .mif-360-overview-result__complete-zone__result-block__score__value__scale { font-size: 12px; font-size: 1.2rem; } .mif-360-overview-result__complete-zone__result-block__detail-link { display: inline-block; margin-top: 5px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: normal; color: #5745ca } .mif-360-overview-result__complete-zone__result-block__detail-link:hover, .mif-360-overview-result__complete-zone__result-block__detail-link:focus { color: #000; } /* status - incomplete */ /* ******************* */ .mif-360-overview-result__incomplete-zone {} /* title */ /* ----- */ .mif-360-overview-result__incomplete-zone__title-zone {} .mif-360-overview-result__incomplete-zone__title { font-size: 22px; font-size: 2.2rem; line-height: 1.8; margin: 0; } .mif-360-overview-result__incomplete-zone__notice { font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 300; } /* user list */ /* --------- */ .mif-360-overview-result__incomplete-zone__items-zone { margin-top: 20px; } .mif-360-user-list { margin: 0; padding: 0; list-style: none; } .mif-360-user-list__item { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .1); margin-bottom: 10px } .mif-360-user-list__item:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .mif-360-user-list__user-info { -ms-flex: 1 1 55%; flex: 1 1 55%; } .mif-360-user-list__user-info__name { font-size: 15px; font-size: 1.5rem; line-height: 1.4; font-weight: normal; } .mif-360-user-list__user-info__title { font-size: 14px; font-size: 1.4rem; line-height: 1.4; font-weight: 300; } .mif-360-user-list__action-zone { -ms-flex: 1 1 45%; flex: 1 1 45%; text-align: right; } /** -------------------------------------------------- * * layout - mif evaluations * RESULT PAGE * * TABLE OF CONTENTS * general * result blocks * text result blocks * * -------------------------------------------------- */ /** -------------------------------------------------- * #general * -------------------------------------------------- */ .mif-360-result-page-content { margin-top: 55px; margin-top: 5.5rem; } .mif-360-result-blocks { } .mif-360-result-block { max-width: 1280px; max-width: 128rem; margin: 55px auto; margin: 5.5rem auto; } .mif-360-result-block__header { background-color: #000; color: white; padding: 12px 24px; padding: 1.2rem 2.4rem; border-top-left-radius: 24px; border-top-left-radius: 2.4rem; border-top-right-radius: 24px; border-top-right-radius: 2.4rem; text-align: center; } .mif-360-result-block__title { font-size: 20px; font-size: 2rem; line-height: 1.4; } .mif-360-result-block__content { border: 1px solid black; border: 0.1rem solid black; border-bottom-left-radius: 24px; border-bottom-left-radius: 2.4rem; border-bottom-right-radius: 24px; border-bottom-right-radius: 2.4rem; } .mif-360-result-block + .mif-360-result-block { margin-top: 40px; margin-top: 4rem; } /** -------------------------------------------------- * #result blocks * -------------------------------------------------- */ .mif-360-result-block__item { padding: 25px; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-align: center; align-items: center; } .mif-360-result-block__item + .mif-360-result-block__item { border-top: 1px solid black; border-top: 0.1rem solid black; } /* description block */ /* ***************** */ .mif-360-result-block__item__info { -ms-flex: 1 1 65%; flex: 1 1 65%; font-style: italic } .mif-360-result-block__item__info span { font-style: normal; font-weight: bold; } .mif-360-result-block__item__title { font-weight: normal; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } .mif-360-result-block__item__description { margin-top: 5px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; } /* score block */ /* *********** */ .mif-360-result-block__item__score { -ms-flex: 1 1 35%; flex: 1 1 35%; text-align: right; } .mif-360-result-block__item__score__value { font-size: 24px; font-size: 2.4rem; line-height: 1.2; color: #5745ca; font-weight: bold; } .mif-360-result-block__item__score__value__scale { font-size: 20px; font-size: 2.0rem; } /** -------------------------------------------------- * #text result blocks * -------------------------------------------------- */ .mif-360-result-text-blocks { margin: 40px 0 55px; margin: 4rem 0 5.5rem; border: 1px solid black; border: 0.1rem solid black; border-radius: 2.4rem; } .mif-360-result-text-block { padding: 24px; padding: 2.4rem; } .mif-360-result-text-block + .mif-360-result-text-block { border-top: 1px solid black; border-top: 0.1rem solid black; } .mif-360-result-block__item__title { font-weight: bold; } .mif-360-result-block__item__list { margin: 5px 0 0 20px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; color: #5745ca; } .mif-360-result-block__item__result { margin-top: 5px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; color: #5745ca; } .mif-360-result-block__item__no-result { margin-top: 5px; font-size: 15px; font-size: 1.5rem; line-height: 1.5; font-weight: 300; font-style: italic; color: #5745ca; } /*! -------------------------------------------------- * * TABLE OF CONTENTS * * resume * * -------------------------------------------------- */ /* -------------------------------------------------- #resume -------------------------------------------------- */ .resume { width: 900px; max-width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 60px; display: -ms-flexbox; display: flex; display: flexbox; -ms-flex-wrap: wrap; flex-wrap: wrap } .resume .resume__item { position: relative; -ms-flex-positive: 3; flex-grow: 3; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; -ms-flex-preferred-size: 280px; flex-basis: 280px; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: end; align-content: flex-end; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; padding: 20px; border: 1px solid #D8D8D8; background: #fff; transition: background 0.2s; .no-flexbox & { display: block; float: left; width: 33.33%; width: 280px; } } .resume .resume__item:hover { background: rgba(247,247,247, 0.3); } .resume .resume__item:after { content: ''; display: block; width: 100%; height: 3px; position: absolute; bottom: 0; right: 0; left: 0; background: #D8D8D8; } .resume .resume__item.yellow { } .resume .resume__item.yellow:after { background: #F7C61C; } .resume .resume__item.yellow .value { color: #F7C61C; } .resume .resume__item.green { } .resume .resume__item.green:after { background: #6ecc00; } .resume .resume__item.green .value { color: #6ecc00; } .resume .resume__item.red { } .resume .resume__item.red:after { background: #e45959; } .resume .resume__item.red .value { color: #e45959; } .resume h3 { position: absolute; top: 5px; right: 10px; margin: 0; font-size: 26px; font-size: 2.6rem; color: #D8D8D8; opaciyt: 0.8; } .resume .content { -ms-flex-item-align: end; align-self: flex-end; } .resume .value { font-size: 40px; font-size: 4rem; } .resume .info { font-size: 14px; font-size: 1.4rem; color: #000; } /** -------------------------------------------------- * * LOADING * * TABLE OF CONTENTS * general * loader animations * * -------------------------------------------------- */ /* -------------------------------------------------- #general -------------------------------------------------- */ .body-loader { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, .75); z-index: 500; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } body.loading .body-loader { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; visibility: visible; } /* spinner icon */ /* ************ */ .body-loader__icon { display: block; text-indent: -99999px; width: 32px; height: 32px; background: url('../images/distribution/misc/spinner-loader--clockwise.svg'); background-size: 32px 32px; background-repeat: no-repeat; background-position: center center; display: block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; animation: animationRotate 10s ease-out infinite normal; } /* -------------------------------------------------- #loader animations -------------------------------------------------- */ @keyframes animationRotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } /* animationRotate */ @keyframes animationRotateAnticlockwise { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } } /* animationRotateAnticlockwise */ /** -------------------------------------------------- * * layout - ERROR PAGES * * INFO * styles for error pages (404, 403) * * TABLE OF CONTENTS * layout * * -------------------------------------------------- */ /** -------------------------------------------------- #layout -------------------------------------------------- */ .error-page-container { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; width: 100%; height: 100vh; } .error-page-container__inner { margin: auto; text-align: center; padding: 20px; padding: 2rem; } .error-page__title { font-size: 95px; font-size: 9.5rem; line-height: 1.1 } @media (max-width: 568px) { .error-page__title { font-size: calc(18vw + 0.1rem); } } /* .error-page__title */ .error-page__title--special { font-family: 'Courier New', Courier, monospace; color: #5745ca; text-transform: lowercase; -ms-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } .error-page__subtitle { font-size: 30px; font-size: 3rem; line-height: 1.1; font-weight: bold } @media (max-width: 568px) { .error-page__subtitle { font-size: calc(8vw + 0.1rem); } } /* .error-page__subtitle */