@font-face { font-family: 'OpenSansLight'; src: url('../fonts/OpenSansLight.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url('../fonts/OpenSansRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansSemiBold'; src: url('../fonts/OpenSansSemiBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; outline: none; } *:not(.ui-icon) { background-position: center center; background-size: contain; background-repeat: no-repeat; } input[type="submit"] { -webkit-appearance: none; /* fix ios button style */ } html { min-height: 100vh; } body { height: 100vh; font-family: OpenSans, Arial, sans-serif; } b, strong { font-weight: bold; } i, em { font-style: italic; } pre { text-align: left; } h1 { font-size: 2.5em; line-height: 1em; } h2 { font-size: 2em; line-height: 1em; } h3 { font-size: 1.8em; line-height: 1em; } h4 { font-size: 1.6em; line-height: 1em; } h5 { font-size: 1.4em; line-height: 1em; } h6 { font-size: 1.2em; line-height: 1em; } dl { margin-top: 10px; } dl dd { font-style: italic; margin-left: 15px; margin-bottom: 10px; } blockquote { hyphens: none; } hr { border: none; height: 1px; background: black; } button, input[type="button"], input[type="submit"], input[type="reset"], .button { border: none; cursor: pointer; font-family: inherit; font-size: inherit; } button.styl3d, input[type="button"].styl3d, input[type="submit"].styl3d, input[type="reset"].styl3d, .button.styl3d { background: linear-gradient(to bottom, #667379 0%, #424a4e 100%); border: 1px solid #4c4c4c; border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); color: white; cursor: pointer; padding: 5px 20px; transition: all 0.15s linear; display: inline-block; text-align: center; text-decoration: none; } button.styl3d:active, input[type="button"].styl3d:active, input[type="submit"].styl3d:active, input[type="reset"].styl3d:active, .button.styl3d:active { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 5px #000000 inset; } button.styl3d:hover, input[type="button"].styl3d:hover, input[type="submit"].styl3d:hover, input[type="reset"].styl3d:hover, .button.styl3d:hover { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); text-decoration: none; color: white; } body { position: static; /* needed for tinyMce */ width: 100%; top: 0; left: 0; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } fieldset { border: 1px solid black; margin: 25px 15px; padding: 15px; display: inline-block; } fieldset legend { margin-left: 15px; border: 1px solid black; background: white; padding: 3px 7px; } div.content[type="html"] ol > li:not(:last-of-type) { margin-bottom: 10px; } table.paginator { margin: auto; background-color: rgba(0, 0, 0, 0.75); hyphens: none; } table.paginator td { padding: 5px; } table.paginator .pageBox { display: inline-block; border: 1px solid grey; background: rgba(128, 128, 128, 0.05); padding: 1px 3px; text-decoration: none; color: black; border-radius: 2px; } table.paginator .pageBox.hidden { display: none; } label { cursor: pointer; } table.dbResult { margin: 50px auto; border: 1px solid black; box-shadow: 5px 5px 20px black; border-collapse: collapse; text-align: left; } table.dbResult thead { background-color: #CCC; font-weight: bold; } table.dbResult tbody { background-color: #BBB; } table.dbResult td { border: 1px solid grey; padding: 5px; } table.dbResult td input:not([type="submit"]), table.dbResult td select { width: 300px; } input.datetimepicker, input.datepicker { cursor: pointer; user-select: none; } input[type="date"] { width: 120px; } li { list-style-position: outside; } div.modalLayer { background-color: rgba(0, 0, 0, 0.85); height: 100%; position: fixed; text-align: center; width: 100%; z-index: 999; overflow-x: hidden; overflow-y: auto; top: 0; left: 0; } div.modalLayer.ajaxPageLoading { background: rgba(255, 255, 255, 0.75); transition: opacity 5s ease-in; opacity: 0; } div.modalLayer.ajaxPageLoading.fadeOut { transition: opacity 0.5s ease-out; } div.modalLayer.ajaxPageLoading img { margin-top: calc(50% - 99px); filter: invert(1); } div.modalLayer .confirm img.closeButton.closeModal { height: 20px; position: absolute; right: -8px; top: -8px; cursor: pointer; } .ajaxResult { position: absolute; z-index: 1; } .ajaxResult > li { background-color: white; border: 1px solid grey; padding: 10px 15px; cursor: pointer; } .ajaxResult > li:hover, .ajaxResult > li.active { background-color: #eee; } p { margin: 15px auto; } .hidden { display: none; } table.tdPadding5 tr td { padding: 5px; } table.tdPadding10 tr td { padding: 10px; } table:not(.invisible) > tbody > tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.03); } td { vertical-align: middle; } footer { clear: both; } .tac { text-align: center; } .truncate { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } div.confirm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #f5f5f5; padding: 25px; animation: zoomIn 0.2s 1 linear; } div.confirm > div { max-height: 100%; overflow-y: auto; } li.shariff-button.info { display: none; } .ui-slider-handle { cursor: pointer !important; } .ui_tpicker_unit_hide { display: none; } input[type="range"]:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled) { cursor: pointer; } .flex { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; } .flex > * { flex-grow: 1; text-align: left; } img:not([data-mce-src]) { vertical-align: middle; max-width: 100%; width: auto; height: auto; } button > a { color: inherit; display: inline-block; height: 100%; padding: 5px 20px; text-decoration: inherit; width: 100%; } .noSelect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* non-prefixed version, currently not supported by any browser */ } div.accordion > * { transition: none; } div.accordion .ui-widget-content { background: rgba(255, 255, 255, 1); border: 1px solid rgba(0, 0, 0, 0.5); border-top: none; padding: 25px; } div.accordion > h1, div.accordion > h2, div.accordion > h3, div.accordion > h4 { font-weight: normal; } div.accordion > h1:hover, div.accordion > h2:hover, div.accordion > h3:hover, div.accordion > h4:hover, div.accordion > h1 .ui-state-active, div.accordion > h2 .ui-state-active, div.accordion > h3 .ui-state-active, div.accordion > h4 .ui-state-active { border: 1px solid rgba(0, 0, 0, 0.5); } div.tabSystem > ol { height: 40px; display: flex; margin: 0 auto -1px auto; position: relative; z-index: 1; } div.tabSystem > ol > li { color: black; text-align: left; height: 40px; border: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.5); background: linear-gradient(to bottom, #fdfdfd 0%, #e7e7e7 100%); font-size: 13px; padding: 13px 15px; cursor: pointer; } div.tabSystem > ol > li:not(:last-of-type) { border-right: none; } div.tabSystem > ol > li:hover, div.tabSystem > ol > li.active { background: white; } div.tabSystem > ol > li.active { border-bottom: none; } div.tabSystem > ol > li.noLink, div.tabSystem > ol > li a { display: block; padding: 13px 15px; color: black; } div.tabSystem > ol > a.li:hover, div.tabSystem > ol > a.li.active { border: 1px solid rgba(0, 0, 0, 0.5); background: white; } div.tabSystem > ol > a.li.active { border-bottom: none; } div.tabSystem > div { background: white; border: 1px solid rgba(0, 0, 0, 0.5); padding: 25px; } div.tabSystem > div:not(:first-of-type) { display: none; } .greyscale { filter: grayscale(1); } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .modalLayer div.confirm button:not(.tox-tbtn):not(.tox-mbtn):not([role="presentation"]) { margin: 25px 26px 2px 0; } .modalLayer div.confirm .mce-tinymce button, .modalLayer div.confirm .mce-btn button { margin: 0 !important; } input.validationError, select.validationError, textarea.validationError { border: 1px solid red; box-shadow: 0 0 5px red; } .g-recaptcha { display: inline-block; } .colorPicker { position: relative; transition: all 0.2s ease; } .colorPicker .curColor { padding: 10px; cursor: pointer; } .colorPicker .flexWrapper { position: absolute; display: none; z-index: 999; /* over modalLayer */ width: 100%; left: 0; top: 0; } .colorPicker .flex.colors { border: 1px solid white; } .colorPicker .flex.colors > .color { width: auto; margin: 0; border: 2px solid rgba(255, 255, 255, 1); cursor: pointer; padding: 15px; transition: all 0.2s ease; } .colorPicker .flex.colors > .color:hover { transform: scale(1.2); z-index: 1; border-radius: 5px; } .colorPicker select { display: none; } select option.placeholder { color: grey; font-style: italic; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { transform: translateY(-7%) scaleY(1.12); } 75% { transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @keyframes collapseDown { 0% { transform: translateY(0%) scale(1) scaleY(1); } 25% { transform: translateY(3%); } 40% { transform: translateY(-7%) scaleY(1.12); } 100% { transform: translateY(100%) scale(0.6) scaleY(0.5); } } div.Phelic_Survey, div.Phelic_Survey_Results { text-align: center; border: 1px solid lightgrey; background-color: white; padding: 25px; position: relative; } div.Phelic_Survey button.showResult { position: absolute; top: 25px; right: 25px; } div.Phelic_Survey table.surveyOptions { text-align: left; min-width: 200px; margin: 0 auto; } div.Phelic_Survey table.surveyOptions td { padding: 0; } div.Phelic_Survey table.surveyOptions td input { display: none; } div.Phelic_Survey table.surveyOptions td input:checked + label { background: #dceff5; border: 1px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-decoration: underline; } div.Phelic_Survey table.surveyOptions td input + label { background: #e6f9ff; padding: 10px; display: block; margin: 5px; border: 1px solid lightgrey; } div.Phelic_Survey table.surveyOptions td input + label:hover { background: #dceff5; border: 1px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-decoration: underline; } img[src="Phelic/graphX/icons/delete.png"] { width: 25px; height: 25px; } .pseudoLink { cursor: pointer; text-decoration: underline; } div.Phelic_Survey + div.Phelic_Survey_Results { display: none; } iframe.ajaxPage { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; margin: 0; transition: left 0.7s ease-in, opacity 0.7s ease-out; background: white; } iframe.ajaxPage.new { transition: left 0.7s ease-out, opacity 1s ease-out; } iframe.ajaxPage + .waitOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: transparent; z-index: 999999999; } div.Phelic_Survey_Results { position: relative; } div.Phelic_Survey_Results button.showChoice { position: absolute; top: 25px; right: 25px; } div.Phelic_Survey_Results > div.flex { clear: both; flex-wrap: nowrap; } div.Phelic_Survey_Results > div.flex div.result { text-align: center; font-size: 0.8em; line-height: 1.5em; } div.Phelic_Survey_Results > div.flex div.result.topAnswer { font-weight: bold; } div.Phelic_Survey_Results > div.flex div.result:not(:first-of-type) { border-left: 1px solid grey; } div.Phelic_Survey_Results > div.flex div.result div.barWrapper { height: 200px; width: 50px; margin: 0 auto 15px auto; position: relative; } div.Phelic_Survey_Results > div.flex div.result div.barWrapper div.bar { position: absolute; left: 0; bottom: 0; width: 100%; border: 1px solid grey; background: linear-gradient(to bottom, rgba(122, 188, 255, 1) 0%, rgba(64, 150, 238, 1) 100%); } .phelicSlider > .slideIndicators > .slideIndicator:only-child { display: none; } body#tinymce { text-align: left; padding: 15px; } body#tinymce ul, body#tinymce ol { list-style-position: outside; padding-left: 30px; } body#tinymce ul { list-style-type: disc; } body#tinymce ol { list-style-type: decimal; } input[maxlength] + .charsLeft, textarea[maxlength] + .charsLeft { min-height: 10px; color: gray; font-size: 10px; text-align: right; } input[maxlength] + .charsLeft.orange, textarea[maxlength] + .charsLeft.orange { color: #ff7a00; } input[maxlength] + .charsLeft.red, textarea[maxlength] + .charsLeft.red { color: #ff0000; } input:not([type="submit"]), select, textarea { background: #f9f9f9; border: 1px solid lightgrey; } input:not([type="submit"]):focus, select:focus, textarea:focus { box-shadow: 0 0 5px #b4b4b4; border: 1px solid #afafaf; background: #fcfcfc; } input:not([type="submit"]) { padding: 2px; transition: all 0.25s ease; } textarea { border: 1px solid lightgrey; padding: 5px; resize: vertical; } .fluidInputLabel { position: relative; font-size: 16px; padding-top: 15px; } .fluidInputLabel .highLabel, .fluidInputLabel.high > label, .fluidInputLabel.high > .customInputSelect + label { transform: scale(0.8) translateY(0) !important; transform-origin: 0 0; color: #4285f4; display: inline-block; top: 0; } .fluidInputLabel .fakedInput { display: inline-block; } .fluidInputLabel > input[type="text"], .fluidInputLabel > input[type="password"], .fluidInputLabel > input[type="email"], .fluidInputLabel > input[type="checkbox"], .fluidInputLabel > input[type="date"], .fluidInputLabel > input[type="number"], .fluidInputLabel > select, .fluidInputLabel > textarea, .fluidInputLabel > .selectEmulator, .fluidInputLabel > .customInputSelect, .fluidInputLabel > .fakedInput { background: none; border: none; font-size: inherit; } .fluidInputLabel > input[type="text"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > input[type="password"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > input[type="email"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > input[type="checkbox"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > input[type="date"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > input[type="number"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > select:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > textarea:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > .selectEmulator:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > .customInputSelect:not(.selectEmulator):not(.customInputSelect):not(.fakedInput), .fluidInputLabel > .fakedInput:not(.selectEmulator):not(.customInputSelect):not(.fakedInput) { border-bottom: 1px solid #ced4da; } .fluidInputLabel > input[type="text"]:disabled, .fluidInputLabel > input[type="password"]:disabled, .fluidInputLabel > input[type="email"]:disabled, .fluidInputLabel > input[type="checkbox"]:disabled, .fluidInputLabel > input[type="date"]:disabled, .fluidInputLabel > input[type="number"]:disabled, .fluidInputLabel > select:disabled, .fluidInputLabel > textarea:disabled, .fluidInputLabel > .selectEmulator:disabled, .fluidInputLabel > .customInputSelect:disabled, .fluidInputLabel > .fakedInput:disabled { border-bottom: 1px solid grey; color: grey; } .fluidInputLabel > input[type="text"]:disabled + div.charsLeft, .fluidInputLabel > input[type="password"]:disabled + div.charsLeft, .fluidInputLabel > input[type="email"]:disabled + div.charsLeft, .fluidInputLabel > input[type="checkbox"]:disabled + div.charsLeft, .fluidInputLabel > input[type="date"]:disabled + div.charsLeft, .fluidInputLabel > input[type="number"]:disabled + div.charsLeft, .fluidInputLabel > select:disabled + div.charsLeft, .fluidInputLabel > textarea:disabled + div.charsLeft, .fluidInputLabel > .selectEmulator:disabled + div.charsLeft, .fluidInputLabel > .customInputSelect:disabled + div.charsLeft, .fluidInputLabel > .fakedInput:disabled + div.charsLeft, .fluidInputLabel > input[type="text"]:disabled + div.charsLeft + label, .fluidInputLabel > input[type="password"]:disabled + div.charsLeft + label, .fluidInputLabel > input[type="email"]:disabled + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"]:disabled + div.charsLeft + label, .fluidInputLabel > input[type="date"]:disabled + div.charsLeft + label, .fluidInputLabel > input[type="number"]:disabled + div.charsLeft + label, .fluidInputLabel > select:disabled + div.charsLeft + label, .fluidInputLabel > textarea:disabled + div.charsLeft + label, .fluidInputLabel > .selectEmulator:disabled + div.charsLeft + label, .fluidInputLabel > .customInputSelect:disabled + div.charsLeft + label, .fluidInputLabel > .fakedInput:disabled + div.charsLeft + label, .fluidInputLabel > input[type="text"]:disabled + label, .fluidInputLabel > input[type="password"]:disabled + label, .fluidInputLabel > input[type="email"]:disabled + label, .fluidInputLabel > input[type="checkbox"]:disabled + label, .fluidInputLabel > input[type="date"]:disabled + label, .fluidInputLabel > input[type="number"]:disabled + label, .fluidInputLabel > select:disabled + label, .fluidInputLabel > textarea:disabled + label, .fluidInputLabel > .selectEmulator:disabled + label, .fluidInputLabel > .customInputSelect:disabled + label, .fluidInputLabel > .fakedInput:disabled + label { color: grey; cursor: default; } .fluidInputLabel > input[type="text"] + label, .fluidInputLabel > input[type="password"] + label, .fluidInputLabel > input[type="email"] + label, .fluidInputLabel > input[type="checkbox"] + label, .fluidInputLabel > input[type="date"] + label, .fluidInputLabel > input[type="number"] + label, .fluidInputLabel > select + label, .fluidInputLabel > textarea + label, .fluidInputLabel > .selectEmulator + label, .fluidInputLabel > .customInputSelect + label, .fluidInputLabel > .fakedInput + label, .fluidInputLabel > input[type="text"] + div.charsLeft + label, .fluidInputLabel > input[type="password"] + div.charsLeft + label, .fluidInputLabel > input[type="email"] + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"] + div.charsLeft + label, .fluidInputLabel > input[type="date"] + div.charsLeft + label, .fluidInputLabel > input[type="number"] + div.charsLeft + label, .fluidInputLabel > select + div.charsLeft + label, .fluidInputLabel > textarea + div.charsLeft + label, .fluidInputLabel > .selectEmulator + div.charsLeft + label, .fluidInputLabel > .customInputSelect + div.charsLeft + label, .fluidInputLabel > .fakedInput + div.charsLeft + label { position: absolute; top: 5px; left: 0; font-size: 1em; color: #757575; cursor: text; transition: all 0.2s ease-out, color 0.2s ease-out; transform: translateY(12px); pointer-events: none; } .fluidInputLabel > input[type="text"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > input[type="password"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > input[type="email"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > input[type="checkbox"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > input[type="date"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > input[type="number"]:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > select:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > textarea:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > .selectEmulator:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > .customInputSelect:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus, .fluidInputLabel > .fakedInput:not(.selectEmulator):not(.customInputSelect):not(.fakedInput):focus { box-shadow: none; border: none; border-bottom: 1px solid #4285f4; background-color: rgba(0, 0, 0, 0.1); } .fluidInputLabel > input[type="text"].fakedInput, .fluidInputLabel > input[type="password"].fakedInput, .fluidInputLabel > input[type="email"].fakedInput, .fluidInputLabel > input[type="checkbox"].fakedInput, .fluidInputLabel > input[type="date"].fakedInput, .fluidInputLabel > input[type="number"].fakedInput, .fluidInputLabel > select.fakedInput, .fluidInputLabel > textarea.fakedInput, .fluidInputLabel > .selectEmulator.fakedInput, .fluidInputLabel > .customInputSelect.fakedInput, .fluidInputLabel > .fakedInput.fakedInput, .fluidInputLabel > input[type="text"].customInputSelect, .fluidInputLabel > input[type="password"].customInputSelect, .fluidInputLabel > input[type="email"].customInputSelect, .fluidInputLabel > input[type="checkbox"].customInputSelect, .fluidInputLabel > input[type="date"].customInputSelect, .fluidInputLabel > input[type="number"].customInputSelect, .fluidInputLabel > select.customInputSelect, .fluidInputLabel > textarea.customInputSelect, .fluidInputLabel > .selectEmulator.customInputSelect, .fluidInputLabel > .customInputSelect.customInputSelect, .fluidInputLabel > .fakedInput.customInputSelect { box-shadow: none; border: none; border-bottom: 1px solid transparent; margin-top: 3px; } .fluidInputLabel > input[type="text"].hasValue + label, .fluidInputLabel > input[type="password"].hasValue + label, .fluidInputLabel > input[type="email"].hasValue + label, .fluidInputLabel > input[type="checkbox"].hasValue + label, .fluidInputLabel > input[type="date"].hasValue + label, .fluidInputLabel > input[type="number"].hasValue + label, .fluidInputLabel > select.hasValue + label, .fluidInputLabel > textarea.hasValue + label, .fluidInputLabel > .selectEmulator.hasValue + label, .fluidInputLabel > .customInputSelect.hasValue + label, .fluidInputLabel > .fakedInput.hasValue + label, .fluidInputLabel > input[type="text"]:focus + label, .fluidInputLabel > input[type="password"]:focus + label, .fluidInputLabel > input[type="email"]:focus + label, .fluidInputLabel > input[type="checkbox"]:focus + label, .fluidInputLabel > input[type="date"]:focus + label, .fluidInputLabel > input[type="number"]:focus + label, .fluidInputLabel > select:focus + label, .fluidInputLabel > textarea:focus + label, .fluidInputLabel > .selectEmulator:focus + label, .fluidInputLabel > .customInputSelect:focus + label, .fluidInputLabel > .fakedInput:focus + label, .fluidInputLabel > input[type="text"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="password"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="email"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="checkbox"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="date"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="number"][placeholder]:not([placeholder=""]) + label, .fluidInputLabel > select[placeholder]:not([placeholder=""]) + label, .fluidInputLabel > textarea[placeholder]:not([placeholder=""]) + label, .fluidInputLabel > .selectEmulator[placeholder]:not([placeholder=""]) + label, .fluidInputLabel > .customInputSelect[placeholder]:not([placeholder=""]) + label, .fluidInputLabel > .fakedInput[placeholder]:not([placeholder=""]) + label, .fluidInputLabel > input[type="text"].fakedInput + label, .fluidInputLabel > input[type="password"].fakedInput + label, .fluidInputLabel > input[type="email"].fakedInput + label, .fluidInputLabel > input[type="checkbox"].fakedInput + label, .fluidInputLabel > input[type="date"].fakedInput + label, .fluidInputLabel > input[type="number"].fakedInput + label, .fluidInputLabel > select.fakedInput + label, .fluidInputLabel > textarea.fakedInput + label, .fluidInputLabel > .selectEmulator.fakedInput + label, .fluidInputLabel > .customInputSelect.fakedInput + label, .fluidInputLabel > .fakedInput.fakedInput + label, .fluidInputLabel > input[type="text"].hasValue + div.charsLeft + label, .fluidInputLabel > input[type="password"].hasValue + div.charsLeft + label, .fluidInputLabel > input[type="email"].hasValue + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"].hasValue + div.charsLeft + label, .fluidInputLabel > input[type="date"].hasValue + div.charsLeft + label, .fluidInputLabel > input[type="number"].hasValue + div.charsLeft + label, .fluidInputLabel > select.hasValue + div.charsLeft + label, .fluidInputLabel > textarea.hasValue + div.charsLeft + label, .fluidInputLabel > .selectEmulator.hasValue + div.charsLeft + label, .fluidInputLabel > .customInputSelect.hasValue + div.charsLeft + label, .fluidInputLabel > .fakedInput.hasValue + div.charsLeft + label, .fluidInputLabel > input[type="text"]:focus + div.charsLeft + label, .fluidInputLabel > input[type="password"]:focus + div.charsLeft + label, .fluidInputLabel > input[type="email"]:focus + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"]:focus + div.charsLeft + label, .fluidInputLabel > input[type="date"]:focus + div.charsLeft + label, .fluidInputLabel > input[type="number"]:focus + div.charsLeft + label, .fluidInputLabel > select:focus + div.charsLeft + label, .fluidInputLabel > textarea:focus + div.charsLeft + label, .fluidInputLabel > .selectEmulator:focus + div.charsLeft + label, .fluidInputLabel > .customInputSelect:focus + div.charsLeft + label, .fluidInputLabel > .fakedInput:focus + div.charsLeft + label, .fluidInputLabel > input[type="text"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="password"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="email"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="date"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="number"][placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > select[placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > textarea[placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > .selectEmulator[placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > .customInputSelect[placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > .fakedInput[placeholder]:not([placeholder=""]) + div.charsLeft + label, .fluidInputLabel > input[type="text"].fakedInput + div.charsLeft + label, .fluidInputLabel > input[type="password"].fakedInput + div.charsLeft + label, .fluidInputLabel > input[type="email"].fakedInput + div.charsLeft + label, .fluidInputLabel > input[type="checkbox"].fakedInput + div.charsLeft + label, .fluidInputLabel > input[type="date"].fakedInput + div.charsLeft + label, .fluidInputLabel > input[type="number"].fakedInput + div.charsLeft + label, .fluidInputLabel > select.fakedInput + div.charsLeft + label, .fluidInputLabel > textarea.fakedInput + div.charsLeft + label, .fluidInputLabel > .selectEmulator.fakedInput + div.charsLeft + label, .fluidInputLabel > .customInputSelect.fakedInput + div.charsLeft + label, .fluidInputLabel > .fakedInput.fakedInput + div.charsLeft + label { transform: scale(0.8) translateY(0) !important; transform-origin: 0 0; color: #4285f4; display: inline-block; top: 0; } .fluidInputLabel > select + label, .fluidInputLabel > .selectEmulator + label { transform: scale(0.8) translateY(0) !important; transform-origin: 0 0; color: #4285f4; display: inline-block; transform: scale(0.8); position: absolute; top: 0; left: 0; } .fluidInputLabel > .selectEmulator + label { transform: scale(0.8); } .fluidInputLabel:not(:first-child) { margin-top: 20px; } .rippleOnClick { position: relative; overflow: hidden; } .rippleOnClick .ripple { display: inline-block; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); position: absolute; opacity: 1; z-index: 1; } .rippleOnClick .rippleEffect { animation: rippleDrop .6s linear; } @keyframes rippleDrop { 100% { transform: scale(2);opacity: 0; } } input.styled[type="checkbox"] { display: none; } input.styled[type="checkbox"] + label { position: relative; display: inline-block; width: 20px; height: 20px; } input.styled[type="checkbox"] + label::before { position: absolute; top: 0; left: 0; z-index: 0; width: 12px; height: 12px; margin-top: 3px; content: ""; border: 2px solid #8a8a8a; border-radius: 1px; transition: 0.2s; background: rgba(255, 255, 255, 0.33); } input.styled[type="checkbox"]:checked + label::before { top: -2px; left: -2px; width: 6px; height: 12px; border-top: 2px solid transparent; border-right: 2px solid #4285f4; border-bottom: 2px solid #4285f4; border-left: 2px solid transparent; transform: rotate(40deg); transform-origin: 100% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: transparent; } input.switch[type="checkbox"] { display: none; } input.switch[type="checkbox"] + label { display: inline-block; color: inherit; } input.switch[type="checkbox"] + label .lever { position: relative; display: inline-block; margin: 0 15px; vertical-align: middle; content: ""; background-color: #818181; border-radius: 15px; width: 40px; height: 15px; transition: background 0.3s ease; } input.switch[type="checkbox"] + label .lever::after { position: absolute; top: -3px; left: 0; display: inline-block; content: ""; background-color: #f1f1f1; border-radius: 20px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4); width: 20px; height: 20px; transition: left 0.3s ease, background 0.03s ease, box-shadow 1s ease; } input.switch[type="checkbox"]:checked + label .lever { background-color: #97acd0; } input.switch[type="checkbox"]:checked + label .lever::after { left: 25px; background-color: #4285f4; } #loadingBar { background-color: #628baf; display: none; position: absolute; height: 3px; width: 100%; } #loadingBar.visible { display: flex; } #loadingBar::before { background-color: #5773ff; content: ''; animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; width: 100%; height: 100%; } @keyframes running-progress { 0% { margin-left: 0; margin-right: 100%; } 50% { margin-left: 25%; margin-right: 0; } 100% { margin-left: 100%;margin-right: 0; } } .grecaptcha-badge { display: none; } footer .testEnv { background: #222222 none repeat scroll 0 0;border-top: 1px solid black; color: white; left: 0; opacity: 0.5; padding: 10px; pointer-events: none; position: fixed; top: 0; width: 100%; z-index: 999; text-align: center; }