UNPKG

react-toolbox-build4server

Version:

Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project

1,460 lines (1,363 loc) 104 kB
/* REACT-TOOLBOX CONFIGURATION: "GLOBALS": */ .rt-app_bar-root { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 6.4rem; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 2.4rem; color: white; background: #303f9f; } .rt-app_bar-root:not(.rt-app_bar-flat) { z-index: 100; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); } .rt-app_bar-root.rt-app_bar-fixed { position: fixed; top: 0; right: 0; left: 0; z-index: 300; } .rt-app_bar-root a { color: white; } .rt-autocomplete-root { position: relative; padding: 1rem 0; } .rt-autocomplete-root.rt-autocomplete-focus .rt-autocomplete-label { color: #3f51b5; } .rt-autocomplete-root.rt-autocomplete-focus .rt-autocomplete-suggestions { max-height: 45vh; visibility: visible; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); } .rt-autocomplete-label { font-size: 1.2rem; color: #757575; -webkit-transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-autocomplete-values { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 0.5rem; } .rt-autocomplete-value { margin: 0.25rem 0.5rem 0.25rem 0; } .rt-autocomplete-suggestions { position: absolute; z-index: 100; width: 100%; max-height: 0; overflow-x: hidden; overflow-y: auto; visibility: hidden; background-color: white; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: max-height, box-shadow; transition-property: max-height, box-shadow; } .rt-autocomplete-suggestions::-webkit-scrollbar { width: 0; height: 0; } .rt-autocomplete-suggestions:not(.rt-autocomplete-up) { margin-top: -2rem; } .rt-autocomplete-suggestions.rt-autocomplete-up { bottom: 0; } .rt-autocomplete-suggestion { padding: 1rem; cursor: pointer; } .rt-autocomplete-suggestion.rt-autocomplete-active { background-color: #eeeeee; } .rt-autocomplete-input { position: relative; } .rt-autocomplete-input:after { position: absolute; top: 50%; right: 0.8rem; width: 0; height: 0; pointer-events: none; content: ""; border-top: 0.54857rem solid rgba(0, 0, 0, 0.12); border-right: 0.54857rem solid transparent; border-left: 0.54857rem solid transparent; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-avatar-avatar { position: relative; display: inline-block; width: 4rem; height: 4rem; overflow: hidden; font-size: 2.4rem; color: white; text-align: center; background-color: #9e9e9e; border-radius: 50%; } .rt-avatar-avatar > svg { width: 1em; height: 4rem; fill: currentColor; } .rt-avatar-avatar > img { max-width: 100%; height: auto; } .rt-avatar-image { position: absolute; display: block; width: 100%; height: 100%; background-color: transparent; background-position: center; background-size: cover; border-radius: 50%; } .rt-avatar-letter { display: block; width: 100%; line-height: 4rem; } .rt-button-raised, .rt-button-flat, .rt-button-floating, .rt-button-toggle { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: 0; position: relative; display: inline-block; height: 3.6rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; outline: none; -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .rt-button-raised::-moz-focus-inner, .rt-button-flat::-moz-focus-inner, .rt-button-floating::-moz-focus-inner, .rt-button-toggle::-moz-focus-inner { border: 0; } .rt-button-raised > span:not([data-react-toolbox="tooltip"]), .rt-button-flat > span:not([data-react-toolbox="tooltip"]), .rt-button-floating > span:not([data-react-toolbox="tooltip"]), .rt-button-toggle > span:not([data-react-toolbox="tooltip"]) { display: inline-block; line-height: 3.6rem; vertical-align: middle; } .rt-button-raised > svg, .rt-button-flat > svg, .rt-button-floating > svg, .rt-button-toggle > svg { display: inline-block; width: 1em; height: 3.6rem; font-size: 120%; vertical-align: middle; fill: currentColor; } .rt-button-raised > *, .rt-button-flat > *, .rt-button-floating > *, .rt-button-toggle > * { pointer-events: none; } .rt-button-raised [data-react-toolbox="ripple"], .rt-button-flat [data-react-toolbox="ripple"], .rt-button-floating [data-react-toolbox="ripple"], .rt-button-toggle [data-react-toolbox="ripple"] { overflow: hidden; } [disabled].rt-button-raised, [disabled].rt-button-flat, [disabled].rt-button-floating, [disabled].rt-button-toggle { color: rgba(0, 0, 0, 0.26); pointer-events: none; cursor: auto; } .rt-button-raised, .rt-button-flat { min-width: 9rem; padding: 0 1.2rem; border-radius: 0.2rem; } .rt-button-raised .rt-button-icon, .rt-button-flat .rt-button-icon { margin-right: 0.6rem; font-size: 120%; vertical-align: middle; } .rt-button-raised > svg, .rt-button-flat > svg { margin-right: 0.5rem; } [disabled].rt-button-raised, [disabled].rt-button-floating { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12); } .rt-button-raised:active, .rt-button-floating:active { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .rt-button-raised:focus:not(:active), .rt-button-floating:focus:not(:active) { box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); } .rt-button-raised { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .rt-button-flat { background: transparent; } .rt-button-floating { width: 5.6rem; height: 5.6rem; font-size: 2.4rem; border-radius: 50%; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); } .rt-button-floating .rt-button-icon { line-height: 5.6rem; } .rt-button-floating [data-react-toolbox="ripple"] { border-radius: 50%; } .rt-button-floating.rt-button-mini { width: 4rem; height: 4rem; font-size: 1.77778rem; } .rt-button-floating.rt-button-mini .rt-button-icon { line-height: 4rem; } .rt-button-toggle { width: 3.6rem; background: transparent; border-radius: 50%; } .rt-button-toggle > .rt-button-icon, .rt-button-toggle svg { font-size: 2rem; line-height: 3.6rem; vertical-align: middle; } .rt-button-toggle [data-react-toolbox="ripple"] { border-radius: 50%; } .rt-button-neutral:not([disabled]).rt-button-raised, .rt-button-neutral:not([disabled]).rt-button-floating { color: #212121; background-color: white; } .rt-button-neutral:not([disabled]).rt-button-flat, .rt-button-neutral:not([disabled]).rt-button-toggle { color: #212121; } .rt-button-neutral:not([disabled]).rt-button-flat:focus:not(:active), .rt-button-neutral:not([disabled]).rt-button-toggle:focus:not(:active) { background: rgba(33, 33, 33, 0.2); } .rt-button-neutral:not([disabled]).rt-button-flat:hover { background: rgba(33, 33, 33, 0.2); } .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-raised, .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-floating { color: white; background-color: #212121; } .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-flat, .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-toggle { color: white; } .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-flat:focus:not(:active), .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-toggle:focus:not(:active) { background: rgba(33, 33, 33, 0.2); } .rt-button-neutral:not([disabled]).rt-button-inverse.rt-button-flat:hover { background: rgba(33, 33, 33, 0.2); } .rt-button-primary:not([disabled]).rt-button-raised, .rt-button-primary:not([disabled]).rt-button-floating { color: white; background: #3f51b5; } .rt-button-primary:not([disabled]).rt-button-flat, .rt-button-primary:not([disabled]).rt-button-toggle { color: #3f51b5; } .rt-button-primary:not([disabled]).rt-button-flat:focus:not(:active), .rt-button-primary:not([disabled]).rt-button-toggle:focus:not(:active) { background: rgba(63, 81, 181, 0.2); } .rt-button-primary:not([disabled]).rt-button-flat:hover { background: rgba(63, 81, 181, 0.2); } .rt-button-accent:not([disabled]).rt-button-raised, .rt-button-accent:not([disabled]).rt-button-floating { color: white; background: #ff4081; } .rt-button-accent:not([disabled]).rt-button-flat, .rt-button-accent:not([disabled]).rt-button-toggle { color: #ff4081; } .rt-button-accent:not([disabled]).rt-button-flat:focus:not(:active), .rt-button-accent:not([disabled]).rt-button-toggle:focus:not(:active) { background: rgba(255, 64, 129, 0.2); } .rt-button-accent:not([disabled]).rt-button-flat:hover { background: rgba(255, 64, 129, 0.2); } .rt-card-card { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; font-size: 1.4rem; background: white; border-radius: 0.2rem; } .rt-card-card.rt-card-raised { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); } .rt-card-card [data-react-toolbox="avatar"] { display: block; } .rt-card-cardMedia { position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; } .rt-card-cardMedia.rt-card-wide, .rt-card-cardMedia.rt-card-square { width: 100%; height: 0; } .rt-card-cardMedia.rt-card-wide .rt-card-content, .rt-card-cardMedia.rt-card-square .rt-card-content { position: absolute; height: 100%; } .rt-card-cardMedia.rt-card-wide .rt-card-content > iframe, .rt-card-cardMedia.rt-card-wide .rt-card-content > video, .rt-card-cardMedia.rt-card-wide .rt-card-content > img, .rt-card-cardMedia.rt-card-square .rt-card-content > iframe, .rt-card-cardMedia.rt-card-square .rt-card-content > video, .rt-card-cardMedia.rt-card-square .rt-card-content > img { max-width: 100%; } .rt-card-cardMedia.rt-card-wide { padding-top: 56.25%; } .rt-card-cardMedia.rt-card-square { padding-top: 100%; } .rt-card-cardMedia .rt-card-content { position: relative; top: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden; } .rt-card-cardMedia .rt-card-contentOverlay .rt-card-cardTitle, .rt-card-cardMedia .rt-card-contentOverlay .rt-card-cardActions, .rt-card-cardMedia .rt-card-contentOverlay .rt-card-cardText { background-color: rgba(0, 0, 0, 0.35); } .rt-card-cardTitle { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .rt-card-cardTitle .rt-card-avatar { margin-right: 1.3rem; } .rt-card-cardTitle .rt-card-subtitle { color: #757575; } .rt-card-cardTitle.rt-card-large { padding: 2rem 1.6rem 1.4rem; } .rt-card-cardTitle.rt-card-large .rt-card-title { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 2.4rem; font-weight: 400; line-height: 3.2rem; -moz-osx-font-smoothing: grayscale; line-height: 1.25; } .rt-card-cardTitle.rt-card-small { padding: 1.6rem; } .rt-card-cardTitle.rt-card-small .rt-card-title { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0; font-weight: 500; line-height: 1.4; } .rt-card-cardTitle.rt-card-small .rt-card-subtitle { font-weight: 500; line-height: 1.4; } .rt-card-cardMedia .rt-card-cardTitle .rt-card-title, .rt-card-cardMedia .rt-card-cardTitle .rt-card-subtitle { color: white; } .rt-card-cardTitle, .rt-card-cardText { padding: 1.4rem 1.6rem; } .rt-card-cardTitle:last-child, .rt-card-cardText:last-child { padding-bottom: 2rem; } .rt-card-cardTitle + .rt-card-cardText, .rt-card-cardText + .rt-card-cardText { padding-top: 0; } .rt-card-cardActions { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding: 0.8rem; } .rt-card-cardActions [data-react-toolbox="button"] { min-width: 0; padding: 0 0.8rem; margin: 0 0.4rem; } .rt-card-cardActions [data-react-toolbox="button"]:first-child { margin-left: 0; } .rt-card-cardActions [data-react-toolbox="button"]:last-child { margin-right: 0; } .rt-checkbox-field { position: relative; display: block; height: 1.8rem; margin-bottom: 1.5rem; white-space: nowrap; vertical-align: middle; } .rt-checkbox-text { display: inline-block; padding-left: 1rem; font-size: 1.4rem; line-height: 1.8rem; color: black; white-space: nowrap; vertical-align: top; } .rt-checkbox-input { width: 0; height: 0; overflow: hidden; opacity: 0; } .rt-checkbox-input:focus ~ .rt-checkbox-check:before { position: absolute; top: 50%; left: 50%; width: 4.14rem; height: 4.14rem; margin-top: -2.07rem; margin-left: -2.07rem; pointer-events: none; content: ""; background-color: rgba(0, 0, 0, 0.1); border-radius: 50%; } .rt-checkbox-input:focus ~ .rt-checkbox-check.rt-checkbox-checked:before { background-color: rgba(63, 81, 181, 0.26); } .rt-checkbox-check { position: relative; display: inline-block; width: 1.8rem; height: 1.8rem; vertical-align: top; cursor: pointer; border-color: black; border-style: solid; border-width: 2px; border-radius: 2px; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: background-color; transition-property: background-color; } .rt-checkbox-check.rt-checkbox-checked { background-color: #3f51b5; border-color: #3f51b5; } .rt-checkbox-check.rt-checkbox-checked:after { position: absolute; top: -0.1rem; left: 0.4rem; width: 0.7rem; height: 1.2rem; content: ""; border-color: white; border-style: solid; border-top: 0; border-right-width: 2px; border-bottom-width: 2px; border-left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: checkmark-expand 140ms ease-out forwards; animation: checkmark-expand 140ms ease-out forwards; } .rt-checkbox-ripple { background-color: #3f51b5; opacity: .3; -webkit-transition-duration: 650ms; transition-duration: 650ms; } .rt-checkbox-disabled > .rt-checkbox-text { color: rgba(0, 0, 0, 0.26); } .rt-checkbox-disabled > .rt-checkbox-check { cursor: auto; border-color: rgba(0, 0, 0, 0.26); } .rt-checkbox-disabled > .rt-checkbox-check.rt-checkbox-checked { cursor: auto; background-color: rgba(0, 0, 0, 0.26); border-color: transparent; } @-webkit-keyframes checkmark-expand { 0% { top: 0.9rem; left: 0.6rem; width: 0; height: 0; } 100% { top: -0.1rem; left: 0.4rem; width: 0.7rem; height: 1.2rem; } } @keyframes checkmark-expand { 0% { top: 0.9rem; left: 0.6rem; width: 0; height: 0; } 100% { top: -0.1rem; left: 0.4rem; width: 0.7rem; height: 1.2rem; } } .rt-chip-chip { display: inline-block; padding: 0 1.2rem; margin-right: 0.25rem; font-size: 1.4rem; line-height: 3.2rem; color: #757575; background-color: #eeeeee; border-radius: 3.2rem; } .rt-chip-avatar { padding-left: 0; } .rt-chip-avatar > [data-react-toolbox="avatar"] { width: 3.2rem; height: 3.2rem; margin-right: 0.8rem; vertical-align: middle; } .rt-chip-avatar > [data-react-toolbox="avatar"] > span { font-size: 2rem; line-height: 3.2rem; } .rt-chip-deletable { padding-right: 3.2rem; } .rt-chip-delete { position: absolute; display: inline-block; width: 2.4rem; height: 2.4rem; padding: 0.4rem; margin: 0.4rem; vertical-align: middle; cursor: pointer; } .rt-chip-delete:hover .rt-chip-deleteIcon { background: #9e9e9e; } .rt-chip-deleteIcon { vertical-align: top; background: #bdbdbd; border-radius: 2.4rem; } .rt-chip-deleteIcon .rt-chip-deleteX { fill: transparent; stroke-width: 0.4rem; stroke: white; } .rt-date_picker_calendar-root { position: relative; height: 27rem; overflow: hidden; font-size: 1.4rem; line-height: 3rem; text-align: center; background: white; } .rt-date_picker_calendar-root .rt-date_picker_calendar-prev, .rt-date_picker_calendar-root .rt-date_picker_calendar-next { position: absolute; top: 0; z-index: 100; height: 3.6rem; cursor: pointer; opacity: .7; } .rt-date_picker_calendar-root .rt-date_picker_calendar-prev { left: 0; } .rt-date_picker_calendar-root .rt-date_picker_calendar-next { right: 0; } .rt-date_picker_calendar-title { display: inline-block; font-weight: 500; line-height: 3rem; } .rt-date_picker_calendar-years { height: 100%; overflow-y: auto; font-size: 1.8rem; } .rt-date_picker_calendar-years > li { line-height: 2.4; cursor: pointer; } .rt-date_picker_calendar-years > li.rt-date_picker_calendar-active { font-size: 2.4; color: #3f51b5; } .rt-date_picker_calendar-week { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 3rem; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.3rem; line-height: 3rem; opacity: .5; } .rt-date_picker_calendar-week > span { -webkit-box-flex: 0; -webkit-flex: 0 0 14.28571%; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; } .rt-date_picker_calendar-days { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.3rem; } .rt-date_picker_calendar-day { -webkit-box-flex: 0; -webkit-flex: 0 0 14.28571%; -ms-flex: 0 0 14.28571%; flex: 0 0 14.28571%; padding: 0.2rem; } .rt-date_picker_calendar-day > span { display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; border-radius: 50%; } .rt-date_picker_calendar-day:hover:not(.rt-date_picker_calendar-active):not(.rt-date_picker_calendar-disabled) > span { color: white; background: rgba(63, 81, 181, 0.21); } .rt-date_picker_calendar-day.rt-date_picker_calendar-active > span { color: white; background: #3f51b5; } .rt-date_picker_calendar-day:hover:not(.rt-date_picker_calendar-disabled) > span { cursor: pointer; } .rt-date_picker_calendar-day.rt-date_picker_calendar-disabled { opacity: 0.25; } .rt-date_picker_calendar-month { background-color: white; } .rt-date_picker-input > [role="input"] { cursor: pointer; } .rt-date_picker-header { padding: 1.6rem 2rem; color: white; cursor: pointer; background-color: #3f51b5; } .rt-date_picker-year { display: inline-block; font-size: 1.4rem; -webkit-transition: opacity, font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity, font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-date_picker-date { display: block; font-weight: 500; text-transform: capitalize; -webkit-transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-date_picker-wrapper { padding: 1rem 0.5rem 0; } .rt-date_picker-display-years .rt-date_picker-date { opacity: 0.6; } .rt-date_picker-display-years .rt-date_picker-year { font-size: 1.6rem; } .rt-date_picker-display-months .rt-date_picker-year { opacity: 0.6; } .rt-date_picker-dialog { width: 33rem; } .rt-date_picker-dialog > [role="body"] { padding: 0; } .rt-date_picker-dialog > [role="navigation"] > .rt-date_picker-button { color: #3f51b5; } .rt-date_picker-dialog > [role="navigation"] > .rt-date_picker-button:hover { background: rgba(63, 81, 181, 0.2); } .rt-date_picker-dialog > [role="navigation"] > .rt-date_picker-button:focus:not(:active) { background: rgba(63, 81, 181, 0.2); } .rt-dialog-root { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 96vw; max-height: 96vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: white; border-radius: 0.2rem; box-shadow: 0 19px 60px rgba(0, 0, 0, 0.3), 0 15px 20px rgba(0, 0, 0, 0.22); opacity: 0; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transform: translateY(-4rem); transform: translateY(-4rem); } .rt-dialog-root.rt-dialog-active { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } .rt-dialog-small { width: 30vw; } .rt-dialog-normal { width: 50vw; } .rt-dialog-large { width: 96vw; } .rt-dialog-title { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: .02em; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; margin-bottom: 1.6rem; color: black; } .rt-dialog-body { -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; padding: 2.4rem; overflow-y: auto; color: #757575; } .rt-dialog-navigation { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; padding: 0.8rem; text-align: right; } .rt-dialog-button { min-width: 0; padding-right: 0.8rem; padding-left: 0.8rem; margin-left: 0.8rem; } .rt-drawer-root { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); position: absolute; top: 0; display: block; width: 24rem; height: 100%; overflow-x: hidden; overflow-y: auto; color: #424242; pointer-events: none; background-color: #fafafa; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; } .rt-drawer-root.rt-drawer-active { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-drawer-root.rt-drawer-right { right: 0; border-left: 1px solid #e0e0e0; } .rt-drawer-root.rt-drawer-right:not(.rt-drawer-active) { -webkit-transform: translateX(100%); transform: translateX(100%); } .rt-drawer-root.rt-drawer-left { left: 0; border-right: 1px solid #e0e0e0; } .rt-drawer-root.rt-drawer-left:not(.rt-drawer-active) { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .rt-dropdown-root { position: relative; } .rt-dropdown-root:not(.rt-dropdown-active) > .rt-dropdown-values { max-height: 0; visibility: hidden; } .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-label, .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-value { opacity: .5; } .rt-dropdown-root.rt-dropdown-active > .rt-dropdown-values { max-height: 45vh; visibility: visible; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); } .rt-dropdown-root:not(.rt-dropdown-up) > .rt-dropdown-values { top: 0; bottom: auto; } .rt-dropdown-root.rt-dropdown-up > .rt-dropdown-values { top: auto; bottom: 0; } .rt-dropdown-root.rt-dropdown-disabled { pointer-events: none; cursor: normal; } .rt-dropdown-value > input { cursor: pointer; } .rt-dropdown-value:after { position: absolute; top: 50%; right: 0.8rem; width: 0; height: 0; pointer-events: none; content: ""; border-top: 0.54857rem solid rgba(0, 0, 0, 0.12); border-right: 0.54857rem solid transparent; border-left: 0.54857rem solid transparent; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-dropdown-field { position: relative; padding: 2rem 0; cursor: pointer; } .rt-dropdown-field.rt-dropdown-errored { padding-bottom: 0; } .rt-dropdown-field.rt-dropdown-errored > .rt-dropdown-label { color: #de3226; } .rt-dropdown-field.rt-dropdown-errored > .rt-dropdown-templateValue { border-bottom: 1px solid #de3226; } .rt-dropdown-field.rt-dropdown-disabled { pointer-events: none; cursor: normal; } .rt-dropdown-field.rt-dropdown-disabled > .rt-dropdown-templateValue { border-bottom-style: dotted; opacity: .7; } .rt-dropdown-templateValue { position: relative; min-height: 3.84rem; padding: 0.8rem 0; color: #212121; background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .rt-dropdown-label { position: absolute; top: 0.6rem; left: 0; font-size: 1.2rem; line-height: 1.6rem; color: rgba(0, 0, 0, 0.26); } .rt-dropdown-error { margin-bottom: -2rem; font-size: 1.2rem; line-height: 2rem; color: #de3226; } .rt-dropdown-values { position: absolute; z-index: 100; width: 100%; overflow-y: auto; list-style: none; background-color: white; border-radius: 0.2rem; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: max-height, box-shadow; transition-property: max-height, box-shadow; } .rt-dropdown-values::-webkit-scrollbar { width: 0; height: 0; } .rt-dropdown-values > * { position: relative; padding: 1rem; overflow: hidden; cursor: pointer; } .rt-dropdown-values > *:hover { background-color: #eeeeee; } .rt-dropdown-values > *.rt-dropdown-selected { color: #3f51b5; } .rt-form-root > :last-child { margin-bottom: 0; } .rt-input-root { position: relative; padding: 2rem 0; } .rt-input-root.rt-input-withIcon { margin-left: 4.8rem; } .rt-input-icon { position: absolute; top: 1.6rem; left: -4.8rem; display: block; width: 4.8rem; height: 4.8rem; font-size: 2.4rem !important; line-height: 4.8rem !important; color: rgba(0, 0, 0, 0.26); text-align: center; -webkit-transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .rt-input-input { display: block; width: 100%; padding: 0.8rem 0; font-size: 1.6rem; color: #212121; background-color: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); outline: none; } .rt-input-input:focus ~ .rt-input-bar:before, .rt-input-input:focus ~ .rt-input-bar:after { width: 50%; } .rt-input-input:focus ~ .rt-input-label:not(.rt-input-fixed) { color: #3f51b5; } .rt-input-input:focus ~ .rt-input-label > .rt-input-required { color: #de3226; } .rt-input-input:focus ~ .rt-input-hint { opacity: 1; } .rt-input-input:focus ~ .rt-input-icon { color: #3f51b5; } .rt-input-input:focus ~ .rt-input-label:not(.rt-input-fixed), .rt-input-input.rt-input-filled ~ .rt-input-label:not(.rt-input-fixed), .rt-input-input[type="date"] ~ .rt-input-label:not(.rt-input-fixed), .rt-input-input[type="time"] ~ .rt-input-label:not(.rt-input-fixed) { top: 0.6rem; font-size: 1.2rem; } .rt-input-input.rt-input-filled ~ .rt-input-label.rt-input-fixed, .rt-input-input.rt-input-filled ~ .rt-input-hint { display: none; } .rt-input-label { position: absolute; top: 3.2rem; left: 0; font-size: 1.6rem; line-height: 1.6rem; color: rgba(0, 0, 0, 0.26); pointer-events: none; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: top, font-size, color; transition-property: top, font-size, color; } .rt-input-label.rt-input-fixed ~ .rt-input-hint { display: none; } .rt-input-hint { position: absolute; top: 3.2rem; left: 0; font-size: 1.6rem; line-height: 1.6rem; color: rgba(0, 0, 0, 0.26); pointer-events: none; opacity: 0; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: opacity; transition-property: opacity; } .rt-input-bar { position: relative; display: block; width: 100%; } .rt-input-bar:before, .rt-input-bar:after { -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; position: absolute; bottom: 0; width: 0; height: 2px; content: ""; background-color: #3f51b5; -webkit-transition-property: width, background-color; transition-property: width, background-color; } .rt-input-bar:before { left: 50%; } .rt-input-bar:after { right: 50%; } .rt-input-error, .rt-input-counter { margin-bottom: -2rem; font-size: 1.2rem; line-height: 2rem; color: #de3226; } .rt-input-counter { position: absolute; right: 0; color: rgba(0, 0, 0, 0.26); } .rt-input-disabled > .rt-input-input { color: rgba(0, 0, 0, 0.26); border-bottom-style: dotted; } .rt-input-errored { padding-bottom: 0; } .rt-input-errored > .rt-input-input { margin-top: 1px; border-bottom-color: #de3226; } .rt-input-errored > .rt-input-counter, .rt-input-errored > .rt-input-label { color: #de3226; } .rt-input-errored > .rt-input-label > .rt-input-required { color: #de3226; } .rt-input-hidden { display: none; } .rt-layout-root { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-y: hidden; } .rt-layout-root .rt-layout-navDrawer { width: 0; min-width: 0; height: 100%; overflow-x: hidden; overflow-y: hidden; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: width, min-width; transition-property: width, min-width; } .rt-layout-root .rt-layout-navDrawer .rt-layout-scrim { position: absolute; top: 0; bottom: 0; left: 0; z-index: 300; width: 0; height: 100%; background-color: transparent; -webkit-transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 10ms linear 0.35s; transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 10ms linear 0.35s; } .rt-layout-root .rt-layout-navDrawer .rt-layout-drawerContent { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 28rem; max-width: calc(100% - 5.6rem); height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-x: hidden; overflow-y: hidden; color: #424242; pointer-events: none; background-color: #fafafa; border-right: 1px solid #e0e0e0; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translateX(-100%); transform: translateX(-100%); } .rt-layout-root .rt-layout-navDrawer .rt-layout-drawerContent.rt-layout-scrollY { overflow-y: auto; } .rt-layout-root .rt-layout-navDrawer.rt-layout-pinned { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 28rem; max-width: calc(100% - 5.6rem); } .rt-layout-root .rt-layout-navDrawer.rt-layout-pinned > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-active:not(.rt-layout-pinned) { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; } .rt-layout-root .rt-layout-navDrawer.rt-layout-active:not(.rt-layout-pinned) > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-active:not(.rt-layout-pinned) .rt-layout-scrim { width: 100%; background-color: rgba(0, 0, 0, 0.6); -webkit-transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 600px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-pinned { width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer .rt-layout-drawerContent { width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-wide.rt-layout-pinned { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-wide .rt-layout-drawerContent { width: 40rem; max-width: 40rem; } } @media screen and (min-width: 840px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-sm { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-sm > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-sm.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-sm.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } @media screen and (min-width: 960px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-md { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-md > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-md.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-md.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } @media screen and (min-width: 1280px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-lg { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-lg > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-lg.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-lg.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } @media screen and (min-width: 1440px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xl { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xl > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xl.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xl.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } @media screen and (min-width: 1600px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxl { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxl > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxl.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxl.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } @media screen and (min-width: 1920px) { .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxxl { -webkit-transition-delay: 0.07s; transition-delay: 0.07s; width: 32rem; max-width: 32rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxxl > .rt-layout-scrim > .rt-layout-drawerContent { pointer-events: all; -webkit-transition-delay: 0.07s; transition-delay: 0.07s; -webkit-transform: translateX(0); transform: translateX(0); } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxxl.rt-layout-wide { width: 40rem; max-width: 40rem; } .rt-layout-root .rt-layout-navDrawer.rt-layout-permanent-xxxl.rt-layout-active > .rt-layout-scrim { width: 0; background-color: transparent; } } .rt-layout-root .rt-layout-root .rt-layout-scrim { z-index: 299; } .rt-layout-root .rt-layout-root .rt-layout-root .rt-layout-scrim { z-index: 298; } .rt-layout-root .rt-layout-panel { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-y: hidden; } .rt-layout-root .rt-layout-panel.rt-layout-scrollY { overflow-y: auto; } .rt-layout-root .rt-layout-sidebar { position: absolute; top: 0; right: 0; bottom: 0; z-index: 299; width: 0; height: 100%; overflow-x: hidden; overflow-y: hidden; color: #424242; background-color: #fafafa; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: width; transition-property: width; } .rt-layout-root .rt-layout-sidebar .rt-layout-sidebarContent { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-y: hidden; } .rt-layout-root .rt-layout-sidebar .rt-layout-sidebarContent.rt-layout-scrollY { overflow-y: auto; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 .rt-layout-sidebarContent { min-width: 100%; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1.rt-layout-pinned { width: 100%; } @media screen and (min-width: 600px) and (orientation: landscape) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 .rt-layout-sidebarContent { min-width: 5.6rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1.rt-layout-pinned { width: 5.6rem; } } @media screen and (min-width: 600px) and (orientation: portrait) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 .rt-layout-sidebarContent { min-width: 6.4rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1.rt-layout-pinned { width: 6.4rem; } } @media screen and (min-width: 720px) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 .rt-layout-sidebarContent { min-width: 6.4rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1.rt-layout-pinned { width: 6.4rem; } } @media screen and (min-width: 840px) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1 .rt-layout-sidebarContent { min-width: 6.4rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-1.rt-layout-pinned { width: 6.4rem; } } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 .rt-layout-sidebarContent { min-width: 100%; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2.rt-layout-pinned { width: 100%; } @media screen and (min-width: 600px) and (orientation: landscape) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 .rt-layout-sidebarContent { min-width: 11.2rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2.rt-layout-pinned { width: 11.2rem; } } @media screen and (min-width: 600px) and (orientation: portrait) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 .rt-layout-sidebarContent { min-width: 12.8rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2.rt-layout-pinned { width: 12.8rem; } } @media screen and (min-width: 720px) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 .rt-layout-sidebarContent { min-width: 12.8rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2.rt-layout-pinned { width: 12.8rem; } } @media screen and (min-width: 840px) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2 .rt-layout-sidebarContent { min-width: 12.8rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-2.rt-layout-pinned { width: 12.8rem; } } .rt-layout-root .rt-layout-sidebar.rt-layout-width-3 .rt-layout-sidebarContent { min-width: 100%; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-3.rt-layout-pinned { width: 100%; } @media screen and (min-width: 600px) and (orientation: landscape) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-3 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-3 .rt-layout-sidebarContent { min-width: 16.8rem; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-3.rt-layout-pinned { width: 16.8rem; } } @media screen and (min-width: 600px) and (orientation: portrait) { .rt-layout-root .rt-layout-sidebar.rt-layout-width-3 { position: relative; } .rt-layout-root .rt-layout-sidebar.rt-layout-width-3 .rt-layout-sidebarContent { min-width: 19.2rem; } .rt-layout-r