/* !- normalize.css v8.0.1 */ /* !- */ /* MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /* -------------------------------------------- */ @font-face { font-family: 'MSFont'; src: url('../MuseoSans_100-webfont.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'MSFont'; src: url('../MuseoSans_300-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'MSFont'; src: url('../MuseoSans_500-webfont.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'MSFont'; src: url('../MuseoSans_700-webfont.ttf') format('truetype'); font-weight: 700; font-style: normal; } /* ------------------------------ GLOBAL VARIABLES ------------------------------ */ /* :root { --lineColor: rgba(0,0,0,0.08); --gray-8p: rgba(0,0,0,0.08); --gray-10p: rgba(0,0,0,0.10); --gray-12p: rgba(0,0,0,0.12); --gray-16p: rgba(0,0,0,0.16); --gray-20p: rgba(0,0,0,0.20); --gray-25p: rgba(0,0,0,0.25); --gray-30p: rgba(0,0,0,0.30); --gray-40p: rgba(0,0,0,0.40); --gray-45p: rgba(0,0,0,0.45); --gray-50p: rgba(0,0,0,0.50); --gray-65p: rgba(0,0,0,0.65); --gray-70p: rgba(0,0,0,0.70); --white-50p: rgba(255,255,255,0.50); --green-text: #0DA61F; --blue: rgb(16,150,225); --blue-text: rgb(9,135,205); --blue-highlight: rgba(16,150,225, 0.1); --red: rgb(224,73,47); --pastelControlColor: #8C8881; --pastelControlColor-Light: #E8E6E2; --pastelControlColor-Light-Very: #F4F1EC; --pastelControlColor-Pressed: #4E4B47; } */ /* --------------- COLORS --------------- */ :root { --orange: #F39C13; --green: #74C153; --blue: #3CAFDA; --purple: #977ADC; --red: #E9583F; --darkGray: #888888; --yellow: #FFDD4C; --yellowDark: #FFB400; --greenDarker: #68B34A; /* Green tag must be a bit darker */ --greenLink: #4EAC26; --blueLink: #32A2CC; --pastel: #EBE6DC; /* Table Row Line Color */ --pastel_op50: rgba(235, 230, 220, 0.5); /* Same --pastel color with 50% opacity (often-used) */ --pastel_op40: rgba(235, 230, 220, 0.4); /* Same --pastel color with 50% opacity (often-used) */ --pastel_op50_overlay: rgba(91, 58, 0, 0.06); /* Same --pastel_op50 color, but better for overlay to selected-row background */ --pastelLight: #F7F5F1; /* Table Header Color */ --pastelDark: #D1C5AC; /* Table Dark Frame Color */ --pastelFrame: #E8E3D7; /* Color of the whiteBlock border 3px */ --tableRowLineColor: rgba(209, 197, 172, 0.43); --toolBarLines: rgba(209, 197, 172, 0.5); --actionButtonHover: rgba(209, 197, 172, 0.2); --actionButtonHover-Selected: rgba(209, 197, 172, 0.3); --pastelText: #8C8881; /* Header Text */ --pastelDarkText: #5B5853; /* Pressed toolbar button color */ --pastelLightText: #AEABA6; /* Some light/faded text like footer */ --pastelText_op85: rgba(140, 136, 129, 0.85); /* Header Text */ --pastelText_op70: rgba(140, 136, 129, 0.70); /* Header Text */ --pastelCreamText_op10: rgba(90, 58, 0, 0.10); --pastelCreamText_op30: rgba(90, 58, 0, 0.30); --pastelCreamText: rgba(90, 58, 0, 0.35); --rowHighlight: rgba(255, 221, 0, 0.1); --rowSelect: rgba(255, 221, 0, 0.3); /* --rowSelectDark: rgba(209, 197, 172, 0.4); */ --rowSelectDark: rgba(214, 200, 152, 0.41); --rowSelectHighlight: rgba(255, 221, 0, 0.4); --linkColor: #228BB3; --controlInputFrameColor: #DCD6C8; /* #E5E1DB */ /* --controlInputFrameColor-Active: #CAC6BC; */ --controlInputFrameColor-Focused: rgba(38, 152, 255, 0.6); --controlInputFocusRingColor: rgba(38, 152, 255, 0.25); --controlOptionsHoverColor: rgba(38, 152, 255, 0.10); --controlColor-Blue: #2698FF; --controlColor-Green: #45C049; --controlColor-Pressed: #4E4B47; --controlColor-Pastel: #F4F1EC; --controlColor-Pastel_overlay: rgba(91, 58, 0, 0.07); /* Same --controlColor-Pastel color, but better for overlay to dark background */ --controlInputBackColor-Invalid: rgba(233, 88, 63, 0.15); --controlInputFrameColor-Invalid: rgba(233, 88, 63, 0.55); --markerColor-Yellow: rgba(255, 207, 0, 0.75); --markerColor-Yellow-Solid: rgba(255, 207, 0, 1); --buttonColor_Green: rgb(52,175,66); --buttonColor_Blue: rgb(11,145,220); --buttonColor_Gray: rgba(0,0,0,0.50); --buttonColor_Pressed: #4E4B47; --globalFontFamily: -apple-system, "sf pro display", "SFDisplay", "Helvetica Neue", system-ui, BlinkMacSystemFont, Helvetica, Roboto, Arial, sans-serif; } .black { color: black; } .lineHover { border-bottom: 1px solid transparent; } .colorGray { color: var(--pastelText); } .colorCream { color: var(--pastelCreamText); } .colorPastelText_op50 { color: rgba(140, 136, 129, 0.5); } .colorPastelText_op40 { color: rgba(140, 136, 129, 0.4); } /* --------------- INIT --------------- */ body, * { font-family: var(--globalFontFamily); } img { border: 0; } a { outline: none; } html, body { background-color: white; padding:0; margin: 0; } body { font-size: 14px; line-height: 16px; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* body {padding: 0 10px;} */ table { border: 0px; border-collapse: separate; padding: 0px; border-spacing: 0px; } td { border: 0px; padding: 0px; border-spacing: 0px; } form { padding: 0px; margin: 0px; } /* All links by default have no line on hover */ a { color: var(--linkColor); text-decoration: none; } a.noLine, a.noLine:hover { text-decoration: none !important; } a.standardLink { text-decoration: none !important; } a.refLink { text-decoration: underline !important; } a[disabled] { pointer-events: none; cursor: default; } .disabledControl { pointer-events: none !important; cursor: default; } /* outline-hover links */ a.outlineHover { display: inline-block; } h1, h2, h3, h4 { /* font-family: 'MSFont', var(--globalFontFamily); */ font-size: 36px; line-height: 44px; padding: 0px; margin: 0px; } /* h2 { font-size: 26px; line-height: 32px; } */ h3 { font-size: 26px; line-height: 32px; } h4 { font-size: 24px; line-height: 30px; } .Museo { font-family: 'MSFont', var(--globalFontFamily); } .monospace { font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; } strong { font-weight: bold; } /* --------------- SHORTCUTS --------------- */ .hidden { display: none !important; } .caps { text-transform: uppercase; } .iBlock { display: inline-block; } .fw-ultrathin { font-weight: 100; } .fw-thin { font-weight: 200; } .fw-light { font-weight: 300; } .fw-300 { font-weight: 300 !important; } .fw-normal { font-weight: normal; } .fw-semibold { font-weight: 500; } .fw-500 { font-weight: 500 !important; } .fw-bold { font-weight: bold; } .fw-700 { font-weight: 700 !important; } .fw-bolder { font-weight: 800; } .fw-black { font-weight: 900; } .ls_zero { letter-spacing: 0; } .ls_min_02 { letter-spacing: -0.1pt; } .svgFillPurple svg path, .svgFillPurple svg rect, .svgFillPurple svg circle, .svgFillPurple svg polygon { fill: var(--purple); } .svgFillGreen svg path, .svgFillGreen svg rect, .svgFillGreen svg circle, .svgFillGreen svg polygon { fill: var(--green); } .svgFillBlue svg path, .svgFillBlue svg rect, .svgFillBlue svg circle, .svgFillBlue svg polygon { fill: var(--blue); } .svgFillRed svg path, .svgFillRed svg rect, .svgFillRed svg circle, .svgFillRed svg polygon { fill: var(--red); } .svgFillWhite svg path, .svgFillWhite svg rect, .svgFillWhite svg circle, .svgFillWhite svg polygon { fill: white; } .svgFillGray svg path, .svgFillGray svg rect, .svgFillGray svg circle, .svgFillGray svg polygon { fill: var(--pastelText); } /* ---------------------------------------------------------- */ .svgIcon_ColorBackground.green { background-color: var(--green); } .svgIcon_ColorBackground.blue { background-color: var(--blue); } .svgIcon_ColorBackground.orange { background-color: var(--orange); } .svgIcon_ColorBackground.red { background-color: var(--red); } .svgIcon_ColorBackground.purple { background-color: var(--purple); } .svgIcon_ColorBackground.gray { background-color: var(--pastelText); } .svgIcon_ColorBorder { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-width: 1px; border-style: solid; } .svgIcon_ColorBorder svg { margin-left: -1px; margin-top: -1px; } .svgIcon_ColorBorder.green { border-color: var(--green); } .svgIcon_ColorBorder.blue { border-color: var(--blue); } .svgIcon_ColorBorder.orange { border-color: var(--orange); } .svgIcon_ColorBorder.red { border-color: var(--red); } .svgIcon_ColorBorder.purple { border-color: var(--purple); } .svgIcon_ColorBorder.gray { border-color: var(--pastelText); } /* ---------------------------------------------------------- */ .mr5 { margin-right: 5px; } .mr6 { margin-right: 6px; } .mr10 { margin-right: 10px; } .ml10 { margin-left: 10px; } .r2 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .r4 { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .r5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .r10 { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .lh0 { line-height: 0px !important; } .lh16 { line-height: 16px !important; } .lh18 { line-height: 18px !important; } .lh20 { line-height: 20px !important; } .lh22 { line-height: 22px !important; } .lh26 { line-height: 26px !important; } .lh28 { line-height: 28px !important; } .lh32 { line-height: 32px !important; } .px1 { font-size: 1px; !important; } .px10 { font-size: 10px; !important; } .px11 { font-size: 11px; !important; } .px12 { font-size: 12px; !important; } .px13 { font-size: 13px; !important; } .px14 { font-size: 14px; !important; } .px15 { font-size: 15px; !important; } .px16 { font-size: 16px; !important; } .px18 { font-size: 18px; !important; } .px20 { font-size: 20px; !important; } .px22 { font-size: 22px; !important; } .px24 { font-size: 24px; !important; } .px25 { font-size: 25px; !important; } .px26 { font-size: 26px; !important; } .px32 { font-size: 32px; !important; } .px36 { font-size: 36px; !important; } .px48 { font-size: 48px; !important; } .textBold16 { font-size: 16px; line-height: 20px; font-weight: bold; } .textBig { font-size: 16px; line-height: 20px; } .textRegular { font-size: 14px; line-height: 18px; } .textSmall { font-size: 12px; line-height: 16px; } .ta-center { text-align: center; } .ta-left { text-align: left; } .ta-right { text-align: right; } /* .textSize_10px { font-size: 10px; } */ .nextLine_1 { margin-top: 1px; } .nextLine_3 { margin-top: 3px; } .nextLine_5 { margin-top: 5px; } .nextLine_7 { margin-top: 7px; } .nextLine_11 { margin-top: 11px; } .w100p { width: 100%; } .disable-system-style { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .animatedControl_05 { -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; transition: all 0.05s linear; } .grayscale { filter: url(~"data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; } .op43 { opacity: 0.43; } /* To simulate the closest transparent color to #ccc with --pastelText variable */ .op50 { opacity: 0.5; } .op60 { opacity: 0.6; } .op85 { opacity: 0.85; } .pos-relative { position: relative; } /* ----------------------------------------------------------- */ /* !- CHECKBOXES */ /* !- */ /* ----------------------------------------------------------- */ /* hide default checkbox */ .radioInput, .checkboxInput { position: absolute; z-index: -1; opacity: 0; } .radioInput+label, .checkboxInput+label { display: inline-flex; align-items: center; user-select: none; } .radioInput:not(:disabled)+label, .checkboxInput:not(:disabled)+label { cursor: pointer; -webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear; transition: color 0.1s linear; } .radioInput+label::before, .checkboxInput+label::before { /* create pseudo-element inside label */ content: ''; display: inline-block; width: 24px; height: 24px; flex-shrink: 0; flex-grow: 0; border: 1px solid var(--pastelDark); margin-right: 10px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; transition: all 0.05s linear; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* focused checkbox */ .radioInput:focus+label::before, .checkboxInput:focus+label::before { -moz-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); -webkit-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); } /* focused non-checked checkbox */ .radioInput:focus:not(:checked)+label::before , .checkboxInput:focus:not(:checked):not(.noFocus)+label::before { border-color: var(--controlInputFrameColor-Focused); } /* checked checkbox */ .checkboxInput:checked+label::before { border-color: var(--controlColor-Blue); background-color: var(--controlColor-Blue); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23ffffff' d='M9.7 18.1L5.3 13.1C4.9 12.7 4.9 12.1 5.3 11.7 5.8 11.3 6.4 11.3 6.8 11.8L10.3 15.8 17.1 6.5C17.4 6 18.1 5.9 18.5 6.2 19 6.5 19.1 7.1 18.8 7.6L11.3 18C11.1 18.3 10.8 18.5 10.5 18.5 10.5 18.5 10.4 18.5 10.4 18.5 10.1 18.5 9.8 18.4 9.7 18.1Z'/%3e%3c/svg%3e"); } /* disabled checkbox */ .radioInput:disabled+label, .checkboxInput:disabled+label { color: var(--pastelLightText); } .checkboxInput:disabled+label::before { border-color: var(--pastel); background-color: var(--pastel); /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%238C8881' d='M9.7 18.1L5.3 13.1C4.9 12.7 4.9 12.1 5.3 11.7 5.8 11.3 6.4 11.3 6.8 11.8L10.3 15.8 17.1 6.5C17.4 6 18.1 5.9 18.5 6.2 19 6.5 19.1 7.1 18.8 7.6L11.3 18C11.1 18.3 10.8 18.5 10.5 18.5 10.5 18.5 10.4 18.5 10.4 18.5 10.1 18.5 9.8 18.4 9.7 18.1Z'/%3e%3c/svg%3e");*/ } .checkboxInput:checked:disabled+label::before { border-color: var(--pastel); background-color: var(--pastel); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%238C8881' d='M9.7 18.1L5.3 13.1C4.9 12.7 4.9 12.1 5.3 11.7 5.8 11.3 6.4 11.3 6.8 11.8L10.3 15.8 17.1 6.5C17.4 6 18.1 5.9 18.5 6.2 19 6.5 19.1 7.1 18.8 7.6L11.3 18C11.1 18.3 10.8 18.5 10.5 18.5 10.5 18.5 10.4 18.5 10.4 18.5 10.1 18.5 9.8 18.4 9.7 18.1Z'/%3e%3c/svg%3e"); } /* --------------- CHECKBOXES.CUSTOMIZATION --------------- */ /* Checkbox with no label >> no right margin */ .radioInput.standalone+label::before, .checkboxInput.standalone+label::before { margin-right: 0; } /* Checkboxes for row selection should have no focud ring */ .checkboxInput.noFocus:focus+label::before { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* Checkboxes for row selection should be smaller 20x20 px */ .checkboxInput.size20+label::before { width: 20px; height: 20px; } .mainCheckbox { margin-right: 10px; text-align: right; } .mainCheckbox.top { margin-left: 3px;} /* Drag-to-select checkbox highlight */ td.select input.checkboxInput.selected+label::before { border-color: var(--controlInputFrameColor-Focused); -moz-box-shadow: 0 0 0 3px var(--controlInputFrameColor-Focused); -webkit-box-shadow: 0 0 0 3px var(--controlInputFrameColor-Focused); box-shadow: 0 0 0 3px var(--controlInputFrameColor-Focused); } /* --------------- RADIO BUTTON --------------- */ .radioInput+label::before { /* create pseudo-element inside label */ -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } /* checked radio */ .radioInput:checked+label::before { border-color: var(--controlColor-Blue); background-color: var(--controlColor-Blue); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='%23ffffff' cx='12' cy='12' r='5'/%3e%3c/svg%3e"); } /* disabled radio */ .radioInput:disabled+label::before { border-color: var(--pastel); background-color: var(--pastel); /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='%238C8881' cx='12' cy='12' r='5'/%3e%3c/svg%3e"); */ } .radioInput:checked:disabled+label::before { border-color: var(--pastel); background-color: var(--pastel); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='%238C8881' cx='12' cy='12' r='5'/%3e%3c/svg%3e"); } /* ----------------------------------------------------------- */ /* !- BUTTONS */ /* !- */ /* ----------------------------------------------------------- */ .button-rounded { display: inline-block; position: relative; } .button-rounded .title { position: relative; font-size: 20px; text-align: center; line-height: 50px; z-index: 100; } .button-rounded .icon { position: absolute; width: 24px; height: 24px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: 30px; z-index: 100; } .button-rounded .back { position: absolute; display: inline-block; padding: 0; width: 100%; z-index: 1; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%;); transform: translate(-50%, -50%); -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; } .button-rounded.round .back { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* --- FILLED --- */ .button-rounded.filled .icon svg { fill: white; } .button-rounded.filled.green { color: white; } .button-rounded.filled.green.plain .back { background-color: var(--buttonColor_Green); } .button-rounded.filled.green.gradient .back { background-image: linear-gradient(#46C154, #35B043); } .button-rounded.filled.blue { color: white; } .button-rounded.filled.blue.plain .back { background-color: var(--buttonColor_Blue); } .button-rounded.filled.blue.gradient .back { background-image: linear-gradient(#1AA0EB, #0C92DD); } .button-rounded.filled.gray { color: white; } .button-rounded.filled.gray.plain .back { background-color: var(--buttonColor_Gray); } .button-rounded.filled.gray.gradient .back { background-image: linear-gradient(#777674, #696866); } .button-rounded.filled.darkPastel { color: white; } .button-rounded.filled.darkPastel.plain .back { background-color: #A09A88; } .button-rounded.filled.darkPastel.gradient .back { background-image: linear-gradient(#ADA795, #A19B89); } .button-rounded.round.filled.hover-expand .back { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* --- COLOR SHADOW --- */ .button-rounded.color-shadow.green .back { -moz-box-shadow: 0 1px 2px 0 rgba(52,175,66, 0.2), 0 2px 4px 0 rgba(52,175,66, 0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(52,175,66, 0.2), 0 2px 4px 0 rgba(52,175,66, 0.2); box-shadow: 0 1px 2px 0 rgba(52,175,66, 0.2), 0 2px 4px 0 rgba(52,175,66, 0.2); } .button-rounded.color-shadow.blue .back { -moz-box-shadow: 0 1px 2px 0 rgba(16,150,225, 0.2), 0 2px 4px 0 rgba(16,150,225, 0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(16,150,225, 0.2), 0 2px 4px 0 rgba(16,150,225, 0.2); box-shadow: 0 1px 2px 0 rgba(16,150,225, 0.2), 0 2px 4px 0 rgba(16,150,225, 0.2); } .button-rounded.color-shadow.gray .back { -moz-box-shadow: 0 1px 2px 0 rgba(104,103,101, 0.2), 0 2px 4px 0 rgba(104,103,101, 0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(104,103,101, 0.2), 0 2px 4px 0 rgba(104,103,101, 0.2); box-shadow: 0 1px 2px 0 rgba(104,103,101, 0.2), 0 2px 4px 0 rgba(104,103,101, 0.2); } .button-rounded.color-shadow.darkPastel .back { -moz-box-shadow: 0 1px 2px 0 rgba(160,154,136, 0.2), 0 2px 4px 0 rgba(160,154,136, 0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(160,154,136, 0.2), 0 2px 4px 0 rgba(160,154,136, 0.2); box-shadow: 0 1px 2px 0 rgba(160,154,136, 0.2), 0 2px 4px 0 rgba(160,154,136, 0.2); } /* ----------------------------------------------------------- */ /* !- PAGE COMPONENTS */ /* !- */ /* ----------------------------------------------------------- */ .mainContainer { min-width: 1100px; position: relative; min-height: 500px; } .pageBlock { width: 1100px; margin: 0 auto; position: relative; } .pageBlock.w1020 { width: 1020px; margin: 0 auto; position: relative; } .pageFooter { font-size: 12px; line-height: 20px; /* letter-spacing: -0.15pt; */ text-align: center; margin-top: 50px; padding: 40px; color: var(--pastelLightText); } .pageFooter.mini { margin-top: 0; } .pageFooter.topBorder { border-top: 1px solid var(--tableRowLineColor); } /* -------------------------------------------- */ .messageContainer .icon { text-align: center; font-size: 0; line-height: 0; } .messageContainer .messageTitle { text-align: center; padding: 24px 150px 16px 150px; } .messageContainer .messageText { text-align: center; padding-left: 150px; padding-right: 150px; } /* -------------------------------------------- */ .pageTopLine .title { padding: 30px 33px; text-align: left; font-size: 18px; line-height: 30px; font-weight: 500; color: black; } .pageTopLine .logoutButton { position: absolute; display: inline-block; top: 27px; right: 33px; font-size: 14px; line-height: 36px; padding: 0 20px 0 45px; color: var(--controlColor-Pressed); background-color: var(--pastel_op40); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .pageTopLine .logoutButton .icon { position: absolute; width: 32px; height: 32px; top: 2px; left: 8px; } .pageTopLine .logoutButton .icon svg { fill: var(--controlColor-Blue); } /* ----------------------------------------------------------- */ /* !- MAG.POPUP WINDOW */ /* !- */ /* ----------------------------------------------------------- */ .mpWindow { width: 800px; margin: auto auto; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: white; color: black; position: relative; -moz-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); box-shadow: 0px 10px 30px rgba(0,0,0,0.3); } .mpWindow .mpTitle { text-align: center; font-size: 14px; line-height: 18px; font-weight: normal; color:rgba(0,0,0,0.4); text-transform: uppercase; padding: 15px 50px 0 50px; } .mpWindow .buttons { margin-top: 60px; display: flex; justify-content: flex-start; margin-left: 20px; padding-bottom: 20px; /* height: 70px; */ } .mpButton { display: block; font-size: 22px; line-height: 70px; height: 70px; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-right: 20px; flex-basis: 0; flex-grow: 100; -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; transition: all 0.08s linear; } input.mpButton { border: none; outline: none; cursor: pointer; padding: 0; } .mpButton.secondaryGray { background-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.4); font-weight: 300; } .mpButton.secondaryWhite { background-color: white; color: var(--pastelText); font-weight: 300; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid var(--controlInputFrameColor); line-height: 68px; /* to keep the text in the v-middle */ } .mpButton.primaryBlue { background-color: var(--controlColor-Blue); color: white; font-weight: bold; } .mpButton.primaryRed { background-color: var(--red); color: white; font-weight: bold; } /* Customization: Small Window (like for Set-Value) */ .mpWindow.small { width: 500px; } .mpWindow.small .mpButton { font-size: 20px; line-height: 50px; height: 50px; } /* REQUEST */ .mpWindow.mpRequest { width: 700px; } .mpRequest .icon { display: inline-block; position: absolute; left: 40px; top: 40px; width: 80px; height: 80px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .mpRequest .icon.red { background-color: var(--red); } .mpRequest .icon.yellow { background-color: var(--yellowDark); } .mpRequest .icon.gray { background-color: var(--pastelText); } .mpRequest .title { padding: 50px 60px 0 160px; font-size: 22px; line-height: 28px; font-weight: bold; } .mpRequest .text { padding: 16px 60px 0 160px; font-size: 16px; line-height: 22px; font-weight: normal; } .mpRequest .text .mpRequestItem { color: var(--red); } /* AJAX Indicator */ .mpWindow.mpAJAXInficator { width: 200px; height: 160px; } .mpAJAXInficator .icon { text-align: center; padding-top: 36px; } .mpAJAXInficator .text { text-align: center; font-size: 18px; line-height: 18px; margin-top: 22px; } /* --------------- MAG.POPUP MAIN MENU --------------- */ .mpMainMenu { position: absolute; left: 2px; /* should be 10, but there is a container padding of 8px */ top: 11px; display: inline-block; min-width: 350px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: white; color: black; position: relative; -moz-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); box-shadow: 0px 10px 30px rgba(0,0,0,0.3); } .mpMainMenu .closeIcon { display: inline-block; position: absolute; width: 50px; height: 50px; top: 15px; left: 9px; z-index: 1000; } .mpMainMenu .closeIcon svg { display: block; margin: auto; } .mpMainMenu .closeIcon svg path { fill: var(--controlColor-Pressed); opacity:0.4; } .mpMainMenu .websiteLogo { display: inline-block; position: absolute; top: 11px; right: 9px; } .mpMainMenu .menuItems { padding-top: 74px; padding-bottom: 6px; } /* ------------------------------------------------------------------------------- */ /* MAIN MENU */ .mpMainMenu .mainUL { list-style: none; display: block; text-align: left; margin: 0; padding: 0; } .mpMainMenu .mainUL li { display: block; position: relative; margin-bottom: 4px; } .mpMainMenu .mainUL li div.miDisabled, .mpMainMenu .mainUL li a { display: block; position: relative; padding: 0 40px 0 65px; margin: 0 10px; color: var(--controlColor-Pressed); text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 18px; line-height: 50px; letter-spacing: -0.15pt; } .mpMainMenu .mainUL li a.active { background-color: rgba(38, 152, 255, 0.15); } .mpMainMenu .mainUL li div.miDisabled { color: #C1C0BF; } .mpMainMenu .mainUL li .miIcon { display: inline-block; position: absolute; left: 15px; top: 6px; width: 38px; height: 38px; } .mpMainMenu .mainUL li .miIcon svg { fill: var(--controlColor-Blue); } .mpMainMenu .mainUL li .miIconSubmenu { display: inline-block; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } .mpMainMenu .mainUL li .miIconSubmenu svg { fill: var(--controlColor-Pressed); opacity: 0.9; } .mpMainMenu .mainUL li > ul { padding: 0; position: absolute !important; top: -10px; left: 100%; padding: 10px 0 6px 0; min-width: 200px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: white; color: black; position: relative; -moz-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); box-shadow: 0px 10px 30px rgba(0,0,0,0.3); display: none; opacity: 0; visibility: hidden; } .mpMainMenu .menuItems li.separator { font-size: 1px; height: 6px; border-bottom: 1px solid rgba(0,0,0, 0.08); margin: 0 10px 10px 10px; display: block; cursor: default; padding: 0; } /* --------------- MAG.POPUP - SEARCH --------------- */ .mpWindow.mpSearch { margin-bottom: 50vh; } .mpSearch #mpSearchQuery { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: transparent; /* background-color: white; */ /* border: 1px solid var(--controlColor-Pastel); */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: rgba(0,0,0,0.9); font-size: 30px; line-height: 84px; width: 100%; padding: 0 0 0 82px; /* vertical-align: bottom; */ } .mpSearch #mpSearchQuery:focus { outline: none !important; } .mpSearch .content .icon { position: absolute; display: inline-block; width: 36px; height: 36px; left: 26px; top: 50%; transform: translateY(-50%); } .mpSearch .content .icon svg { width: 36px; height: 36px; } .mpSearch .content .searchCancelButton { position: absolute; display: inline-block; width: 36px; height: 36px; right: 20px; top:50%; transform: translateY(-50%); padding: 4px 2px; } .mpSearch .content .searchCancelButton svg { width: 36px; height: 36px; } .mpSearch .content .searchCancelButton svg path { fill: var(--pastelText); opacity:0.6; } /* ----------------------------------------------------------- */ /* !- STANDARD FRAME */ /* !- */ /* ----------------------------------------------------------- */ .dragToSelectWrapper { overflow: auto; position: relative; } .frameDiv { margin: 0 10px 30px 10px; } .frameTitle { font-weight: 600; letter-spacing: -0.10pt; line-height: 18px; padding-left: 33px; padding-bottom: 18px; text-transform: uppercase; } .frameTitle .extra { font-weight: 300; letter-spacing: 0; color: var(--pastelText); } .frameTitle.topmost { border-top: 2px solid var(--pastel); padding-left: 18px; padding-top: 16px; margin-left: 12px; margin-right: 12px; } table.frame { background-color: var(--pastel); border: 2px solid var(--pastel); border-collapse: separate; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* HEADER */ table.frame .footer, table.frame .header { font-size: 12px; line-height: 12px; color: var(--pastelText); letter-spacing: -0.10pt; } table.frame .header .headerText { padding-left: 10px; margin-top: 2px; } /* FOOTER */ table.frame .footer { background-color: var(--pastelLight); -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; border-top: 1px solid var(--pastel); } /* TOOLBAR */ table.frame .toolbarDiv { /* IN CASE NOTHING BUT HEADER TITLE */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px 18px 7px 8px; display: flex; justify-content: flex-start; align-items: center; } table.frame .toolbar { position: relative; } table.frame .toolbar.left { padding: 0 2px 2px 0; width: auto; white-space: nowrap; } table.frame .toolbar.middle { padding: 0 0 2px 0; width: auto; white-space: nowrap; } table.frame .toolbar.right { padding: 0 0 2px 2px; width: auto; white-space: nowrap; } table.frame .header.size0 .toolbar, table.frame .header.size0 .toolbarDiv { height: 55px; } table.frame .header.size-1 .toolbar, table.frame .header.size-1 .toolbarDiv { height: 45px; } table.frame .toolbar .toolbarContent { display: flex; align-items: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } table.frame .toolbar.left .toolbarContent { justify-content: flex-start; } table.frame .toolbar.middle .toolbarContent { justify-content: center; } table.frame .toolbar.right .toolbarContent { justify-content: flex-end; } table.frame .footer .toolbar { height: 60px; } table.frame .footer .toolbar.left { padding-bottom: 0; } table.frame .footer .toolbar .toolbarContent { padding: 10px; } table.frame .header.size0 .toolbar .toolbarContent { left: 8px; top: 8px; right: 8px; bottom: 9px; } table.frame .header.size0 .toolbar.middle .toolbarContent { left: 0; top: 8px; right: 0; bottom: 9px; } table.frame .header.size-1 .toolbar .toolbarContent { left: 5px; top: 5px; right: 5px; bottom: 6px; } table.frame .header.size-1 .toolbar.middle .toolbarContent { left: 0; top: 5px; right: 0; bottom: 6px; } table.frame .toolbarButton { display: inline-block; border: 1px solid transparent; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; position: relative; color: var(--pastelText); } table.frame .toolbarButton svg { display: block; margin: auto; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); } table.frame .toolbarButton svg polygon, table.frame .toolbarButton svg rect, table.frame .toolbarButton svg circle, table.frame .toolbarButton svg path { fill: var(--pastelText); opacity:0.8; } table.frame .toolbarButton { width: 44px; } table.frame .toolbarButton.add { width: 80px; } table.frame .toolbarButton.bordered { border-color: var(--toolBarLines); } /* Adjust sizes */ table.frame .toolbarButton.w44 { width: 44px !important; } table.frame .toolbarButton.w60 { width: 60px !important; } table.frame .toolbarButton.w80 { width: 80px !important; } table.frame .toolbarButton.dynamic { width: auto !important; } table.frame .toolbarButton.h11 { padding-left: 11px; padding-right: 11px; } table.frame .toolbarButton.h12 { padding-left: 12px; padding-right: 12px; } table.frame .toolbarButton.h14 { padding-left: 14px; padding-right: 14px; } table.frame .toolbarButton.v14 { padding-top: 14px; } table.frame .header .toolbarSeparator, table.frame .footer .toolbarSeparator { font-size: 1px; width: 1px; margin: 0 10px; height: 20px; background-color: var(--pastelDark); opacity: 0.5; } table.frame .toolbar .pager { display: inline-block; height: 100%; display: flex; justify-content: flex-start; align-items: center; } table.frame .toolbar .pager a.pageNumberText { color: var(--pastelText); line-height: 12px; margin: 0 10px; } table.frame .toolbar .pager a.pageNumberText .current { color: black; font-weight: 500; } table.frame .toolbar .pager a.pageLink { color: var(--pastelText); line-height: 12px; margin-left: 1px; position: relative; } table.frame .toolbar .pager a.pageLink.selected { font-weight: bold; background-color: var(--pastel); color: rgba(0,0,0,0.5); } table.frame .toolbar .pager .pageLink .pageDelimiter { font-size: 1px; display: inline-block; width: 1px; height: 20px; background-color: var(--pastelDark); opacity: 0.5; position: absolute; left: -2px; /* because we have 1px border */ top: 50%; transform: translateY(-50%); } table.frame .toolbar .pager .pageLink.first .pageDelimiter, table.frame .toolbar .pager .pageLink.selected .pageDelimiter, table.frame .toolbar .pager .pageLink.selected + .pageLink .pageDelimiter { display: none; } table.frame .toolbar .pager a[disabled] svg { opacity: 0.5; } table.frame .footer .toolbar .pager { width: 100%; } table.frame .footer .toolbar .pager .emptySpace { display: inline-block; flex-grow: 10; } /* CONTENT */ table.frame td.content { background-color: white; border: 1px solid var(--pastelDark); -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } table.frame td.content .frameNoDataText { padding: 32px 20px 30px 20px; color: var(--pastelText); text-align: center; } table.frame td.formBody { /* ??? what is this ??? */ background-color: var(--pastelLight); border: 1px solid var(--pastelDark); padding: 10px; } /* ----------------------------------------------------------- */ /* !- LIST TABLE IN FRAME */ /* !- */ /* ----------------------------------------------------------- */ .listTable th { height: 39px; background-color: var(--pastelLight); border-bottom: 1px solid var(--pastel); font-weight: normal; font-size: 12px; line-height: 12px; color: var(--pastelText); letter-spacing: -0.10pt; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding:0; padding-top: 1px; margin: 0; text-align: left; } .listTable th a { text-decoration: underline; font-weight: normal; color: var(--pastelText); } .listTable th.select { padding: 0; text-align: right; } /* ************************** */ .listTable tr.dark { background-color: var(--pastelLight); } .listTable tr.darkRow { background-color: var(--pastelLight); } .listTable tr.listrow td { vertical-align: middle; border-bottom: 1px solid var(--tableRowLineColor); } .listTable tr:last-child td { border-bottom: none !important; } .listTable tr.listrow.topBorderBold td { border-top: 8px solid var(--tableRowLineColor); } .listTable td.select { text-align: right; width: 30px; } form:not(.selectableRows) .listTable th.select, form:not(.selectableRows) .listTable td.select { display: none; } .listTable tr.listrowSelected { background-color: var(--rowSelect); } .listTable tr.listrowSelected.dark { background-color: var(--rowSelectDark); } .listTable tr.separator td { border-top: 19px solid var(--pastel) !important; } .listTable .rBorder { border-right: 1px solid var(--pastel); } .listTable td .relativeCellWrapper { position: relative; } .listTable tr.rowText_16px { font-size: 16px; } .listTable td.serialNumberCell { width: 70px; text-align: center; padding: 0; margin: 0; vertical-align: middle; font-size: 16px; color: var(--pastelCreamText); } /* --------------- COMMON LIST TABLE LINES --------------- */ .listTable .line_1 { line-height: 20px !important; } .listTable .line_2 { line-height: 16px !important; margin-top: 4px; padding-bottom: 0; } .listTable .itemFlagTag { position: absolute; right: 30px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .listTable td { height: 70px; } .listTable td.dateCell { width: 150px; } .listTable td.dayMonthCell { width: 115px; } .listTable td.dayMonthCell .day { display: inline-block; font-size: 16px; line-height: 20px; color: black; } .listTable td.dayMonthCell .month { display: inline-block; font-size: 10px; line-height: 10px; color: var(--pastelText); text-transform: uppercase; position: relative; top: -4px; left: 4px; padding-right: 5px; } /* .listTable td.serialNumberCell { width: 60px; } */ .listTable .actionsCell .delimiter { text-align: center; border-left: 1px solid rgba(235, 230, 220, 0.7); } .listTable .actionsCell.right_14 { text-align: right; padding-right: 14px; } .listTable .actionsCell.right_14 .delimiter { text-align: right; } .listTable .actionsCell.right_16 { text-align: right; padding-right: 16px; } .ipCell .ipAddress { position: relative; padding-left: 32px; } .ipCell .ipAddress img { position: absolute; left: 0; top: -2px; } .highlightYellowRound { background-color: #ffe400; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* --------------- ACTION BUTTONS --------------- */ a.actionButton { position: relative; display: inline-block; width: 38px; height: 38px; margin: 0 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } a.actionButton svg { display: block; margin: auto; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); } a.actionButton.purple svg path { fill: var(--purple); } a.actionButton.green svg path { fill: var(--green); } a.actionButton.blue svg path { fill: var(--blue); } a.actionButton.red svg path { fill: var(--red); } a.actionButton.gray svg path { fill: var(--pastelText); } a.actionButton.gray.op80 svg { opacity: 0.8; } a.actionButton.gray.op85 svg { opacity: 0.85; } a.actionButton.black svg path { fill: black; } .actionButton_Disabled { position: relative; display: inline-block; width: 38px; height: 38px; margin: 0 2px; } .actionButton_Disabled svg path, .actionButton_Disabled svg rect, .actionButton_Disabled svg circle, .actionButton_Disabled svg polygon { fill: var(--pastel); } /* VERTICAL ALIGNMENT */ .actions.vertical a.actionButton { margin: 3px 0px; } .actions.vertical .actionButton_Disabled { margin: 3px 0px; } .actionsCell .actionButton, .actionsCell .actionButton_Disabled { vertical-align: middle; } /* !- ICONS */ /* --------------- COMMON: ICONS --------------- */ .standardIcon { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .standardIcon.absoluteVMiddle { display: inline-block; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .standardIcon.size_36x36 { width: 36px; height: 36px; } .standardIcon.size_36x36.round { -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; } /* ----------------------------------------------------------- */ /* !- STANDARD FORM & FIELDS */ /* !- */ /* ----------------------------------------------------------- */ .standardForm .formColumnsBlock, /* should work for any number of columns */ .standardForm .formColumnsBlock.columns2 { display: flex; justify-content: flex-start; align-items: flex-start; } .formColumnsBlock .formColumn { display: block; flex-basis: 0; flex-grow: 100; /* padding-left: 15px; */ /* padding-right: 15px; */ } .formColumnsBlock .formColumn.separator30 { width: 30px; max-width: 30px; } .standardForm .content .field .title { color: var(--pastelText); font-size: 14px; line-height: 14px; padding: 25px 0 9px 10px; } .standardForm .content .field .inputDisabled, .standardForm .content .field .input input { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: white; border: 1px solid var(--controlInputFrameColor); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; /* height: 42px; */ color: rgba(0,0,0,0.9); font-size: 16px; line-height: 41px; padding: 0 10px; vertical-align: bottom; -webkit-transition: all 0.05s linear; -moz-transition: all 0.05s linear; transition: all 0.05s linear; } .standardForm .content .field .input input:focus { outline: none !important; border-color: var(--controlInputFrameColor-Focused); -moz-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); -webkit-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); box-shadow: 0 0 0 4px var(--controlInputFocusRingColor); } .standardForm .content .field .inputDisabled { background-color: var(--pastelLight); border: 1px solid var(--pastelLight); } .standardForm .content .field.validationErrorField .input input { border-color: var(--controlInputFrameColor-Invalid) !important; background-color: var(--controlInputBackColor-Invalid) !important; } .standardForm .content .field.validationErrorField .input input:focus { -moz-box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid); -webkit-box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid); box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid); } .defaultFocusRing:focus { outline: none !important; border-color: var(--controlInputFrameColor-Focused) !important; -moz-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor) !important; -webkit-box-shadow: 0 0 0 4px var(--controlInputFocusRingColor) !important; box-shadow: 0 0 0 4px var(--controlInputFocusRingColor) !important; } /* --------------- DEFAULT FIELDS & CONTROLS ( INSIDE THE FORM )--------------- */ .formFieldContainer { display: inline-block; position: relative; } /* TEXT FIELD */ .formField.withTitle .title { color: var(--pastelText); font-size: 12px; line-height: 12px; text-transform: uppercase; /* letter-spacing: -0.15pt; */ /* opacity: 0.7; */ padding: 25px 0 9px 5px; position: relative; } .formField.withTitle.required .title:after { content: "\2217"; color: var(--red); margin-left: 6px; font-size: 16px; line-height: 6px; } .formField.withTitle .title .comment-right { position: absolute; top: 25px; right: 5px; } .formField .formInput { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--controlColor-Pastel); border: 1px solid var(--controlColor-Pastel); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: rgba(0,0,0,0.9); font-size: 16px; line-height: 41px; width: 100%; padding: 0 10px; vertical-align: bottom; } .formField textarea.formInput { padding: 10px; line-height: 20px; resize: vertical; } .formField .formInput.verificationCode { font-size: 36px; line-height: 71px; letter-spacing: 10pt; } .formField .formInput:focus { background-color: white; } .formField .formInput.disabled { background-color: white; border: 1px dotted var(--pastel); pointer-events: none; } .formField .formInput.disabled-dark-dash { background-color: white; border: 1px dashed var(--controlInputFrameColor); pointer-events: none; } .formField.validationErrorField .formInput { border-color: var(--controlInputFrameColor-Invalid) !important; background-color: var(--controlInputBackColor-Invalid) !important; } .formField.validationErrorField .formInput:focus { -moz-box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid) !important; -webkit-box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid) !important; box-shadow: 0 0 0 4px var(--controlInputBackColor-Invalid) !important; } /* OVERLAY ELEMENTS FOR FORM FIELDS */ .formField .fieldOverlayText { position: absolute; right: 12px; top:50%; transform: translateY(-50%); pointer-events: none; } /* SELECT FIELD */ .formField .selectInput { padding-right: 38px; } .formFieldContainer .dd-arrow { position: absolute; width: 10px; height: 10px; right: 14px; top:50%; transform: translateY(-50%); pointer-events: none; } .formFieldContainer .dd-arrow svg { fill: var(--pastelText); } /* DATE FIELD */ .formField .dateInput { padding-right: 43px; } .formFieldContainer .calendarIcon { background: url('../../images/calendar.png'); position: absolute; right: 10px; top:50%; transform: translateY(-50%); width: 23px; height: 22px; pointer-events: none; } /* ----- RETINA ----- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .formFieldContainer .calendarIcon { background: url('../../images/calendar@2x.png'); background-size: 23px 22px; } } /* --------------- DEFAULT FIELDS & CONTROLS ( NOT [!!] INSIDE THE FORM )--------------- */ .titledField .title { color: var(--pastelText); font-size: 11px; line-height: 11px; text-transform: uppercase; /* letter-spacing: -0.15pt; */ opacity: 0.7; margin-bottom: 10px; margin-left: 3px; } /* COMMON FIELD */ .standardField { display: inline-block; position: relative; } .standardField .standardInput { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: var(--controlColor-Pastel); border: 1px solid var(--controlColor-Pastel); color: var(--pastelText); line-height: 30px; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .standardField .standardInput.overlay { background-color: var(--controlColor-Pastel_overlay); border: 1px solid transparent; } .standardField .standardInput:focus { background-color: white; } /* SELECT FIELD */ .selectInput { padding-right: 28px; } .selectField .dd-arrow { position: absolute; width: 10px; height: 10px; right: 9px; top:50%; transform: translateY(-50%); } .selectField .dd-arrow svg { fill: var(--pastelText); } /* DATE FIELD */ .dateField .calendarIcon { background: url('../../images/calendar.png'); position: absolute; right: 5px; top:50%; transform: translateY(-50%); width: 23px; height: 22px; } /* ----- RETINA ----- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .dateField .calendarIcon { background: url('../../images/calendar@2x.png'); background-size: 23px 22px; } } /* SEARCH FIELD */ .searchField .searchInput { padding-left: 34px; padding-right: 34px; } .searchField .searchIcon { position: absolute; display: inline-block; left: 8px; top:50%; transform: translateY(-50%); width: 18px; height: 18px; } .searchField .searchIcon svg path { fill: var(--pastelText); opacity:0.7; } .searchField .searchCancelButton { position: absolute; display: inline-block; right: 5px; top:50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 4px 2px; } .searchField .searchCancelButton svg path { fill: var(--pastelText); opacity:0.7; } /* ----------------------------------------------------------- */ /* !- LOADING INDICATORS */ /* !- */ /* ----------------------------------------------------------- */ /* Loading Indicator for AJAX Form */ .ajaxFormLoadingIndicator { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 160px; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .ajaxFormLoadingIndicator.loading { opacity: 1; pointer-events: auto; } .ajaxFormLoadingIndicator .icon { text-align: center; padding-top: 36px; } .ajaxFormLoadingIndicator .text { text-align: center; font-size: 18px; line-height: 18px; margin-top: 22px; } /* ---------------- */ #login_form .loadingIndicator { position: absolute; width: 52px; height: 52px; left: 0; top: -1px; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #login_form .loadingIndicator.small { position: absolute; width: 32px; height: 32px; left: 9px; top: 9px; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #login_form .loadingIndicator.loading { opacity: 1; pointer-events: auto; } #login_form .loadingIndicator .icon svg #strokePath { stroke: var(--controlColor-Blue); } #login_form .loadingIndicator .icon.green svg #strokePath { stroke: var(--controlColor-Green); } /* ----------------------------------------------------------- */ /* !- MAG.POPUP WINDOW */ /* !- */ /* ----------------------------------------------------------- */ .mpWindow { width: 800px; margin: auto auto; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: white; color: black; position: relative; -moz-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 10px 30px rgba(0,0,0,0.3); box-shadow: 0px 10px 30px rgba(0,0,0,0.3); } .mpWindow .mpTitle { text-align: center; font-size: 14px; line-height: 18px; font-weight: normal; color:rgba(0,0,0,0.4); text-transform: uppercase; padding: 15px 50px 0 50px; } .mpWindow .buttons { margin-top: 60px; display: flex; justify-content: flex-start; margin-left: 20px; padding-bottom: 20px; /* height: 70px; */ } .mpButton { display: block; font-size: 22px; line-height: 70px; height: 70px; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-right: 20px; flex-basis: 0; flex-grow: 100; -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; transition: all 0.08s linear; } input.mpButton { border: none; outline: none; cursor: pointer; padding: 0; } .mpButton.secondaryGray { background-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.4); font-weight: 300; } .mpButton.secondaryWhite { background-color: white; color: var(--pastelText); font-weight: 300; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid var(--controlInputFrameColor); line-height: 68px; /* to keep the text in the v-middle */ } .mpButton.primaryBlue { background-color: var(--controlColor-Blue); color: white; font-weight: bold; } .mpButton.primaryRed { background-color: var(--red); color: white; font-weight: bold; } /* Customization: Small Window (like for Set-Value) */ .mpWindow.small { width: 500px; } .mpWindow.small .mpButton { font-size: 20px; line-height: 50px; height: 50px; } /* REQUEST */ .mpWindow.mpRequest { width: 700px; } .mpRequest .icon { display: inline-block; position: absolute; left: 40px; top: 40px; width: 80px; height: 80px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .mpRequest .icon.red { background-color: var(--red); } .mpRequest .icon.yellow { background-color: var(--yellowDark); } .mpRequest .icon.gray { background-color: var(--pastelText); } .mpRequest .title { padding: 50px 60px 0 160px; font-size: 22px; line-height: 28px; font-weight: bold; } .mpRequest .text { padding: 16px 60px 0 160px; font-size: 16px; line-height: 22px; font-weight: normal; } .mpRequest .text .mpRequestItem { color: var(--red); } /* AJAX Indicator */ .mpWindow.mpAJAXInficator { width: 200px; height: 160px; } .mpAJAXInficator .icon { text-align: center; padding-top: 36px; } .mpAJAXInficator .text { text-align: center; font-size: 18px; line-height: 18px; margin-top: 22px; } /* ----------------------------------------------------------- */ /* !- LOGIN PAGE */ /* !- */ /* ----------------------------------------------------------- */ .errorMessage { padding: 20px 30px; background-color: #fff7dd; border: 1px solid #fbca74; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: var(--red); } .errorMessage.emIndex { margin: 0 10px 20px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* ----------------------------------------------------------- */ /* !- LICENSE PAGE */ /* !- */ /* ----------------------------------------------------------- */ .whiteBlock { border: 3px solid var(--pastelFrame); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .itemDataCard.license { padding: 36px 0 48px 203px; margin-bottom: 60px; } .itemDataCard.license .idcIcon { position: absolute; display: inline-block; width: 148px; height: 148px; font-size: 0; top: 25px; left: 30px; } /* --------------- */ .flex-grow-50 { flex-grow: 50 !important; flex-basis: 50px !important; } .flex-grow-100 { flex-grow: 100 !important; flex-basis: 100px !important; } .flex-grow-125 { flex-grow: 125 !important; flex-basis: 125px !important; } .flex-grow-150 { flex-grow: 150 !important; flex-basis: 150px !important; } .flex-grow-175 { flex-grow: 175 !important; flex-basis: 175px !important; } .itemDataCard .idcData { display: flex; justify-content: flex-start; align-items: flex-start; } /* .itemDataCard .idcColumn { flex-grow: 100; flex-basis: 100px; } */ .itemDataCard .idcColumn { flex-grow: 0; } .idcData .idcColumn .idcColumnTitle { font-size: 14px; line-height: 40px; font-weight: bold; text-transform: uppercase; color: var(--pastelCreamText); border-bottom: 1px solid var(--tableRowLineColor); } .idcData .idcColumn .data { padding-top: 31px; } .idcData .data .idcLine_1 { font-size: 14px; line-height: 16px; } .idcData .data .idcLine_2 { font-size: 14px; line-height: 16px; margin-top: 10px; } /* !-- */ /* --------------- ITEM DATA CARD :: CUSTOMIZATION --------------- */ .idcData .data .idcLine_1.name { font-size: 18px; font-weight: bold; } .itemDataCard.license .idcData .acdc .idcColumnTitle { text-align: right; padding-right: 86px; } .itemDataCard.license .idcData .acdc .data { text-align: right; padding-right: 86px; } .itemDataCard.license .idcData .acdc .acdcContainer { position: relative; font-size: 18px; /* line-height: 36px; */ } .itemDataCard.license .idcData .acdc .acdcContainer .image { position: absolute; right: -40px; top:-4px; width: 24px; height: 24px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .itemDataCard.license .idcData .acdc .acdcContainer .image svg { fill: white; } .itemDataCard.license .idcData .acdc .acdcContainer .image.green { background-color: var(--green); } .itemDataCard.license .idcData .acdc .acdcContainer .image.white { background-color: transparent; border: 1px solid var(--pastelCreamText); } .itemDataCard.license .idcData .acdc .acdcContainer .image.white svg { fill: var(--pastelCreamText); margin-left: -1px; margin-top: -1px; } .idcData .idcColumn.order .data .idcLine_2 { margin-top: 8px; } /* !- LICENSE ACTIVATION */ /* --------------- LICENSE ACTIVATIONS TABLE --------------- */ .licensesActivationsTable .iconCell { text-align: left; } .licensesActivationsTable .iconCell .icon { -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; vertical-align: middle; } /* Magnific popup */ /* ---------------------------------------------------------------------------------------------------------- */ .mfp-unclutter{min-width:1080px}.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0} /* background */ .mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-zoom-in.mfp-bg.mfp-ready { opacity: 0.6; } .mfp-zoom-in.mfp-bg.mfp-removing { opacity: 0; } /* content */ .mfp-zoom-in.mfp-wrap .mfp-content { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-zoom-in.mfp-wrap.mfp-ready .mfp-content { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .mfp-zoom-in.mfp-wrap.mfp-removing .mfp-content { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .mfp-zoom-in.leftTopPin.mfp-wrap .mfp-content { -webkit-transform-origin: 34px 40px; -moz-transform-origin: 34px 40px; -o-transform-origin: 34px 40px; -ms-transform-origin: 34px 40px; transform-origin: 34px 40px; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .mfp-content .messageBlock { background-color: white; padding: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* !- DD Slick (Dropdown) */ /* ---------------------------------------------------------------------------------------------------------- */ table.frame .toolbarDropdown { position: relative; display: inline-block; height: 100%; } table.frame .toolbarDropdown .dd-selected { display:block; overflow:hidden; box-sizing: border-box; position: relative; border: 1px solid transparent; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } table.frame .toolbarDropdown.bordered .dd-selected { border-color: var(--toolBarLines); } table.frame .toolbarDropdown.cdd-open .dd-selected { background-color: var(--pastelDarkText); border-color: var(--pastelDarkText); } /* ------------------ */ .dd-select { cursor:pointer; } .dd-desc { color: #aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; } .dd-selected, .dd-selected-text, .dd-selected, .dd-selected-text { color: var(--pastelText); cursor: pointer; } .dd-open .dd-selected, .dd-open .dd-selected-text { color: white; } .dd-pointer { position: absolute; width: 10px; height: 10px; right: 12px; top:50%; transform: translateY(-50%); } .dd-pointer svg { fill: var(--pastelText); opacity:0.8; } .dd-open .dd-pointer svg { fill: white; } .dd-pointer-up { transform: translateY(-50%) scale(1, -1); } .dd-selected-description-truncated { text-overflow: ellipsis; white-space: nowrap; } .dd-options { display:block; opacity: 0; pointer-events: none; position:absolute; list-style:none; overflow:auto; z-index:999; box-sizing: border-box; background: white; padding: 0; margin: 0; margin-top: 4px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 6px 12px rgba(0,0,0, 0.25); -webkit-box-shadow: 0px 6px 12px rgba(0,0,0, 0.25); box-shadow: 0px 6px 12px rgba(0,0,0, 0.25); -webkit-transition: opacity 0.08s linear; //, transform 0.1s ease-out; transition: opacity 0.08s linear; //, transform 0.1s ease-out; } .cdd-open .dd-options { opacity: 1; pointer-events: auto; } /* .toolbarDropdown .dd-options { left: -1px; } */ .dd-option { display:block; overflow:hidden; position: relative; color: var(--controlColor-Pressed); text-decoration:none; cursor:pointer; border-bottom: 1px solid var(--pastel_op50); /*-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;*/ font-size: 13px; line-height: 18px; padding: 11px 14px 11px 42px; } .ddH14 .dd-selected { padding-left: 14px; padding-right: 14px; } .ddVT14 .dd-selected { padding-top: 14px; } .ddVB12 .dd-selected { padding-bottom: 12px; } /*.ddH14 .dd-option { padding-left: 42px; padding-right: 14px; } .ddVT14 .dd-option { padding-top: 14px; } .ddVB12 .dd-option { padding-bottom: 12px; }*/ .dd-option-text { cursor: pointer; } .dd-options > li:last-child > .dd-option { border-bottom: none; } .dd-option-selected { font-weight: bold; } .dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px; } .dd-image-right { float:right; margin-right:15px; margin-left:5px; } .dd-container { position:relative; } .dd-option .dd-option-svg { position: absolute; display: inline-block; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; } .dd-option .dd-option-svg.green svg .back { fill: var(--green); } .dd-option .dd-option-svg.red svg .back { fill: var(--red); } .dd-option .dd-option-svg.orange svg .back { fill: var(--orange); } .dd-option .dd-option-svg.blue svg .back { fill: var(--blue); } .dd-option .dd-option-svg.purple svg .back { fill: var(--purple); } .dd-option .dd-option-svg.gray svg .back { fill: var(--pastelText); opacity: 0.8; } .dd-option .dd-option-svg.dark-gray svg .back { fill: var(--pastelDarkText); opacity: 1.0; } .dd-option .dd-option-svg.none svg .back { fill: var(--pastelText); opacity: 0.16; } .dd-option.ddoDelimiter { border-bottom-width: 3px; border-bottom-color: var(--pastel); }