/* ========== Color Palettes ========== */ /* colors.scss */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mddtp-button { height: 36px; min-width: 64px; border: none; background-color: transparent; border-radius: 3px; display: inline-block; padding: 0 8px; margin-right: 8px; font-family: "Roboto", "Helvetica", "Arial", sans-serif !important; font-size: 15px; text-transform: uppercase; outline: none; cursor: pointer; color: #3f51b5; -webkit-appearance: button; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .mddtp-button:hover, .mddtp-button:focus { background-color: #e0e0e0; } .mddtp-button:active { background-color: #bdbdbd; } .mddtp-button:disabled { color: rgba(0, 0, 0, 0.26); cursor: not-allowed; } .mddtp-picker.mddtp-picker-time { width: 290px; } .mddtp-picker.mddtp-picker-date { width: 310px; } .mddtp-picker { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); font-family: "Roboto", "Helvetica", "Arial", sans-serif !important; position: fixed; right: 0; left: 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; display: table; border-radius: 3px; line-height: normal; overflow: hidden; z-index: 99999; } .mddtp-picker .mddtp-picker__header { width: 100px; background-color: #3f51b5; padding: 24px 24px 20px; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title { color: rgba(255, 255, 255, 0.7); font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 28px; font-weight: 700; } .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle { font-weight: 400; font-size: 16px; line-height: 20px; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle { color: rgba(255, 255, 255, 0.7); margin: 0; cursor: pointer; } .mddtp-picker .mddtp-picker__header .mddtp-picker__color--active { color: white; } .mddtp-picker .mddtp-picker__body { position: relative; background-color: #fff; } .mddtp-picker .mddtp-picker__body .mddtp-picker__action { margin-top: 24px; padding: 8px 0; text-align: right; } .mddtp-picker .mddtp-picker__header, .mddtp-picker .mddtp-picker__body { display: table-cell; vertical-align: top; height: 100%; } .mddtp-picker-date .mddtp-picker__left { background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZ2JhKDAsMCwwLDAuNykiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik0xNS40MSAxNi4wOWwtNC41OC00LjU5IDQuNTgtNC41OUwxNCA1LjVsLTYgNiA2IDZ6Ii8+DQogICAgPHBhdGggZD0iTTAtLjVoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4NCjwvc3ZnPg0K); left: 4px; } .mddtp-picker-date .mddtp-picker__right { background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZ2JhKDAsMCwwLDAuNykiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik04LjU5IDE2LjM0bDQuNTgtNC41OS00LjU4LTQuNTlMMTAgNS43NWw2IDYtNiA2eiIvPg0KICAgIDxwYXRoIGQ9Ik0wLS4yNWgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPg0KPC9zdmc+DQo=); right: 4px; } .mddtp-picker-date .mddtp-picker__left, .mddtp-picker-date .mddtp-picker__right { position: absolute; background-repeat: no-repeat; background-position: center; margin: 0; height: 48px; width: 48px; min-width: 48px; top: 4px; border-radius: 50%; } .mddtp-picker-date .mddtp-picker__left:hover, .mddtp-picker-date .mddtp-picker__left:hover, .mddtp-picker-date .mddtp-picker__left:focus, .mddtp-picker-date .mddtp-picker__left:focus, .mddtp-picker-date .mddtp-picker__right:hover, .mddtp-picker-date .mddtp-picker__right:hover, .mddtp-picker-date .mddtp-picker__right:focus, .mddtp-picker-date .mddtp-picker__right:focus { background-color: #e0e0e0; } .mddtp-picker-date .mddtp-picker__left:active, .mddtp-picker-date .mddtp-picker__left:active, .mddtp-picker-date .mddtp-picker__right:active, .mddtp-picker-date .mddtp-picker__right:active { background-color: #bdbdbd; } .mddtp-picker-date .mddtp-picker__left:disabled, .mddtp-picker-date .mddtp-picker__left:disabled, .mddtp-picker-date .mddtp-picker__right:disabled, .mddtp-picker-date .mddtp-picker__right:disabled { background-repeat: no-repeat; background-position: center; } .mddtp-picker-date .mddtp-picker__left:disabled { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZ2JhKDAsMCwwLDAuMjYpIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTUuNDEgMTYuMDlsLTQuNTgtNC41OSA0LjU4LTQuNTlMMTQgNS41bC02IDYgNiA2eiIvPg0KICAgIDxwYXRoIGQ9Ik0wLS41aDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQo8L3N2Zz4NCg==); } .mddtp-picker-date .mddtp-picker__right:disabled { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZ2JhKDAsMCwwLDAuMjYpIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz4NCiAgICA8cGF0aCBkPSJNMC0uMjVoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4NCjwvc3ZnPg0K); } .mddtp-picker__body .mddtp-picker__viewHolder { width: 314px; overflow: hidden; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__views { list-style: none; margin: 0; padding: 0; font-size: 0; width: 2000px; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view { display: inline-block; width: 314px; text-align: center; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transition: 0.3s cubic-bezier(0.42, 0, 0.58, 1); } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view .mddtp-picker__month { display: inline-block; padding: 18px; font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.87); } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--left { -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--right { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__view--pause { transition: none; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid { padding: 8px 14px 0; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span { display: inline-block; font-size: 13px; margin: 2px; color: rgba(0, 0, 0, 0.87); border-radius: 50%; width: 36px; height: 36px; line-height: 36px; vertical-align: middle; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span.mddtp-picker__cell--today { color: #3f51b5; font-weight: 600; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span.mddtp-picker__cell--selected, .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr span.mddtp-picker__cell:hover { background-color: #3f51b5; color: #fff; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span.mddtp-picker__cell--disabled { color: rgba(0, 0, 0, 0.26); cursor: not-allowed; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr { padding: 2px 0; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr .mddtp-picker__cell { pointer-events: all; cursor: pointer; } .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__th span { color: rgba(0, 0, 0, 0.54); } .mddtp-picker__years { position: absolute; left: 0; top: 0; list-style: none; margin: 0; padding: 0; width: 100%; height: calc(100% - 52px); text-align: center; overflow: auto; } .mddtp-picker__years li { font-size: 16px; padding: 8px 0; color: rgba(0, 0, 0, 0.87); cursor: pointer; } .mddtp-picker__years .mddtp-picker__li--current { font-size: 21px; color: #3f51b5; } .mddtp-picker__years--invisible { display: none; } .mddtp-picker-time .mddtp-picker__header { vertical-align: middle; width: 125px; } .mddtp-picker-time .mddtp-picker__header .mddtp-picker__title { text-align: right; font-size: 0; } .mddtp-picker-time .mddtp-picker__header .mddtp-picker__title span { font-size: 45px; font-weight: 400; line-height: 48px; margin: 0 2px; } .mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle { margin-top: 8px; text-align: center; } .mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle div { margin-top: 2px; } .mddtp-picker__circularHolder { position: relative; width: 250px; height: 250px; margin: 20px; border-radius: 50%; background-color: #eeeeee; } .mddtp-picker__circularView { position: absolute; width: 100%; height: 100%; } .mddtp-picker__circularView .mddtp-picker__cell { position: absolute; width: 50%; top: calc(50% - 18px); left: 50%; text-align: right; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .mddtp-picker__circularView .mddtp-picker__cell span { display: inline-block; cursor: pointer; font-size: 13px; color: rgba(0, 0, 0, 0.87); border-radius: 50%; width: 36px; height: 36px; line-height: 36px; text-align: center; margin-right: 8px; } .mddtp-picker__circularView .mddtp-picker__cell--selected span, .mddtp-picker__circularView .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr .mddtp-picker__cell:hover span, .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr .mddtp-picker__circularView .mddtp-picker__cell:hover span { color: #fff; } .mddtp-picker__circularView--hidden { display: none; } .mddtp-picker__circle--fake { position: absolute; border-radius: 50%; height: 36px; width: 36px; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -webkit-grab; } .mddtp-picker__circle--fake.is-pointer-down, .mddtp-picker__circle--fake:active { cursor: grabbing; cursor: -webkit-grabbing; } .mddtp-picker__selection { position: absolute; left: 50%; top: calc(50% - 18px); width: 50%; font-size: 0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; transition: 0.3s cubic-bezier(0.42, 0, 0.58, 1); } .mddtp-picker__selection span { display: inline-block; background-color: #3f51b5; height: 2px; vertical-align: middle; } .mddtp-picker__selection span.mddtp-picker__dot { width: 8px; height: 8px; border-radius: 50%; } .mddtp-picker__selection span.mddtp-picker__line { width: calc(100% - 52px); } .mddtp-picker__selection span.mddtp-picker__circle { border-radius: 50%; height: 36px; width: 36px; } .mddtp-picker__selection--quick { transition: none; } .mddtp-picker__cell--rotate-1 { -webkit-transform: rotate(-87deg); -ms-transform: rotate(-87deg); transform: rotate(-87deg); } .mddtp-picker__cell--rotate-1 span:not(.mddtp-picker__line) { -webkit-transform: rotate(87deg); -ms-transform: rotate(87deg); transform: rotate(87deg); } .mddtp-picker__cell--rotate-2 { -webkit-transform: rotate(-84deg); -ms-transform: rotate(-84deg); transform: rotate(-84deg); } .mddtp-picker__cell--rotate-2 span:not(.mddtp-picker__line) { -webkit-transform: rotate(84deg); -ms-transform: rotate(84deg); transform: rotate(84deg); } .mddtp-picker__cell--rotate-3 { -webkit-transform: rotate(-81deg); -ms-transform: rotate(-81deg); transform: rotate(-81deg); } .mddtp-picker__cell--rotate-3 span:not(.mddtp-picker__line) { -webkit-transform: rotate(81deg); -ms-transform: rotate(81deg); transform: rotate(81deg); } .mddtp-picker__cell--rotate-4 { -webkit-transform: rotate(-78deg); -ms-transform: rotate(-78deg); transform: rotate(-78deg); } .mddtp-picker__cell--rotate-4 span:not(.mddtp-picker__line) { -webkit-transform: rotate(78deg); -ms-transform: rotate(78deg); transform: rotate(78deg); } .mddtp-picker__cell--rotate-5 { -webkit-transform: rotate(-75deg); -ms-transform: rotate(-75deg); transform: rotate(-75deg); } .mddtp-picker__cell--rotate-5 span:not(.mddtp-picker__line) { -webkit-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg); } .mddtp-picker__cell--rotate-6 { -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); transform: rotate(-72deg); } .mddtp-picker__cell--rotate-6 span:not(.mddtp-picker__line) { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); transform: rotate(72deg); } .mddtp-picker__cell--rotate-7 { -webkit-transform: rotate(-69deg); -ms-transform: rotate(-69deg); transform: rotate(-69deg); } .mddtp-picker__cell--rotate-7 span:not(.mddtp-picker__line) { -webkit-transform: rotate(69deg); -ms-transform: rotate(69deg); transform: rotate(69deg); } .mddtp-picker__cell--rotate-8 { -webkit-transform: rotate(-66deg); -ms-transform: rotate(-66deg); transform: rotate(-66deg); } .mddtp-picker__cell--rotate-8 span:not(.mddtp-picker__line) { -webkit-transform: rotate(66deg); -ms-transform: rotate(66deg); transform: rotate(66deg); } .mddtp-picker__cell--rotate-9 { -webkit-transform: rotate(-63deg); -ms-transform: rotate(-63deg); transform: rotate(-63deg); } .mddtp-picker__cell--rotate-9 span:not(.mddtp-picker__line) { -webkit-transform: rotate(63deg); -ms-transform: rotate(63deg); transform: rotate(63deg); } .mddtp-picker__cell--rotate-10 { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); } .mddtp-picker__cell--rotate-10 span:not(.mddtp-picker__line) { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .mddtp-picker__cell--rotate-11 { -webkit-transform: rotate(-57deg); -ms-transform: rotate(-57deg); transform: rotate(-57deg); } .mddtp-picker__cell--rotate-11 span:not(.mddtp-picker__line) { -webkit-transform: rotate(57deg); -ms-transform: rotate(57deg); transform: rotate(57deg); } .mddtp-picker__cell--rotate-12 { -webkit-transform: rotate(-54deg); -ms-transform: rotate(-54deg); transform: rotate(-54deg); } .mddtp-picker__cell--rotate-12 span:not(.mddtp-picker__line) { -webkit-transform: rotate(54deg); -ms-transform: rotate(54deg); transform: rotate(54deg); } .mddtp-picker__cell--rotate-13 { -webkit-transform: rotate(-51deg); -ms-transform: rotate(-51deg); transform: rotate(-51deg); } .mddtp-picker__cell--rotate-13 span:not(.mddtp-picker__line) { -webkit-transform: rotate(51deg); -ms-transform: rotate(51deg); transform: rotate(51deg); } .mddtp-picker__cell--rotate-14 { -webkit-transform: rotate(-48deg); -ms-transform: rotate(-48deg); transform: rotate(-48deg); } .mddtp-picker__cell--rotate-14 span:not(.mddtp-picker__line) { -webkit-transform: rotate(48deg); -ms-transform: rotate(48deg); transform: rotate(48deg); } .mddtp-picker__cell--rotate-15 { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mddtp-picker__cell--rotate-15 span:not(.mddtp-picker__line) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mddtp-picker__cell--rotate-16 { -webkit-transform: rotate(-42deg); -ms-transform: rotate(-42deg); transform: rotate(-42deg); } .mddtp-picker__cell--rotate-16 span:not(.mddtp-picker__line) { -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg); } .mddtp-picker__cell--rotate-17 { -webkit-transform: rotate(-39deg); -ms-transform: rotate(-39deg); transform: rotate(-39deg); } .mddtp-picker__cell--rotate-17 span:not(.mddtp-picker__line) { -webkit-transform: rotate(39deg); -ms-transform: rotate(39deg); transform: rotate(39deg); } .mddtp-picker__cell--rotate-18 { -webkit-transform: rotate(-36deg); -ms-transform: rotate(-36deg); transform: rotate(-36deg); } .mddtp-picker__cell--rotate-18 span:not(.mddtp-picker__line) { -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); transform: rotate(36deg); } .mddtp-picker__cell--rotate-19 { -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); transform: rotate(-33deg); } .mddtp-picker__cell--rotate-19 span:not(.mddtp-picker__line) { -webkit-transform: rotate(33deg); -ms-transform: rotate(33deg); transform: rotate(33deg); } .mddtp-picker__cell--rotate-20 { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } .mddtp-picker__cell--rotate-20 span:not(.mddtp-picker__line) { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .mddtp-picker__cell--rotate-21 { -webkit-transform: rotate(-27deg); -ms-transform: rotate(-27deg); transform: rotate(-27deg); } .mddtp-picker__cell--rotate-21 span:not(.mddtp-picker__line) { -webkit-transform: rotate(27deg); -ms-transform: rotate(27deg); transform: rotate(27deg); } .mddtp-picker__cell--rotate-22 { -webkit-transform: rotate(-24deg); -ms-transform: rotate(-24deg); transform: rotate(-24deg); } .mddtp-picker__cell--rotate-22 span:not(.mddtp-picker__line) { -webkit-transform: rotate(24deg); -ms-transform: rotate(24deg); transform: rotate(24deg); } .mddtp-picker__cell--rotate-23 { -webkit-transform: rotate(-21deg); -ms-transform: rotate(-21deg); transform: rotate(-21deg); } .mddtp-picker__cell--rotate-23 span:not(.mddtp-picker__line) { -webkit-transform: rotate(21deg); -ms-transform: rotate(21deg); transform: rotate(21deg); } .mddtp-picker__cell--rotate-24 { -webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg); } .mddtp-picker__cell--rotate-24 span:not(.mddtp-picker__line) { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg); } .mddtp-picker__cell--rotate-25 { -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); } .mddtp-picker__cell--rotate-25 span:not(.mddtp-picker__line) { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } .mddtp-picker__cell--rotate-26 { -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg); } .mddtp-picker__cell--rotate-26 span:not(.mddtp-picker__line) { -webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg); } .mddtp-picker__cell--rotate-27 { -webkit-transform: rotate(-9deg); -ms-transform: rotate(-9deg); transform: rotate(-9deg); } .mddtp-picker__cell--rotate-27 span:not(.mddtp-picker__line) { -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); } .mddtp-picker__cell--rotate-28 { -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); } .mddtp-picker__cell--rotate-28 span:not(.mddtp-picker__line) { -webkit-transform: rotate(6deg); -ms-transform: rotate(6deg); transform: rotate(6deg); } .mddtp-picker__cell--rotate-29 { -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .mddtp-picker__cell--rotate-29 span:not(.mddtp-picker__line) { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } .mddtp-picker__cell--rotate-30 { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .mddtp-picker__cell--rotate-30 span:not(.mddtp-picker__line) { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .mddtp-picker__cell--rotate-31 { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } .mddtp-picker__cell--rotate-31 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .mddtp-picker__cell--rotate-32 { -webkit-transform: rotate(6deg); -ms-transform: rotate(6deg); transform: rotate(6deg); } .mddtp-picker__cell--rotate-32 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); } .mddtp-picker__cell--rotate-33 { -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); } .mddtp-picker__cell--rotate-33 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-9deg); -ms-transform: rotate(-9deg); transform: rotate(-9deg); } .mddtp-picker__cell--rotate-34 { -webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg); } .mddtp-picker__cell--rotate-34 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg); } .mddtp-picker__cell--rotate-35 { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } .mddtp-picker__cell--rotate-35 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); } .mddtp-picker__cell--rotate-36 { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg); } .mddtp-picker__cell--rotate-36 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg); } .mddtp-picker__cell--rotate-37 { -webkit-transform: rotate(21deg); -ms-transform: rotate(21deg); transform: rotate(21deg); } .mddtp-picker__cell--rotate-37 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-21deg); -ms-transform: rotate(-21deg); transform: rotate(-21deg); } .mddtp-picker__cell--rotate-38 { -webkit-transform: rotate(24deg); -ms-transform: rotate(24deg); transform: rotate(24deg); } .mddtp-picker__cell--rotate-38 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-24deg); -ms-transform: rotate(-24deg); transform: rotate(-24deg); } .mddtp-picker__cell--rotate-39 { -webkit-transform: rotate(27deg); -ms-transform: rotate(27deg); transform: rotate(27deg); } .mddtp-picker__cell--rotate-39 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-27deg); -ms-transform: rotate(-27deg); transform: rotate(-27deg); } .mddtp-picker__cell--rotate-40 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .mddtp-picker__cell--rotate-40 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } .mddtp-picker__cell--rotate-41 { -webkit-transform: rotate(33deg); -ms-transform: rotate(33deg); transform: rotate(33deg); } .mddtp-picker__cell--rotate-41 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); transform: rotate(-33deg); } .mddtp-picker__cell--rotate-42 { -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); transform: rotate(36deg); } .mddtp-picker__cell--rotate-42 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-36deg); -ms-transform: rotate(-36deg); transform: rotate(-36deg); } .mddtp-picker__cell--rotate-43 { -webkit-transform: rotate(39deg); -ms-transform: rotate(39deg); transform: rotate(39deg); } .mddtp-picker__cell--rotate-43 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-39deg); -ms-transform: rotate(-39deg); transform: rotate(-39deg); } .mddtp-picker__cell--rotate-44 { -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg); } .mddtp-picker__cell--rotate-44 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-42deg); -ms-transform: rotate(-42deg); transform: rotate(-42deg); } .mddtp-picker__cell--rotate-45 { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mddtp-picker__cell--rotate-45 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mddtp-picker__cell--rotate-46 { -webkit-transform: rotate(48deg); -ms-transform: rotate(48deg); transform: rotate(48deg); } .mddtp-picker__cell--rotate-46 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-48deg); -ms-transform: rotate(-48deg); transform: rotate(-48deg); } .mddtp-picker__cell--rotate-47 { -webkit-transform: rotate(51deg); -ms-transform: rotate(51deg); transform: rotate(51deg); } .mddtp-picker__cell--rotate-47 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-51deg); -ms-transform: rotate(-51deg); transform: rotate(-51deg); } .mddtp-picker__cell--rotate-48 { -webkit-transform: rotate(54deg); -ms-transform: rotate(54deg); transform: rotate(54deg); } .mddtp-picker__cell--rotate-48 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-54deg); -ms-transform: rotate(-54deg); transform: rotate(-54deg); } .mddtp-picker__cell--rotate-49 { -webkit-transform: rotate(57deg); -ms-transform: rotate(57deg); transform: rotate(57deg); } .mddtp-picker__cell--rotate-49 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-57deg); -ms-transform: rotate(-57deg); transform: rotate(-57deg); } .mddtp-picker__cell--rotate-50 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .mddtp-picker__cell--rotate-50 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); } .mddtp-picker__cell--rotate-51 { -webkit-transform: rotate(63deg); -ms-transform: rotate(63deg); transform: rotate(63deg); } .mddtp-picker__cell--rotate-51 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-63deg); -ms-transform: rotate(-63deg); transform: rotate(-63deg); } .mddtp-picker__cell--rotate-52 { -webkit-transform: rotate(66deg); -ms-transform: rotate(66deg); transform: rotate(66deg); } .mddtp-picker__cell--rotate-52 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-66deg); -ms-transform: rotate(-66deg); transform: rotate(-66deg); } .mddtp-picker__cell--rotate-53 { -webkit-transform: rotate(69deg); -ms-transform: rotate(69deg); transform: rotate(69deg); } .mddtp-picker__cell--rotate-53 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-69deg); -ms-transform: rotate(-69deg); transform: rotate(-69deg); } .mddtp-picker__cell--rotate-54 { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); transform: rotate(72deg); } .mddtp-picker__cell--rotate-54 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); transform: rotate(-72deg); } .mddtp-picker__cell--rotate-55 { -webkit-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg); } .mddtp-picker__cell--rotate-55 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-75deg); -ms-transform: rotate(-75deg); transform: rotate(-75deg); } .mddtp-picker__cell--rotate-56 { -webkit-transform: rotate(78deg); -ms-transform: rotate(78deg); transform: rotate(78deg); } .mddtp-picker__cell--rotate-56 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-78deg); -ms-transform: rotate(-78deg); transform: rotate(-78deg); } .mddtp-picker__cell--rotate-57 { -webkit-transform: rotate(81deg); -ms-transform: rotate(81deg); transform: rotate(81deg); } .mddtp-picker__cell--rotate-57 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-81deg); -ms-transform: rotate(-81deg); transform: rotate(-81deg); } .mddtp-picker__cell--rotate-58 { -webkit-transform: rotate(84deg); -ms-transform: rotate(84deg); transform: rotate(84deg); } .mddtp-picker__cell--rotate-58 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-84deg); -ms-transform: rotate(-84deg); transform: rotate(-84deg); } .mddtp-picker__cell--rotate-59 { -webkit-transform: rotate(87deg); -ms-transform: rotate(87deg); transform: rotate(87deg); } .mddtp-picker__cell--rotate-59 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-87deg); -ms-transform: rotate(-87deg); transform: rotate(-87deg); } .mddtp-picker__cell--rotate-60 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .mddtp-picker__cell--rotate-60 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .mddtp-picker__cell--rotate-61 { -webkit-transform: rotate(93deg); -ms-transform: rotate(93deg); transform: rotate(93deg); } .mddtp-picker__cell--rotate-61 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-93deg); -ms-transform: rotate(-93deg); transform: rotate(-93deg); } .mddtp-picker__cell--rotate-62 { -webkit-transform: rotate(96deg); -ms-transform: rotate(96deg); transform: rotate(96deg); } .mddtp-picker__cell--rotate-62 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-96deg); -ms-transform: rotate(-96deg); transform: rotate(-96deg); } .mddtp-picker__cell--rotate-63 { -webkit-transform: rotate(99deg); -ms-transform: rotate(99deg); transform: rotate(99deg); } .mddtp-picker__cell--rotate-63 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-99deg); -ms-transform: rotate(-99deg); transform: rotate(-99deg); } .mddtp-picker__cell--rotate-64 { -webkit-transform: rotate(102deg); -ms-transform: rotate(102deg); transform: rotate(102deg); } .mddtp-picker__cell--rotate-64 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-102deg); -ms-transform: rotate(-102deg); transform: rotate(-102deg); } .mddtp-picker__cell--rotate-65 { -webkit-transform: rotate(105deg); -ms-transform: rotate(105deg); transform: rotate(105deg); } .mddtp-picker__cell--rotate-65 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-105deg); -ms-transform: rotate(-105deg); transform: rotate(-105deg); } .mddtp-picker__cell--rotate-66 { -webkit-transform: rotate(108deg); -ms-transform: rotate(108deg); transform: rotate(108deg); } .mddtp-picker__cell--rotate-66 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-108deg); -ms-transform: rotate(-108deg); transform: rotate(-108deg); } .mddtp-picker__cell--rotate-67 { -webkit-transform: rotate(111deg); -ms-transform: rotate(111deg); transform: rotate(111deg); } .mddtp-picker__cell--rotate-67 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-111deg); -ms-transform: rotate(-111deg); transform: rotate(-111deg); } .mddtp-picker__cell--rotate-68 { -webkit-transform: rotate(114deg); -ms-transform: rotate(114deg); transform: rotate(114deg); } .mddtp-picker__cell--rotate-68 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-114deg); -ms-transform: rotate(-114deg); transform: rotate(-114deg); } .mddtp-picker__cell--rotate-69 { -webkit-transform: rotate(117deg); -ms-transform: rotate(117deg); transform: rotate(117deg); } .mddtp-picker__cell--rotate-69 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-117deg); -ms-transform: rotate(-117deg); transform: rotate(-117deg); } .mddtp-picker__cell--rotate-70 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .mddtp-picker__cell--rotate-70 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } .mddtp-picker__cell--rotate-71 { -webkit-transform: rotate(123deg); -ms-transform: rotate(123deg); transform: rotate(123deg); } .mddtp-picker__cell--rotate-71 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-123deg); -ms-transform: rotate(-123deg); transform: rotate(-123deg); } .mddtp-picker__cell--rotate-72 { -webkit-transform: rotate(126deg); -ms-transform: rotate(126deg); transform: rotate(126deg); } .mddtp-picker__cell--rotate-72 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-126deg); -ms-transform: rotate(-126deg); transform: rotate(-126deg); } .mddtp-picker__cell--rotate-73 { -webkit-transform: rotate(129deg); -ms-transform: rotate(129deg); transform: rotate(129deg); } .mddtp-picker__cell--rotate-73 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-129deg); -ms-transform: rotate(-129deg); transform: rotate(-129deg); } .mddtp-picker__cell--rotate-74 { -webkit-transform: rotate(132deg); -ms-transform: rotate(132deg); transform: rotate(132deg); } .mddtp-picker__cell--rotate-74 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-132deg); -ms-transform: rotate(-132deg); transform: rotate(-132deg); } .mddtp-picker__cell--rotate-75 { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .mddtp-picker__cell--rotate-75 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .mddtp-picker__cell--rotate-76 { -webkit-transform: rotate(138deg); -ms-transform: rotate(138deg); transform: rotate(138deg); } .mddtp-picker__cell--rotate-76 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-138deg); -ms-transform: rotate(-138deg); transform: rotate(-138deg); } .mddtp-picker__cell--rotate-77 { -webkit-transform: rotate(141deg); -ms-transform: rotate(141deg); transform: rotate(141deg); } .mddtp-picker__cell--rotate-77 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-141deg); -ms-transform: rotate(-141deg); transform: rotate(-141deg); } .mddtp-picker__cell--rotate-78 { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); } .mddtp-picker__cell--rotate-78 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); transform: rotate(-144deg); } .mddtp-picker__cell--rotate-79 { -webkit-transform: rotate(147deg); -ms-transform: rotate(147deg); transform: rotate(147deg); } .mddtp-picker__cell--rotate-79 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-147deg); -ms-transform: rotate(-147deg); transform: rotate(-147deg); } .mddtp-picker__cell--rotate-80 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .mddtp-picker__cell--rotate-80 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-150deg); -ms-transform: rotate(-150deg); transform: rotate(-150deg); } .mddtp-picker__cell--rotate-81 { -webkit-transform: rotate(153deg); -ms-transform: rotate(153deg); transform: rotate(153deg); } .mddtp-picker__cell--rotate-81 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-153deg); -ms-transform: rotate(-153deg); transform: rotate(-153deg); } .mddtp-picker__cell--rotate-82 { -webkit-transform: rotate(156deg); -ms-transform: rotate(156deg); transform: rotate(156deg); } .mddtp-picker__cell--rotate-82 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-156deg); -ms-transform: rotate(-156deg); transform: rotate(-156deg); } .mddtp-picker__cell--rotate-83 { -webkit-transform: rotate(159deg); -ms-transform: rotate(159deg); transform: rotate(159deg); } .mddtp-picker__cell--rotate-83 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-159deg); -ms-transform: rotate(-159deg); transform: rotate(-159deg); } .mddtp-picker__cell--rotate-84 { -webkit-transform: rotate(162deg); -ms-transform: rotate(162deg); transform: rotate(162deg); } .mddtp-picker__cell--rotate-84 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-162deg); -ms-transform: rotate(-162deg); transform: rotate(-162deg); } .mddtp-picker__cell--rotate-85 { -webkit-transform: rotate(165deg); -ms-transform: rotate(165deg); transform: rotate(165deg); } .mddtp-picker__cell--rotate-85 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-165deg); -ms-transform: rotate(-165deg); transform: rotate(-165deg); } .mddtp-picker__cell--rotate-86 { -webkit-transform: rotate(168deg); -ms-transform: rotate(168deg); transform: rotate(168deg); } .mddtp-picker__cell--rotate-86 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-168deg); -ms-transform: rotate(-168deg); transform: rotate(-168deg); } .mddtp-picker__cell--rotate-87 { -webkit-transform: rotate(171deg); -ms-transform: rotate(171deg); transform: rotate(171deg); } .mddtp-picker__cell--rotate-87 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-171deg); -ms-transform: rotate(-171deg); transform: rotate(-171deg); } .mddtp-picker__cell--rotate-88 { -webkit-transform: rotate(174deg); -ms-transform: rotate(174deg); transform: rotate(174deg); } .mddtp-picker__cell--rotate-88 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-174deg); -ms-transform: rotate(-174deg); transform: rotate(-174deg); } .mddtp-picker__cell--rotate-89 { -webkit-transform: rotate(177deg); -ms-transform: rotate(177deg); transform: rotate(177deg); } .mddtp-picker__cell--rotate-89 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-177deg); -ms-transform: rotate(-177deg); transform: rotate(-177deg); } .mddtp-picker__cell--rotate-90 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .mddtp-picker__cell--rotate-90 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .mddtp-picker__cell--rotate-91 { -webkit-transform: rotate(183deg); -ms-transform: rotate(183deg); transform: rotate(183deg); } .mddtp-picker__cell--rotate-91 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-183deg); -ms-transform: rotate(-183deg); transform: rotate(-183deg); } .mddtp-picker__cell--rotate-92 { -webkit-transform: rotate(186deg); -ms-transform: rotate(186deg); transform: rotate(186deg); } .mddtp-picker__cell--rotate-92 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-186deg); -ms-transform: rotate(-186deg); transform: rotate(-186deg); } .mddtp-picker__cell--rotate-93 { -webkit-transform: rotate(189deg); -ms-transform: rotate(189deg); transform: rotate(189deg); } .mddtp-picker__cell--rotate-93 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-189deg); -ms-transform: rotate(-189deg); transform: rotate(-189deg); } .mddtp-picker__cell--rotate-94 { -webkit-transform: rotate(192deg); -ms-transform: rotate(192deg); transform: rotate(192deg); } .mddtp-picker__cell--rotate-94 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-192deg); -ms-transform: rotate(-192deg); transform: rotate(-192deg); } .mddtp-picker__cell--rotate-95 { -webkit-transform: rotate(195deg); -ms-transform: rotate(195deg); transform: rotate(195deg); } .mddtp-picker__cell--rotate-95 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-195deg); -ms-transform: rotate(-195deg); transform: rotate(-195deg); } .mddtp-picker__cell--rotate-96 { -webkit-transform: rotate(198deg); -ms-transform: rotate(198deg); transform: rotate(198deg); } .mddtp-picker__cell--rotate-96 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-198deg); -ms-transform: rotate(-198deg); transform: rotate(-198deg); } .mddtp-picker__cell--rotate-97 { -webkit-transform: rotate(201deg); -ms-transform: rotate(201deg); transform: rotate(201deg); } .mddtp-picker__cell--rotate-97 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-201deg); -ms-transform: rotate(-201deg); transform: rotate(-201deg); } .mddtp-picker__cell--rotate-98 { -webkit-transform: rotate(204deg); -ms-transform: rotate(204deg); transform: rotate(204deg); } .mddtp-picker__cell--rotate-98 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-204deg); -ms-transform: rotate(-204deg); transform: rotate(-204deg); } .mddtp-picker__cell--rotate-99 { -webkit-transform: rotate(207deg); -ms-transform: rotate(207deg); transform: rotate(207deg); } .mddtp-picker__cell--rotate-99 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-207deg); -ms-transform: rotate(-207deg); transform: rotate(-207deg); } .mddtp-picker__cell--rotate-100 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .mddtp-picker__cell--rotate-100 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-210deg); -ms-transform: rotate(-210deg); transform: rotate(-210deg); } .mddtp-picker__cell--rotate-101 { -webkit-transform: rotate(213deg); -ms-transform: rotate(213deg); transform: rotate(213deg); } .mddtp-picker__cell--rotate-101 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-213deg); -ms-transform: rotate(-213deg); transform: rotate(-213deg); } .mddtp-picker__cell--rotate-102 { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); transform: rotate(216deg); } .mddtp-picker__cell--rotate-102 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-216deg); -ms-transform: rotate(-216deg); transform: rotate(-216deg); } .mddtp-picker__cell--rotate-103 { -webkit-transform: rotate(219deg); -ms-transform: rotate(219deg); transform: rotate(219deg); } .mddtp-picker__cell--rotate-103 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-219deg); -ms-transform: rotate(-219deg); transform: rotate(-219deg); } .mddtp-picker__cell--rotate-104 { -webkit-transform: rotate(222deg); -ms-transform: rotate(222deg); transform: rotate(222deg); } .mddtp-picker__cell--rotate-104 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-222deg); -ms-transform: rotate(-222deg); transform: rotate(-222deg); } .mddtp-picker__cell--rotate-105 { -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .mddtp-picker__cell--rotate-105 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } .mddtp-picker__cell--rotate-106 { -webkit-transform: rotate(228deg); -ms-transform: rotate(228deg); transform: rotate(228deg); } .mddtp-picker__cell--rotate-106 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-228deg); -ms-transform: rotate(-228deg); transform: rotate(-228deg); } .mddtp-picker__cell--rotate-107 { -webkit-transform: rotate(231deg); -ms-transform: rotate(231deg); transform: rotate(231deg); } .mddtp-picker__cell--rotate-107 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-231deg); -ms-transform: rotate(-231deg); transform: rotate(-231deg); } .mddtp-picker__cell--rotate-108 { -webkit-transform: rotate(234deg); -ms-transform: rotate(234deg); transform: rotate(234deg); } .mddtp-picker__cell--rotate-108 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-234deg); -ms-transform: rotate(-234deg); transform: rotate(-234deg); } .mddtp-picker__cell--rotate-109 { -webkit-transform: rotate(237deg); -ms-transform: rotate(237deg); transform: rotate(237deg); } .mddtp-picker__cell--rotate-109 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-237deg); -ms-transform: rotate(-237deg); transform: rotate(-237deg); } .mddtp-picker__cell--rotate-110 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .mddtp-picker__cell--rotate-110 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-240deg); -ms-transform: rotate(-240deg); transform: rotate(-240deg); } .mddtp-picker__cell--rotate-111 { -webkit-transform: rotate(243deg); -ms-transform: rotate(243deg); transform: rotate(243deg); } .mddtp-picker__cell--rotate-111 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-243deg); -ms-transform: rotate(-243deg); transform: rotate(-243deg); } .mddtp-picker__cell--rotate-112 { -webkit-transform: rotate(246deg); -ms-transform: rotate(246deg); transform: rotate(246deg); } .mddtp-picker__cell--rotate-112 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-246deg); -ms-transform: rotate(-246deg); transform: rotate(-246deg); } .mddtp-picker__cell--rotate-113 { -webkit-transform: rotate(249deg); -ms-transform: rotate(249deg); transform: rotate(249deg); } .mddtp-picker__cell--rotate-113 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-249deg); -ms-transform: rotate(-249deg); transform: rotate(-249deg); } .mddtp-picker__cell--rotate-114 { -webkit-transform: rotate(252deg); -ms-transform: rotate(252deg); transform: rotate(252deg); } .mddtp-picker__cell--rotate-114 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-252deg); -ms-transform: rotate(-252deg); transform: rotate(-252deg); } .mddtp-picker__cell--rotate-115 { -webkit-transform: rotate(255deg); -ms-transform: rotate(255deg); transform: rotate(255deg); } .mddtp-picker__cell--rotate-115 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-255deg); -ms-transform: rotate(-255deg); transform: rotate(-255deg); } .mddtp-picker__cell--rotate-116 { -webkit-transform: rotate(258deg); -ms-transform: rotate(258deg); transform: rotate(258deg); } .mddtp-picker__cell--rotate-116 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-258deg); -ms-transform: rotate(-258deg); transform: rotate(-258deg); } .mddtp-picker__cell--rotate-117 { -webkit-transform: rotate(261deg); -ms-transform: rotate(261deg); transform: rotate(261deg); } .mddtp-picker__cell--rotate-117 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-261deg); -ms-transform: rotate(-261deg); transform: rotate(-261deg); } .mddtp-picker__cell--rotate-118 { -webkit-transform: rotate(264deg); -ms-transform: rotate(264deg); transform: rotate(264deg); } .mddtp-picker__cell--rotate-118 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-264deg); -ms-transform: rotate(-264deg); transform: rotate(-264deg); } .mddtp-picker__cell--rotate-119 { -webkit-transform: rotate(267deg); -ms-transform: rotate(267deg); transform: rotate(267deg); } .mddtp-picker__cell--rotate-119 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-267deg); -ms-transform: rotate(-267deg); transform: rotate(-267deg); } .mddtp-picker__cell--rotate-120 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .mddtp-picker__cell--rotate-120 span:not(.mddtp-picker__line) { -webkit-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); } .mddtp-picker.zoomIn, .mddtp-picker__viewHolder.zoomIn, .mddtp-picker__years.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .mddtp-picker.zoomOut, .mddtp-picker__viewHolder.zoomOut, .mddtp-picker__years.zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } .mddtp-picker.animated, .mddtp-picker__viewHolder.animated, .mddtp-picker__years.animated { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media screen and (max-device-width: 425px) and (orientation: portrait) { .mddtp-picker { display: block; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle { margin: 0; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title span { display: inline-block; } .mddtp-picker .mddtp-picker__header, .mddtp-picker .mddtp-picker__body { display: block; height: 100%; width: 100%; } .mddtp-picker.mddtp-picker-date .mddtp-picker__title div { display: inline-block; } .mddtp-picker.mddtp-picker-date .mddtp-picker__title div#mddtp-date__titleMonth { margin-left: 8px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__header { text-align: right; width: calc(100% - 48px); } .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title { display: inline-block; } .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle { display: inline-block; margin-left: 16px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__body { padding-top: 20px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__circularHolder { margin-top: 0; } } @media screen and (max-width: 415px) { .mddtp-picker { display: block; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title, .mddtp-picker .mddtp-picker__header .mddtp-picker__subtitle { margin: 0; } .mddtp-picker .mddtp-picker__header .mddtp-picker__title span { display: inline-block; } .mddtp-picker .mddtp-picker__header, .mddtp-picker .mddtp-picker__body { display: block; height: 100%; width: 100%; } .mddtp-picker.mddtp-picker-date .mddtp-picker__title div { display: inline-block; } .mddtp-picker.mddtp-picker-date .mddtp-picker__title div#mddtp-date__titleMonth { margin-left: 8px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__header { text-align: right; width: calc(100% - 48px); } .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title { display: inline-block; } .mddtp-picker.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle { display: inline-block; margin-left: 16px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__body { padding-top: 20px; } .mddtp-picker.mddtp-picker-time .mddtp-picker__circularHolder { margin-top: 0; } } .mddtp-picker--portrait { display: block; } .mddtp-picker--portrait .mddtp-picker__header .mddtp-picker__title, .mddtp-picker--portrait .mddtp-picker__header .mddtp-picker__subtitle { margin: 0; } .mddtp-picker--portrait .mddtp-picker__header .mddtp-picker__title span { display: inline-block; } .mddtp-picker--portrait .mddtp-picker__header, .mddtp-picker--portrait .mddtp-picker__body { display: block; height: 100%; width: 100%; } .mddtp-picker--portrait.mddtp-picker-date .mddtp-picker__title div { display: inline-block; } .mddtp-picker--portrait.mddtp-picker-date .mddtp-picker__title div#mddtp-date__titleMonth { margin-left: 8px; } .mddtp-picker--portrait.mddtp-picker-time .mddtp-picker__header { text-align: right; width: calc(100% - 48px); } .mddtp-picker--portrait.mddtp-picker-time .mddtp-picker__header .mddtp-picker__title { display: inline-block; } .mddtp-picker--portrait.mddtp-picker-time .mddtp-picker__header .mddtp-picker__subtitle { display: inline-block; margin-left: 16px; } .mddtp-picker--portrait.mddtp-picker-time .mddtp-picker__body { padding-top: 20px; } .mddtp-picker--portrait.mddtp-picker-time .mddtp-picker__circularHolder { margin-top: 0; } .mddtp-picker--inactive { display: none; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .ux-choice { cursor: pointer; } /* CUSTOMIZABLE VARIABLES */ .ux-input-component { --foreground: var(--aurelia-ux--design-control-foreground, #212121); --foreground-label: var(--aurelia-ux--design-control-label-color, #757575); --background: var(--aurelia-ux--design-control-background, #E0E0E0); --background-hover: #00000027; --active-color: var(--aurelia-ux--design-primary, #3F51B5); --font-size: 16px; --letter-spacing: inherit; --label-font-size: 12px; --label-letter-spacing: 0.5px; --line-height: 1.6; --label-line-height: 1.6; --border-color: var(--aurelia-ux--design-control-label-color, #757575); --border-radius: 4px; --border-width: 1px; --border-active-width: 2px; --disabled-foreground: var(--aurelia-ux--design-disabled-foreground, #9E9E9E); --disabled-background: var(--aurelia-ux--design-disabled-background, #e1e1e1); --error: var(--aurelia-ux--design-error, #F44336); } /* CALCULATIONS */ .ux-input-component { --label-v-padding: 6px; --inner-input-v-padding: 6px; /* MIN HEIGHT OF OUTER COMPONENT */ --min-height: 58.8px; --min-height: calc( 1 * var(--line-height, 1.6) * var(--font-size, 16px) + 1 * var(--label-line-height, 1.6) * var(--label-font-size, 12px) + 1 * var(--label-v-padding, 6px) + 1 * var(--inner-input-v-padding, 6px) + 2 * var(--border-width, 1px)); /* TRANSLATION OF LABEL WHEN INPUT IS EMPTY */ --half-h: 29.4px; --half-h: calc(var(--min-height, 58.8px) / 2); --abs-empty-label-pos: 13.6px; --abs-empty-label-pos: calc(var(--half-h, 29.4px) - var(--font-size, 16px) * var(--line-height, 1.6) / 2 - var(--label-v-padding, 6px)); --empty-label-translation: 13.6px; --empty-label-translation: calc(var(--abs-empty-label-pos, 13.6px)); } .ux-input-component--dense.ux-input-component { --label-v-padding: 2px; --inner-input-v-padding: 2px; } /* OUTER DIV COMPONENT */ .ux-input-component { display: flex; width: 100%; min-height: 56px; padding: 0 16px; align-items: flex-start; box-sizing: border-box; position: relative; color: #212121; background-color: #E0E0E0; border-radius: 4px; color: var(--foreground, #E0E0E0); background-color: var(--background, #212121); border-radius: var(--border-radius, 4px); min-height: var(--min-height, 58.8px); } /* LEADING AND TRAILING SLOTS */ .ux-input-component [slot="leading-icon"], .ux-input-component [slot="trailing-icon"], .ux-input-component__leading, .ux-input-component__trailing { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; } .ux-input-component [slot="leading-icon"], .ux-input-component__leading:not(empty) { margin-right: 8px; } .ux-input-component [slot="trailing-icon"], .ux-input-component__trailing:not(empty) { margin-left: 8px; } /* MAIN INPUT AREA */ .ux-input-component__content { display: flex; flex-direction: column; width: 100%; } /* INPUT LABEL */ .ux-input-component__label { position: relative; align-self: flex-start; z-index: 1; cursor: text; font-size: inherit; font-size: var(--font-size, 16px); line-height: 1.6; line-height: var(--line-height, 1.6); letter-spacing: 0.5px; letter-spacing: var(--label-letter-spacing, 0.5px); color: #757575; color: var(--foreground-label, #757575); transition: all ease 150ms; transform: translateY(var(--empty-label-translation, 13.6px)); padding: var(--label-v-padding, 6px) 0 0 0; } .ux-input-component__inner-input { position: relative; z-index: 2; width: 100%; box-sizing: border-box; margin-bottom: -10px; /* trick to make the inner input not resizing the outer box when not in focused and without value */ line-height: 1.6; line-height: var(--line-height, 1.6); letter-spacing: inherit; letter-spacing: var(--letter-spacing, inherit); padding: 0 0 var(--inner-input-v-padding, 6px) 0; border: 0; color: inherit; background-color: transparent; outline: none; font-weight: 400; } .ux-input-component__border { height: var(---border-active-width, 2px); position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; } .ux-input-component__border:before { display: block; content: ''; height: 1px; height: var(--border-width, 1px); background-color: #757575; background-color: var(--border-color, #757575); position: absolute; bottom: 0; left: 0; right: 0; } .ux-input-component__border:after { display: block; content: ''; height: var(--border-active-width, 2px); background-color: #3F51B5; background-color: var(--active-color, #3F51B5); position: absolute; bottom: 0; left: 0; right: 0; transform: scalex(0); transition: transform ease 150ms; } .ux-input-component--focused .input_component__border-bottom:after { transform: scaleX(1); } /* INPUT VARIANTS - IN DEFAULT STATE */ .ux-input-component--filled { border: 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* OTHER STATES (--focused, --has-value, --error, :hover)*/ /* LABEL AND CONTENT IN FOCUSED, HAS-VALUE STATE */ .ux-input-component--focused .ux-input-component__label, .ux-input-component--has-value .ux-input-component__label { transform: translateY(0px); font-size: 12px; font-size: var(--label-font-size, 12px); line-height: 1.6; line-height: var(--label-line-height, 1.6); } /* BORDER BOTTOM IN FOCUS STATE */ .ux-input-component--focused .ux-input-component__border:after { transform: scalex(1); } /* ERROR STATE */ .ux-input-component--has-error:not(.ux-input-component--focused) .ux-input-component__label { color: #F44336; color: var(--error, #F44336); } .ux-input-component--has-error:not(.ux-input-component--focused) .ux-input-component__border:after { background-color: #F44336; background-color: var(--error, #F44336); transform: scalex(1); } /* HOVER STATE */ .ux-input-component--filled:hover:not(.ux-input-component--disabled):not([disabled]):not([readonly]) { background-color: #00000027; background-color: var(--background-hover, #00000027); } /* DISABLED STATE */ .ux-input-component--filled.ux-input-component--disabled, .ux-input-component--filled[disabled], .ux-input-component--filled[readonly] { color: #9E9E9E; color: var(--disabled-foreground, #9E9E9E); background-color: #e1e1e1; background-color: var(--disabled-background, #9E9E9E); } .ux-input-component--filled.ux-input-component--disabled, .ux-input__label, .ux-input-component--filled[disabled] .ux-input__label, .ux-input-component--filled[readonly] .ux-input__label { color: #9E9E9E; color: var(--disabled-foreground, #9E9E9E); } /* following styles are required on safari to prevent very light disabled input color */ .ux-input-component--filled.ux-input-component--disabled .ux-input-component__inner-input, .ux-input-component--filled[disabled] .ux-input-component__inner-input, .ux-input-component--filled[readonly] .ux-input-component__inner-input{ color: #9E9E9E; color: var(--disabled-foreground, #9E9E9E); -webkit-text-fill-color: #9E9E9E; -webkit-text-fill-color: var(--disabled-foreground, #9E9E9E); opacity: 1; /* required on iOS */ background-color: #e1e1e1; background-color: var(--disabled-background, #9E9E9E); } /* PLACEHOLDER LABEL */ .ux-input-component--placeholder { --inner-input-v-padding: 12px; --min-height: calc( 1 * var(--line-height, 1.6) * var(--font-size, 16px) + 2 * var(--inner-input-v-padding, 6px) + 2 * var(--border-width, 1px)); } .ux-input-component--placeholder.ux-input-component--dense { --inner-input-v-padding: 6px; } .ux-input-component--placeholder .ux-input-component__label { position: absolute; font-size: var(--font-size, 16px); line-height: var(--line-height, 1.6); transform: none; padding: var(--inner-input-v-padding) 0; } .ux-input-component--placeholder.ux-input-component--focused .ux-input-component__label, .ux-input-component--placeholder.ux-input-component--has-value .ux-input-component__label { transform: none; } .ux-input-component--placeholder.ux-input-component--filled.ux-input-component--has-value .ux-input-component__label { opacity: 0; } .ux-input-component--placeholder .ux-input-component__inner-input { padding: var(--inner-input-v-padding) 0; font-size: var(--font-size, 16px); } /* CALCULATIONS */ .ux-input-component--outline { --inner-input-v-padding: 12px; --inner-input-v-padding: calc(var(--label-font-size, 12px) / 2 + 6px); /* MIN HEIGHT OF OUTER COMPONENT */ --min-height: 51.6px; --min-height: calc( 1 * var(--line-height, 1.6) * var(--font-size, 16px) + 2 * var(--inner-input-v-padding, 12px) + 2 * var(--border-active-width, 2px)); /* TRANSLATION OF LABEL WHEN INPUT IS EMPTY */ --half-h: 25.8px; --half-h: calc(var(--min-height, 51.6px) / 2); --abs-empty-label-pos: 13px; --abs-empty-label-pos: calc(var(--half-h, 25.8) - var(--font-size, 16px) * var(--line-height, 1.6) / 2); --empty-label-translation: 12px; --empty-label-translation: calc(var(--abs-empty-label-pos, 13px) - var(--border-width, 1px)); /* TRANSLATION OF LABEL WHEN INPUT IS NOT EMPTY */ --not-empty-label-translation: -10,1px; --not-empty-label-translation: calc(var(--label-font-size, 12px) * var(--label-line-height, 1.6) / -2 + var(--border-width, 1px) / 4 + var(--border-active-width, 2px) / 4); /* TRANSLATION OF LABEL WHEN INPUT HAS FOCUS */ --focused-label-translation: -10.6px; --focused-label-translation: calc(var(--label-font-size, 12px) * var(--label-line-height, 1.6) / -2 + var(--border-width, 1px) / 4 + var(--border-active-width, 2px) / 4); /* EXTRA MARGIN AROUND THE OUTLINE WHEN BORDER IS INACTIVE */ --inactive-extra-margin: 1px; --inactive-extra-margin: calc(var(--border-active-width, 2px) - var(--border-width, 1px)); } .ux-input-component--dense.ux-input-component--outline { --inner-input-v-padding: 6px; --inner-input-v-padding: calc(var(--label-font-size, 12px) / 2); } .ux-input-component--outline { position: relative; background: inherit; min-height: var(--min-height, 51.6px); } .ux-input-component--outline .ux-input-component__content { background: inherit; /* inherit only in outline mode so that it can propagate until the label-background but not been impacted by HOVER in filled mode */ } .ux-input-component--outline .ux-input-component__label { background: transparent; position: absolute; top: 0; transform: translateY(var(--empty-label-translation, 12px)); padding: 0; } .ux-input-component--outline .ux-input-component__inner-input { padding: var(--inner-input-v-padding, 12px) 0; } .ux-input-component--outline .ux-input-component__border { box-sizing: border-box; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; height: calc(100% - 2 * var(--border-width)); border-radius: var(--border-radius); border-style: solid; border-color: #757575; border-width: 1px; border-color: var(--foreground-label, #757575); border-width: var(--border-width, 1px); } .ux-input-component--outline .ux-input-component__border:before { display: none; } .ux-input-component--outline .ux-input-component__border:after { display: none; } /* OUTLINE LABEL AND CONTENT IN FOCUSED, HAS-VALUE STATE */ .ux-input-component--outline.ux-input-component--focused .ux-input-component__border { height: calc(100% - 2 * var(--border-active-width)); border-width: 2px; border-width: var(--border-active-width, 2px); border-color: var(--active-color, #3F51B5); } .ux-input-component--outline.ux-input-component--focused .ux-input-component__label-background, .ux-input-component--outline.ux-input-component--has-value .ux-input-component__label-background { position: absolute; z-index: 1; transform: scaleX(0); top: 0; height: 1px; height: var(--border-width, 1px); width: 0px; margin-left: -3px; background: inherit; transition: transform 150m ease-out; } .ux-input-component--outline.ux-input-component--focused .ux-input-component__label, .ux-input-component--outline.ux-input-component--has-value .ux-input-component__label { z-index: 2; transform: translateY(var(--not-empty-label-translation, -10.1px)); font-size: 12px; font-size: var(--label-font-size, 12px); } .ux-input-component--outline.ux-input-component--focused .ux-input-component__label { transform: translateY(var(--focused-label-translation, -10.6px)); color: var(--active-color, #3F51B5); } .ux-input-component--outline.ux-input-component--focused .ux-input-component__label-background, .ux-input-component--outline.ux-input-component--has-value .ux-input-component__label-background { transform: scaleX(1); } .ux-input-component--outline.ux-input-component--focused .ux-input-component__label-background { height: 2px; height: var(--border-active-width, 2px); } /* ERROR STATE */ .ux-input-component--has-error:not(.ux-input-component--focused).ux-input-component--outline .ux-input-component__border { border-color: #F44336; border-color: var(--error, #F44336); } /* HOVER STATE */ .ux-input-component--outline:hover:not(.ux-input-component--disabled):not([disabled]):not([readonly]):not(.ux-input-component--focused) .ux-input-component__border { border-color: #212121; border-color: var(--foreground, #212121); } /* DISABLED STATE */ .ux-input-component--outline.ux-input-component--disabled, .ux-input-component--outline[disabled], .ux-input-component--outline[readonly] { color: #e1e1e1; color: var(--aurelia-ux--input-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1)); } .ux-input-component--outline.ux-input-component--disabled .ux-input__label, .ux-input-component--outline[disabled] .ux-input__label, .ux-input-component--outline[readonly] .ux-input__label { color: #e1e1e1; color: var(--aurelia-ux--input-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1)); } .ux-input-component--outline.ux-input-component--disabled .ux-input-component__border, .ux-input-component--outline[disabled] .ux-input-component__border, .ux-input-component--outline[readonly] .ux-input-component__border { border-color: #e1e1e1; border-color: var(--aurelia-ux--input-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1)); } /* following styles are required on safari to prevent very light disabled input color */ .ux-input-component--outline.ux-input-component--disabled, .ux-input-component--outline[disabled], .ux-input-component--outline[readonly] { color: #e1e1e1; color: var(--aurelia-ux--input-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1)); -webkit-text-fill-color: #e1e1e1; -webkit-text-fill-color: var(--aurelia-ux--input-disabled-background, var(--aurelia-ux--design-disabled-background, #e1e1e1)); opacity: 1; /* required on iOS */ } /*! * Viewer.js v1.11.3 * https://fengyuanchen.github.io/viewerjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2023-03-05T07:01:15.525Z */ .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-size: 280px; color: transparent; display: block; font-size: 0; height: 20px; line-height: 0; width: 20px; } .viewer-zoom-in::before { background-position: 0 0; content: "Zoom In"; } .viewer-zoom-out::before { background-position: -20px 0; content: "Zoom Out"; } .viewer-one-to-one::before { background-position: -40px 0; content: "One to One"; } .viewer-reset::before { background-position: -60px 0; content: "Reset"; } .viewer-prev::before { background-position: -80px 0; content: "Previous"; } .viewer-play::before { background-position: -100px 0; content: "Play"; } .viewer-next::before { background-position: -120px 0; content: "Next"; } .viewer-rotate-left::before { background-position: -140px 0; content: "Rotate Left"; } .viewer-rotate-right::before { background-position: -160px 0; content: "Rotate Right"; } .viewer-flip-horizontal::before { background-position: -180px 0; content: "Flip Horizontal"; } .viewer-flip-vertical::before { background-position: -200px 0; content: "Flip Vertical"; } .viewer-fullscreen::before { background-position: -220px 0; content: "Enter Full Screen"; } .viewer-fullscreen-exit::before { background-position: -240px 0; content: "Exit Full Screen"; } .viewer-close::before { background-position: -260px 0; content: "Close"; } .viewer-container { bottom: 0; direction: ltr; font-size: 0; left: 0; line-height: 0; overflow: hidden; position: absolute; right: 0; -webkit-tap-highlight-color: transparent; top: 0; -ms-touch-action: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .viewer-container::-moz-selection, .viewer-container *::-moz-selection { background-color: transparent; } .viewer-container::selection, .viewer-container *::selection { background-color: transparent; } .viewer-container:focus { outline: 0; } .viewer-container img { display: block; height: auto; max-height: none !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; width: 100%; } .viewer-canvas { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; } .viewer-canvas > img { height: auto; margin: 15px auto; max-width: 90% !important; width: auto; } .viewer-footer { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; text-align: center; } .viewer-navbar { background-color: rgba(0, 0, 0, 50%); overflow: hidden; } .viewer-list { box-sizing: content-box; height: 50px; margin: 0; overflow: hidden; padding: 1px 0; } .viewer-list > li { color: transparent; cursor: pointer; float: left; font-size: 0; height: 50px; line-height: 0; opacity: 0.5; overflow: hidden; transition: opacity 0.15s; width: 30px; } .viewer-list > li:focus, .viewer-list > li:hover { opacity: 0.75; } .viewer-list > li:focus { outline: 0; } .viewer-list > li + li { margin-left: 1px; } .viewer-list > .viewer-loading { position: relative; } .viewer-list > .viewer-loading::after { border-width: 2px; height: 20px; margin-left: -10px; margin-top: -10px; width: 20px; } .viewer-list > .viewer-active, .viewer-list > .viewer-active:focus, .viewer-list > .viewer-active:hover { opacity: 1; } .viewer-player { background-color: #000; bottom: 0; cursor: none; display: none; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .viewer-player > img { left: 0; position: absolute; top: 0; } .viewer-toolbar > ul { display: inline-block; margin: 0 auto 5px; overflow: hidden; padding: 6px 3px; } .viewer-toolbar > ul > li { background-color: rgba(0, 0, 0, 50%); border-radius: 50%; cursor: pointer; float: left; height: 24px; overflow: hidden; transition: background-color 0.15s; width: 24px; } .viewer-toolbar > ul > li:focus, .viewer-toolbar > ul > li:hover { background-color: rgba(0, 0, 0, 80%); } .viewer-toolbar > ul > li:focus { box-shadow: 0 0 3px #fff; outline: 0; position: relative; z-index: 1; } .viewer-toolbar > ul > li::before { margin: 2px; } .viewer-toolbar > ul > li + li { margin-left: 1px; } .viewer-toolbar > ul > .viewer-small { height: 18px; margin-bottom: 3px; margin-top: 3px; width: 18px; } .viewer-toolbar > ul > .viewer-small::before { margin: -1px; } .viewer-toolbar > ul > .viewer-large { height: 30px; margin-bottom: -3px; margin-top: -3px; width: 30px; } .viewer-toolbar > ul > .viewer-large::before { margin: 5px; } .viewer-tooltip { background-color: rgba(0, 0, 0, 80%); border-radius: 10px; color: #fff; display: none; font-size: 12px; height: 20px; left: 50%; line-height: 20px; margin-left: -25px; margin-top: -10px; position: absolute; text-align: center; top: 50%; width: 50px; } .viewer-title { color: #ccc; display: inline-block; font-size: 12px; line-height: 1.2; margin: 5px 5%; max-width: 90%; min-height: 14px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s; white-space: nowrap; } .viewer-title:hover { opacity: 1; } .viewer-button { -webkit-app-region: no-drag; background-color: rgba(0, 0, 0, 50%); border-radius: 50%; cursor: pointer; height: 80px; overflow: hidden; position: absolute; right: -40px; top: -40px; transition: background-color 0.15s; width: 80px; } .viewer-button:focus, .viewer-button:hover { background-color: rgba(0, 0, 0, 80%); } .viewer-button:focus { box-shadow: 0 0 3px #fff; outline: 0; } .viewer-button::before { bottom: 15px; left: 15px; position: absolute; } .viewer-fixed { position: fixed; } .viewer-open { overflow: hidden; } .viewer-show { display: block; } .viewer-hide { display: none; } .viewer-backdrop { background-color: rgba(0, 0, 0, 50%); } .viewer-invisible { visibility: hidden; } .viewer-move { cursor: move; cursor: grab; } .viewer-fade { opacity: 0; } .viewer-in { opacity: 1; } .viewer-transition { transition: all 0.3s; } @keyframes viewer-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .viewer-loading::after { animation: viewer-spinner 1s linear infinite; border: 4px solid rgba(255, 255, 255, 10%); border-left-color: rgba(255, 255, 255, 50%); border-radius: 50%; content: ""; display: inline-block; height: 40px; left: 50%; margin-left: -20px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 1; } @media (max-width: 767px) { .viewer-hide-xs-down { display: none; } } @media (max-width: 991px) { .viewer-hide-sm-down { display: none; } } @media (max-width: 1199px) { .viewer-hide-md-down { display: none; } } .shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed} .shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0} .shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)} .shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0} .shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em} .shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0} .shepherd-content{border-radius:5px;outline:none;padding:0} .shepherd-element{background:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none} .shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}