/* ------------------- Basekit Template · Components Fev . 2022 © Exactuflow http://basekit.exactusensu.pt Table of Contents · Buttons · Labels · Textfields · Textareas · Droplists · Switch Buttons · Checkbox Buttons · Radio Buttons · Tag Boxes · Suggestion Lists · Drop Buttons · Tags · Field Groups · Nesties · Windows · Floaters ------------------- */ /* Buttons --------------------------------------- */ /* Buttons . Default */ button, .button { display: inline-block; padding: 0px 16px; border: none; font-family: Gotham; text-align: center; text-decoration: none; background-color: #2aaae2; color: #ffffff; box-sizing: border-box; cursor: pointer; outline: none; user-select: none; transition: 0.2s filter ease-in-out; text-overflow: ellipsis; overflow: hidden; } button:hover, .button:hover, button.hover, .button.hover { filter: brightness(110%); } button.pressed, .button.pressed { filter: brightness(90%); transition: none; } button.disabled, button.disabled:hover button.pressed.disabled, .button.disabled, .button.pressed.disabled, .button.disabled:hover { opacity: 0.3; filter: none; cursor: not-allowed; } /* Buttons . Colors */ /* Buttons . Colors . Default */ body { background-color: #ffffff; } .bc_transparent { background-color: transparent; color: inherit; } .bc_default { background-color: #24556e; color: #ffffff; } .bc_primary { background-color: #0088ba; color: #ffffff; } .bc_secondary { background-color: #ffd000; color: #ffffff; } /* Buttons . Colors . Red */ .bc_red { background-color: #d45353; color: #ffffff; } .bc_red_dark { background-color: #801e1e; color: #ffffff; } .bc_red_medium { background-color: #c45656; color: #ffffff; } .bc_red_light { background-color: #da9494; } /* Buttons . Colors . Green */ .bc_green { background-color: #39b876; color: #ffffff; } .bc_green_dark { background-color: #00735b; color: #ffffff; } .bc_green_medium { background-color: #20a864; color: #ffffff; } .bc_green_light { background-color: #8bcc95; } /* Buttons . Colors . Blue */ .bc_blue { background-color: #007ee5; color: #ffffff; } .bc_blue_dark { background-color: #004b73; color: #ffffff; } .bc_blue_medium { background-color: #0075b3; color: #ffffff; } .bc_blue_light { background-color: #aec9df; } /* Buttons . Colors . Orange */ .bc_orange { background-color: #ffaa54; color: #ffffff; } .bc_orange_dark { background-color: #bf6100; color: #ffffff; } .bc_orange_medium { background-color: #eba457; color: #ffffff; } .bc_orange_light { background-color: #ffe2c4; } /* Buttons . Colors . Yellow */ .bc_yellow { background-color: #ffea00; color: #ffffff; } .bc_yellow_dark { background-color: #ffbe00; color: #ffffff; } .bc_yellow_medium { background-color: #ffd24a; color: #ffffff; } .bc_yellow_light { background-color: #fff1c7; } /* Buttons . Colors . Grey */ .bc_grey { background-color: #4d4d4d; color: #ffffff; } .bc_grey_dark { background-color: #414042; color: #ffffff; } .bc_grey_medium { background-color: #939598; color: #ffffff; } .bc_grey_light { background-color: #e6e7e8; } /* Buttons . Colors . Black */ .bc_black { background-color: #000000; color: #ffffff; } .bc_black_dark { background-color: #000000; color: #ffffff; } .bc_black_medium { background-color: rgba(0,0,0,0.5); color: #ffffff; } .bc_black_light { background-color: rgba(0,0,0,0.2); } /* Buttons . Colors . White */ .bc_white { background-color: #ffffff; color: #414042; } .bc_white_dark { background-color: #ffffff; color: #414042; } .bc_white_medium { background-color: rgba(255,255,255,0.5); color: #ffffff;} .bc_white_light { background-color: rgba(255,255,255,0.2); color: #ffffff;} /* Buttons . Sizes */ /* Buttons . Sizes . Default */ .bw_full, .bw_wide, .bw_narrow { padding: 0px; } .bw_100, .bw_150, .bw_200, .bw_250, .bw_300, .bw_350 { min-width: 100px !important; } .bw_100 { width: 100px !important; } .bw_150 { width: 150px !important; } .bw_200 { width: 200px !important; } .bw_250 { width: 250px !important; } .bw_300 { width: 300px !important; } .bw_350 { width: 350px !important; } /* Buttons . Sizes . Extra small screens */ @media (min-width: 100px) { /* Default */ button, .button, .bs_default { height: 32px !important; padding: 0px 10px !important; line-height: 32px !important; font-size: 100% !important; padding: 0px 20px !important; } .bs_tiny { height: 18px !important; padding: 0px 6px !important; line-height: 18px !important; font-size: 75% !important; padding: 0px 20px !important; } .bs_small { height: 26px !important; padding: 0px 8px !important; line-height: 26px !important; font-size: 84% !important; padding: 0px 20px !important; } .bs_medium { height: 42px !important; padding: 0px 7px !important; line-height: 42px !important; font-size: 125% !important; padding: 0px 20px !important; } .bs_large { height: 52px !important; padding: 0px 17px !important; line-height: 52px !important; font-size: 150% !important; padding: 0px 20px !important; } .bs_huge { height: 64px !important; padding: 0px 21px !important; line-height: 64px !important; font-size: 167% !important; padding: 0px 20px !important; } .bw_normal { width: 120px !important; } .bw_full { width: 100% !important; padding: 0px !important; } .bw_wide { width: 80% !important; padding: 0px !important; } .bw_narrow { width: 50% !important; padding: 0px !important; } /* Overides */ .xs-bs_default { height: 32px !important; padding: 0px 10px !important; line-height: 32px !important; font-size: 100% !important; } .xs-bs_tiny { height: 18px !important; padding: 0px 6px !important; line-height: 18px !important; font-size: 75% !important; } .xs-bs_small { height: 26px !important; padding: 0px 8px !important; line-height: 26px !important; font-size: 84% !important; } .xs-bs_medium { height: 42px !important; padding: 0px 7px !important; line-height: 42px !important; font-size: 125% !important; } .xs-bs_large { height: 52px !important; padding: 0px 17px !important; line-height: 52px !important; font-size: 150% !important; } .xs-bs_huge { height: 64px !important; padding: 0px 21px !important; line-height: 64px !important; font-size: 167% !important; } .xs-bw_normal { width: 240px !important; } .xs-bw_full { width: 100% !important; padding: 0px !important; } .xs-bw_wide { width: 80% !important; padding: 0px !important; } .xs-bw_medium { width: 50% !important; padding: 0px !important; } .xs-bw_narrow { width: 30% !important; padding: 0px !important; } } /* Buttons . Sizes . Small */ @media (min-width: 768px) { /* Reset */ .xs-bs_tiny, .xs-bs_small, .xs-bs_default, .xs-bs_medium, .xs-bs_large, .xs-bs_huge { height: inherit !important; line-height: inherit !important; font-size: inherit !important; } .xs-bw_normal, .xs-bw_full, .xs-bw_wide, .xs-bw_narrow { width: inherit !important; } /* Default */ button, .button, .bs_default { height: 36px !important; padding: 0px 12px !important; line-height: 36px !important; font-size: 100% !important; } .bs_tiny { height: 20px !important; padding: 0px 6px !important; line-height: 20px !important; font-size: 71.5% !important; } .bs_small { height: 30px !important; padding: 0px 10px !important; line-height: 30px !important; font-size: 79% !important; } .bs_medium { height: 48px !important; padding: 0px 16px !important; line-height: 48px !important; font-size: 115% !important; } .bs_large { height: 60px !important; padding: 0px 30px !important; line-height: 60px !important; font-size: 143% !important; } .bs_huge { height: 74px !important; padding: 0px 24px !important; line-height: 74px !important; font-size: 157.2% !important; } .bw_normal { width: 180px !important; } .bw_full { width: 100% !important; } .bw_wide { width: 80% !important; } .bw_narrow { width: 50% !important; } /* Overides */ .sm-bs_default { height: 36px !important; padding: 0px 6px !important; line-height: 36px !important; font-size: 80% !important; } .sm-bs_tiny { height: 20px !important; padding: 0px 10px !important; line-height: 20px !important; font-size: 71.5% !important; } .sm-bs_small { height: 30px !important; padding: 0px 10px !important; line-height: 30px !important; font-size: 79% !important; } .sm-bs_medium { height: 48px !important; padding: 0px 16px !important; line-height: 48px !important; font-size: 115% !important; } .sm-bs_large { height: 60px !important; padding: 0px 30px !important; line-height: 60px !important; font-size: 143% !important; } .sm-bs_huge { height: 74px !important; padding: 0px 24px !important; line-height: 74px !important; font-size: 157.2% !important; } .sm-bw_normal { width: 240px !important; padding: 0px !important; } .sm-bw_full { width: 100% !important; padding: 0px !important; } .sm-bw_wide { width: 80% !important; padding: 0px !important; } .sm-bw_medium { width: 50% !important; padding: 0px !important; } .sm-bw_narrow { width: 30% !important; padding: 0px !important; } } /* Buttons . Sizes . Medium */ @media (min-width: 992px) { /* Reset */ .xs-bs_tiny, .xs-bs_small, .xs-bs_default, .xs-bs_medium, .xs-bs_large, .xs-bs_huge, .sm-bs_tiny, .sm-bs_small, .sm-bs_default, .sm-bs_medium, .sm-bs_large, .sm-bs_huge { height: inherit !important; line-height: inherit !important; font-size: inherit !important; } .xs-bw_normal, .xs-bw_full, .xs-bw_wide, .xs-bw_narrow, .sm-bw_normal, .sm-bw_full, .sm-bw_wide, .sm-bw_narrow { width: inherit !important; } /* Default */ button, .button, .bs_default { height: 40px !important; padding: 0px 13px !important; line-height: 40px !important; font-size: 100% !important; } .bs_tiny { height: 22px !important; padding: 0px 7px !important; line-height: 24px !important; font-size: 75% !important; } .bs_small { height: 32px !important; padding: 0px 10px !important; line-height: 32px !important; font-size: 81.5% !important; } .bs_medium { height: 52px !important; padding: 0px 17px !important; line-height: 52px !important; font-size: 113% !important; } .bs_large { height: 64px !important; padding: 0px 21px !important; line-height: 64px !important; font-size: 138% !important; } .bs_huge { height: 80px !important; padding: 0px 26px !important; line-height: 80px !important; font-size: 150% !important; } .bw_normal { width: 200px !important; } .bw_full { width: 100% !important; } .bw_wide { width: 80% !important; } .bw_narrow { width: 50% !important; } /* Overides */ .md-bs_default { height: 40px !important; padding: 0px 13px !important; line-height: 40px !important; font-size: 100% !important; } .md-bs_tiny { height: 22px !important; padding: 0px 7px !important; line-height: 22px !important; font-size: 75% !important; } .md-bs_small { height: 32px !important; padding: 0px 10px !important; line-height: 32px !important; font-size: 81.5% !important; } .md-bs_medium { height: 52px !important; padding: 0px 17px !important; line-height: 52px !important; font-size: 113% !important; } .md-bs_large { height: 64px !important; padding: 0px 21px !important; line-height: 64px !important; font-size: 138% !important; } .md-bs_huge { height: 80px !important; padding: 0px 26px !important; line-height: 80px !important; font-size: 150% !important; } .md-bw_normal { width: 200px !important; padding: 0px !important; } .md-bw_full { width: 100% !important; padding: 0px !important; } .md-bw_wide { width: 80% !important; padding: 0px !important; } .md-bw_medium { width: 50% !important; padding: 0px !important; } .md-bw_narrow { width: 30% !important; padding: 0px !important; } } /* Buttons . Sizes . Large */ @media (min-width: 1200px) { /* Reset */ .xs-bs_tiny, .xs-bs_small, .xs-bs_default, .xs-bs_medium, .xs-bs_large, .xs-bs_huge, .sm-bs_tiny, .sm-bs_small, .sm-bs_default, .sm-bs_medium, .sm-bs_large, .sm-bs_huge, .md-bs_tiny, .md-bs_small, .md-bs_default, .md-bs_medium, .md-bs_large, .md-bs_huge { height: inherit !important; line-height: inherit !important; font-size: inherit !important; } .xs-bw_normal, .xs-bw_full, .xs-bw_wide, .xs-bw_narrow, .sm-bw_normal, .sm-bw_full, .sm-bw_wide, .sm-bw_narrow, .md-bw_normal, .md-bw_full, .md-bw_wide, .md-bw_narrow { width: inherit !important; } /* Default */ button, .button, .bs_default { height: 42px !important; padding: 0px 14px !important; line-height: 42px !important; font-size: 100% !important; } .bs_tiny { height: 24px !important; padding: 0px 8px !important; line-height: 24px !important; font-size: 75% !important; } .bs_small { height: 34px !important; padding: 0px 17px !important; line-height: 34px !important; font-size: 88% !important; } .bs_medium { height: 54px !important; padding: 0px 18px !important; line-height: 54px !important; font-size: 125% !important; } .bs_large { height: 68px !important; padding: 0px 22px !important; line-height: 68px !important; font-size: 156% !important; } .bs_huge { height: 84px !important; padding: 0px 28px !important; line-height: 84px !important; font-size: 175% !important; } .bw_normal { width: 240px !important; padding: 0px !important; } .bw_full { width: 100% !important; padding: 0px !important; } .bw_wide { width: 80% !important; padding: 0px !important; } .bw_medium { width: 50% !important; padding: 0px !important; } .bw_narrow { width: 30% !important; padding: 0px !important; } /* Overides */ .lg-bs_default { height: 42px !important; padding: 0px 14px !important; line-height: 42px !important; font-size: 100% !important; } .lg-bs_tiny { height: 24px !important; padding: 0px 8px !important; line-height: 24px !important; font-size: 75% !important; } .lg-bs_small { height: 34px !important; padding: 0px 17px !important; line-height: 34px !important; font-size: 88% !important; } .lg-bs_medium { height: 54px !important; padding: 0px 18px !important; line-height: 54px !important; font-size: 125% !important; } .lg-bs_large { height: 68px !important; padding: 0px 22px !important; line-height: 68px !important; font-size: 156% !important; } .lg-bs_huge { height: 84px !important; padding: 0px 28px !important; line-height: 84px !important; font-size: 175% !important; } .lg-bw_normal { width: 240px !important; } .lg-bw_full { width: 100% !important; padding: 0px !important; } .lg-bw_wide { width: 80% !important; padding: 0px !important; } .lg-bw_medium { width: 50% !important; padding: 0px !important; } .lg-bw_narrow { width: 30% !important; padding: 0px !important; } } .zig_zag > container { background-image: url(assets/media/list.progress.dashes.png); background-repeat: repeat-y; background-size: 1px 7px; background-position: center center; } .zig_zag > container:last-child { background-image: none; } .zig_zag > container > row { background-size: 32px; background-repeat: no-repeat; background-position: top center; } /* Buttons . Custom */ /* Buttons . Custom . Start */ button.start, .button.start { height: 96px !important; width: 96px !important; padding: 0px !important; border-radius: 50%; font-size: 0px !important; background-size: cover; opacity: 0.6 !important; transition: 0.2s all ease-in-out; } button.start:before, .button.start:before { display: block; padding-top: 10px; content: "ņ"; font-size: 90px; font-family: ExactuSymbols; } button.start:hover, .button.start:hover { opacity: 1 !important; } /* 11.15 Buttons . remove ------------------------ */ .button.remove { display: inline-block; float: right; height: 24px !important; width: 24px !important; padding: 0px !important; border: 1px solid #939598; border-radius: 50% 50%; color: #ffffff; background-color: transparent; opacity: 0.3; transition: 0.2s all ease-in-out; } .button.remove::after { display: block; content: ""; font-family: PaperIcons; line-height: 100%; color: #939598; transition: 0.2s all ease-in-out; } .button.remove:hover { color: #ffffff; background-color: #939598; opacity: 1; } .button.remove:hover::after { color: #ffffff; } /* Labels ---------------------------------------- */ label { display: block; font-weight: 600; } /* Labels . Extra small screens */ @media (min-width: 100px) { label { margin-bottom: 4px; font-size: 12px; line-height: 14px; } } /* Labels . Small screens */ @media (min-width: 768px) { label { margin-bottom: 4px; font-size: 12px; line-height: 16px; } } /* Labels . Medium screens */ @media (min-width: 990px) { label { margin-bottom: 10px; font-size: 14px; line-height: 18px; } } /* Labels . Large screens */ @media (min-width: 1200px) { label { margin-bottom: 10px; font-size: 14px; line-height: 18px; } } /* Textfields ------------------------------------ */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .textfield { width: 100%; font-family: Gotham; border: 1px solid #CCCCCC; color: #4c4c4c; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transition: all 0.2s ease-in-out; background-repeat: no-repeat; background-position: right center; background-size: auto 70% ; transition: 0.2s all ease-in-out; } .textfield::placeholder{ color: #e6e7e8; } /* Textfield states */ .textfield.disabled{ color: #CCC; border-color: #DDD; background-color: #FFF; background-image: url(../media/icon.field.disabled.png); } .textfield.readonly{ border-color: transparent; } .textfield.changed{ color: #333; } .textfield.mandatory{ background-image: url(../media/icon.field.mandatory.png); } .textfield.valid { border-color: #39b876 !important; /* green */ background-image: url(../media/icon.field.valid.png); background-color: #ffffff; } .textfield.invalid{ color: #d45353; border-color: #d45353 !important; /* red */ background-image: url(../media/icon.field.invalid.png); animation-name: blink_invalid; animation-duration: 2000ms; animation-iteration-count: 1; } @keyframes blink_invalid { 0% { background-color: #f8eaea;} 100% { background-color: #ffffff !important;} } .textfield.editable { border-color: #CCC; background-image: url(../media/icon.field.editable.png); } .textfield.editable:hover{ background-color: #fffbee; } .textfield.editing{ background: none; } .textfield.editing:hover{ background: none; } .textfield.saving{ color: #CCC; border-color: #DDD; background-color: #FFF; background-image: url(../media/icon.field.saving.png); cursor: wait; } .textfield.saved { border-color: #39b876 !important; /* green */ background-image: url(../media/icon.field.saved.png) !important; background-color: #ffffff; animation-name: pulse_saved; animation-duration: 1000ms; animation-iteration-count: 1; } @keyframes pulse_saved { 0% { -moz-box-shadow: 0 0 0 0 rgba(57,184,118, 0.4); box-shadow: 0 0 0 0 rgba(57,184,118, 0.4); } 100% { -moz-box-shadow: 0 0 0 10px rgba(57,184,118, 0); box-shadow: 0 0 0 10px rgba(57,184,118, 0); } } .textfield:focus, .textfield.active { border-color: #007ee5 !important; outline-width: 0px; } /* Field Wrapper */ .field_wrapper { /*border: 1px solid red;*/ } .field_wrapper .field_controls { position: relative; float: right; font-size: 0px; z-index: 2; } .field_wrapper button { display: inline-block; margin-right: 10px; padding: 0px !important; border-radius: 50%; color: #ffffff; opacity: 0.6; transition: 0.2s all ease-in-out; } .field_wrapper button:last-child { margin-right: 0px; } .field_wrapper button:hover { opacity: 1; } .field_wrapper button::after { display: block; font-family: PaperIcons; line-height: 100%; } .field_wrapper button.cancel { background-color: #d45353; } .field_wrapper button.cancel::after { content: ""; } .field_wrapper button.save { background-color: #39b876; } .field_wrapper button.save::after { content: ""; } /* Textfields . Extra small screens */ @media (min-width: 100px) { /* Standard */ /* Textfield . Default */ .textfield, .textfield_default, .xs-textfield_default { height: 32px !important; padding-right: 6px !important; font-size: 18px !important; text-indent: 6px !important; } .textfield.disabled, .textfield.mandatory, .textfield.valid, .textfield.invalid, .textfield.editable, .textfield.saving, .textfield.saved { padding-right: 36px !important; } /* Field wrapper . Default */ .field_wrapper .field_controls { margin-top: -26px !important; padding-right: 6px !important; } .field_wrapper button { height: 20px !important; width: 20px !important; font-size: 16px !important; } .field_wrapper .textfield, .field_wrapper .textfield_default, .field_wrapper .xs-textfield_default, .field_wrapper.default .textfield, .field_wrapper.xs-default .textfield { padding-right: 66px !important; } /* Tiny */ /* Textfield . Tiny */ .textfield_tiny, .xs-textfield_tiny { height: 18px !important; padding-right: 5px !important; font-size: 9px !important; text-indent: 5px !important; } .textfield.textfield_tiny.editable, .textfield.textfield_tiny.disabled, .textfield.textfield_tiny.mandatory, .textfield.textfield_tiny.valid, .textfield.textfield_tiny.invalid, .textfield.textfield_tiny.editable, .textfield.textfield_tiny.saving, .textfield.textfield_tiny.saved, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.disabled, .textfield.xs-textfield_tiny.mandatory, .textfield.xs-textfield_tiny.valid, .textfield.xs-textfield_tiny.invalid, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.saving, .textfield.xs-textfield_tiny.saved { padding-right: 18px !important; } /* Field wrapper . Tiny */ .field_wrapper.tiny .field_controls, .field_wrapper.xs-tiny .field_controls { margin-top: -15px !important; padding-right: 4px !important; } .field_wrapper.tiny button, .field_wrapper.xs-tiny button { height: 12px !important; width: 12px !important; font-size: 9px !important; } .field_wrapper.tiny .textfield, .field_wrapper.xs-tiny .textfield { padding-right: 47px !important; } /* Small */ /* Textfield . Small */ .textfield_small, .xs-textfield_small { height: 26px !important; padding-right: 8px !important; font-size: 12px !important; text-indent: 8px !important; } .textfield.textfield_small.editable, .textfield.textfield_small.disabled, .textfield.textfield_small.mandatory, .textfield.textfield_small.valid, .textfield.textfield_small.invalid, .textfield.textfield_small.editable, .textfield.textfield_small.saving, .textfield.textfield_small.saved, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.disabled, .textfield.xs-textfield_small.mandatory, .textfield.xs-textfield_small.valid, .textfield.xs-textfield_small.invalid, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.saving, .textfield.xs-textfield_small.saved { padding-right: 26px !important; } /* Field wrapper . Small */ .field_wrapper.small .field_controls, .field_wrapper.xs-small .field_controls { margin-top: -21px !important; padding-right: 6px !important; } .field_wrapper.small button, .field_wrapper.xs-small button { height: 16px !important; width: 16px !important; font-size: 12px !important; } .field_wrapper.small .textfield, .field_wrapper.xs-small .textfield { padding-right: 58px !important; } /* Medium */ /* Textfield . Medium */ .textfield_medium, .xs-textfield_medium { height: 42px !important; padding-right: 12px !important; font-size: 20px !important; text-indent: 12px !important; } .textfield.textfield_medium.disabled, .textfield.textfield_medium.mandatory, .textfield.textfield_medium.valid, .textfield.textfield_medium.invalid, .textfield.textfield_medium.editable, .textfield.textfield_medium.saving, .textfield.textfield_medium.saved, .textfield.xs-textfield_medium.disabled, .textfield.xs-textfield_medium.mandatory, .textfield.xs-textfield_medium.valid, .textfield.xs-textfield_medium.invalid, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.saving, .textfield.xs-textfield_medium.saved { padding-right: 42px !important; } /* Field wrapper . Medium */ .field_wrapper.medium .field_controls, .field_wrapper.xs-medium .field_controls { margin-top: -33px !important; padding-right: 9px !important; } .field_wrapper.medium button, .field_wrapper.xs-medium button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.medium .textfield, .field_wrapper.xs-medium .textfield { padding-right: 77px !important; } /* Large */ /* Textfield . Large */ .textfield_large, .xs-textfield_large { height: 52px !important; padding-right: 16px !important; font-size: 24px !important; text-indent: 16px !important; } .textfield.textfield_large.disabled, .textfield.textfield_large.mandatory, .textfield.textfield_large.valid, .textfield.textfield_large.invalid, .textfield.textfield_large.editable, .textfield.textfield_large.saving, .textfield.textfield_large.saved, .textfield.xs-textfield_large.disabled, .textfield.xs-textfield_large.mandatory, .textfield.xs-textfield_large.valid, .textfield.xs-textfield_large.invalid, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.saving, .textfield.xs-textfield_large.saved { padding-right: 52px !important; } /* Field wrapper . Large */ .field_wrapper.large .field_controls, .field_wrapper.xs-large .field_controls { margin-top: -38px !important; padding-right: 14px !important; } .field_wrapper.large button, .field_wrapper.xs-large button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.large .textfield, .field_wrapper.xs-large .textfield { padding-right: 86px !important; } /* Huge */ /* Textfield . Huge */ .textfield_huge, .xs-textfield_huge { height: 64px !important; padding-right: 20px !important; font-size: 30px !important; text-indent: 20px !important; } .textfield.textfield_huge.disabled, .textfield.textfield_huge.mandatory, .textfield.textfield_huge.valid, .textfield.textfield_huge.invalid, .textfield.textfield_huge.editable, .textfield.textfield_huge.saving, .textfield.textfield_huge.saved, .textfield.xs-textfield_huge.disabled, .textfield.xs-textfield_huge.mandatory, .textfield.xs-textfield_huge.valid, .textfield.xs-textfield_huge.invalid, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.saving, .textfield.xs-textfield_huge.saved { padding-right: 64px !important; } /* Field wrapper . Huge */ .field_wrapper.huge .field_controls, .field_wrapper.xs-huge .field_controls { margin-top: -44px !important; padding-right: 20px !important; } .field_wrapper.huge button, .field_wrapper.xs-huge button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.huge .textfield, .field_wrapper.xs-huge .textfield { padding-right: 98px !important; } } /* Textfields . Small screens */ @media (min-width: 768px) { /* Default */ /* Textfield . Default */ .textfield, .textfield_default, .sm-textfield_default { height: 36px !important; padding-right: 6px !important; font-size: 18px !important; text-indent: 6px !important; } .textfield.editable, .textfield.disabled, .textfield.mandatory, .textfield.valid, .textfield.invalid, .textfield.editable, .textfield.saving, .textfield.saved, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.disabled, .textfield.xs-textfield_tiny.mandatory, .textfield.xs-textfield_tiny.valid, .textfield.xs-textfield_tiny.invalid, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.saving, .textfield.xs-textfield_tiny.saved, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.disabled, .textfield.xs-textfield_small.mandatory, .textfield.xs-textfield_small.valid, .textfield.xs-textfield_small.invalid, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.saving, .textfield.xs-textfield_small.saved, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.disabled, .textfield.xs-textfield_medium.mandatory, .textfield.xs-textfield_medium.valid, .textfield.xs-textfield_medium.invalid, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.saving, .textfield.xs-textfield_medium.saved, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.disabled, .textfield.xs-textfield_large.mandatory, .textfield.xs-textfield_large.valid, .textfield.xs-textfield_large.invalid, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.saving, .textfield.xs-textfield_large.saved, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.disabled, .textfield.xs-textfield_huge.mandatory, .textfield.xs-textfield_huge.valid, .textfield.xs-textfield_huge.invalid, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.saving, .textfield.xs-textfield_huge.saved { padding-right: 40px !important; } /* Field wrapper . Default */ .field_wrapper .field_controls, .field_wrapper.xs-default .field_controls, .field_wrapper.xs-tiny .field_controls, .field_wrapper.xs-small .field_controls, .field_wrapper.xs-medium .field_controls, .field_wrapper.xs-large .field_controls, .field_wrapper.xs-huge .field_controls { margin-top: -30px !important; padding-right: 6px !important; } .field_wrapper button, .field_wrapper.xs-default button, .field_wrapper.xs-tiny button, .field_wrapper.xs-small button, .field_wrapper.xs-medium button, .field_wrapper.xs-large button, .field_wrapper.xs-huge button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper .textfield.editable, .field_wrapper .textfield_default.editable, .field_wrapper .xs-textfield_default.editable, .field_wrapper .xs-textfield_tiny.editable, .field_wrapper .xs-textfield_small, .field_wrapper .xs-textfield_medium, .field_wrapper .xs-textfield_large, .field_wrapper .xs-textfield_huge, .field_wrapper.xs-default .textfield.editable, .field_wrapper.xs-tiny .textfield.editable, .field_wrapper.xs-small .textfield.editable, .field_wrapper.xs-medium .textfield.editable, .field_wrapper.xs-large .textfield.editable, .field_wrapper.xs-huge .textfield.editable { padding-right: 72px !important; } /* Tiny */ /* Textfield . Tiny */ .textfield_tiny, .sm-textfield_tiny { height: 20px !important; padding-right: 6px !important; font-size: 10px !important; text-indent: 6px !important; } .textfield.textfield_tiny.editable, .textfield.textfield_tiny.disabled, .textfield.textfield_tiny.mandatory, .textfield.textfield_tiny.valid, .textfield.textfield_tiny.invalid, .textfield.textfield_tiny.editable, .textfield.textfield_tiny.saving, .textfield.textfield_tiny.saved, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.disabled, .textfield.sm-textfield_tiny.mandatory, .textfield.sm-textfield_tiny.valid, .textfield.sm-textfield_tiny.invalid, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.saving, .textfield.sm-textfield_tiny.saved { padding-right: 20px !important; } /* Field wrapper . Tiny */ .field_wrapper.tiny .field_controls, .field_wrapper.sm-tiny .field_controls { margin-top: -16px !important; padding-right: 4px !important; } .field_wrapper.tiny button, .field_wrapper.sm-tiny button { height: 12px !important; width: 12px !important; font-size: 9px !important; } .field_wrapper.tiny .textfield, .field_wrapper.sm-tiny .textfield { padding-right: 47px !important; } /* Small */ /* Textfield . Small */ .textfield_small, .sm-textfield_small { height: 30px !important; padding-right: 10px !important; font-size: 14px !important; text-indent: 10px !important; } .textfield.textfield_small.editable, .textfield.textfield_small.disabled, .textfield.textfield_small.mandatory, .textfield.textfield_small.valid, .textfield.textfield_small.invalid, .textfield.textfield_small.editable, .textfield.textfield_small.saving, .textfield.textfield_small.saved, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.disabled, .textfield.sm-textfield_small.mandatory, .textfield.sm-textfield_small.valid, .textfield.sm-textfield_small.invalid, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.saving, .textfield.sm-textfield_small.saved { padding-right: 30px !important; } /* Field wrapper . Small */ .field_wrapper.small .field_controls, .field_wrapper.sm-small .field_controls { margin-top: -23px !important; padding-right: 7px !important; } .field_wrapper.small button, .field_wrapper.sm-small button { height: 16px !important; width: 16px !important; font-size: 12px !important; } .field_wrapper.small .textfield, .field_wrapper.sm-small .textfield { padding-right: 59px !important; } /* Medium */ /* Textfield . Medium */ .textfield_medium, .sm-textfield_medium { height: 48px !important; padding-right: 14px !important; font-size: 22px !important; text-indent: 14px !important; } .textfield.textfield_medium.editable, .textfield.textfield_medium.disabled, .textfield.textfield_medium.mandatory, .textfield.textfield_medium.valid, .textfield.textfield_medium.invalid, .textfield.textfield_medium.editable, .textfield.textfield_medium.saving, .textfield.textfield_medium.saved, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.disabled, .textfield.sm-textfield_medium.mandatory, .textfield.sm-textfield_medium.valid, .textfield.sm-textfield_medium.invalid, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.saving, .textfield.sm-textfield_medium.saved { padding-right: 48px !important; } /* Field wrapper . Medium */ .field_wrapper.medium .field_controls, .field_wrapper.sm-medium .field_controls { margin-top: -36px !important; padding-right: 12px !important; } .field_wrapper.medium button, .field_wrapper.sm-medium button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.medium .textfield, .field_wrapper.sm-medium .textfield { padding-right: 82px !important; } /* Large */ /* Textfield . Large */ .textfield_large, .sm-textfield_large { height: 60px !important; padding-right: 10px !important; font-size: 28px !important; text-indent: 20px !important; } .textfield.textfield_large.editable, .textfield.textfield_large.disabled, .textfield.textfield_large.mandatory, .textfield.textfield_large.valid, .textfield.textfield_large.invalid, .textfield.textfield_large.editable, .textfield.textfield_large.saving, .textfield.textfield_large.saved, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.disabled, .textfield.sm-textfield_large.mandatory, .textfield.sm-textfield_large.valid, .textfield.sm-textfield_large.invalid, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.saving, .textfield.sm-textfield_large.saved { padding-right: 60px !important; } /* Field wrapper . Large */ .field_wrapper.large .field_controls, .field_wrapper.sm-large .field_controls { margin-top: -42px !important; padding-right: 18px !important; } .field_wrapper.large button, .field_wrapper.sm-large button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.large .textfield, .field_wrapper.sm-large .textfield { padding-right: 94px !important; } /* Huge */ /* Textfield . Huge */ .textfield_huge, .sm-textfield_huge { height: 74px !important; padding-right: 24px; font-size: 34px !important; text-indent: 24px !important; } .textfield.textfield_huge.editable, .textfield.textfield_huge.disabled, .textfield.textfield_huge.mandatory, .textfield.textfield_huge.valid, .textfield.textfield_huge.invalid, .textfield.textfield_huge.editable, .textfield.textfield_huge.saving, .textfield.textfield_huge.saved, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.disabled, .textfield.sm-textfield_huge.mandatory, .textfield.sm-textfield_huge.valid, .textfield.sm-textfield_huge.invalid, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.saving, .textfield.sm-textfield_huge.saved { padding-right: 72px !important; } /* Field wrapper . Huge */ .field_wrapper.huge .field_controls, .field_wrapper.sm-huge .field_controls { margin-top: -49px !important; padding-right: 25px !important; } .field_wrapper.huge button, .field_wrapper.sm-huge button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.huge .textfield, .field_wrapper.sm-huge .textfield { padding-right: 108px !important; } } /* Textfields . Medium screens */ @media (min-width: 990px) { /* Standard */ /* Textfield . Default */ .textfield, .textfield_default, .md-textfield_default { height: 40px !important; padding-right: 12px; font-size: 20px !important; text-indent: 12px; } .textfield.editable, .textfield.disabled, .textfield.mandatory, .textfield.valid, .textfield.invalid, .textfield.saving, .textfield.saved, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.disabled, .textfield.xs-textfield_tiny.mandatory, .textfield.xs-textfield_tiny.valid, .textfield.xs-textfield_tiny.invalid, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.saving, .textfield.xs-textfield_tiny.saved, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.disabled, .textfield.xs-textfield_small.mandatory, .textfield.xs-textfield_small.valid, .textfield.xs-textfield_small.invalid, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.saving, .textfield.xs-textfield_small.saved, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.disabled, .textfield.xs-textfield_medium.mandatory, .textfield.xs-textfield_medium.valid, .textfield.xs-textfield_medium.invalid, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.saving, .textfield.xs-textfield_medium.saved, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.disabled, .textfield.xs-textfield_large.mandatory, .textfield.xs-textfield_large.valid, .textfield.xs-textfield_large.invalid, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.saving, .textfield.xs-textfield_large.saved, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.disabled, .textfield.xs-textfield_huge.mandatory, .textfield.xs-textfield_huge.valid, .textfield.xs-textfield_huge.invalid, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.saving, .textfield.xs-textfield_huge.saved, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.disabled, .textfield.sm-textfield_tiny.mandatory, .textfield.sm-textfield_tiny.valid, .textfield.sm-textfield_tiny.invalid, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.saving, .textfield.sm-textfield_tiny.saved, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.disabled, .textfield.sm-textfield_small.mandatory, .textfield.sm-textfield_small.valid, .textfield.sm-textfield_small.invalid, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.saving, .textfield.sm-textfield_small.saved, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.disabled, .textfield.sm-textfield_medium.mandatory, .textfield.sm-textfield_medium.valid, .textfield.sm-textfield_medium.invalid, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.saving, .textfield.sm-textfield_medium.saved, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.disabled, .textfield.sm-textfield_large.mandatory, .textfield.sm-textfield_large.valid, .textfield.sm-textfield_large.invalid, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.saving, .textfield.sm-textfield_large.saved, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.disabled, .textfield.sm-textfield_huge.mandatory, .textfield.sm-textfield_huge.valid, .textfield.sm-textfield_huge.invalid, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.saving, .textfield.sm-textfield_huge.saved { padding-right: 44px !important; } /* Field wrapper . Default */ .field_wrapper .field_controls, .field_wrapper.xs-default .field_controls, .field_wrapper.xs-tiny .field_controls, .field_wrapper.xs-small .field_controls, .field_wrapper.xs-medium .field_controls, .field_wrapper.xs-large .field_controls, .field_wrapper.xs-huge .field_controls, .field_wrapper.sm-default .field_controls, .field_wrapper.sm-tiny .field_controls, .field_wrapper.sm-small .field_controls, .field_wrapper.sm-medium .field_controls, .field_wrapper.sm-large .field_controls, .field_wrapper.sm-huge .field_controls { margin-top: -32px !important; padding-right: 8px !important; } .field_wrapper button, .field_wrapper.xs-default button, .field_wrapper.xs-tiny button, .field_wrapper.xs-small button, .field_wrapper.xs-medium button, .field_wrapper.xs-large button, .field_wrapper.xs-huge button, .field_wrapper.sm-default button, .field_wrapper.sm-tiny button, .field_wrapper.sm-small button, .field_wrapper.sm-medium button, .field_wrapper.sm-large button, .field_wrapper.sm-huge button { height: 24px !important; width: 24px !important; font-size: 16px !important; } .field_wrapper .textfield.editable, .field_wrapper .textfield_default.editable, .field_wrapper .xs-textfield_default, .field_wrapper .xs-textfield_tiny, .field_wrapper .xs-textfield_small, .field_wrapper .xs-textfield_medium, .field_wrapper .xs-textfield_large, .field_wrapper .xs-textfield_huge, .field_wrapper .sm-textfield_default, .field_wrapper .sm-textfield_tiny, .field_wrapper .sm-textfield_small, .field_wrapper .sm-textfield_medium, .field_wrapper .sm-textfield_large, .field_wrapper .sm-textfield_huge, .field_wrapper .md-textfield_default, .field_wrapper.md-default .textfield.editable, .field_wrapper.xs-default .textfield.editable, .field_wrapper.xs-tiny .textfield.editable, .field_wrapper.xs-small .textfield.editable, .field_wrapper.xs-medium .textfield.editable, .field_wrapper.xs-large .textfield.editable, .field_wrapper.xs-huge .textfield.editable, .field_wrapper.sm-default .textfield.editable, .field_wrapper.sm-tiny .textfield.editable, .field_wrapper.sm-small .textfield.editable, .field_wrapper.sm-medium .textfield.editable, .field_wrapper.sm-large .textfield.editable, .field_wrapper.sm-huge .textfield.editable { padding-right: 76px !important; } /* Tiny */ /* Textfield . Tiny */ .textfield_tiny, .md-textfield_tiny { height: 22px !important; padding-right: 6px; font-size: 12px !important; text-indent: 6px !important; } .textfield.textfield_tiny.editable, .textfield.textfield_tiny.disabled, .textfield.textfield_tiny.mandatory, .textfield.textfield_tiny.valid, .textfield.textfield_tiny.invalid, .textfield.textfield_tiny.editable, .textfield.textfield_tiny.saving, .textfield.textfield_tiny.saved, .textfield.md-textfield_tiny.editable, .textfield.md-textfield_tiny.disabled, .textfield.md-textfield_tiny.mandatory, .textfield.md-textfield_tiny.valid, .textfield.md-textfield_tiny.invalid, .textfield.md-textfield_tiny.editable, .textfield.md-textfield_tiny.saving, .textfield.md-textfield_tiny.saved { padding-right: 22px !important; } /* Field wrapper . Tiny */ .field_wrapper.tiny .field_controls, .field_wrapper.md-tiny .field_controls { margin-top: -17px !important; padding-right: 5px !important; } .field_wrapper.tiny button, .field_wrapper.md-tiny button { height: 12px !important; width: 12px !important; font-size: 9px !important; } .field_wrapper.tiny .textfield, .field_wrapper.md-tiny .textfield { padding-right: 49px !important; } /* Small */ /* Textfield . Small */ .textfield_small, .md-textfield_small { height: 32px !important; padding-right: 10px !important; font-size: 16px !important; text-indent: 10px !important; } .textfield.textfield_small.editable, .textfield.textfield_small.disabled, .textfield.textfield_small.mandatory, .textfield.textfield_small.valid, .textfield.textfield_small.invalid, .textfield.textfield_small.editable, .textfield.textfield_small.saving, .textfield.textfield_small.saved, .textfield.md-textfield_small.editable, .textfield.md-textfield_small.disabled, .textfield.md-textfield_small.mandatory, .textfield.md-textfield_small.valid, .textfield.md-textfield_small.invalid, .textfield.md-textfield_small.editable, .textfield.md-textfield_small.saving, .textfield.md-textfield_small.saved { padding-right: 36px !important; } /* Field wrapper . Small */ .field_wrapper.small .field_controls, .field_wrapper.md-small .field_controls { margin-top: -24px !important; padding-right: 8px !important; } .field_wrapper.small button, .field_wrapper.md-small button { height: 16px !important; width: 16px !important; font-size: 12px !important; } .field_wrapper.small .textfield, .field_wrapper.md-small .textfield { padding-right: 60px !important; } /* Medium */ /* Textfield . Medium */ .textfield_medium, .md-textfield_medium { height: 52px !important; padding-right: 16px !important; font-size: 24px !important; text-indent: 16px !important; } .textfield.textfield_medium.editable, .textfield.textfield_medium.disabled, .textfield.textfield_medium.mandatory, .textfield.textfield_medium.valid, .textfield.textfield_medium.invalid, .textfield.textfield_medium.editable, .textfield.textfield_medium.saving, .textfield.textfield_medium.saved, .textfield.md-textfield_medium.editable, .textfield.md-textfield_medium.disabled, .textfield.md-textfield_medium.mandatory, .textfield.md-textfield_medium.valid, .textfield.md-textfield_medium.invalid, .textfield.md-textfield_medium.editable, .textfield.md-textfield_medium.saving, .textfield.md-textfield_medium.saved { padding-right: 52px !important; } /* Field wrapper . Medium */ .field_wrapper.medium .field_controls, .field_wrapper.md-medium .field_controls { margin-top: -38px !important; padding-right: 14px !important; } .field_wrapper.medium button, .field_wrapper.md-medium button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.medium .textfield, .field_wrapper.md-medium .textfield { padding-right: 86px !important; } /* Large */ /* Textfield . Large */ .textfield_large, .md-textfield_large { height: 64px !important; padding-right: 20px !important; font-size: 32px !important; text-indent: 20px !important; } .textfield.textfield_large.editable, .textfield.textfield_large.disabled, .textfield.textfield_large.mandatory, .textfield.textfield_large.valid, .textfield.textfield_large.invalid, .textfield.textfield_large.editable, .textfield.textfield_large.saving, .textfield.textfield_large.saved, .textfield.md-textfield_large.editable, .textfield.md-textfield_large.disabled, .textfield.md-textfield_large.mandatory, .textfield.md-textfield_large.valid, .textfield.md-textfield_large.invalid, .textfield.md-textfield_large.editable, .textfield.md-textfield_large.saving, .textfield.md-textfield_large.saved { padding-right: 52px !important; } /* Field wrapper . Large */ .field_wrapper.large .field_controls, .field_wrapper.md-large .field_controls { margin-top: -44px !important; padding-right: 20px !important; } .field_wrapper.large button, .field_wrapper.md-large button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.large .textfield, .field_wrapper.md-large .textfield { padding-right: 98px !important; } /* Huge */ /* Textfield . Huge */ .textfield_huge, .md-textfield_huge { height: 80px !important; padding-right: 24px; font-size: 38px !important; text-indent: 24px !important; } .textfield.textfield_huge.editable, .textfield.textfield_huge.disabled, .textfield.textfield_huge.mandatory, .textfield.textfield_huge.valid, .textfield.textfield_huge.invalid, .textfield.textfield_huge.editable, .textfield.textfield_huge.saving, .textfield.textfield_huge.saved, .textfield.md-textfield_huge.editable, .textfield.md-textfield_huge.disabled, .textfield.md-textfield_huge.mandatory, .textfield.md-textfield_huge.valid, .textfield.md-textfield_huge.invalid, .textfield.md-textfield_huge.editable, .textfield.md-textfield_huge.saving, .textfield.md-textfield_huge.saved { padding-right: 90px !important; } /* Field wrapper . Huge */ .field_wrapper.huge .field_controls, .field_wrapper.md-huge .field_controls { margin-top: -52px !important; padding-right: 28px !important; } .field_wrapper.huge button, .field_wrapper.md-huge button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.huge .textfield, .field_wrapper.md-huge .textfield { padding-right: 114px !important; } } /* Textfields . Large screens */ @media (min-width: 1200px) { /* Standard */ /* Textfield . Default */ .textfield, .textfield_default, .lg-textfield_default { height: 48px !important; padding-right: 15px !important; font-size: 22px !important; text-indent: 15px !important; } .textfield.editable, .textfield.disabled, .textfield.mandatory, .textfield.valid, .textfield.invalid, .textfield.saving, .textfield.saved, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.disabled, .textfield.xs-textfield_tiny.mandatory, .textfield.xs-textfield_tiny.valid, .textfield.xs-textfield_tiny.invalid, .textfield.xs-textfield_tiny.editable, .textfield.xs-textfield_tiny.saving, .textfield.xs-textfield_tiny.saved, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.disabled, .textfield.xs-textfield_small.mandatory, .textfield.xs-textfield_small.valid, .textfield.xs-textfield_small.invalid, .textfield.xs-textfield_small.editable, .textfield.xs-textfield_small.saving, .textfield.xs-textfield_small.saved, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.disabled, .textfield.xs-textfield_medium.mandatory, .textfield.xs-textfield_medium.valid, .textfield.xs-textfield_medium.invalid, .textfield.xs-textfield_medium.editable, .textfield.xs-textfield_medium.saving, .textfield.xs-textfield_medium.saved, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.disabled, .textfield.xs-textfield_large.mandatory, .textfield.xs-textfield_large.valid, .textfield.xs-textfield_large.invalid, .textfield.xs-textfield_large.editable, .textfield.xs-textfield_large.saving, .textfield.xs-textfield_large.saved, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.disabled, .textfield.xs-textfield_huge.mandatory, .textfield.xs-textfield_huge.valid, .textfield.xs-textfield_huge.invalid, .textfield.xs-textfield_huge.editable, .textfield.xs-textfield_huge.saving, .textfield.xs-textfield_huge.saved, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.disabled, .textfield.sm-textfield_tiny.mandatory, .textfield.sm-textfield_tiny.valid, .textfield.sm-textfield_tiny.invalid, .textfield.sm-textfield_tiny.editable, .textfield.sm-textfield_tiny.saving, .textfield.sm-textfield_tiny.saved, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.disabled, .textfield.sm-textfield_small.mandatory, .textfield.sm-textfield_small.valid, .textfield.sm-textfield_small.invalid, .textfield.sm-textfield_small.editable, .textfield.sm-textfield_small.saving, .textfield.sm-textfield_small.saved, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.disabled, .textfield.sm-textfield_medium.mandatory, .textfield.sm-textfield_medium.valid, .textfield.sm-textfield_medium.invalid, .textfield.sm-textfield_medium.editable, .textfield.sm-textfield_medium.saving, .textfield.sm-textfield_medium.saved, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.disabled, .textfield.sm-textfield_large.mandatory, .textfield.sm-textfield_large.valid, .textfield.sm-textfield_large.invalid, .textfield.sm-textfield_large.editable, .textfield.sm-textfield_large.saving, .textfield.sm-textfield_large.saved, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.disabled, .textfield.sm-textfield_huge.mandatory, .textfield.sm-textfield_huge.valid, .textfield.sm-textfield_huge.invalid, .textfield.sm-textfield_huge.editable, .textfield.sm-textfield_huge.saving, .textfield.sm-textfield_huge.saved, .textfield.md-textfield_tiny.editable, .textfield.md-textfield_tiny.disabled, .textfield.md-textfield_tiny.mandatory, .textfield.md-textfield_tiny.valid, .textfield.md-textfield_tiny.invalid, .textfield.md-textfield_tiny.editable, .textfield.md-textfield_tiny.saving, .textfield.md-textfield_tiny.saved, .textfield.md-textfield_small.editable, .textfield.md-textfield_small.disabled, .textfield.md-textfield_small.mandatory, .textfield.md-textfield_small.valid, .textfield.md-textfield_small.invalid, .textfield.md-textfield_small.editable, .textfield.md-textfield_small.saving, .textfield.md-textfield_small.saved, .textfield.md-textfield_medium.editable, .textfield.md-textfield_medium.disabled, .textfield.md-textfield_medium.mandatory, .textfield.md-textfield_medium.valid, .textfield.md-textfield_medium.invalid, .textfield.md-textfield_medium.editable, .textfield.md-textfield_medium.saving, .textfield.md-textfield_medium.saved, .textfield.md-textfield_large.editable, .textfield.md-textfield_large.disabled, .textfield.md-textfield_large.mandatory, .textfield.md-textfield_large.valid, .textfield.md-textfield_large.invalid, .textfield.md-textfield_large.editable, .textfield.md-textfield_large.saving, .textfield.md-textfield_large.saved, .textfield.md-textfield_huge.editable, .textfield.md-textfield_huge.disabled, .textfield.md-textfield_huge.mandatory, .textfield.md-textfield_huge.valid, .textfield.md-textfield_huge.invalid, .textfield.md-textfield_huge.editable, .textfield.md-textfield_huge.saving, .textfield.md-textfield_huge.saved { padding-right: 54px !important; } /* Field wrapper . Default */ .field_wrapper .field_controls, .field_wrapper.xs-default .field_controls, .field_wrapper.xs-tiny .field_controls, .field_wrapper.xs-small .field_controls, .field_wrapper.xs-medium .field_controls, .field_wrapper.xs-large .field_controls, .field_wrapper.xs-huge .field_controls, .field_wrapper.sm-default .field_controls, .field_wrapper.sm-tiny .field_controls, .field_wrapper.sm-small .field_controls, .field_wrapper.sm-medium .field_controls, .field_wrapper.sm-large .field_controls, .field_wrapper.sm-huge .field_controls, .field_wrapper.md-default .field_controls, .field_wrapper.md-tiny .field_controls, .field_wrapper.md-small .field_controls, .field_wrapper.md-medium .field_controls, .field_wrapper.md-large .field_controls, .field_wrapper.md-huge .field_controls { margin-top: -36px !important; padding-right: 12px !important; } .field_wrapper button, .field_wrapper.xs-default button, .field_wrapper.xs-tiny button, .field_wrapper.xs-small button, .field_wrapper.xs-medium button, .field_wrapper.xs-large button, .field_wrapper.xs-huge button, .field_wrapper.sm-default button, .field_wrapper.sm-tiny button, .field_wrapper.sm-small button, .field_wrapper.sm-medium button, .field_wrapper.sm-large button, .field_wrapper.sm-huge button, .field_wrapper.md-default button, .field_wrapper.md-tiny button, .field_wrapper.md-small button, .field_wrapper.md-medium button, .field_wrapper.md-large button, .field_wrapper.md-huge button { height: 24px !important; width: 24px !important; font-size: 16px !important; } .field_wrapper .textfield.editable, .field_wrapper .textfield_default.editable, .field_wrapper .xs-textfield_default.editable, .field_wrapper .xs-textfield_tiny.editable, .field_wrapper .xs-textfield_small.editable, .field_wrapper .xs-textfield_medium.editable, .field_wrapper .xs-textfield_large.editable, .field_wrapper .xs-textfield_huge.editable, .field_wrapper .sm-textfield_default.editable, .field_wrapper .sm-textfield_tiny.editable, .field_wrapper .sm-textfield_small.editable, .field_wrapper .sm-textfield_medium.editable, .field_wrapper .sm-textfield_large.editable, .field_wrapper .sm-textfield_huge.editable, .field_wrapper .lg-textfield_default.editable, .field_wrapper .lg-textfield_tiny.editable, .field_wrapper .lg-textfield_small.editable, .field_wrapper .lg-textfield_medium.editable, .field_wrapper .lg-textfield_large.editable, .field_wrapper .lg-textfield_huge.editable, .field_wrapper.xs-default .textfield.editable, .field_wrapper.xs-tiny .textfield.editable, .field_wrapper.xs-small .textfield.editable, .field_wrapper.xs-medium .textfield.editable, .field_wrapper.xs-large .textfield.editable, .field_wrapper.xs-huge .textfield.editable, .field_wrapper.sm-default .textfield.editable, .field_wrapper.sm-tiny .textfield.editable, .field_wrapper.sm-small .textfield.editable, .field_wrapper.sm-medium .textfield.editable, .field_wrapper.sm-large .textfield.editable, .field_wrapper.sm-huge .textfield.editable, .field_wrapper.md-default .textfield.editable, .field_wrapper.md-tiny .textfield.editable, .field_wrapper.md-small .textfield.editable, .field_wrapper.md-medium .textfield.editable, .field_wrapper.md-large .textfield.editable, .field_wrapper.md-huge .textfield.editable { padding-right: 82px !important; } /* Tiny */ /* Textfield . Tiny */ .textfield_tiny, .lg-textfield_tiny { height: 24px !important; padding-right: 6px !important; font-size: 14px !important; text-indent: 6px !important; } .textfield.textfield_tiny.editable, .textfield.textfield_tiny.disabled, .textfield.textfield_tiny.mandatory, .textfield.textfield_tiny.valid, .textfield.textfield_tiny.invalid, .textfield.textfield_tiny.editable, .textfield.textfield_tiny.saving, .textfield.textfield_tiny.saved, .textfield.lg-textfield_tiny.editable, .textfield.lg-textfield_tiny.disabled, .textfield.lg-textfield_tiny.mandatory, .textfield.lg-textfield_tiny.valid, .textfield.lg-textfield_tiny.invalid, .textfield.lg-textfield_tiny.editable, .textfield.lg-textfield_tiny.saving, .textfield.lg-textfield_tiny.saved { padding-right: 24px !important; } /* Field wrapper . Tiny */ .field_wrapper.tiny .field_controls, .field_wrapper.lg-tiny .field_controls { margin-top: -18px !important; padding-right: 6px !important; } .field_wrapper.tiny button, .field_wrapper.lg-tiny button { height: 12px !important; width: 12px !important; font-size: 9px !important; } .field_wrapper.tiny .textfield, .field_wrapper.lg-tiny .textfield { padding-right: 50px !important; } /* Small */ /* Textfield . Small */ .textfield_small, .lg-textfield_small { height: 34px !important; padding-right: 10px; font-size: 18px !important; text-indent: 10px !important; } .textfield.textfield_small.editable, .textfield.textfield_small.disabled, .textfield.textfield_small.mandatory, .textfield.textfield_small.valid, .textfield.textfield_small.invalid, .textfield.textfield_small.editable, .textfield.textfield_small.saving, .textfield.textfield_small.saved, .textfield.lg-textfield_small.editable, .textfield.lg-textfield_small.disabled, .textfield.lg-textfield_small.mandatory, .textfield.lg-textfield_small.valid, .textfield.lg-textfield_small.invalid, .textfield.lg-textfield_small.editable, .textfield.lg-textfield_small.saving, .textfield.lg-textfield_small.saved { padding-right: 34px !important; } /* Field wrapper . Small */ .field_wrapper.small .field_controls, .field_wrapper.lg-small .field_controls { margin-top: -25px !important; padding-right: 9px !important; } .field_wrapper.small button , .field_wrapper.lg-small button { height: 16px !important; width: 16px !important; font-size: 12px !important; } .field_wrapper.small .textfield, .field_wrapper.lg-small .textfield { padding-right: 61px !important; } /* Medium */ /* Textfield . Medium */ .textfield_medium, .lg-textfield_medium { height: 54px !important; padding-right: 16px; font-size: 26px !important; text-indent: 16px !important; } .textfield.textfield_medium.editable, .textfield.textfield_medium.disabled, .textfield.textfield_medium.mandatory, .textfield.textfield_medium.valid, .textfield.textfield_medium.invalid, .textfield.textfield_medium.editable, .textfield.textfield_medium.saving, .textfield.textfield_medium.saved, .textfield.lg-textfield_medium.editable, .textfield.lg-textfield_medium.disabled, .textfield.lg-textfield_medium.mandatory, .textfield.lg-textfield_medium.valid, .textfield.lg-textfield_medium.invalid, .textfield.lg-textfield_medium.editable, .textfield.lg-textfield_medium.saving, .textfield.lg-textfield_medium.saved { padding-right: 54px !important; } /* Field wrapper . Medium */ .field_wrapper.medium .field_controls, .field_wrapper.lg-medium .field_controls { margin-top: -39px !important; padding-right: 15px !important; } .field_wrapper.medium button, .field_wrapper.lg-medium button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.medium .textfield, .field_wrapper.lg-medium .textfield { padding-right: 88px !important; } /* Large */ /* Textfield . Large */ .textfield_large, .lg-textfield_large { height: 64px !important; padding-right: 20px; font-size: 36px !important; text-indent: 20px !important; } .textfield.textfield_large.editable, .textfield.textfield_large.disabled, .textfield.textfield_large.mandatory, .textfield.textfield_large.valid, .textfield.textfield_large.invalid, .textfield.textfield_large.editable, .textfield.textfield_large.saving, .textfield.textfield_large.saved, .textfield.lg-textfield_large.editable, .textfield.lg-textfield_large.disabled, .textfield.lg-textfield_large.mandatory, .textfield.lg-textfield_large.valid, .textfield.lg-textfield_large.invalid, .textfield.lg-textfield_large.editable, .textfield.lg-textfield_large.saving, .textfield.lg-textfield_large.saved { padding-right: 64px !important; } /* Field wrapper . Large */ .field_wrapper.large .field_controls, .field_wrapper.lg-large .field_controls { margin-top: -44px !important; padding-right: 20px !important; } .field_wrapper.large button, .field_wrapper.lg-large button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.large .textfield, .field_wrapper.lg-large .textfield { padding-right: 98px !important; } /* Huge */ /* Textfield . Huge */ .textfield_huge, .lg-textfield_huge { height: 86px !important; padding-right: 28px; font-size: 42px !important; text-indent: 28px !important; } .textfield.textfield_huge.editable, .textfield.textfield_huge.disabled, .textfield.textfield_huge.mandatory, .textfield.textfield_huge.valid, .textfield.textfield_huge.invalid, .textfield.textfield_huge.editable, .textfield.textfield_huge.saving, .textfield.textfield_huge.saved, .textfield.lg-textfield_huge.editable, .textfield.lg-textfield_huge.disabled, .textfield.lg-textfield_huge.mandatory, .textfield.lg-textfield_huge.valid, .textfield.lg-textfield_huge.invalid, .textfield.lg-textfield_huge.editable, .textfield.lg-textfield_huge.saving, .textfield.lg-textfield_huge.saved { padding-right: 86px !important; } /* Field wrapper . Huge */ .field_wrapper.huge .field_controls, .field_wrapper.lg-huge .field_controls { margin-top: -55px !important; padding-right: 31px !important; } .field_wrapper.huge button, .field_wrapper.lg-huge button { height: 24px !important; width: 24px !important; font-size: 18px !important; } .field_wrapper.huge .textfield.editable, .field_wrapper.lg-huge .textfield.editable { padding-right: 120px !important; } } /* Clipfields ------------------------------------ */ .clipfield input { border: 1px dashed #CCCCCC !important; box-sizing: border-box; font-size: 90% !important; color: #007ee5; transition: 0.4s all ease-in-out; cursor: pointer; } .clipfield:hover input { border-color: #007ee5 !important; } .clipfield:hover button { color: #007ee5 !important; } .clipfield.highlighted input { background-color: rgba(57,184,118,0.1); } .clipfield.highlighted:hover input { border-color: #CCCCCC !important; } .clipfield.highlighted button { color: green !important; } .clipfield button { position: relative; float: right; padding: 0px !important; font-family: PaperIcons !important; color: #939598; background-color: transparent; } .clipfield.textfield_tiny, .clipfield.textfield_small, .clipfield.textfield_medium, .clipfield.textfield_large, .clipfield.textfield_huge, .clipfield.xs-textfield_tiny, .clipfield.xs-textfield_small, .clipfield.xs-textfield_medium, .clipfield.xs-textfield_large, .clipfield.xs-textfield_huge, .clipfield.sm-textfield_tiny, .clipfield.sm-textfield_small, .clipfield.sm-textfield_medium, .clipfield.sm-textfield_large, .clipfield.sm-textfield_huge, .clipfield.md-textfield_tiny, .clipfield.md-textfield_small, .clipfield.md-textfield_medium, .clipfield.md-textfield_large, .clipfield.md-textfield_huge, .clipfield.lg-textfield_tiny, .clipfield.lg-textfield_small, .clipfield.lg-textfield_medium, .clipfield.lg-textfield_large, .clipfield.lg-textfield_huge { text-indent: 0px !important; } /* Clipfields . Extra small screens */ @media (min-width: 100px) { .clipfield input, .clipfield.textfield_default input, .clipfield.xs-textfield_default input { padding-right: 18px !important; } .clipfield button, .clipfield.textfield_default button, .clipfield.xs-textfield_default button { height: 32px !important; width: 32px !important; margin-top: -32px !important; line-height: 32px !important; } .clipfield.textfield_tiny input, .clipfield.xs-textfield_tiny input { padding-right: 18px !important; } .clipfield.textfield_tiny button, .clipfield.xs-textfield_tiny button { height: 18px !important; width: 18px !important; margin-top: -18px !important; line-height: 18px !important; } .clipfield.textfield_small input, .clipfield.xs-textfield_small input { padding-right: 26px !important; } .clipfield.textfield_small button, .clipfield.xs-textfield_small button { height: 26px !important; width: 26px !important; margin-top: -26px !important; line-height: 26px !important; } .clipfield.textfield_medium input, .clipfield.xs-textfield_medium input { padding-right: 42px !important; } .clipfield.textfield_medium button, .clipfield.xs-textfield_medium button { height: 42px !important; width: 42px !important; margin-top: -42px !important; line-height: 42px !important; } .clipfield.textfield_large input, .clipfield.xs-textfield_large input { padding-right: 52px !important; } .clipfield.textfield_large button, .clipfield.xs-textfield_large button { height: 52px !important; width: 52px !important; margin-top: -52px !important; line-height: 52px !important; } .clipfield.textfield_huge input, .clipfield.xs-textfield_huge input { padding-right: 64px !important; } .clipfield.textfield_huge button, .clipfield.xs-textfield_huge button { height: 64px !important; width: 64px !important; margin-top: -64px !important; line-height: 64px !important; } } /* Clipfields . Small screens */ @media (min-width: 768px) { .clipfield input, .clipfield.textfield_default input, .clipfield.sm-textfield_default input { padding-right: 36px !important; } .clipfield button, .clipfield.textfield_default button, .clipfield.sm-textfield_default button { height: 36px !important; width: 36px !important; margin-top: -36px !important; line-height: 36px !important; } .clipfield.textfield_tiny input, .clipfield.sm-textfield_tiny { padding-right: 20px !important; } .clipfield.textfield_tiny button, .clipfield.sm-textfield_tiny { height: 20px !important; width: 20px !important; margin-top: -20px !important; line-height: 20px !important; } .clipfield.textfield_small input, .clipfield.sm-textfield_small { padding-right: 30px !important; } .clipfield.textfield_small button, .clipfield.sm-textfield_small { height: 30px !important; width: 30px !important; margin-top: -30px !important; line-height: 30px !important; } .clipfield.textfield_medium input, .clipfield.sm-textfield_medium { padding-right: 48px !important; } .clipfield.textfield_medium button, .clipfield.sm-textfield_medium { height: 48px !important; width: 48px !important; margin-top: -48px !important; line-height: 48px !important; } .clipfield.textfield_large input, .clipfield.sm-textfield_large { padding-right: 60px !important; } .clipfield.textfield_large button, .clipfield.sm-textfield_large { height: 60px !important; width: 60px !important; margin-top: -60px !important; line-height: 60px !important; } .clipfield.textfield_huge input, .clipfield.sm-textfield_huge { padding-right: 74px !important; } .clipfield.textfield_huge button, .clipfield.sm-textfield_huge { height: 74px !important; width: 74px !important; margin-top: -74px !important; line-height: 74px !important; } } /* Clipfields . Medium screens */ @media (min-width: 990px) { .clipfield input, .clipfield.textfield_default input, .clipfield.md-textfield_default input { padding-right:40px !important; } .clipfield button, .clipfield.textfield_default button, .clipfield.md-textfield_default button { height:40px !important; width:40px !important; margin-top: -40px !important; line-height:40px !important; } .clipfield.textfield_tiny input, .clipfield.md-textfield_tiny input { padding-right: 22px !important; } .clipfield.textfield_tiny button, .clipfield.md-textfield_tiny button { height: 22px !important; width: 22px !important; margin-top: -22px !important; line-height: 22px !important; } .clipfield.textfield_small input, .clipfield.md-textfield_small input { padding-right: 32px !important; } .clipfield.textfield_small button, .clipfield.md-textfield_small button { height: 32px !important; width: 32px !important; margin-top: -32px !important; line-height: 32px !important; } .clipfield.textfield_medium input, .clipfield.md-textfield_medium input { padding-right: 52px !important; } .clipfield.textfield_medium button, .clipfield.md-textfield_medium button { height: 52px !important; width: 52px !important; margin-top: -52px !important; line-height: 52px !important; } .clipfield.textfield_large input, .clipfield.md-textfield_large input { padding-right: 64px !important; } .clipfield.textfield_large button, .clipfield.md-textfield_large button { height: 64px !important; width: 64px !important; margin-top: -64px !important; line-height: 64px !important; } .clipfield.textfield_huge input, .clipfield.md-textfield_huge input { padding-right: 80px !important; } .clipfield.textfield_huge button, .clipfield.md-textfield_huge button { height: 80px !important; width: 80px !important; margin-top: -80px !important; line-height: 80px !important; } } /* Clipfields . Large screens */ @media (min-width: 1200px) { .clipfield input, .clipfield.textfield_default input, .clipfield.lg-textfield_default input { padding-right: 48px !important; } .clipfield button, .clipfield.textfield_default button, .clipfield.lg-textfield_default button { height: 48px !important; width: 48px !important; margin-top: -48px !important; line-height: 48px !important; } .clipfield.textfield_tiny input, .clipfield.lg-textfield_tiny input { padding-right: 24px !important; } .clipfield.textfield_tiny button, .clipfield.lg-textfield_tiny button { height: 24px !important; width: 24px !important; margin-top: -24px !important; line-height: 24px !important; } .clipfield.textfield_small input, .clipfield.lg-textfield_small input { padding-right: 34px !important; } .clipfield.textfield_small button, .clipfield.lg-textfield_small button { height: 34px !important; width: 34px !important; margin-top: -34px !important; line-height: 34px !important; } .clipfield.textfield_medium input, .clipfield.lg-textfield_medium input { padding-right: 54px !important; } .clipfield.textfield_medium button, .clipfield.lg-textfield_medium button { height: 54px !important; width: 54px !important; margin-top: -54px !important; line-height: 54px !important; } .clipfield.textfield_large input, .clipfield.lg-textfield_large input { padding-right: 64px !important; } .clipfield.textfield_large button, .clipfield.lg-textfield_large button { height: 64px !important; width: 64px !important; margin-top: -64px !important; line-height: 64px !important; } .clipfield.textfield_huge input, .clipfield.xs-textfield_huge input { padding-right: 86px !important; } .clipfield.textfield_huge button, .clipfield.xs-textfield_huge button { height: 86px !important; width: 86px !important; margin-top: -86px !important; line-height: 86px !important; } } /* Textareas ------------------------------------- */ .textarea{ height: 100px; width: 100%; margin: 0px; border: 1px solid #CCCCCC; font-family: inherit; font-size: inherit; padding: 6px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .textarea:focus{ outline-width: 0px; } .textarea.extra-small{ height: 45px; } .textarea.small{ height: 100px; } .textarea.medium{ height: 200px; } .textarea.large{ height: 300px; } .textarea.extra-large{ height: 500px; } /* Textareas states */ .textarea.masked{ color: #999; } .textarea.disabled{ color: #CCC; border-color: #DDD; background: #FFF url(images/icon-disabled.gif) no-repeat right top; } .textarea.readonly{ border-color: transparent; } .textarea.active{ color: #333; border-color: #333333; } .textarea.changed{ color: #333; } .textarea.mandatory{ background: transparent url(images/icon-mandatory.gif) no-repeat right top; } .textarea.valid{ border-color: #a7dcbd !important; /* green */ background: transparent url(images/icon-valid.gif) no-repeat right top !important; } .textarea.invalid{ color: #d32a2a; border-color: #f9a7a7 !important; /* red */ background: transparent url(images/icon-invalid.gif) no-repeat right top !important; } .textarea.editable{ border-style: dotted; border-color: #CCC; background: none; } .textarea.editable:hover{ background: #fffcc7 url(images/icon-edit.gif) no-repeat right top; } .textarea.editable.editing{ border-style: solid; } .textarea.editable.editing:hover{ background: none; } /* Droplists ------------------------------------- */ .droplist, .droplist .display { width: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .droplist.extra-small, .droplist.extra-small .display{ line-height: 20px; font-size: 10px; } .droplist.small, .droplist.small .display{ line-height: 24px; font-size: 13px; } .droplist.medium, .droplist.medium .display{ line-height: 30px; font-size: 16px; } .droplist.large, .droplist.large .display{ line-height: 36px; font-size: 18px; } .droplist.extra-large, .droplist.extra-large .display{ line-height: 40px; font-size: 20px; } .droplist .display { padding: 0px 3px 0px 6px; line-height: 26px; font-size: 13px; color: #333; border: 1px solid #999; background: url(images/droplist-arrow.png) no-repeat scroll right 5px #dddddd; cursor: pointer; } .droplist .display:hover, .droplist .display.active{ border-color: #134661; background-position: right -11px; } .droplist.disabled .display, .droplist.disabled .display:hover{ border-color: #BBBBBB; background-color: #CCCCCC; background-position: right 5px; cursor: default; } .droplist.readonly .display{ border-color: transparent; background: none; background-color: transparent; cursor: default; } .droplist ul{ display: none; width: 100%; position: absolute; max-height: 160px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #FFFFFF; border-bottom: 1px solid #134661; border-left: 1px solid #134661; border-right: 1px solid #134661; clear: both; z-index: 30; overflow: auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .droplist.top ul{ border-top: 1px solid #134661; border-bottom: none; margin-top: -186px; } .droplist ul li{ padding: 4px 4px 6px 4px; list-style: none; font-size: 13px; color: #333; cursor: pointer; } .droplist ul li:hover { background-color: #3FA5D9; color: #FFFFFF; } /* Switch Buttons -------------------------------- */ .button-switch{ height: 20px; width: 42px; padding: 1px; border: 1px solid #A3A3A3; box-shadow: inset 0px 0px 2px #B2B2B2; background-color: #F3F3F3; background-image: url(../media/button-switch.png); background-position: 0px -14px; background-repeat: no-repeat; cursor: pointer; } .button-switch:hover{ border-color: #777777; } .button-switch .cursor{ height: 18px; width: 18px; border: 1px solid #8C8B8D; background-image: url(../media/button-switch.png); background-position: -45px -14px; } .button-switch.on .cursor{ margin-left: 22px; } /* Readonly */ .button-switch.readonly { width: 20px; cursor: default; border: none; background-color: transparent; box-shadow: none; } .button-switch.readonly:hover{ border: none; } .button-switch.readonly.on { background-position: -1px -14px; } .button-switch.readonly.off { background-position: -22px -14px; } .button-switch.readonly .cursor{ display: none; } /* Disabled */ .button-switch.disabled{ background-position: 0px -80px; cursor: default; } .button-switch.disabled:hover{ border-color: #BAB9BA; } .button-switch.disabled .cursor{ border-color: #CCCCCC; background-position: -45px -80px; } /* Switch Buttons . Small ------------------------ */ .button-switch.small{ height: 12px; width: 26px; background-position: 0px 0px; } .button-switch.small .cursor{ height: 10px; width: 10px; background-position: -29px 0px; } .button-switch.small.on .cursor{ margin-left: 13px; } .button-switch.small.readonly { width: 14px; } .button-switch.small.readonly.on { background-position: 1px 0px; } .button-switch.small.readonly.off { background-position: -13px 0px; } .button-switch.small.disabled{ background-position: 0px -66px; } .button-switch.small.disabled .cursor{ background-position: -29px -66px; } /* Switch Buttons . Medium ----------------------- */ .button-switch.medium{ height: 20px; width: 42px; background-position: 0px -14px; } .button-switch.medium .cursor{ height: 18px; width: 18px; background-position: -45px -14px; } .button-switch.medium.on .cursor{ margin-left: 22px; } .button-switch.medium.readonly { width: 20px; } .button-switch.medium.readonly.on { background-position: -1px -14px; } .button-switch.medium.readonly.off { background-position: -22px -14px; } .button-switch.medium.disabled{ background-position: 0px -80px; } .button-switch.medium.disabled .cursor{ background-position: -45px -80px; } /* Switch Buttons . Large ------------------------ */ .button-switch.large{ height: 28px; width: 58px; background-position: 0px -36px; } .button-switch.large .cursor{ height: 26px; width: 26px; background-position: -61px -36px; } .button-switch.large.on .cursor{ margin-left: 30px; } .button-switch.large.readonly { width: 32px; } .button-switch.large.readonly.on { background-position: 1px -36px; } .button-switch.large.readonly.off { background-position: -27px -36px; } .button-switch.large.disabled{ background-position: 0px -102px; } .button-switch.large.disabled .cursor{ background-position: -61px -102px; } /* Checkbox Buttons ------------------------------ */ .button-checkbox{ display: inline-block; margin: 0px 0px 6px 0px; padding-right: 10px; line-height: 18px; user-select: none; -moz-user-select: none; -webkit-user-select: none; cursor: pointer; } .button-checkbox .checkbox-marker{ float: left; height: 14px; width: 14px; border: 1px solid #A3A3A3; box-shadow: inset 0px 0px 2px #B2B2B2; background-color: #F3F3F3; } .button-checkbox:hover .checkbox-marker{ border-color: #777777; } .button-checkbox .checkbox-marker-icon{ display: none; height: 14px; width: 14px; background-image: url(images/button-checkbox.png); background-position: 0px -10px; background-color: transparent; background-repeat: no-repeat; } .button-checkbox .checkbox-label{ float: left; margin: 0px 0px 0px 6px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .listed.button-checkbox{ display: block; margin-bottom: 10px; } /* Readonly */ .button-checkbox.readonly{ cursor: default; } .button-checkbox.readonly .checkbox-marker{ background-color: #F8F8F8; border-color: #D1D1D1; box-shadow: none; } /* Disabled */ .button-checkbox.disabled{ cursor: default; } .button-checkbox.disabled .checkbox-marker{ background-color: #F8F8F8; border-color: #D1D1D1; box-shadow: none; } .button-checkbox.disabled .checkbox-marker-icon{ background-position: -18px -10px; } /* 09.1 Checkbox Buttons . Small ------------- 09.1 */ .button-checkbox.small{ font-size: 11px; line-height: 16px; padding-right: 8px; } .button-checkbox.small .checkbox-marker{ height: 10px; width: 10px; margin-top: 2px; } .button-checkbox.small .checkbox-marker-icon{ height: 10px; width: 10px; background-position: 0px 0px; } .button-checkbox.small.disabled .checkbox-marker-icon{ background-position: -18px 0px; } .small.listed.button-checkbox{ margin-bottom: 8px; } /* 09.2 Checkbox Buttons . Medium ------------ 09.2 */ .button-checkbox.medium{ font-size: 12px; line-height: 18px; padding-right: 10px; } .button-checkbox.medium .checkbox-marker{ height: 14px; width: 14px; } .button-checkbox.medium .checkbox-marker-icon{ height: 14px; width: 14px; background-position: 0px -10px; } .button-checkbox.medium.disabled .checkbox-marker-icon{ background-position: -18px -10px; } .medium.listed.button-checkbox{ margin-bottom: 10px; } /* 09.3 Checkbox Buttons . Large ------------- 09.3 */ .button-checkbox.large{ font-size: 13px; line-height: 22px; padding-right: 12px; } .button-checkbox.large .checkbox-marker{ height: 18px; width: 18px; } .button-checkbox.large .checkbox-marker-icon{ height: 18px; width: 18px; background-position: 0px -24px; } .button-checkbox.large.disabled.checked .checkbox-marker-icon{ background-position: -18px -24px; } .large.listed.button-checkbox{ margin-bottom: 12px; } /* Radio Buttons --------------------------------- */ li.button-radio{ display: inline-block; margin: 0px 6px 0px 0px; padding: 0px 10px 0px 0px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 12px; line-height: 14px; cursor: pointer; user-select: none; -moz-user-select: none; } li.button-radio .button-marker{ float: left; height: 10px; width: 10px; padding: 2px 2px 2px 2px; border-radius: 8px; border: 1px solid #A3A3A3; box-shadow: inset 0px 0px 2px #B2B2B2; background-color: #F3F3F3; } li.button-radio:hover .button-marker{ border-color: #777777; } li.button-radio .button-marker-icon{ display: none; height: 10px; width: 10px; border-radius: 8px; background-color: #333333; } li.button-radio .button-label{ float: left; margin-left: 6px; padding-top: 2px; } .listed li.button-radio{ display: block; overflow: hidden; margin-bottom: 8px; } /* Readonly */ .readonly li.button-radio{ cursor: default; } .readonly li.button-radio:hover{ background-color: transparent; } .readonly li.button-radio .button-marker{ background-color: #F8F8F8; border-color: #D1D1D1; box-shadow: none; } .readonly li.button-radio .button-marker-icon{ background-color: #333333; } /* Disabled */ .disabled li.button-radio{ cursor: default; } .disabled li.button-radio:hover{ background-color: transparent; } .disabled li.button-radio .button-marker{ background-color: #F8F8F8; border-color: #D1D1D1; box-shadow: none; } .disabled li.button-radio .button-marker-icon{ background-color: #BABABA; } /* 10.1 Radio Buttons . Small ------------- 10.1 */ .small li.button-radio{ font-size: 11px; line-height: 12px; padding-right: 8px; } .small li.button-radio .button-marker{ height: 8px; width: 8px; padding: 1px 1px 1px 1px; border-radius: 6px; } .small li.button-radio .button-marker-icon{ height: 8px; width: 8px; border-radius: 4px; } .small li.button-radio .button-label{ margin-left: 4px; padding-top: 0px; } .listed.small li.button-radio{ margin-bottom: 6px; } /* 10.2 Radio Buttons . Medium ------------ 10.2 */ .medium li.button-radio{ font-size: 12px; line-height: 14px; padding-right: 10px; } .medium li.button-radio .button-marker{ height: 10px; width: 10px; border-radius: 8px; } .medium li.button-radio .button-marker-icon{ height: 10px; width: 10px; border-radius: 8px; } .medium li.button-radio .button-label{ margin-left: 6px; padding-top: 2px; } .listed.medium li.button-radio{ margin-bottom: 8px; } /* 10.3 Radio Buttons . Large ------------- 10.3 */ .large li.button-radio{ margin-right: 10px; font-size: 13px; line-height: 16px; padding-right: 12px; } .large li.button-radio .button-marker{ height: 12px; width: 12px; border-radius: 9px; } .large li.button-radio .button-marker-icon{ height: 12px; width: 12px; border-radius: 9px; } .large li.button-radio .button-label{ margin-left: 6px; padding-top: 2px; } .listed.large li.button-radio{ margin-bottom: 10px; } /* 10.4 Radio Buttons . Group ------------- 10.4 */ .button-radio-group li:first-child{ display: none; } /* Tag boxes ------------------------------------- */ .tagbox {} .tagbox.readonly .tag-filter, .tagbox.readonly .button-drop{ display: none; } .tagbox ul.tagbox-list-suggested{ display: none; position: absolute; max-height: 100px; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 0px; border: 1px solid #999; border-top: none; overflow: auto; background-color: #ffffff; z-index: 99999999999999999; } .tagbox ul.tag-list-suggested li{ display: block; list-style: none; padding: 3px 6px 3px 6px; cursor: pointer; } .tagbox ul.tagbox-list-suggested li.disabled{ color: #CCCCCC; } .tagbox ul.tagbox-list-suggested li.disabled .button.add{ display: none; } .tagbox ul.tagbox-list-suggested li:hover{ background-color: #DDDDDD; } .tagbox ul.tagbox-list-suggested li.active{ color: #FFFFFF; background-color: #39F; } .tagbox ul.tagbox-list-suggested li .button.add{ float: right; } .tagbox ul.tagbox-list-selected{ min-height: 16px; margin: 2px 0px 0px 0px; padding: 6px 6px 6px 6px; border: 1px dotted #999; overflow: auto; } .tagbox.readonly ul.tagbox-list-selected{ border-color: transparent; } /* Tag-box . Drop button */ .tagbox .button-drop{ margin-top: 0px; } .tagbox .button-drop ul.button-drop-list{ margin-left: -1px; } /* Default size */ .tagbox .button-drop .button-drop-display, .tagbox .button-drop .button-drop-display:hover{ padding: 0px 10px 0px 10px; line-height: 25px; font-size: 12px; border-radius: 5px; } /* Extra small */ .tagbox.extra-small .button-drop .button-drop-display, .tagbox.extra-small .button-drop .button-drop-display:hover{ padding: 0px 6px 0px 6px; line-height: 12px; font-size: 8px; border-radius: 4px; } /* Small */ .tagbox.small .button-drop .button-drop-display, .tagbox.small .button-drop .button-drop-display:hover{ padding: 0px 6px 0px 6px; line-height: 16px; font-size: 10px; border-radius: 4px; } /* Medium */ .tagbox.medium .button-drop .button-drop-display, .tagbox.medium .button-drop .button-drop-display:hover{ padding: 0px 8px 0px 8px; line-height: 24px; font-size: 12px; border-radius: 5px; } /* Large */ .tagbox.large .button-drop .button-drop-display, .tagbox.large .button-drop .button-drop-display:hover{ padding: 0px 10px 0px 10px; line-height: 32px; font-size: 14px; border-radius: 6px; } /* Extra-large */ .tagbox.extra-large .button-drop .button-drop-display, .tagbox.extra-large .button-drop .button-drop-display:hover{ padding: 0px 12px 0px 12px; line-height: 40px; font-size: 16px; border-radius: 8px; } /* Suggestion Lists ------------------------------ */ ul.suggestion-list{ position: absolute; max-height: 150px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 1px solid #999999; border-top: none; background-color: #FFF; overflow: hidden; box-shadow: 0px 0px 3px #CCCCCC; } ul.suggestion-list li{ height: 24px; width: 100%; padding: 0px 0px 0px 1px; list-style: none; line-height: 24px; text-indent: 6px; border-bottom: 1px solid #ECECEC; cursor: pointer; font-size: 12px; } ul.suggestion-list li:hover{ background-color: #E6F1F8; } ul.suggestion-list li.active{ color: #fff; background-color: #69F; } ul.suggestion-list li:last-child{ border-bottom: none; } /* Drop Buttons ---------------------------------- */ .button-drop{ float: left; } .button-drop .button-drop-display{ padding: 2px 6px 3px 6px; font-size: 13px; font-weight: normal; -moz-user-select: none; cursor: pointer; } .button-drop .button-drop-display:hover{ border-radius: 4px 4px 4px 4px; background-color: #DDDDDD; } .button-drop.disabled .button-drop-display, .button-drop.disabled .button-drop-display:hover{ color: #dddddd; background-color: transparent; cursor: default; } .button-drop.open .button-drop-display{ color: #333333; } .button-drop.open .button-drop-display, .button-drop.open .button-drop-display:hover{ border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; background-color: #ffffff; box-shadow: 0px 0px 3px #333; } .button-drop ul.button-drop-list{ display: none; position: absolute; max-height: 120px; width: 200px; background-color: #ffffff; overflow: auto; box-shadow: 0px 2px 3px #333; -moz-user-select: none; z-index: 9999999999999; } .button-drop.open ul.button-drop-list{ display: block; } .button-drop ul.button-drop-list li{ min-height: 24px; padding: 0px 6px 0px 6px; font-size: 12px; line-height: 24px; cursor: pointer; } .button-drop ul.button-drop-list li:hover{ color: #ffffff; background-color: #333333; } .button-drop ul.button-drop-list li.disabled{ color: #CCCCCC; } .button-drop ul.button-drop-list li.disabled:hover{ color: #666666; cursor: default; } .button-drop ul.button-drop-list li img{ float: left; margin: 4px 4px 0px 0px; } /* Tags ------------------------------------------ */ .tag { height: auto; width: auto; display: inline-block; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .tag.inline { display: inline !important; } /* Styles */ .tag.rounded { border-radius: 8px; } .tag.pill { border-radius: 999px; } /* States */ .tag.disabled{ color: #777777; opacity: 0.7; } /* Sizes */ .tag, .tag.tag_default { padding: 2px 10px !important; } .tag.rounded, .tag.tag_default.rounded { border-radius: 8px; } .tag.tag_tiny { padding: 2px 6px !important; font-size: 60%; } .tag.tag_tiny.rounded { border-radius: 4px; } .tag.tag_tiny.tag_collapsed { } .tag.tag_small { padding: 2px 8px !important; font-size: 80%; } .tag.tag_small.rounded { border-radius: 6px; } .tag.tag_medium { padding: 2px 12px !important; font-size: 120%; } .tag.tag_medium.rounded { border-radius: 8px; } .tag.tag_large { padding: 2px 14px !important; font-size: 140%; } .tag.tag_large.rounded { border-radius: 10px; } .tag.tag_huge { padding: 2px 16px !important; font-size: 180%; } .tag.tag_huge.rounded { border-radius: 12px; } /* Collapsing */ /* Collapsing . Extra small screens */ @media (min-width: 100px) { .tag.xs-tag_collapsed { padding: 0px !important; } .tag.xs-tag_collapsed span { display: none; } .tag.tag_tiny.tag_collapsed::after, .tag.tag_small.tag_collapsed::after, .tag.tag_default.tag_collapsed::after, .tag.tag_medium.tag_collapsed::after, .tag.tag_large.tag_collapsed::after, .tag.tag_huge.tag_collapsed::after, .tag.xs-tag_collapsed::after { display: block; content: ""; } } /* Collapsing . Small screens */ @media (min-width: 768px) { /* Resets */ .tag.xs-tag_collapsed span { display: initial; } .tag.xs-tag_collapsed::after { display: none; } /* Defaults */ .tag, .tag.tag_default, .tag.xs-tag_collapsed, .tag.tag_default.xs-tag_collapsed { padding: 2px 10px !important; } .tag.tag_tiny, .tag.tag_tiny.xs-tag_collapsed { padding: 2px 6px !important; } .tag.tag_small, .tag.tag_small.xs-tag_collapsed { padding: 2px 8px !important; } .tag.tag_medium, .tag.tag_medium.xs-tag_collapsed { padding: 2px 12px !important; } .tag.tag_large, .tag.tag_large.xs-tag_collapsed { padding: 2px 14px !important; } .tag.tag_huge, .tag.tag_huge.xs-tag_collapsed { padding: 2px 16px !important; } /* Active */ .tag.sm-tag_collapsed { padding: 0px !important; } .tag.sm-tag_collapsed span { display: none; } .tag.tag_tiny.tag_collapsed::after, .tag.tag_small.tag_collapsed::after, .tag.tag_default.tag_collapsed::after, .tag.tag_medium.tag_collapsed::after, .tag.tag_large.tag_collapsed::after, .tag.tag_huge.tag_collapsed::after, .tag.sm-tag_collapsed::after { display: block; content: ""; } } /* Collapsing . Medium screens */ @media (min-width: 990px) { /* Resets */ .tag.xs-tag_collapsed span, .tag.sm-tag_collapsed span { display: initial; } .tag.xs-tag_collapsed::after, .tag.sm-tag_collapsed::after { display: none; } /* Defaults */ .tag, .tag.tag_default, .tag.xs-tag_collapsed, .tag.sm-tag_collapsed, .tag.tag_default.xs-tag_collapsed, .tag.tag_default.sm-tag_collapsed { padding: 2px 10px !important; } .tag.tag_tiny, .tag.tag_tiny.xs-tag_collapsed, .tag.tag_tiny.sm-tag_collapsed{ padding: 2px 6px !important; } .tag.tag_small, .tag.tag_small.xs-tag_collapsed, .tag.tag_small.sm-tag_collapsed { padding: 2px 8px !important; } .tag.tag_medium, .tag.tag_medium.xs-tag_collapsed, .tag.tag_medium.sm-tag_collapsed { padding: 2px 12px !important; } .tag.tag_large, .tag.tag_large.xs-tag_collapsed, .tag.tag_large.sm-tag_collapsed { padding: 2px 14px !important; } .tag.tag_huge, .tag.tag_huge.xs-tag_collapsed, .tag.tag_huge.sm-tag_collapsed { padding: 2px 16px !important; } /* Active */ .tag.md-tag_collapsed { padding: 0px !important; } .tag.md-tag_collapsed span { display: none; } .tag.tag_tiny.tag_collapsed::after, .tag.tag_small.tag_collapsed::after, .tag.tag_default.tag_collapsed::after, .tag.tag_medium.tag_collapsed::after, .tag.tag_large.tag_collapsed::after, .tag.tag_huge.tag_collapsed::after, .tag.md-tag_collapsed::after { display: block; content: ""; } } /* Collapsing . Large screens */ @media (min-width: 1200px) { /* Resets */ .tag.xs-tag_collapsed { padding: unset; } .tag.xs-tag_collapsed span, .tag.sm-tag_collapsed span, .tag.md-tag_collapsed span { display: initial; } .tag.xs-tag_collapsed::after, .tag.sm-tag_collapsed::after, .tag.md-tag_collapsed::after { display: none; } /* Defaults */ .tag, .tag.tag_default, .tag.xs-tag_collapsed, .tag.sm-tag_collapsed, .tag.md-tag_collapsed, .tag.tag_default.xs-tag_collapsed, .tag.tag_default.sm-tag_collapsed, .tag.tag_default.md-tag_collapsed { padding: 2px 10px !important; } .tag.tag_tiny, .tag.tag_tiny.xs-tag_collapsed, .tag.tag_tiny.sm-tag_collapsed, .tag.tag_tiny.md-tag_collapsed { padding: 2px 6px !important; } .tag.tag_small, .tag.tag_small.xs-tag_collapsed, .tag.tag_small.sm-tag_collapsed, .tag.tag_small.md-tag_collapsed { padding: 2px 8px !important; } .tag.tag_medium, .tag.tag_medium.xs-tag_collapsed, .tag.tag_medium.sm-tag_collapsed, .tag.tag_medium.md-tag_collapsed { padding: 2px 12px !important; } .tag.tag_large, .tag.tag_large.xs-tag_collapsed, .tag.tag_large.sm-tag_collapsed, .tag.tag_large.md-tag_collapsed { padding: 2px 14px !important; } .tag.tag_huge, .tag.tag_huge.xs-tag_collapsed, .tag.tag_huge.sm-tag_collapsed, .tag.tag_huge.md-tag_collapsed { padding: 2px 16px !important; } /* Active */ .tag.lg-tag_collapsed { padding: 0px !important; } .tag.lg-tag_collapsed span { display: none; } .tag.tag_tiny.tag_collapsed::after, .tag.tag_small.tag_collapsed::after, .tag.tag_default.tag_collapsed::after, .tag.tag_medium.tag_collapsed::after, .tag.tag_large.tag_collapsed::after, .tag.tag_huge.tag_collapsed::after, .tag.lg-tag_collapsed::after { display: block; content: ""; } } .tag.tag_collapsed { padding: 0px !important; } .tag.tag_collapsed span { display: none; } .tag.tag_collapsed::after { display: block; } .tag.tag_collapsed::after, .tag.xs-tag_collapsed::after, .tag.sm-tag_collapsed::after, .tag.md-tag_collapsed::after, .tag.lg-tag_collapsed::after { font-family: PaperIcons; } /* Colors */ /* Tags . Colors . Default */ .tag, .tag.tag_color_default { color: #ffffff; background-color: #4c4c4c; } .tag::after, .tag.tag_color_default::after { color: #4c4c4c;} /* Tags . Colors . Primary */ .tag.tag_color_primary { color: #ffffff; background-color: #0088ba; } .tag.tag_color_primary::after { color: #0088ba;} /* Tags . Colors . Secondary */ .tag.tag_color_secondary { color: #ffffff; background-color: #ffd000; } .tag.tag_color_secondary::after { color: #ffd000;} /* Tags . Colors . Red */ .tag.tag_color_red { color: #ffffff; background-color: #d45353; } .tag.tag_color_red::after { color: #d45353;} .tag.tag_color_red_dark { color: #ffffff; background-color: #801e1e; } .tag.tag_color_red_dark::after { color: #801e1e; } .tag.tag_color_red_medium { color: #ffffff; background-color: #c45656; } .tag.tag_color_red_medium ::after { color: #c45656; } .tag.tag_color_red_light { color: #ffffff; background-color: #da9494; } .tag.tag_color_red_light::after { color: #da9494; } /* Tags . Colors . Green */ .tag.tag_color_green { color: #ffffff; background-color: #39b876; } .tag.tag_color_green::after { color: #39b876; } .tag.tag_color_green_dark { color: #ffffff; background-color: #00735b; } .tag.tag_color_green_dark::after { color: #00735b; } .tag.tag_color_green_medium { color: #ffffff; background-color: #20a864; } .tag.tag_color_green_medium::after { color: #20a864; } .tag.tag_color_green_light { color: inherit; background-color: #8bcc95; } .tag.tag_color_green_light::after { color: #8bcc95; } /* Tags . Colors . Blue */ .tag.tag_color_blue { color: #ffffff; background-color: #007ee5; } .tag.tag_color_blue::after { color: #007ee5; } .tag.tag_color_blue_dark { color: #ffffff; background-color: #004b73; } .tag.tag_color_blue_dark::after { color: #004b73; } .tag.tag_color_blue_medium { color: #ffffff; background-color: #0075b3; } .tag.tag_color_blue_medium::after { color: #0075b3; } .tag.tag_color_blue_light { color: inherit; background-color: #aec9df; } .tag.tag_color_blue_light::after { color: #aec9df; } /* Tags . Colors . Orange */ .tag.tag_color_orange { color: #ffffff; background-color: #ffaa54; } .tag.tag_color_orange::after { color: #ffaa54; } .tag.tag_color_orange_dark { color: #ffffff; background-color: #bf6100; } .tag.tag_color_orange_dark::after { color: #bf6100; } .tag.tag_color_orange_medium { color: #ffffff; background-color: #eba457; } .tag.tag_color_orange_medium::after { color: #eba457; } .tag.tag_color_orange_light { color: inherit; background-color: #ffe2c4; } .tag.tag_color_orange_light::after { color: #ffe2c4; } /* Tags . Colors . Yellow */ .tag.tag_color_yellow { color: #ffffff; background-color: #ffea00; } .tag.tag_color_yellow::after { color: #ffea00; } .tag.tag_color_yellow_dark { color: #ffffff; background-color: #ffbe00; } .tag.tag_color_yellow_dark::after { color: #ffbe00; } .tag.tag_color_yellow_medium { color: #ffffff; background-color: #ffd24a; } .tag.tag_color_yellow_medium::after { color: #ffd24a; } .tag.tag_color_yellow_light { color: inherit; background-color: #fff1c7; } .tag.tag_color_yellow_light::after { color: #fff1c7; } /* Tags . Colors . Grey */ .tag.tag_color_grey { color: #ffffff; background-color: #4d4d4d; } .tag.tag_color_grey::after { color: #4d4d4d; } .tag.tag_color_grey_dark { color: #ffffff; background-color: #414042; } .tag.tag_color_grey_dark::after { color: #414042; } .tag.tag_color_grey_medium { color: #ffffff; background-color: #939598; } .tag.tag_color_grey_medium::after { color: #939598; } .tag.tag_color_grey_light { color: inherit; background-color: #e6e7e8; } .tag.tag_color_grey_light::after { color: #e6e7e8; } /* Tags . Colors . Black */ .tag.tag_color_black { color: #ffffff; background-color: #000000; } .tag.tag_color_black::after { color: #000000; } .tag.tag_color_black_dark { color: #ffffff; background-color: #000000; } .tag.tag_color_black_dark::after { color: #000000; } .tag.tag_color_black_medium { color: #ffffff; background-color: #000000; opacity: 0.5; } .tag.tag_color_black_medium::after { color: #000000; } .tag.tag_color_black_light { color: #ffffff; background-color: #000000; opacity: 0.2; } .tag.tag_color_black_light::after { color: #000000; } /* Tags . Colors . White */ .tag.tag_color_white { color: inherit; background-color: #ffffff; } .tag.tag_color_white::after { color: #ffffff; } .tag.tag_color_white_dark { color: inherit; background-color: #ffffff; } .tag.tag_color_white_dark::after { color: #ffffff; } .tag.tag_color_white_medium { color: inherit; background-color: #ffffff; opacity: 0.5; } .tag.tag_color_white_medium::after { color: #ffffff; } .tag.tag_color_white_light { color: inherit; background-color: #ffffff; opacity: 0.2; } .tag.tag_color_white_light::after { color: #ffffff; } /* Remove Buttons */ /* .tag .button-remove{ float: right; height: 22px; width: 24px; margin-right: -10px; margin-left: 10px; background-repeat: no-repeat; background-position: -28px -0px; cursor: pointer; } .tag .button-remove:hover{ background-position: -28px -22px; } .tag.disabled .button-remove, .tag.locked .button-remove, .tag.readonly .button-remove{ display: none; } */ /* Field Groups ---------------------------------- */ ul.field-group{ padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 1px solid #999; } ul.field-group.disabled{ border-color: #DDDDDD; } ul.field-group li{ list-style: none; } ul.field-group .button.add{ font-size: 13px; text-align: center; } ul.field-group li .button.remove{ float: right; margin: 4px -26px 0px 0px; } ul.field-group.disabled li .button.remove, ul.field-group.readonly li .button.remove{ display: none; } /* Field Groups . Multi-line */ /* Field Groups . Multi-line . Rows */ ul.field-group.multi-line li { padding-right: 30px; border-bottom: 1px dashed #DDDDDD; } ul.field-group.multi-line li:last-child { border-bottom: none; } ul.field-group.multi-line li:last-child{ } ul.field-group.multi-line li { padding-right: 0px; overflow: auto; } /* Field Groups . Multi-line . Templates */ ul.field-group.multi-line li.template { display: none; } /* Field Groups . Multi-line . Remove button */ ul.field-group.multi-line li .button.remove { position: relative; float: right; z-index: 2; } ul.field-group.multi-line li .button.remove::after { display: block; line-height: 100%; } .field-group.multi-line.saving li .button.remove { opacity: 0; } /* Field Groups . Multi-line . Controls */ ul.field-group.multi-line .controls { padding: 0px; } ul.field-group.multi-line .controls a { display: inline-block; } ul.field-group.multi-line .controls button { display: none; float: right; margin-left: 10px; padding: 0px !important; border-radius: 50%; color: #ffffff; opacity: 0.6; transition: 0.2s all ease-in-out; } ul.field-group.multi-line.editing .controls button { display: inline-block; } ul.field-group.multi-line .controls button:last-child { margin-left: 0px; } ul.field-group.multi-line .controls button:hover { opacity: 1; } ul.field-group.multi-line .controls button::after { display: block; font-family: PaperIcons; line-height: 100%; } ul.field-group.multi-line .controls button.cancel { background-color: #d45353; } ul.field-group.multi-line .controls button.cancel::after { content: ""; } ul.field-group.multi-line .controls button.save { background-color: #39b876; } ul.field-group.multi-line .controls button.save::after { content: ""; } /* Field Groups . Multi-line . Combined */ ul.field-group.multi-line.combined{ padding: 6px; } ul.field-group.readonly.multi-line.combined{ border-color: transparent; } ul.field-group.multi-line.combined li{ padding: 6px 30px 6px 6px; border: 1px solid transparent; } ul.field-group.disabled.multi-line.combined li, ul.field-group.readonly.multi-line.combined li{ padding-right: 6px; } ul.field-group.multi-line.combined li:hover{ border: 1px dotted #999; } ul.field-group.disabled.multi-line.combined li:hover{ border-color: transparent; } ul.field-group.readonly.multi-line.combined li:hover{ border-color: transparent; } ul.field-group.multi-line.combined li:last-child:hover{ border: 1px solid transparent; } ul.field-group.readonly.multi-line.combined li:last-child{ display: none; } ul.field-group.multi-line.combined li .textfield{ margin: 0px 0px 6px 0px; } ul.field-group.multi-line.combined li .button.remove{ margin: 0px -23px 0px 0px; } /* Field Groups . Multi-line . Floating */ ul.field-group.multi-line.floating { border-color: transparent; } ul.field-group.multi-line.floating li { border: none; overflow: visible; } ul.field-group.multi-line.floating li .textfield { border: 1px solid #cccccc; } /* Field Groups . Multi-line . List */ /* Field Groups . Multi-line . Textfields */ ul.field-group.multi-line.list li .textfield{ border: none; } /* Field Groups . Multi-line . Disabled */ ul.field-group.disabled.multi-line li { padding-right: 0px; } ul.field-group.disabled.multi-line li:last-child a, ul.field-group.multi-line li:last-child a.disabled{ color: #CCC; cursor: default; } /* Field Groups . Multi-line . Readonly */ ul.field-group.readonly.multi-line { border-color: transparent; } ul.field-group.readonly.multi-line li { border-bottom-color: transparent; padding-right: 6px; } ul.field-group.readonly.multi-line li:last-child{ display: none; } /* Field Groups . Multi-line . Extra small screens */ @media (min-width: 100px) { /* Default */ /* Multi-line . Default */ /* Multi-line . Default . Rows */ /* Multi-line . Default . Rows . Textfield */ ul.field-group.multi-line li .textfield, ul.field-group.multi-line.default li .textfield { padding-right: 35px !important; } /* Multi-line . Default . Rows . Remove button */ ul.field-group.multi-line li button.remove, ul.field-group.multi-line.default li button.remove { height: 20px !important; width: 20px !important; margin: -26px 5px 0px 0px; font-size: 12px !important; } /* Multi-line . Default . Controls */ /* Multi-line . Default . Controls . Link */ ul.field-group.multi-line .controls a, ul.field-group.multi-line.default .controls a { line-height: 24px !important; } /* Multi-line . Default . Controls . Buttons */ ul.field-group.multi-line .controls button, ul.field-group.multi-line.default .controls button { height: 20px !important; width: 20px !important; font-size: 16px !important; } /* Multi-line . List . Default */ /* Multi-line . List . Default . Controls */ ul.field-group.multi-line.list .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Default */ /* Multi-line . Floating . Default . Rows */ ul.field-group.multi-line.floating li, ul.field-group.multi-line.floating.default li { margin-bottom: 6px; } /* Multi-line . Combined . Default */ /* Multi-line . Combined . Default . Textfield */ ul.field-group.multi-line.combined li .textfield, ul.field-group.multi-line.combined.default li .textfield { padding: 0px !important; } /* Tiny */ /* Multi-line . Tiny */ /* Multi-line . Tiny . Rows */ /* Multi-line . Tiny . Rows . Textfield */ ul.field-group.multi-line.tiny li .textfield { padding-right: 25px !important; } /* Multi-line . Tiny . Rows . Remove button */ ul.field-group.multi-line.tiny li button.remove { height: 12px !important; width: 12px !important; margin: -15px 3px 0px 0px; font-size: 8px !important; } /* Multi-line . Tiny . Controls */ /* Multi-line . Tiny . Controls . Link */ ul.field-group.multi-line.tiny .controls a { line-height: 12px !important; } /* Multi-line . Tiny . Controls . Buttons */ ul.field-group.multi-line.tiny .controls button { height: 12px !important; width: 12px !important; font-size: 8px !important; } /* Multi-line . List . Tiny */ /* Multi-line . List . Tiny . Controls */ ul.field-group.multi-line.list.tiny .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Tiny */ /* Multi-line . Floating . Tiny . Rows */ ul.field-group.multi-line.tiny.floating li { margin-bottom: 4px; } /* Multi-line . Combined . Tiny */ /* Multi-line . Combined . Tiny . Textfield */ ul.field-group.multi-line.combined.tiny li .textfield { padding: 0px !important; } /* Small */ /* Multi-line . Small */ /* Multi-line . Small . Rows */ /* Multi-line . Small . Rows . Textfield */ ul.field-group.multi-line.small li .textfield { padding-right: 31px !important; } /* Multi-line . Small . Rows . Remove button */ ul.field-group.multi-line.small li button.remove { height: 16px !important; width: 16px !important; margin: -21px 5px 0px 0px; font-size: 10px !important; } /* Multi-line . Small . Controls */ /* Multi-line . Small . Controls . Link */ ul.field-group.multi-line.small .controls a { line-height: 16px !important; } /* Multi-line . Small . Controls . Buttons */ ul.field-group.multi-line.small .controls button { height: 16px !important; width: 16px !important; font-size: 12px !important; } /* Multi-line . List . Small */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Small */ /* Multi-line . Floating . Small . Rows */ ul.field-group.multi-line.small.floating li { margin-bottom: 6px; } /* Multi-line . Combined . Small */ /* Multi-line . Combined . Small . Textfield */ ul.field-group.multi-line.combined.Small li .textfield { padding: 0px !important; } /* Medium */ /* Multi-line . Medium */ /* Multi-line . Medium . Rows */ /* Multi-line . Medium . Rows . Textfield */ ul.field-group.multi-line.medium li .textfield { padding-right: 41px !important; } /* Multi-line . Medium . Rows . Remove button */ ul.field-group.multi-line.medium li button.remove { height: 24px !important; width: 24px !important; margin: -33px 7px 0px 0px; font-size: 14px !important; } /* Multi-line . Medium . Controls */ /* Multi-line . Medium . Controls . Link */ ul.field-group.multi-line.medium .controls a { line-height: 24px !important; } /* Multi-line . Medium . Controls . Buttons */ ul.field-group.multi-line.medium .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Medium */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Medium */ /* Multi-line . Floating . Medium . Rows */ ul.field-group.multi-line.medium.floating li { margin-bottom: 6px; } /* Multi-line . Combined . Medium */ /* Multi-line . Combined . Medium . Textfield */ ul.field-group.multi-line.combined.medium li .textfield{ padding: 0px !important; } /* Large */ /* Multi-line . Large */ /* Multi-line . Large . Rows */ /* Multi-line . Large . Rows . Textfield */ ul.field-group.multi-line.large li .textfield { padding-right: 50px !important; } /* Multi-line . Large . Rows . Remove button */ ul.field-group.multi-line.large li button.remove { height: 24px !important; width: 24px !important; margin: -38px 13px 0px 0px; font-size: 14px !important; } /* Multi-line . Large . Controls */ /* Multi-line . Large . Controls . Link */ ul.field-group.multi-line.large .controls a { line-height: 24px !important; } /* Multi-line . Large . Controls . Buttons */ ul.field-group.multi-line.large .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Large */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.large .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Large */ /* Multi-line . Floating . Large . Rows */ ul.field-group.multi-line.floating.large li { margin-bottom: 10px; } /* Multi-line . Combined . Large */ /* Multi-line . Combined . Large . Textfield */ ul.field-group.multi-line.combined.large li .textfield{ padding: 0px !important; } /* Huge */ /* Multi-line . Huge */ /* Multi-line . Huge . Rows */ /* Multi-line . Huge . Rows . Textfield */ ul.field-group.multi-line.huge li .textfield { padding-right: 63px !important; } /* Multi-line . Huge . Rows . Remove button */ ul.field-group.multi-line.huge li button.remove { height: 24px !important; width: 24px !important; margin: -44px 19px 0px 0px; font-size: 14px !important; } /* Multi-line . Huge . Controls */ /* Multi-line . Huge . Controls . Link */ ul.field-group.multi-line.huge .controls a { line-height: 24px !important; } /* Multi-line . Huge . Controls . Buttons */ ul.field-group.multi-line.huge .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Huge */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.huge .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Huge */ /* Multi-line . Floating . Huge . Rows */ ul.field-group.multi-line.huge.floating li { margin-bottom: 12px; } /* Multi-line . Combined . Huge */ /* Multi-line . Combined . Huge . Textfield */ ul.field-group.multi-line.combined.huge li .textfield{ padding: 0px !important; } } /* Field Groups . Multi-line . Small screens */ @media (min-width: 768px) { /* Default */ /* Multi-line . Default */ /* Multi-line . Default . Rows */ /* Multi-line . Tiny . Rows . Textfield */ ul.field-group.multi-line li .textfield, ul.field-group.multi-line.default li .textfield { padding-right: 39px !important; } /* Multi-line . Tiny . Rows . Remove button */ ul.field-group.multi-line li button.remove, ul.field-group.multi-line.default li button.remove { height: 24px !important; width: 24px !important; margin: -30px 5px 0px 0px; font-size: 12px !important; } /* Multi-line . Default . Controls */ /* Multi-line . Default . Controls . Link */ ul.field-group.multi-line .controls a, ul.field-group.multi-line.default .controls a { line-height: 24px !important; } /* Multi-line . Default . Controls . Buttons */ ul.field-group.multi-line .controls button, ul.field-group.multi-line.default .controls button { height: 20px !important; width: 20px !important; font-size: 16px !important; } /* Multi-line . List . Default */ /* Multi-line . List . Default . Controls */ ul.field-group.multi-line.list .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Default */ /* Multi-line . Default . Rows */ ul.field-group.multi-line.floating li { margin-bottom: 6px; } /* Multi-line . Combined . Default */ /* Multi-line . Combined . Default . Textfield */ ul.field-group.multi-line.combined li .textfield, ul.field-group.multi-line.combined.default li .textfield { padding: 0px !important; } /* Tiny */ /* Multi-line . Tiny */ /* Multi-line . Tiny . Rows */ /* Multi-line . Tiny . Rows . Textfield */ ul.field-group.multi-line.tiny li .textfield { padding-right: 25px !important; } /* Multi-line . Tiny . Rows . Remove button */ ul.field-group.multi-line.tiny li button.remove { display: inline-block; height: 12px !important; width: 12px !important; margin: -16px 3px 0px 0px; font-size: 8px !important; } /* Multi-line . Tiny . Controls */ /* Multi-line . Tiny . Controls . Link */ ul.field-group.multi-line.tiny .controls a { line-height: 12px !important; } /* Multi-line . Tiny . Controls . Buttons */ ul.field-group.multi-line.tiny .controls button { height: 12px !important; width: 12px !important; font-size: 8px !important; } /* Multi-line . List . Tiny */ /* Multi-line . List . Tiny . Controls */ ul.field-group.multi-line.list.tiny .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Tiny */ /* Multi-line . Floating . Tiny . Rows */ ul.field-group.multi-line.floating.tiny li { margin-bottom: 4px; } /* Multi-line . Combined . Tiny */ /* Multi-line . Combined . Tiny . Textfield */ ul.field-group.multi-line.combined.tiny li .textfield{ padding: 0px !important; } /* Small */ /* Multi-line . Small */ /* Multi-line . Small . Rows */ /* Multi-line . Small . Rows . Textfield */ ul.field-group.multi-line.small li .textfield { padding-right: 32px !important; } /* Multi-line . Small . Rows . Remove button */ ul.field-group.multi-line.small li button.remove { height: 16px !important; width: 16px !important; margin: -23px 6px 0px 0px; font-size: 10px !important; } /* Multi-line . Small . Controls */ /* Multi-line . Small . Controls . Link */ ul.field-group.multi-line.small .controls a { line-height: 16px !important; } /* Multi-line . Small . Controls . Buttons */ ul.field-group.multi-line.small .controls button { height: 16px !important; width: 16px !important; font-size: 12px !important; } /* Multi-line . List . Small */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Small */ /* Multi-line . Floating . Small . Rows */ ul.field-group.multi-line.floating.small li { margin-bottom: 6px; } /* Multi-line . Combined . Small */ /* Multi-line . Combined . Small . Textfield */ ul.field-group.multi-line.combined.small li .textfield{ padding: 0px !important; } /* Medium */ /* Multi-line . Medium */ /* Multi-line . Medium . Rows */ /* Multi-line . Medium . Rows . Textfield */ ul.field-group.multi-line.medium li .textfield { padding-right: 46px !important; } /* Multi-line . Medium . Rows . Remove button */ ul.field-group.multi-line.medium li button.remove { height: 24px !important; width: 24px !important; margin: -36px 11px 0px 0px; font-size: 14px !important; } /* Multi-line . Medium . Controls */ /* Multi-line . Medium . Controls . Link */ ul.field-group.multi-line.medium .controls a { line-height: 24px !important; } /* Multi-line . Medium . Controls . Buttons */ ul.field-group.multi-line.medium .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Medium */ /* Multi-line . List . Medium . Controls */ ul.field-group.multi-line.list.medium .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Medium */ /* Multi-line . Floating . Small . Rows */ ul.field-group.multi-line.floating.medium li { margin-bottom: 8px; } /* Multi-line . Combined . Medium */ /* Multi-line . Combined . Medium . Textfield */ ul.field-group.multi-line.combined.medium li .textfield{ padding: 0px !important; } /* Large */ /* Multi-line . Large */ /* Multi-line . Large . Rows */ /* Multi-line . Large . Rows . Textfield */ ul.field-group.multi-line.large li .textfield { padding-right: 60px !important; } /* Multi-line . Large . Rows . Remove button */ ul.field-group.multi-line.large li button.remove { height: 24px !important; width: 24px !important; margin: -42px 18px 0px 0px; font-size: 14px !important; } /* Multi-line . Large . Controls */ /* Multi-line . Large . Controls . Link */ ul.field-group.multi-line.large .controls a { line-height: 24px !important; } /* Multi-line . Large . Controls . Buttons */ ul.field-group.multi-line.large .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Large */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.large .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Large */ /* Multi-line . Floating . Large . Rows */ ul.field-group.multi-line.floating.large li { margin-bottom: 10px; } /* Multi-line . Combined . Large */ /* Multi-line . Combined . Large . Textfield */ ul.field-group.multi-line.combined.large li .textfield{ padding: 0px !important; } /* Huge */ /* Multi-line . Huge */ /* Multi-line . Huge . Rows */ /* Multi-line . Huge . Rows . Textfield */ ul.field-group.multi-line.huge li .textfield { padding-right: 68px !important; } /* Multi-line . Huge . Rows . Remove button */ ul.field-group.multi-line.huge li button.remove { height: 24px !important; width: 24px !important; margin: -49px 24px 0px 0px; font-size: 14px !important; } /* Multi-line . Huge . Controls */ /* Multi-line . Huge . Controls . Link */ ul.field-group.multi-line.huge .controls a { line-height: 24px !important; } /* Multi-line . Huge . Controls . Buttons */ ul.field-group.multi-line.huge .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Huge */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.huge .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Huge */ /* Multi-line . Floating . Huge . Rows */ ul.field-group.multi-line.floating.huge li { margin-bottom: 12px; } /* Multi-line . Combined . Huge */ /* Multi-line . Combined . Huge . Textfield */ ul.field-group.multi-line.combined.huge li .textfield{ padding: 0px !important; } } /* Field Groups . Multi-line . Medium screens */ @media (min-width: 990px) { /* Default */ /* Multi-line . Default */ /* Multi-line . Default . Rows */ /* Multi-line . Default . Rows . Textfield */ ul.field-group.multi-line li .textfield, ul.field-group.multi-line.default li .textfield { padding-right: 38px !important; } /* Multi-line . Default . Rows . Remove button */ ul.field-group.multi-line li button.remove, ul.field-group.multi-line.default li button.remove { height: 24px !important; width: 24px !important; margin: -32px 7px 0px 0px; font-size: 12px !important; } /* Multi-line . Default . Controls */ /* Multi-line . Default . Controls . Link */ ul.field-group.multi-line .controls a, ul.field-group.multi-line.default .controls a { line-height: 24px !important; } /* Multi-line . Default . Controls . Buttons */ ul.field-group.multi-line .controls button, ul.field-group.multi-line.default .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Default */ /* Multi-line . List . Default . Controls */ ul.field-group.multi-line.list .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Default */ /* Multi-line . Floating . Default . Rows */ ul.field-group.multi-line.floating li, ul.field-group.multi-line.floating.default li { margin-bottom: 6px; } /* Multi-line . Combined . Default */ /* Multi-line . Combined . Default . Textfield */ ul.field-group.multi-line.combined li .textfield, ul.field-group.multi-line.combined.default li .textfield { padding: 0px !important; } /* Tiny */ /* Multi-line . Tiny */ /* Multi-line . Tiny . Rows */ /* Multi-line . Tiny . Rows . Textfield */ ul.field-group.multi-line.tiny li .textfield { padding-right: 26px !important; } /* Multi-line . Tiny . Rows . Remove button */ ul.field-group.multi-line.tiny li button.remove { display: inline-block; height: 12px !important; width: 12px !important; margin: -17px 4px 0px 0px; font-size: 8px !important; } /* Multi-line . Tiny . Controls */ /* Multi-line . Tiny . Controls . Link */ ul.field-group.multi-line.tiny .controls a { line-height: 12px !important; } /* Multi-line . Tiny . Controls . Buttons */ ul.field-group.multi-line.tiny .controls button { height: 12px !important; width: 12px !important; font-size: 8px !important; } /* Multi-line . List . Tiny */ /* Multi-line . List . Tiny . Controls */ ul.field-group.multi-line.list.tiny .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Tiny */ /* Multi-line . Floating . Tiny . Rows */ ul.field-group.multi-line.floating.tiny li { margin-bottom: 4px; } /* Multi-line . Combined . Tiny */ /* Multi-line . Combined . Tiny . Textfield */ ul.field-group.multi-line.combined.tiny li .textfield{ padding: 0px !important; } /* Small */ /* Multi-line . Small */ /* Multi-line . Small . Rows */ /* Multi-line . Small . Rows . Textfield */ ul.field-group.multi-line.small li .textfield { padding-right: 33px !important; } /* Multi-line . Small . Rows . Remove button */ ul.field-group.multi-line.small li button.remove { height: 16px !important; width: 16px !important; margin: -24px 7px 0px 0px; font-size: 10px !important; } /* Multi-line . Small . Controls */ /* Multi-line . Small . Controls . Link */ ul.field-group.multi-line.small .controls a { line-height: 16px !important; } /* Multi-line . Small . Controls . Buttons */ ul.field-group.multi-line.small .controls button { height: 16px !important; width: 16px !important; font-size: 12px !important; } /* Multi-line . List . Small */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Small */ /* Multi-line . Floating . Small . Rows */ ul.field-group.multi-line.floating.small li { margin-bottom: 6px; } /* Multi-line . Combined . Small */ /* Multi-line . Combined . Small . Textfield */ ul.field-group.multi-line.combined.small li .textfield{ padding: 0px !important; } /* Medium */ /* Multi-line . Medium */ /* Multi-line . Medium . Rows */ /* Multi-line . Medium . Rows . Textfield */ ul.field-group.multi-line.medium li .textfield { padding-right: 50px !important; } /* Multi-line . Medium . Rows . Remove button */ ul.field-group.multi-line.medium li button.remove { height: 24px !important; width: 24px !important; margin: -38px 13px 0px 0px; font-size: 14px !important; } /* Multi-line . Medium . Controls */ /* Multi-line . Medium . Controls . Link */ ul.field-group.multi-line.medium .controls a { line-height: 24px !important; } /* Multi-line . Medium . Controls . Buttons */ ul.field-group.multi-line.medium .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Medium */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Medium */ /* Multi-line . Floating . Medium . Rows */ ul.field-group.multi-line.medium.floating li { margin-bottom: 8px; } /* Multi-line . Combined . Medium */ /* Multi-line . Combined . Medium . Textfield */ ul.field-group.multi-line.combined.medium li .textfield{ padding: 0px !important; } /* Large */ /* Multi-line . Large */ /* Multi-line . Large . Rows */ /* Multi-line . Large . Rows . Textfield */ ul.field-group.multi-line.large li .textfield { padding-right: 60px !important; } /* Multi-line . Large . Rows . Remove button */ ul.field-group.multi-line.large li button.remove { height: 24px !important; width: 24px !important; margin: -44px 18px 0px 0px; font-size: 14px !important; } /* Multi-line . Large . Controls */ /* Multi-line . Large . Controls . Link */ ul.field-group.multi-line.large .controls a { line-height: 24px !important; } /* Multi-line . Large . Controls . Buttons */ ul.field-group.multi-line.large .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Large */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.large .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Large */ /* Multi-line . Floating . Large . Rows */ ul.field-group.multi-line.floating.large li { margin-bottom: 10px; } /* Multi-line . Combined . Large */ /* Multi-line . Combined . Large . Textfield */ ul.field-group.multi-line.combined.large li .textfield{ padding: 0px !important; } /* Huge */ /* Multi-line . Huge */ /* Multi-line . Huge . Rows */ /* Multi-line . Huge . Rows . Textfield */ ul.field-group.multi-line.huge li .textfield { padding-right: 80px !important; } /* Multi-line . Huge . Rows . Remove button */ ul.field-group.multi-line.huge li button.remove { height: 24px !important; width: 24px !important; margin: -52px 28px 0px 0px; font-size: 14px !important; } /* Multi-line . Huge . Controls */ /* Multi-line . Huge . Controls . Link */ ul.field-group.multi-line.huge .controls a { line-height: 24px !important; } /* Multi-line . Huge . Controls . Buttons */ ul.field-group.multi-line.huge .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Huge */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.huge .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Huge */ /* Multi-line . Floating . Huge . Rows */ ul.field-group.multi-line.floating.huge li { margin-bottom: 12px; } /* Multi-line . Combined . Huge */ /* Multi-line . Combined . Huge . Textfield */ ul.field-group.multi-line.combined.huge li .textfield{ padding: 0px !important; } } /* Field Groups . Multi-line . Large screens */ @media (min-width: 1200px) { /* Default */ /* Multi-line . Default */ /* Multi-line . Default . Rows */ /* Multi-line . Default . Rows . Textfield */ ul.field-group.multi-line li .textfield, ul.field-group.multi-line.default li .textfield { padding-right: 46px !important; } /* Multi-line . Default . Rows . Remove button */ ul.field-group.multi-line li button.remove, ul.field-group.multi-line.default li button.remove { height: 24px !important; width: 24px !important; margin: -36px 11px 0px 0px; font-size: 12px !important; } /* Multi-line . Default . Controls */ /* Multi-line . Default . Controls . Link */ ul.field-group.multi-line .controls a, ul.field-group.multi-line.default .controls a { line-height: 24px !important; } /* Multi-line . Default . Controls . Buttons */ ul.field-group.multi-line .controls button, ul.field-group.multi-line.default .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Default */ /* Multi-line . List . Default . Controls */ ul.field-group.multi-line.list .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Default */ /* Multi-line . Floating . Default . Rows */ ul.field-group.multi-line.floating li, ul.field-group.multi-line.floating.default li { margin-bottom: 6px; } /* Multi-line . Combined . Default */ /* Multi-line . Combined . Default . Textfield */ ul.field-group.multi-line.combined li .textfield, ul.field-group.multi-line.combined.default li .textfield{ padding: 0px !important; } /* Tiny */ /* Multi-line . Tiny */ /* Multi-line . Tiny . Rows */ /* Multi-line . Tiny . Rows . Textfield */ ul.field-group.multi-line.tiny li .textfield { padding-right: 28px !important; } /* Multi-line . Tiny . Rows . Remove button */ ul.field-group.multi-line.tiny li button.remove { display: inline-block; height: 12px !important; width: 12px !important; margin: -16px 5px 0px 0px; font-size: 8px !important; } /* Multi-line . Tiny . Controls */ /* Multi-line . Tiny . Controls . Link */ ul.field-group.multi-line.tiny .controls a { line-height: 12px !important; } /* Multi-line . Tiny . Controls . Buttons */ ul.field-group.multi-line.tiny .controls button { height: 12px !important; width: 12px !important; font-size: 8px !important; } /* Multi-line . List . Tiny */ /* Multi-line . List . Tiny . Controls */ ul.field-group.multi-line.list.tiny .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Tiny */ /* Multi-line . Floating . Tiny . Rows */ ul.field-group.multi-line.tiny.floating li { margin-bottom: 4px; } /* Multi-line . Combined . Tiny */ /* Multi-line . Combined . Tiny . Textfield */ ul.field-group.multi-line.combined.tiny li .textfield{ padding: 0px !important; } /* Small */ /* Multi-line . Small */ /* Multi-line . Small . Rows */ /* Multi-line . Small . Rows . Textfield */ ul.field-group.multi-line.small li .textfield { padding-right: 34px !important; } /* Multi-line . Small . Rows . Remove button */ ul.field-group.multi-line.small li button.remove { height: 16px !important; width: 16px !important; margin: -24px 8px 0px 0px; font-size: 10px !important; } /* Multi-line . Small . Controls */ /* Multi-line . Small . Controls . Link */ ul.field-group.multi-line.small .controls a { line-height: 16px !important; } /* Multi-line . Small . Controls . Buttons */ ul.field-group.multi-line.small .controls button { height: 16px !important; width: 16px !important; font-size: 12px !important; } /* Multi-line . List . Small */ /* Multi-line . List . Small . Controls */ ul.field-group.multi-line.list.small .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Small */ /* Multi-line . Floating . Small . Rows */ ul.field-group.multi-line.floating.small li { margin-bottom: 6px; } /* Multi-line . Combined . Small */ /* Multi-line . Combined . Small . Textfield */ ul.field-group.multi-line.combined.small li .textfield{ padding: 0px !important; } /* Medium */ /* Multi-line . Medium */ /* Multi-line . Medium . Rows */ /* Multi-line . Medium . Rows . Textfield */ ul.field-group.multi-line.medium li .textfield { padding-right: 52px !important; } /* Multi-line . Medium . Rows . Remove button */ ul.field-group.multi-line.medium li button.remove { height: 24px !important; width: 24px !important; margin: -39px 14px 0px 0px; font-size: 14px !important; } /* Multi-line . Medium . Controls */ /* Multi-line . Medium . Controls . Link */ ul.field-group.multi-line.medium .controls a { line-height: 24px !important; } /* Multi-line . Medium . Controls . Buttons */ ul.field-group.multi-line.medium .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Medium */ /* Multi-line . List . Medium . Controls */ ul.field-group.multi-line.list.medium .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Medium */ /* Multi-line . Floating . Medium . Rows */ ul.field-group.multi-line.medium.floating li { margin-bottom: 8px; } /* Multi-line . Combined . Medium */ /* Multi-line . Combined . Medium . Textfield */ ul.field-group.multi-line.combined.medium li .textfield{ padding: 0px !important; } /* Large */ /* Multi-line . Large */ /* Multi-line . Large . Rows */ /* Multi-line . Large . Rows . Textfield */ ul.field-group.multi-line.large li .textfield { padding-right: 63px !important; } /* Multi-line . Large . Rows . Remove button */ ul.field-group.multi-line.large li button.remove { height: 24px !important; width: 24px !important; margin: -44px 19px 0px 0px; font-size: 14px !important; } /* Multi-line . Large . Controls */ /* Multi-line . Large . Controls . Link */ ul.field-group.multi-line.large .controls a { line-height: 24px !important; } /* Multi-line . Large . Controls . Buttons */ ul.field-group.multi-line.large .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Large */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.large .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Large */ /* Multi-line . Floating . Large . Rows */ ul.field-group.multi-line.large.floating li { margin-bottom: 10px; } /* Multi-line . Combined . Large */ /* Multi-line . Combined . Large . Textfield */ ul.field-group.multi-line.combined.large li .textfield{ padding: 0px !important; } /* Huge */ /* Multi-line . Huge */ /* Multi-line . Huge . Rows */ /* Multi-line . Huge . Rows . Textfield */ ul.field-group.multi-line.huge li .textfield { padding-right: 82px !important; } /* Multi-line . Huge . Rows . Remove button */ ul.field-group.multi-line.huge li button.remove { height: 24px !important; width: 24px !important; margin: -55px 30px 0px 0px; font-size: 14px !important; } /* Multi-line . Huge . Controls */ /* Multi-line . Huge . Controls . Link */ ul.field-group.multi-line.huge .controls a { line-height: 24px !important; } /* Multi-line . Huge . Controls . Buttons */ ul.field-group.multi-line.huge .controls button { height: 24px !important; width: 24px !important; font-size: 18px !important; } /* Multi-line . List . Huge */ /* Multi-line . List . Large . Controls */ ul.field-group.multi-line.list.huge .controls { padding: 6px 6px 6px 6px; } /* Multi-line . Floating . Huge */ /* Multi-line . Floating . Huge . Rows */ ul.field-group.multi-line.floating.huge li { margin-bottom: 12px; } /* Multi-line . Combined . Huge */ /* Multi-line . Combined . Huge . Textfield */ ul.field-group.multi-line.combined.huge li .textfield{ padding: 0px !important; } } /* Field Groups . Multi-language */ ul.field-group.readonly.multi-language{ border-color: transparent; } ul.field-group.multi-language li.pt{ background: transparent url(images/language-marker-pt.png) left center no-repeat; } ul.field-group.multi-language li.en{ background: transparent url(images/language-marker-en.png) left center no-repeat; } ul.field-group.multi-language li.es{ background: transparent url(images/language-marker-es.png) left center no-repeat; } ul.field-group.multi-language li.fr{ background: transparent url(images/language-marker-fr.png) left center no-repeat; } ul.field-group.multi-language li.de{ background: transparent url(images/language-marker-de.png) left center no-repeat; } ul.field-group.multi-language li .textfield { padding-right: 30px !important; text-indent: 24px; box-shadow: 0px 0px 0px; border: none; border-bottom: 1px dashed #DDDDDD; background-color: transparent; } ul.field-group.readonly.multi-language li .textfield{ border-bottom-color: transparent; } ul.field-group.multi-language li:last-child .textfield{ border-bottom: none; } ul.field-group.multi-language li .language_marker { display: block; float: right; margin: -16px 6px 0px 0px; font-size: 10px; text-transform: uppercase; color: #939598; opacity: 0.5; } /* Field Groups . Multi-line table */ .field-block .field-spacer{ line-height: 28px; height: 28px; text-align: center; } .field-block .field-spacer.field-spacer-extra-small{ width: 2px; } .field-block .field-spacer.field-spacer-small{ width: 6px; } .field-block .field-spacer.field-spacer-medium{ width: 10px; } .field-block .field-spacer.field-spacer-large{ width: 16px; } .grid-block .field-block.field-block-inline{ float: left; margin-right: 10px; } .grid-block .field-block.field-block-inline:last-child{ margin-right: 0px; } table.field-block{ width: 100%; border-spacing: 0px; border-collapse: collapse; } table.field-block th, table.field-block td{ padding: 0px; } /* Nesties --------------------------------------- */ .nesty { overflow: auto; } .nesty .templates { display: none; } .nesty container { display: block; overflow: auto; margin-top: 10px; border: 1px solid #dedede; transition: 0.2s all; } .nesty container:hover { border-color: #acacad; } .nesty container container, .nesty container container:hover { border-style: dashed; border-left: 2px solid rgba(0,75,115,1); } .nesty container container:hover { background-color: rgba(255,241,199, 0.1); } .nesty container container container, .nesty container container container:hover { border-left-color: rgba(0,75,115,0.75); } .nesty container container container container, .nesty container container container container { border-left-color: rgba(0,75,115,0.5); } .nesty .block { float: left; display: inline-block; } .nesty container .header { overflow: auto; } .nesty container .header .button { display: inline-block; height: 24px; width: 24px; line-height: 24px; user-select: none; background-position: 0px 0px; background-size: 24px auto; transition: 0.2s all ease-in-out; } .nesty container .header .block.right .button:hover { background-position: 0px -24px; } .nesty container .header .block.left { width: auto; } .nesty container .header .block.left .button { margin: 6px 0px 6px 0px; } .nesty container .header .block.left .button.handle { background-image: url(images/nesty-button-handle.png); cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .nesty container .header .block.center { width: 300px; overflow: auto; } .nesty container .header .block.center .textfield { border: none; box-shadow: none; background-color: transparent; } .nesty container .header .block.right { width: auto; } .nesty container .header .block.left .button, .nesty container .header .block.right .button { opacity: 0.2; } .nesty container:hover > .header > .block.left .button, .nesty container:hover > .header > .block.right .button { opacity: 1; } .nesty container .header .block.right .button { margin: 6px 3px 6px 3px; } .nesty container .header .block.right .button:first-child { margin-left: 6px; } .nesty container .header .block.right .button:last-child { margin-right: 6px; } .nesty container .header .block.right .button.duplicate { background-image: url(images/nesty-button-duplicate.png); } .nesty container .header .block.right .button.delete { background-image: url(images/nesty-button-minus.png); } .nesty container .body { margin: 10px; } .nesty container .footer { background-color: yellow; } .nesty .footer .block.left, .nesty container .footer .block.left { margin: 10px 0px 10px 10px; } .nesty .button.create { height: 24px; padding-left: 26px; line-height: 24px;; background-image: url(images/nesty-button-plus.png); background-position: 0px 0px; background-size: 24px auto; background-repeat: no-repeat; } .nesty .button.create:hover { background-position: 0px -24px; } .ui-sortable-placeholder { border: 1px dashed #f5b5a9 !important; background-color: #fff6f6; min-height: 64px; } .ui-sortable-helper { background-color: rgba(255,255,255,0.6); } /* Windows --------------------------------------- */ .window{ position: absolute; background-color: #FFFFFF; border: 1px solid #CCC; box-shadow: 0px 0px 6px #CCCCCC; -moz-box-shadow: 0px 0px 6px #CCCCCC; -webkit-box-shadow: 0px 0px 6px #CCCCCC; } .window-header{ height: 16px; padding: 10px 10px 10px 10px; } .window-header .window-title{ float: left; margin: 0px; font-size: 15px; font-weight: bold; color: #134661; } .window-close-button{ float: right; height: 16px; width: 16px; background: transparent url(images/button-x.png) center top no-repeat; cursor: pointer; } .window-close-button:hover{ background-position: center -16px; } .window-content{ padding: 20px; } .window-footer{ padding: 16px; background: transparent url(images/window-footer-background.png) left top no-repeat; } .window-footer .button{ float: right; } /* Floaters -------------------------------------- */ .floater_tpl { display: none; } .floater { float: left; position: fixed; height: 0px; width: 0px; background-color: #999999; overflow: hidden; z-index: 99999999999; } .floater.top { top: 0px; left: 0px; margin: 0px auto 0px auto; } .floater.right { top: 0px; right: 0px; } .floater.bottom { bottom: 0px; left: 0px; margin: 0px auto 0px auto; } .floater.left { top: 0px; left: 0px; } .floater.middle { top: 0px; left: 0px; } /* Cards */ .card { border: 1px solid #e6e7e8; transition: 0.2s all ease-in-out; } .card:hover { border-color: #939598; } .card.dummy, .card.dummy:hover { background-color: #fbfbfb; border-color: transparent; } .card.dummy * { font-family: PaperIcons !important; color: #f5f5f6; } .card.dummy input { border-color: #f5f5f6; background-color: #fbfbfb; } .card.dummy .button { opacity: 1 !important; background-color: #f5f5f6 !important; } .card.dummy .button span { color: #fbfbfb !important; }