html {
font-size: 62.5%;
}
.link-group-editor {
}
.link-group-editor-parameters-box {
box-sizing: border-box;
border: 0.1rem solid #D1D1D1;
}
.link-group-editor-parameters-box-padding {
padding: 1rem;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
.reset applet, .reset object, .reset iframe,
h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6, .reset p, .reset blockquote, .reset pre,
a, .reset abbr, .reset acronym, .reset address, .reset big, .reset cite, .reset code,
del, .reset dfn, .reset em, .reset img, .reset ins, .reset kbd, .reset q, .reset s, .reset samp,
small, .reset strike, .reset strong, .reset sub, .reset sup, .reset tt, .reset var,
b, .reset u, .reset i, .reset center,
dl, .reset dt, .reset dd, .reset ol, .reset ul, .reset li,
fieldset, .reset form, .reset label, .reset legend,
table, .reset caption, .reset tbody, .reset tfoot, .reset thead, .reset tr, .reset th, .reset td,
article, .reset aside, .reset canvas, .reset details, .reset embed, .reset
figure, .reset figcaption, .reset footer, .reset header, .reset hgroup, .reset
menu, .reset nav, .reset output, .reset ruby, .reset section, .reset summary,
time, .reset mark, .reset audio, .reset video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
.reset article, .reset aside, .reset details, .reset figcaption, .reset figure, .reset
footer, .reset header, .reset hgroup, .reset menu, .reset nav, .reset section {
display: block;
}
.reset ol, .reset ul {
list-style: none;
}
.reset blockquote, .reset q {
quotes: none;
}
.reset blockquote:before, .reset blockquote:after,
.reset q:before, .reset q:after {
content: '';
content: none;
}
.reset table {
border-collapse: collapse;
border-spacing: 0;
}
.image.background-cover {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.image.background-contain {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.image.background-center {
background-position: center center;
background-repeat: no-repeat;
}
.image.background-top-left {
background-position: top left;
background-repeat: no-repeat;
}
.image.background-contain-bottom-left {
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
}
.full-size {
width: 100%;
height: 100%;
}
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
.centered-block {
margin: auto;
}
.absolute-container {
position: relative;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.absolute-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.fixed-overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.position-fixed {
position: fixed;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
top: 0;
right: 0;
}
.bottom-right {
bottom: 0;
right: 0;
}
.bottom-left {
bottom: 0;
left: 0;
}
.absolute-for-transform {
position: absolute;
left: 0;
top: 0;
}
.absolute-right {
position: absolute;
right: 0;
}
.no-pointer-events {
pointer-events: none;
}
.all-pointer-events {
pointer-events: all;
}
.cursor-pointer {
cursor: pointer;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-inline-block {
display: inline-block;
}
.display-contents {
display: contents;
}
.display-none {
display: none;
}
.no-overflow {
overflow: hidden;
}
.float-right {
float: right;
}
.clear-both {
clear: both;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.no-margins {
margin: 0;
}
.no-paddings {
padding: 0;
}
.hidden-space {
width: 0;
display: inline-block;
}
.layer-order-low {
z-index: 0;
}
.layer-order-high {
z-index: 3;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.border-box-sizing {
box-sizing: border-box;
}
a.custom-styled-link {
text-decoration: none;
color: inherit;
}
.transform-origin-top-center {
transform-origin: center top;
}
.turned-180 {
transform: rotate(180deg);
}
.ease-out-transformations {
transition-property: transform;
transition: 0.3s;
transition-timing-function: ease-out;
}
.full-size-iframe-container iframe {
width: 100%;
height: 100%;
}
@media print {
.no-print, .no-print * {
display: none !important;
}
}
.blur-light-overlay {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.7);
}
.fit-content-min-width {
min-width: fit-content;
}
.fit-content-width {
width: fit-content;
}
.text-no-wrap {
text-wrap: nowrap;
}
.image.black-icon{
filter: brightness(0);
}
.flex {
display: flex;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row.justify-between,
.flex-column.justify-between {
justify-content: space-between;
}
.flex-row.justify-center,
.flex-column.justify-center {
justify-content: center;
}
.flex-row.justify-end,
.flex-column.justify-end {
justify-content: flex-end;
}
.flex-row.align-start,
.flex-column.align-start {
align-items: flex-start;
}
.flex-row.align-end,
.flex-column.align-end {
align-items: flex-start;
}
/* ?ABOVE? */
.flex-row.vertically-center-items,
.flex-column.vertically-center-items {
align-items: center;
}
.flex-row .flex-row-item {
}
.flex-row .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row .flex-row-item:last-of-type {
margin-right: 0rem;
}
.flex-row.singles > .flex-row-item {
width: 100%;
}
.flex-row.halfs > .flex-row-item {
width: 50%;
}
.flex-row > .flex-row-item.half {
width: 50%;
}
.flex-row.thirds > .flex-row-item,
.flex-row-item.third {
width: 33.33%;
}
.flex-row.quarters > .flex-row-item {
width: 25%;
}
.flex-row > .flex-row-item.quarter {
width: 25%;
}
.flex-column.halfs > .flex-column-item {
height: 50%;
}
.flex-row .flex-row-item .reset-flex-row-item-size .flex-row-item {
width: initial;
}
.flex-column.all-grow .flex-column-item {
height: 0%;
}
.flex-column .flex-column-item:first-of-type {
margin-top: 0rem;
}
.flex-column .flex-column-item:last-of-type {
margin-bottom: 0rem;
}
.flex-vertical-line {
width: 0.1rem;
flex-grow: 0;
flex-shrink: 0;
}
.flex-horizontal-line {
height: 0.1rem;
flex-grow: 0;
flex-shrink: 0;
}
.flex-no-wrap {
flex-wrap: nowrap;
}
.flex-no-resize {
flex-grow: 0;
flex-shrink: 0;
}
.flex-resize {
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-90 {
width: 90%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-80 {
width: 80%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-70 {
width: 70%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-60 {
width: 60%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-50 {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-40 {
width: 40%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-30 {
width: 30%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-20 {
width: 20%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row-item.width-10 {
width: 10%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row.uniform-item > .flex-row-item {
width: 1%;
flex-grow: 1;
flex-shrink: 1;
}
.flex-row.align-end .flex-row-item {
align-self: flex-end;
}
.align-self-end {
align-self: flex-end;
}
.justify-self-center{
justify-self: center;
}
.centered-cell-holder {
display: flex;
justify-content: center;
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.flex-1 {
flex: 1;
}
.inline-list {
}
.inline-list .inline-list-item {
display: inline-block;
}
.inline-list .inline-list-item:first-of-type {
margin-left: 0rem;
}
.inline-list .inline-list-item:last-of-type {
margin-right: 0rem;
}
.row-list {
}
.row-list .row-list-item {
}
.row-list .row-list-item:first-of-type {
margin-top: 0rem;
}
.row-list .row-list-item:last-of-type {
margin-bottom: 0rem;
}
.inline-list .row-list-item {
display: inline-block;
}
.row-list .row-list-item:first-of-type {
margin-top: 0rem;
}
.row-list .row-list-item:last-of-type {
margin-bottom: 0rem;
}
.text-align-center {
text-align: center;
}
.has-text-align-center {
text-align: center;
}
.text-align-left {
text-align: left;
}
.text-align-right {
text-align: right;
}
.vertical-text-top {
vertical-align: text-top;
}
.font-italic {
font-style: italic;
}
.text-uppercase {
text-transform: uppercase;
}
.no-paragraph-margins p {
margin: 0;
}
.no-paragraph-margins-around p:first-of-type {
margin-top: 0;
}
.no-paragraph-margins-around p:last-of-type {
margin-bottom: 0;
}
.break-words {
white-space: pre-line;
word-break: break-word;
}
.border-box {
border-width: 0.1rem;
border-style: solid;
border-color: #333333;
}
.date-with-details {
}
.date-with-details .primary {
line-height: 1;
font-size: 2.4rem;
font-weight: 600;
margin-right: 0.2rem;
}
.date-with-details .secondary {
font-size: 1.2rem;
font-weight: 600;
}
.date-with-details .details {
font-size: 0.9rem;
color: #7e7e7e;
}
.spacing.date-with-details-spacing {
}
.flex-row.date-with-details-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 0.1rem;
}
.flex-row.date-with-details-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 0.1rem;
}
.date-selection-overlay {
box-sizing: border-box;
border: 1px solid #073988;
background-color: #FFFFFF;
}
.date-selection-overlay-padding {
padding: 1rem;
}
.date-selection-button {
box-sizing: border-box;
border: 1px solid #073988;
background-color: #FFFFFF;
}
.date-selection-button-padding {
padding: 1rem;
}
.date-selection-button.invalid,
.invalid .date-selection-button {
border-color: #880707;
}
.calendar-week:not(:first-of-type) {
margin-top: 0.2rem;
}
.flex-row.calendar-week > .flex-row-item:not(:first-of-type) {
margin-left: 0.1rem;
}
.flex-row.calendar-week > .flex-row-item:not(:last-of-type) {
margin-right: 0.1rem;
}
.calendar-day {
font-weight: bold;
border: 1px solid rgb(7, 57, 136);
padding: 1.3rem 0.5rem;
text-align: center;
cursor: pointer;
}
.calendar-day.today {
background-color: rgb(7, 57, 136, 0.2);
}
.calendar-day.other-month {
border: 1px solid rgb(221, 221, 221, 0.5);
color: rgb(92, 92, 92, 0.5);
}
.calendar-day.selected {
background-color: rgb(7, 57, 136);
color: #FFFFFF;
}
.calendar-day.unselectable {
pointer-events: none;
background-color: rgb(221, 221, 221, 0.5);
border: 1px solid rgb(221, 221, 221, 0.5);
color: rgb(92, 92, 92, 0.5);
}
.item-list .field {
width: 30rem;
}
.item-list .field-type-select,
.item-list .field-type-options {
width: auto;
}
.item-list .field.field-unit.display-field {
width: 15rem;
}
.item-list .field.field-unitSize.display-field {
width: 8rem;
}
.standard-flag {
background-color: #C0C0C0;
border-radius: 0.3rem;
box-sizing: border-box;
}
.id-flag {
font-size: 1.2rem;
width: 6rem;
text-align: center;
background-color: #C0C0C0;
color: #FFFFFF;
}
.status-flag {
font-size: 0.9rem;
text-align: center;
background-color: #feffce;
}
.start-at-flag {
background-color: #cbe2bf;
}
.end-at-flag {
background-color: #d4af96;
}
.standard-flag-padding {
padding: 0.2rem;
}
.date-selection-number {
line-height: 1;
font-size: 2.4rem;
font-weight: 600;
margin-right: 0.2rem;
}
.date-selection-month {
font-size: 1.2rem;
font-weight: 600;
}
.date-selection-weekday {
font-size: 0.9rem;
color: #7e7e7e;
}
.flex-row.date-selection-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 0.1rem;
}
.flex-row.date-selection-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 0.1rem;
}
.label-text-small {
font-size: 1.2rem;
font-weight: 600;
}
.integrated-field,
input.integrated-field,
input[type="text"].integrated-field {
padding: 0;
margin: 0;
border: none;
background: none;
border-radius: 0;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
transition: none;
display: initial;
outline: none;
}
.add-button {
font-size: 0.9rem;
border-radius: 9999px;
border: 1px solid #828282;
color: #828282;
}
.add-button-padding {
padding: 2px 10px;
}
.edit-button {
font-size: 0.9rem;
border-radius: 9999px;
border: 1px solid #828282;
color: #828282;
}
.edit-button-padding {
padding: 2px 10px;
}
.validation-error-popup .up-arrow:before {
position: absolute;
top: 0;
left: 0.7rem;
transform: translateY(-100%);
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 11px 12px;
border-color: transparent transparent #e94b35 transparent;
}
.validation-error-popup .up-arrow:after {
position: absolute;
top: 0;
left: 0.8rem;
transform: translateY(-100%);
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 10px 11px;
border-color: transparent transparent #ffffff transparent;
}
.validation-error-popup .down-arrow:before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 12px 0 12px;
border-color: #e94b35 transparent transparent transparent;
}
.validation-error-popup .down-arrow:after {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 11px 0 11px;
border-color: #ffffff transparent transparent transparent;
}
.validation-error-popup {
background-color: #fff;
text-align: center;
position: relative;
color: #e94b35;
border: 1px solid #e94b35;
padding: 2rem 2.6rem;
font-size: 2rem;
border-radius: 0.5rem;
width: 37rem;
margin-bottom: 11px;
}
.validation-error-popup-centered-over-position {
left: 50%;
transform: translate(-50%, -100%);
}
.standard-dropdown-button {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #D1D1D1;
}
.standard-dropdown-button-padding {
padding: 1.4rem 0.8rem;
}
.standard-dropdown-button.batch-operations-select-title {
border-radius: 0;
border: none;
}
.standard-dropdown-button-padding.batch-operations-select-title {
padding: 0;
}
.custom-selection-menu {
box-sizing: border-box;
background-color: #FFFFFF;
}
.custom-selection-menu-padding {
padding: 1rem;
}
.dropdown-selection-popup {
min-width: 20rem;
}
.custom-dropdown.dropdown-from-right .dropdown-selection-popup {
right: 0;
}
.stepped-navigation-button {
box-sizing: border-box;
width: 6rem;
height: 6rem;
background-color: #2ece6e;
border-radius: 50%;
transition: background-color 0.1s ease-in;
}
.stepped-navigation-button.active:hover {
background-color: #0de061;
}
.stepped-navigation-button.inactive {
opacity: 0.5;
}
.stepped-navigation-back-button {
box-sizing: border-box;
width: 3rem;
height: 3rem;
background-color: #FFFFFF;
border-radius: 50%;
border: 2px solid #CCCCCC;
transition: background-color 0.1s ease-in;
}
.stepped-navigation-back-button.inactive {
opacity: 0.5;
}
.stepped-navigation-back-button.active:hover {
background-color: #EEEEEE;
}
.stepped-navigation-button-padding {
padding: 1rem;
}
.stepped-navigation-back-button-padding {
padding: 0.5rem;
}
.stepped-navigation-step-indicator {
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #CCCCCC;
opacity: 0.5;
}
.signed-in-name {
font-size: 2.4rem;
font-weight: bold;
}
.signed-in-email {
color: #CCCCCC;
font-size: 1.2rem;
}
.verification-code-box {
background-color: #ffffff;
border-radius: 0.6rem;
box-sizing: border-box;
border: 1px solid #153c63;
overflow: hidden;
}
.verification-code-box-digit-field {
width: 5.2rem;
font-size: 4.4rem;
font-weight: normal;
line-height: normal;
padding: 1.2rem 0;
box-sizing: border-box;
text-align: center;
border: none;
background-color: #153c6300;
transition: background-color 0.1s ease-in;
}
.verification-code-box-digit-field:focus {
background-color: #153c6311;
outline: none;
}
.verification-code-box-digit-field:not(:last-of-type) {
border-right: 1px solid #153c63;
}
.action-link {
font-size: 1.6rem;
font-weight: normal;
line-height: normal;
text-decoration: underline;
}
.action-link.secondary {
color: #CCCCCC;
}
.big-box-padding {
padding: 20px;
}
.checkmark-circle {
border: 1px solid #DF0000;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 4px;
}
.checkmark-circle.active {
background-color: #DF0000;
}
.checkmark-circle.small {
border: 1px solid #DF0000;
border-radius: 50%;
width: 16px;
height: 16px;
padding: 2px;
}
.progressbar-height {
height: 6px;
}
.progressbar-background {
background-color: #CCCCCC;
}
.diagonal-background-color-progress-animation {
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
background-size: 50px 50px;
animation: diagonal-background-color-progress-animation-keyframes 2s linear infinite;
}
@keyframes diagonal-background-color-progress-animation-keyframes {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.page-loading-progressbar-postition {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.centered-site {
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
}
.site-padding {
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 800px) {
.centered-site {
padding-left: 4.0rem;
padding-right: 4.0rem;
}
}
@media (min-width: 1024px) {
.centered-site {
max-width: 128.0rem;
padding-left: 8.0rem;
padding-right: 8.0rem;
}
}
.centered-content-text {
width: 90%;
max-width: 80rem;
margin: auto;
}
.narrow-area-after-side-menu {
max-width: 80rem;
}
.centered-narrow-area {
max-width: 60rem;
margin: auto;
}
.centered-wide-area {
width: 90%;
max-width: 90rem;
margin: auto;
}
.wp-rich-text-formatting iframe {
max-width: 100%;
}
.wp-block-image img {
height: auto;
}
.hero-silhouette {
max-width: 80rem;
}
.hero-push-down {
position: relative;
top: 1px;
}
.main-font-setting {
font-size: 1.4rem;
color: #0d0d0d;
}
@media screen and (min-width: 600px) {
.main-font-setting {
font-size: 2rem;
}
}
.main-font-setting sup {
font-size: 0.5em;
}
.page-breadcrumb {
font-size: 1.2rem;
font-weight: bold;
}
@media screen and (min-width: 600px) {
.page-breadcrumb {
font-size: 1.5rem;
}
}
.page-excerpt {
font-size: 1.6rem;
font-weight: 200;
line-height: 1.44;
}
@media screen and (min-width: 600px) {
.page-excerpt {
font-size: 2.5rem;
}
}
.wp-rich-text-formatting {
line-height: 1.6;
}
.menu-link {
font-size: 1.8rem;
font-weight: 600;
}
.menu-link.active,
.menu-link.active-child {
color: var(--active-menu-item-color, var(--primary-color));
}
.no-results {
font-size: 2.5rem;
font-weight: bold;
color: #bbbbbb;
}
.select-overlay-description {
font-size: 2.5rem;
font-weight: bold;
}
.final-price {
color: var(--primary-color);
font-size: 4rem;
font-weight: bold;
}
.cta-title {
color: var(--primary-color);
font-size: 4rem;
font-weight: bold;
}
.list-title {
color: var(--primary-color);
font-size: 2.4rem;
font-weight: bold;
}
.login-menu-footer-text {
font-size: 1.2rem;
}
.label-text {
font-size: 1.4rem;
font-weight: 600;
}
.facility-manager-title {
font-size: 1.6rem;
font-weight: 600;
}
.facility-manager-name {
color: var(--primary-color);
font-size: 3.2rem;
font-weight: bold;
}
.inline-left-icon {
vertical-align: middle;
margin-right: 0.6rem;
}
.facility-manager-contact-icon {
vertical-align: middle;
margin-right: 0.6rem;
}
a.facility-manager-contact-link {
font-size: 1.4rem;
color: var(--primary-color);
font-weight: 600;
}
a.facility-manager-contact-link:hover {
color: #a82a2f;
}
.price-table-unit-name {
color: var(--primary-color);
font-weight: 600;
}
.storage-unit-selection-room-name {
color: var(--primary-color);
font-weight: 600;
}
.storage-unit-selection-field {
}
.size-result-title-label {
color: #0d0d0d;
}
.storage-unit-info-box-text {
font-size: 1.2rem;
}
.storage-unit-info-box-list-title {
color: var(--primary-color);
font-size: 1.8rem;
font-weight: bold;
}
.storage-unit-info-box-row-title {
font-weight: 600;
}
.storage-unit-info-box-price {
color: var(--primary-color);
font-weight: 600;
}
.checkout-user-name {
color: var(--primary-color);
font-size: 3.2rem;
font-weight: bold;
}
.not-payed {
font-weight: 600;
}
.detail-field-title {
color: var(--primary-color);
font-size: 1.2rem;
}
.detail-field-value {
font-size: 1.6rem;
font-weight: bold;
}
.description-text {
font-size: 1.6rem;
color: #959595;
}
.small-description {
font-size: 1.6rem;
color: #959595;
}
.micro-text {
font-size: 0.9rem;
}
.micro-text.grey {
font-size: 0.9rem;
color: #7e7e7e;
}
.xsmall-text {
font-size: 1.2rem;
}
.smaller-text{
font-size: 1.4rem;
}
.small-text {
font-size: 1.6rem;
}
.small-text.mobile {
font-size: 14px;
}
.h2-text {
font-size: 2.1rem;
}
.medium-text {
font-size: 2.4rem;
}
.large-text {
font-size: 3.4rem;
}
.text-bold {
font-weight: 600;
}
.small-text-description {
font-size: 1.2rem;
color: #959595;
}
.payex-title {
color: rgb(238, 112, 35);
}
.bank-id-title {
color: #469cbe;
}
.access-code {
font-size: 3.2rem;
font-weight: bold;
letter-spacing: 1rem;
}
@media(min-width: 400px) {
.access-code {
font-size: 5.6rem;
}
}
.standard-field-font-size {
font-size: 1.4rem;
}
.adjacent-title {
color: var(--primary-color);
font-size: 1.2rem;
}
.adjacent-name {
font-size: 1.6rem;
font-weight: bold;
}
.forum-user-description {
font-size: 1.2rem;
color: #959595;
}
.remove-link {
color: rgba(255, 68, 0, 1);
}
.small-link {
font-size: 1.2rem;
color: #959595;
text-decoration: underline;
}
.label-link {
color: var(--primary-color);
text-decoration: none;
}
.edit-button-text {
font-size: 1.2rem;
}
.standard-field-label {
font-size: 1.2rem;
color: #959595;
font-weight: bold;
}
.batch-operations-text {
font-size: 1.2rem;
color: #959595;
}
.offer-text {
color: var(--primary-color);
font-weight: bold;
font-size: 1.6rem;
}
.red-text {
color: #ED0000;
}
.price-after-offer {
font-size: 1.2rem;
color: #959595;
}
.excluding-tax-notice {
font-size: 1.2rem;
color: #808080;
}
.batch-operations-select-title {
}
.standard-field-text {
font-size: 1.4rem;
font-weight: 400;
}
.bold-text {
font-weight: bold;
}
.date-with-details.primary {
line-height: 1;
font-size: 2.4rem;
font-weight: 600;
margin-right: 0.2rem;
}
.date-with-details.secondary {
font-size: 1.2rem;
font-weight: 600;
}
.date-with-details.details {
font-size: 0.9rem;
color: #7e7e7e;
}
.text-align-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
.text-align-left {
text-align: left;
}
.usp-line-text {
font-size: 1.2rem;
font-weight: bold;
}
.passed-storage-unit {
opacity: 0.4;
text-decoration: line-through;
}
.gray-text {
color: #c4c4c4;
}
.section-no-available-text {
font-size: 2.4rem;;
color: #c4c4c4;
}
.find-facility-result-location {
font-weight: bold;
font-size: 1.5rem;
}
.find-facility-result-address {
font-weight: 300;
font-size: 1.5rem;
}
.primary-color-text {
color: var(--primary-color);
}
.facilities-box-address {
font-size: 1.6rem;
}
.late-payment {
color: var(--primary-color);
}
.pre-wrap {
white-space: pre-wrap;
}
.blocked-reason {
font-size: 1.2rem;
color: #7e7e7e;
}
.blocked-reason-name {
font-weight: bold;
}
.selection-price-difference {
color: #7e7e7e;
}
.image.standard-icon {
width: 24px;
height: 24px;
}
.image.big-icon {
width: 140px;
height: 140px;
}
.image.source-hero-bottom {
}
.image.source-chevron-medium {
width: 12px;
height: 7px;
}
.image.source-chevron-breadcrumbs {
width: 6px;
height: 10px;
}
.image.source-circle,
.image.source-check-circle {
width: 22px;
height: 22px;
}
.image.source-circle.field-marker,
.image.source-check-circle.field-marker {
width: 30px;
height: 30px;
}
.image.source-email-red {
width: 20px;
height: 17px;
}
.image.source-phone-red {
width: 20px;
height: 20px;
}
.image.source-map-pin {
width: 20px;
height: 24px;
}
.image.source-chevron-large {
width: 17px;
height: 10px;
}
.image.source-arrow-right {
width: 20px;
height: 16px;
}
.facility-manager-portrait {
width: 35rem;
min-height: 44rem;
height: 100%;
max-width: 100%;
}
.facility-manager-signature {
height: 9rem;
}
.image.single-storage-unit-image {
height: 30rem;
}
.image.source-hamburger {
width: 30px;
height: 23px;
}
.image.source-hamburger-small {
width: 20px;
height: 14px;
}
.image.source-cog,
.image.source-cog-white {
width: 18px;
height: 18px;
}
.image.source-cross {
width: 12px;
height: 12px;
}
.image.icon-list-image {
width: 70px;
height: 70px;
}
.image.source-payment-logos-payex {
height: 3.1rem;
width: 9.8rem;
position: relative;
top: 0.4rem;
}
.image.source-payment-logos-swedbank-pay {
height: 3.4rem;
width: 7.3rem;
position: relative;
}
.image.source-bank-id-logo {
height: 3.4rem;
width: 3.4rem;
position: relative;
}
.parner-logo {
height: 4rem;
width: auto;
}
.storage-unit-list-item-image-container {
height: 6rem;
width: 9rem;
border-radius: 0.4rem;
background-color: #E1E1E5;
overflow: hidden;
}
.image.dropdown-arrow {
height: 0.6rem;
width: 0.9rem;
}
.image.small-loader {
width: 16px;
height: 16px;
}
.image.usp-line-icon {
width: 12px;
height: 12px;
}
.image.list-icon {
width: 18px;
height: 18px;
}
.image.loader-spinner {
width: 16px;
height: 16px;
}
.image.field-icon {
width: 18px;
height: 18px;
}
.image.standard-button-icon {
width: 30px;
height: 30px;
}
.image.services-icon {
width: 48px;
height: 48px;
}
.spacing.double {
height: 5.8rem;
}
.spacing.standard {
height: 2.9rem;
}
.spacing.medium-em{
height: 1.4em;
}
.spacing.medium {
height: 1.4rem;
}
.spacing.small {
height: 0.7rem;
}
.spacing.micro {
height: 0.3rem;
}
.spacing.pixel {
height: 0.1rem;
}
.spacing.footer-spacing {
height: 5rem;
}
.spacing.page-spacing {
height: 7.1rem;
}
.menu-padding {
padding: 1rem;
}
.inline-list.small-item-spacing > .inline-list-item {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.inline-list.small-item-spacing > .inline-list-item:first-of-type {
margin-left: 0rem;
}
.inline-list.small-item-spacing > .inline-list-item:last-of-type {
margin-right: 0rem;
}
.inline-list.menu-item-spacing > .inline-list-item {
margin-left: 2rem;
margin-right: 2rem;
}
.inline-list.menu-item-spacing > .inline-list-item:first-of-type {
margin-left: 0rem;
}
.inline-list.menu-item-spacing > .inline-list-item:last-of-type {
margin-right: 0rem;
}
.inline-list.small-item-row-spacing > .inline-list-item {
margin-top: 1.0rem;
}
.flex-row.micro-item-spacing > .flex-row-item {
margin-left: 0.6rem;
margin-right: 0.6rem;
}
.flex-row.micro-item-spacing > .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row.micro-item-spacing > .flex-row-item:last-of-type {
margin-right: 0rem;
}
.flex-row.pixel2x-item-spacing > .flex-row-item {
margin-left: 0.2rem;
margin-right: 0.2rem;
}
.flex-row.pixel2x-item-spacing > .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row.pixel2x-item-spacing > .flex-row-item:last-of-type {
margin-right: 0rem;
}
.flex-row.pixel-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 0.05rem;
}
.flex-row.pixel-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 0.05rem;
}
.flex-row.icon-text-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 0.2rem;
}
.flex-row.icon-text-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 0.2rem;
}
.breadcrumb-arrow {
display: block;
}
.breadcrumb-arrow > div:last-of-type {
display: none;
}
.flex-row.small-item-spacing > .flex-row-item {
margin-left: 1rem;
margin-right: 1rem;
}
.flex-row.small-item-spacing > .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row.small-item-spacing > .flex-row-item:last-of-type {
margin-right: 0rem;
}
.flex-row.medium-item-spacing > .flex-row-item {
margin-left: 2rem;
margin-right: 2rem;
}
.flex-row.medium-item-spacing > .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row.medium-item-spacing > .flex-row-item:last-of-type {
margin-right: 0rem;
}
.flex-row.big-item-spacing > .flex-row-item {
margin-left: 3rem;
margin-right: 3rem;
}
.flex-row.big-item-spacing > .flex-row-item:first-of-type {
margin-left: 0rem;
}
.flex-row.big-item-spacing > .flex-row-item:last-of-type {
margin-right: 0rem;
}
.margin-top-medium{
margin-top: 2rem;
}
.margin-top-xs {
margin-top: 0.5rem;
}
.margin-bottom-xs {
margin-bottom: 0.5rem;
}
.margin-bottom-small {
margin-bottom: 1rem;
}
.margin-left-auto {
margin-left: auto;
}
.margin-right-small {
margin-right: 1rem;
}
.margin-left-small {
margin-left: 1rem;
}
.margin-left-medium {
margin-left: 2rem;
}
.margin-bottom-medium {
margin-bottom: 2rem;
}
hr {
height: 0.1rem;
border-style: none;
background-color: rgba(29, 29, 29, 1);
margin: 0;
}
hr.header-divider {
background-color: rgba(255, 255, 255, 0.1);
}
hr.section-divider {
background-color: #E1E1E5;
}
.micro-divider {
width: 3rem;
background-color: rgba(29, 29, 29, 0.15);
}
.small-divider {
width: 10rem;
background-color: rgba(29, 29, 29, 0.15);
}
hr.side-menu-box-divider {
background-color: #E1E1E5;
}
hr.box-line {
background-color: #E1E1E5;
}
.price-filter-center-adjust {
margin-top: 2.4rem;
}
.box-vertical-line {
height: 100%;
width: 0.1rem;
background-color: #D1D1D1;
}
.site-header-breadcrumb-separator {
background-color: var(--primary-color);
height: 4px;
}
.find-facility-result-line {
background-color: var(--primary-color);
height: 2px;
}
.select-unit-size-card-separator {
background-color: rgba(0, 0, 0, 0.11);
}
.side-menu-box {
width: 28rem;
box-sizing: border-box;
border: 0.1rem solid #E1E1E5;
}
.side-menu-box-padding {
padding: 2.2rem;
}
.drop-down-box {
box-sizing: border-box;
background-color: #FFFFFF;
border: 0.1rem solid #E1E1E5;
border-radius: 0.3rem;
}
.drop-down-box-padding {
padding: 2rem;
}
.menu-drop-down-box {
width: 28rem;
box-sizing: border-box;
background-color: #FFFFFF;
border: 0.1rem solid #E1E1E5;
border-radius: 0.3rem;
}
.menu-drop-down-box-padding {
padding: 2rem;
}
.menu-drop-down-top {
height: 1.5rem;
}
.menu-drop-down-top-arrow {
position: absolute;
top: 100%;
left: 50%;
width: 1.4rem;
height: 1.4rem;
border: solid #E1E1E5;
border-width: 0 0.1rem 0.1rem 0;
background-color: #FFFFFF;
transform: translate(-50%, -50%) rotate(-135deg);
}
.header-option-menu-drop-down-top-arrow {
position: absolute;
top: 100%;
left: 80%;
width: 1.4rem;
height: 1.4rem;
border: solid #E1E1E5;
border-width: 0 0.1rem 0.1rem 0;
background-color: #FFFFFF;
transform: translate(-50%, -50%) rotate(-135deg);
}
.facilities-box {
box-sizing: border-box;
border: 0.1rem solid #E1E1E5;
}
.facilities-box-padding {
padding: 2.2rem;
}
.facilities-manager-box {
background-color: #F1F1F2;
}
.facilities-manager-box-padding {
padding: 2.2rem;
}
.map-box {
height: 50rem;
box-sizing: border-box;
border: 0.2rem solid #D1D1D1;
border-radius: 0.3rem;
}
.price-table {
text-align: left;
border-collapse: collapse;
font-size: 1.4rem;
}
.price-table thead {
background-color: #0D0D0D;
color: #FFFFFF;
text-transform: uppercase;
}
.price-table td,
.price-table th {
padding: 1rem;
width: 25%;
box-sizing: border-box;
}
.price-table thead,
.price-table thead td {
border: 0.1rem solid #0D0D0D;
}
.price-table tbody,
.price-table tbody td {
border: 0.1rem solid #D1D1D1;
}
.feature-color-box {
background-color: #E1393F;
color: #FFFFFF;
}
.feature-box {
color: #FFFFFF;
}
.feature-color-box-padding {
padding: 2.2rem;
}
.feature-color-box-image-bottom {
padding-bottom: 0;
}
.size-example-table {
box-sizing: border-box;
border: 0.1rem solid #E1E1E5;
}
.size-example-table-cell-padding {
padding: 2rem;
}
.notice {
box-sizing: border-box;
padding: 2rem;
background-color: #E1E1E5;
margin-bottom: 1rem;
}
.notice p:first-of-type {
margin-top: 0;
}
.notice p:last-of-type {
margin-bottom: 0;
}
.notice.success-notice {
background-color: #4ACB76;
}
.notice.error-notice {
background-color: #0D0D0D;
color: #FFFFFF;
}
.edit-image-box {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #D1D1D1;
height: 20rem;
}
.edit-image-box-padding {
padding: 1.4rem 0.8rem;
}
.edit-placement-box {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #D1D1D1;
height: 40rem;
}
.edit-placement-box-no-overflow {
border-radius: 0.3rem;
overflow: hidden;
}
.map-zoom-box {
box-sizing: border-box;
border-radius: 0.3rem;
background-color: #FFFFFF;
border: 0.1rem solid #D1D1D1;
}
.map-zoom-box-button {
box-sizing: border-box;
padding: 1rem 1rem;
width: 4rem;
text-align: center;
cursor: pointer;
}
.map-zoom-middle-line {
height: 100%;
width: 0.1rem;
background-color: #D1D1D1;
}
.storage-unit-info-box {
width: 35rem;
border-radius: 0.3rem;
background-color: #FFFFFF;
border: 0.1rem solid #F1F1F2;
}
.storage-unit-info-box .info-area {
width: 65%;
}
.storage-unit-info-box .image-area {
width: 35%;
}
.storage-unit-info-box-cell-padding {
padding: 1rem 2rem;
}
.storage-unit-info-box-title-cell-padding {
padding: 1.5rem 2rem;
}
.storage-unit-info-box-row.even {
background-color: #F1F1F2;
}
.current-account-box {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #F1F1F2;
}
.current-account-box-padding {
padding: 1rem;
}
.standard-box {
box-sizing: border-box;
border-radius: 3rem;
border: 0.1rem solid #F1F1F2;
background: #FFFFFF;
}
.standard-box-padding {
padding: 2.2rem;
}
.invoice-table {
text-align: left;
border-collapse: collapse;
font-size: 1.4rem;
}
.invoice-table thead {
background-color: #0D0D0D;
color: #FFFFFF;
text-transform: uppercase;
}
.invoice-table td,
.invoice-table th {
padding: 1rem;
width: 25%;
box-sizing: border-box;
}
.invoice-table thead,
.invoice-table thead td {
border: 0.1rem solid #0D0D0D;
}
.invoice-table tbody,
.invoice-table tbody td {
border: 0.1rem solid #D1D1D1;
}
.invoice-status-box {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #D1D1D1;
}
.invoice-status-box.pending {
border-color: rgba(255, 68, 0, 1);
color: rgba(255, 68, 0, 1);
}
.invoice-status-box-padding {
padding: 1rem;
}
.label-flag {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #D1D1D1;
font-size: 1.2rem;
color: #D1D1D1;
}
.label-flag-padding {
padding: 0.4rem;
}
.payex-box {
border-color: rgb(238, 112, 35);
}
.bank-id-box {
border-color: #469CBE;
}
.round-error-box {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
font-size: 1.2rem;
font-weight: bold;
line-height: normal;
color: #ffffff;
}
.video-box-size {
height: 450px;
}
.info-box {
box-sizing: border-box;
border-radius: 0.5rem;
}
.info-box-background {
background-color: #F5F0F5;
}
.white-box-background {
background-color: #FFFFFF;
}
.info-box-padding {
padding: 2.8rem 5.5rem;
}
.current-offer-box-padding {
padding: 9rem 7rem;
}
.footer {
}
.footer-logo {
width: 18.9rem;
height: auto;
}
.footer-partner-logo-column-width {
width: 20rem;
}
.footer-partner-logo {
width: 100%;
height: 5.2rem;
}
.overlapping-newsletter-bottom {
margin-bottom: -5rem;
}
.spacing.overlapping-newsletter-spacing {
height: 5rem;
}
.header-menu {
background-color: #F1F1F2;
}
.header-menu-padding {
padding: 2rem;
}
.header-menu-checkout-padding {
padding: 1rem;
}
.header-logo {
width: 12.6rem;
height: auto;
}
@media (min-width: 400px) {
.header-logo {
width: 18.9rem;
}
}
.header-logo.small {
width: 8rem;
}
.header-mobile-logo {
width: 15.2rem;
height: auto;
}
.header-option-circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: #0D0D0D;
box-sizing: border-box;
}
.header-option-circle-padding {
padding: 1.6rem;
}
.header-option-arrow-circle {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background-color: #E1393F;
box-sizing: border-box;
}
.header-option-arrow-circle-position {
bottom: 0;
right: 0;
}
.header-option-arrow-circle-padding {
padding: 0.5rem;
}
.header-option-title {
color: #DF0000;
font-size: 1.2rem;
}
.header-option-selection {
font-size: 1.6rem;
font-weight: bold;
}
.mobile-secondary-menu {
background-color: #F1F1F2;
}
.mobile-secondary-menu-padding {
padding: 1rem 2rem;
}
.transform-origin-header-option-menu {
transform-origin: 80% top;
}
.mt-micro {
margin-top: 0.3rem;
}
.mr-micro {
margin-right: 0.3rem;
}
.mb-micro {
margin-bottom: 0.3rem;
}
.mt-small {
margin-top: 0.5rem;
}
.mr-small {
margin-right: 0.5rem;
}
.mb-small {
margin-bottom: 0.5rem;
}
.ml-small {
margin-left: 0.5rem;
}
.mt-medium-minus {
margin-top: -1rem;
}
.mt-medium {
margin-top: 1rem;
}
.mr-medium {
margin-right: 1rem;
}
.mb-medium {
margin-bottom: 1rem;
}
.ml-medium {
margin-left: 1rem;
}
.mt-standard {
margin-top: 1.6rem;
}
.mr-standard {
margin-right: 1.6rem;
}
.mb-standard {
margin-bottom: 1.6rem;
}
.ml-standard {
margin-left: 1.6rem;
}
.mt-large {
margin-top: 2rem;
}
.mr-large {
margin-right: 2rem;
}
.mb-large {
margin-bottom: 2rem;
}
.ml-large {
margin-left: 2rem;
}
.ml-xlarge {
margin-left: 3.1rem;
}
.standard-line-height {
line-height: 1.5;
}
.standard-field.medium-border-radius {
border-radius: 1rem;
}
.standard-image {
width: 200px;
height: 180px;
}
.standard-image.mobile__select-size-with-details {
width: 120px;
height: 120px;
}
/*---- help classes end ----*/
/*---- FaciltyLinkBox ----*/
.facility-container {
box-sizing: border-box;
width: 32rem;
border: 10px solid white;
border-radius: 15px;
background-color: #f5f0f5;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
padding: 3rem 2rem 2rem 2rem;
align-items: center;
gap: 15px;
}
.facility-image {
width: 265px;
height: 180px;
object-fit: contain;
}
.facility-link {
padding: 1.5rem 5rem 1.5rem 5rem;
text-decoration: none;
letter-spacing: 1.5px;
}
.facility-box-group-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 320px);
grid-auto-rows: auto;
column-gap: 3rem;
row-gap: 3rem;
justify-content: center;
}
/*---- SearchBar ----*/
.search-bar-input {
height: 3rem;
width: 80%;
}
@media (max-width: 850px) {
.search-bar-input {
width: 95%;
}
}
/*---- contact-box ----*/
.contact-box {
box-sizing: border-box;
border-radius: 15px;
width: 32rem;
padding: 3.5rem;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
}
.contact-box-line-height {
line-height: 1.3;
}
.box-nav {
display: flex;
justify-content: center;
align-items: center;
height: 5rem;
width: 5rem;
top: 0;
right: 0;
transform: translate(-10%, 0%);
}
@keyframes bounce {
0% {
top: 0px;
right: 0px;
}
50% {
top: 10px;
right: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
@media (min-width: 850px) {
.box-nav:hover {
animation-name: bounce;
animation-duration: 1.3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
}
/* ---- observe elements ---- */
.important-info-label {
border-radius: 5px 5px 0 0;
background-color: #ed0000;
transform: translate(-0.5rem, -100%);
color: #ffffff;
font-size: 3rem;
font-weight: bold;
padding: 2.5rem 5.5rem 2.5rem 5.5rem;
}
.important-info-container {
padding: 5rem 5rem 5rem 8rem;
}
.important-info-icon {
max-width: 9rem;
object-fit: contain;
}
.important-info-group {
display: grid;
grid-auto-rows: auto;
row-gap: 5rem;
}
@media (min-width: 850px) {
.important-info {
display: grid;
grid-template-columns: 9rem 1fr;
column-gap: 6rem;
align-items: center;
}
}
@media (max-width: 850px) {
.important-info-container {
padding: 4rem 2rem 2rem 2rem;
}
.important-info-label {
padding: 2rem 4rem 2rem 4rem;
font-size: 2rem;
}
.important-info-icon-container {
text-align: center;
margin-bottom: 2rem;
}
}
/* ---- price-table elements ---- */
.red-border-rounded {
border-radius: 5px;
border: 0.5rem solid #ed0000;
}
.pricing-padding {
padding: 2rem 5rem 4rem 5rem;
}
.pricing-grid-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-cell {
display: flex;
justify-items: stretch;
}
.pricing-grid-columns .pricing-header {
padding-left: 2rem;
}
.pricing-grid-rows {
display: grid;
grid-auto-rows: auto;
row-gap: 3rem;
}
.pricing-grid-row {
border-radius: 5px;
background-color: #f5f0f5;
padding: 2rem;
}
.offer-ring {
transform: translate(45%, -35%);
position: absolute;
right: 0;
top: 0;
border-radius: 50%;
border: 5px solid #ed0000;
width: 140px;
height: 140px;
}
.offer-circle {
display: grid;
place-items: center;
font-size: 1.8rem;
font-weight: bold;
width: 140px;
height: 140px;
padding: 0.8rem;
box-sizing: border-box;
border: 5px solid #ffffff;
border-radius: 50%;
background-color: #ed0000;
color: #ffffff;
}
.gap-small {
gap: 1.1rem;
}
.restricted-transform {
width: 100%;
top: 0;
right: 0;
transform: translate(0.5%, -100%);
}
.restricted-text {
font-weight: normal;
color: #747474;
padding: 0.5rem 0 0.5rem 0;
}
.pricing-container-mobile {
padding: 1.4rem 0.8rem;
border-radius: 5px;
}
@media (max-width: 850px) {
.offer-ring {
top: -10%;
right: 50%;
}
.pricing-padding {
padding: 2rem 1.5rem 1.5rem 1.5rem;
}
}
/* ---- price-table elements ---- */
.month-guide-absolute {
position: absolute;
top: 0;
left: 10px;
}
.featured-image {
width: 100%;
height: 60rem;
}
.cursor-pointer {
cursor: pointer;
}
.list-button {
font-size: 1.4rem;
}
.inactive-during-process {
pointer-events: none;
}
.inactive-button {
background-color: #bbbbbb;
color: #ffffff;
box-sizing: border-box;
color: #ffffff;
border-radius: 9999px;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}
.standard-button.match-field-size {
font-size: 1.5rem;
}
.standard-button.black {
background-color: #0d0d0d;
}
.standard-button.bank-id-button {
background-color: #469cbe;
}
.standard-button.bank-id-secondary-button {
border: 1px solid #469cbe;
color: #469cbe;
background-color: #FFFFFF;
}
.list-button-padding {
padding: 0.5rem 1rem;
}
.standard-button-full-width-padding {
padding: 2rem 2rem;
}
.match-field-size-padding {
padding: 1.4rem 3rem;
}
.standard-field {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #d1d1d1;
font-size: 1.6rem;
}
.standard-field.read-only {
border: 0.1rem solid #e1e1e1;
}
.standard-field.invalid {
border-color: rgba(255, 68, 0, 1);
background-color: rgba(255, 68, 0, 0.1);
}
.validation-status-text.invalid {
color: rgba(255, 68, 0, 1);
}
.standard-field.numeric-field-width {
width: 10rem;
}
.small-field-padding {
padding: 0.8rem 1rem;
}
.standard-field-padding {
padding: 1.4rem 0.8rem;
}
.custom-selection {
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #d1d1d1;
background-color: #ffffff;
color: #0d0d0d;
font-size: 1.8rem;
cursor: pointer;
}
.custom-selection-padding {
padding: 1.4rem 2rem;
}
.custom-selection-menu {
box-sizing: border-box;
border-radius: 0.3rem;
background-color: #ffffff;
border: 0.1rem solid #d1d1d1;
width: 100%;
font-size: 1.8rem;
max-height: 30rem;
overflow: auto;
}
.custom-selection-menu-padding {
padding: 1rem 1rem;
}
.date-selection-button {
box-sizing: border-box;
border-radius: 0.3rem;
background-color: #ffffff;
border: 0.1rem solid #d1d1d1;
width: 100%;
font-size: 1.8rem;
max-height: 30rem;
overflow: auto;
}
.date-selection-button-padding {
padding: 1.4rem 2rem;
}
.date-selection-overlay {
box-sizing: border-box;
border-radius: 0.3rem;
background-color: #ffffff;
border: 0.1rem solid #d1d1d1;
width: 100%;
font-size: 1.8rem;
}
.date-selection .dropdown-selection-popup {
min-width: 36rem;
right: 0;
}
.date-selection-overlay-padding {
padding: 1.4rem 2rem;
}
.date-selection-number {
font-weight: bold;
font-size: 3.4rem;
position: relative;
top: 0.1rem;
}
.date-selection-weekday {
font-size: 1.2rem;
color: #959595;
}
.calendar-day {
font-weight: bold;
border: 1px solid rgb(221, 221, 221);
padding: 1.3rem 0.5rem;
text-align: center;
cursor: pointer;
margin-bottom: 0.2rem;
}
.calendar-day.today {
background-color: rgb(225, 57, 63, 0.2);
}
.calendar-day.other-month {
border: 1px solid rgb(221, 221, 221, 0.5);
color: rgb(92, 88, 103, 0.5);
}
.calendar-day.selected {
background-color: rgb(225, 57, 63);
color: #ffffff;
}
.calendar-day.unselectable {
pointer-events: none;
background-color: rgb(221, 221, 221, 0.5);
border: 1px solid rgb(221, 221, 221, 0.5);
color: rgb(92, 88, 103, 0.5);
}
.radio-button {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
border: 0.1rem solid #d1d1d1;
margin-right: 1rem;
}
.radio-button.checked {
background-color: var(--primary-color);
}
.dropdown-selection-popup {
z-index: 5;
}
.position-absolute.remove-image-button-placement {
right: 1rem;
bottom: 1rem;
}
.position-absolute.map-zoom-button-placement {
right: 1rem;
bottom: 1rem;
}
.position-absolute.map-floor-selection-placement {
right: 1rem;
top: 1rem;
}
.floor-map-thumbnail {
width: 8rem;
height: 6rem;
}
.menu-arrow-adjust {
margin-bottom: 0.2rem;
margin-left: 0.2rem;
}
.section-title {
color: #0d0d0d;
font-size: 3.6rem;
letter-spacing: -0.1rem;
box-sizing: border-box;
padding-left: 3rem;
position: relative;
margin: 0;
word-break: break-all;
}
.section-title::after {
position: absolute;
width: 20rem;
height: 6rem;
background-color: var(--primary-color);
left: 0;
top: -3.5rem;
content: "";
z-index: -1;
}
.section-paragraph {
margin: 0.6rem 0 0;
font-size: 1.6rem;
font-weight: 300;
line-height: 1.5;
color: #0d0d0d;
padding: 0 3rem;
max-width: 60rem;
}
@media screen and (min-width: 1140px) {
.section-title {
font-size: 5.6rem;
padding-left: 6rem;
}
.section-title::after {
top: -2rem;
}
.section-paragraph {
padding: 0;
}
}
.overview-item {
max-width: 390px;
display: flex;
flex-direction: column;
}
.overview-item-image {
width: 140px;
height: 140px;
}
.overview-item-title {
margin: 1rem 0;
font-size: 1.5rem;
}
.overview-item-text {
font-size: 1.6rem;
margin: 0;
line-height: 1.5;
}
.overview-item-link {
margin-top: 1rem;
margin-left: auto;
display: block;
text-decoration: none;
color: var(--primary-color);
font-size: 1.4rem;
font-weight: 600;
}
.overview-item-link-image {
width: 1.2rem;
margin-left: 0.5rem;
}
.page-text-section > span {
font-size: 1.5rem;
font-weight: 600;
}
.page-text-section-title {
font-size: 2.4rem;
color: var(--primary-color);
margin: 1rem 0 2rem;
}
.page-text-section-text {
font-size: 2rem;
line-height: 1.5;
}
.handbook-side-video-width {
width: 25rem;
}
.side-video-thumbnail {
width: 100%;
height: 21rem;
border-radius: 0.4rem 0.4rem 0 0;
background-size: cover;
background-position: center;
}
.side-video-play-button {
padding: 0;
border: none;
background: transparent;
left: 1rem;
bottom: 1rem;
}
.side-video-text-container {
background: #f1f1f2;
border-radius: 0 0 0.4rem 0.4rem;
padding: 2rem;
}
.side-video-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 1rem;
}
.side-video-text {
font-size: 1.6rem;
line-height: 1.5;
margin: 0;
}
.full-width-video-thumbnail {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
width: 100%;
background-size: cover;
}
.full-width-video-play-button {
padding: 0;
border: none;
background: transparent;
}
.full-width-video-description {
font-size: 1.6rem;
line-height: 2;
color: #747474;
padding: 1rem 0 0 1.6rem;
}
.notice-box {
border: 0.1rem solid var(--primary-color);
border-left-width: 0.6rem;
padding: 2rem;
}
.notice-box-label {
background-color: var(--primary-color);
color: #ffffff;
font-weight: bold;
}
.notice-box-label-padding {
padding: 0.5rem 2rem;
}
.notice-box-image {
width: 14rem;
height: 14rem;
}
.small-notice-box-image {
width: 5rem;
height: 5rem;
}
.notice-box-title {
font-weight: bold;
font-size: 1.5rem;
}
.notice-box-text {
line-height: 1.5;
font-size: 1.6rem;
font-weight: 300;
}
@media screen and (min-width: 600px) {
.notice-box-text {
font-size: 2.5rem;
}
.notice-box-title {
margin: 0 0 1rem;
}
}
.page-introduction-title {
position: relative;
font-size: 3.6rem;
font-weight: bold;
margin-bottom: 2rem;
}
.page-introduction-title::after {
position: absolute;
height: 17rem;
width: 5rem;
background: var(--primary-color);
content: "";
z-index: -1;
left: -2.5rem;
top: -6.5rem;
}
.page-introduction-text {
font-size: 2rem;
line-height: 1.5;
font-weight: 300;
max-width: 60rem;
}
.related-areas-title {
font-size: 1.5rem;
color: #747474;
margin-top: 2rem;
font-weight: 600;
margin-bottom: 0.6rem;
}
.related-area-divider {
background: #e1e1e5;
}
.related-area-link {
text-decoration: none;
color: #747474;
margin: 0.6rem 0;
}
.related-area-link-text {
margin-right: 4.2rem;
}
.related-area-image {
width: 1.8rem;
margin-left: auto;
}
@media screen and (min-width: 900px) {
.page-introduction-title {
font-size: 5.6rem;
}
.page-introduction-title::after {
height: 20rem;
width: 7rem;
left: -4.5rem;
}
.page-introduction-text {
font-size: 2.5rem;
}
.related-areas-title {
margin-top: 4rem;
}
}
.divider-overview {
background: var(--primary-color);
padding: 4rem 3rem 2rem;
box-sizing: border-box;
}
.divider-overview-title {
color: #fff;
font-size: 3.6rem;
}
.divider-overview-hero {
position: absolute;
bottom: 0;
height: 40%;
right: 0rem;
}
@media screen and (min-width: 900px) {
.divider-overview {
padding: 4rem 7rem 2rem;
}
.divider-overview-title {
font-size: 5.6rem;
}
.divider-overview-hero {
height: 60%;
}
}
.round-number {
width: 32px;
height: 32px;
border: solid 1px var(--primary-color);
background-color: var(--primary-color);
border-radius: 50%;
font-size: 20px;
font-weight: bold;
line-height: normal;
color: #ffffff;
}
.stepped-process-info-box {
width: 68px;
height: 51px;
border: solid 1px #f5f5f5;
background-color: #ffffff;
margin-left: -0.5rem;
z-index: 1;
}
.stepped-process-image {
width: 32px;
height: 37px;
}
.stepped-process-info-text {
font-size: 1.6rem;
font-weight: normal;
line-height: 1.5;
color: #313131;
width: 25rem;
}
.stepped-process-flex {
display: flex;
flex-direction: row;
align-items: baseline;
}
.stepped-process-margin {
margin-right: 1rem;
}
.stepped-process-item-spacing {
margin-bottom: 0.7rem;
}
.stepped-process-dotted-line {
position: relative;
}
.stepped-process-dotted-line:after {
content: "";
border-left: 4px dotted #e8e8e8;
position: absolute;
bottom: -30px;
height: 32px;
z-index: -1;
}
.stepped-process-title {
font-size: 2.4rem;
font-weight: normal;
letter-spacing: normal;
font-weight: bold;
line-height: normal;
letter-spacing: -0.64px;
color: #0d0d0d;
}
.stepped-process-margin-02-mobile {
margin-top: 0.2rem;
}
@media (min-width: 700px) {
.stepped-process-margin-02-mobile {
margin-top: 0;
}
.stepped-process-title {
font-size: 3.6rem;
}
.round-number {
width: 60px;
height: 60px;
font-size: 3.6rem;
}
.stepped-process-info-box {
width: 200px;
height: 150px;
}
.stepped-process-image {
width: 83px;
height: 95px;
}
.stepped-process-flex-row {
display: flex;
flex-wrap: wrap;
max-width: 1110px;
margin: auto;
}
.stepped-process-flex {
display: flex;
flex-direction: column;
}
.align-end-tablet {
align-items: flex-end;
}
.stepped-process-margin {
margin-right: 1.7rem;
margin-bottom: 1.5rem;
}
.stepped-process-dotted-line:after {
display: none;
}
.stepped-process-dotted-line-desktop,
.stepped-process-dotted-line-horizontal-desktop,
.stepped-process-dotted-line-horizontal {
position: relative;
z-index: auto;
}
.stepped-process-dotted-line-horizontal:after {
content: "";
border-bottom: 8px dotted #e8e8e8;
position: absolute;
right: -76px;
width: 80px;
z-index: -1;
}
.stepped-process-dotted-line-desktop:after,
.stepped-process-dotted-line-horizontal-desktop:after {
content: "";
border-bottom: 8px dotted #e8e8e8;
position: absolute;
right: -76px;
width: 80px;
z-index: -1;
}
}
@media (max-width: 827px) {
.stepped-process-dotted-line-horizontal-desktop:after {
display: none;
}
}
@media (min-width: 828px) and (max-width: 1103px) {
.stepped-process-dotted-line-desktop:after {
display: none;
}
}
.stepped-process-in-progress-box {
height: 40px;
border-radius: 8px;
border: solid 1px #e8e8e8;
background-color: #ffffff;
padding: 0 2.5rem;
}
.stepped-process-round-check {
width: 40px;
height: 40px;
border: solid 2px #e0e1e2;
border-radius: 50%;
}
.stepped-process-ongoing {
width: 30px;
height: 30px;
background-color: #e8e8e8;
border-radius: 50%;
}
.black-background {
background-color: #0d0d0d;
}
.dropdown-from-right .dropdown-selection-popup {
right: 0;
}
.dropdown-standard-min-width .dropdown-selection-popup {
min-width: 28rem;
}
.routed-dropdown-section-navigation-bar {
background-color: var(--primary-color);
font-size: 1.2rem;
color: #ffffff;
}
.routed-dropdown-section-navigation-bar-padding {
padding: 0.2rem 2rem;
}
.select-bar {
border: 1px solid #d8d8d8;
border-radius: 5px;
overflow: hidden;
}
.select-bar-padding {
padding: 10px;
}
.select-bar-item {
text-align: center;
}
.select-bar-item.active {
background-color: var(--primary-color);
color: #ffffff;
}
.overlay-white-transparant-background {
background-color: rgba(255, 255, 255, 0.9);
}
.dnd-list {
list-style: none;
}
.dnd-item__icon {
width: 2.6rem;
height: 2.1rem;
}
.dnd-item__icon {
width: 2.6rem;
height: 2.1rem;
}
.dnd-item__title {
font-size: 2.4rem;
font-weight: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
}
.dnd-item__date {
font-size: 1.8;
font-weight: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
}
.dnd-item__square {
font-size: 1.4rem;
font-weight: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #959595;
}
.dnd-item__drag {
cursor: move;
}
.usps__container > div:first-child() {
margin: 0;
}
.usps__container > div {
margin-left: 5rem;
}
.usps__item {
max-width: 180px;
margin: 0 auto;
padding: 0 10px;
}
@media (min-width: 610px) {
.usps__item {
padding: 0;
}
}
@media (min-width: 900px) {
.usps__item {
max-width: 18rem;
padding: 0;
}
}
.usps__img-size {
height: 7rem;
width: 7rem;
margin-bottom: 0.7rem;
}
.usps__text {
font-size: 1.2rem;
font-weight: normal;
line-height: 1.67;
letter-spacing: normal;
color: #0d0d0d;
margin: 0;
}
.product-slider {
}
.product-slider__container {
height: 20rem;
}
.product-slider--left,
.product-slider--right {
position: absolute;
top: 37%;
}
.product-slider--left {
left: 1.5rem;
}
.product-slider--right {
right: 1.5rem;
}
@media (min-width: 535px) {
.product-slider--left {
left: 2rem;
}
.product-slider--right {
right: 2rem;
}
}
@media (min-width: 768px) {
.product-slider {
padding: 2rem 4rem;
}
}
.slider-position-indicator {
width: 1.2rem;
height: 1.2rem;
background: #d1d1d1;
border-radius: 50%;
}
.slider-position-indicator.active {
background: var(--primary-color);
}
.header__ul {
margin: 0;
padding: 0;
list-style: none;
}
.header__link {
font-size: 1.5rem;
font-weight: normal;
line-height: normal;
letter-spacing: -0.15px;
color: #ffffff;
text-decoration: none;
}
.header__breadcrumb-icon {
width: 0.6rem;
}
.header__h1 {
font-size: 2.6rem;
font-weight: 600;
line-height: normal;
letter-spacing: -0.5px;
color: #ffffff;
}
@media (min-width: 600px) {
.header__h1 {
font-size: 5.6rem;
}
}
.header__city {
font-size: 2rem;
font-weight: normal;
letter-spacing: normal;
color: #ffffff;
font-weight: 300;
}
.header__image {
position: absolute;
bottom: 0;
height: 25%;
right: 0;
width: 150px;
height: 33px;
}
@media (min-width: 940px) {
.header__image {
height: 80px;
width: 359px;
}
}
.storage__container {
padding: 2.6rem 1.9rem 1.8rem 1.9rem;
border-radius: 0.4rem;
border: solid 0.1rem #d1d1d1;
background-color: #ffffff;
box-sizing: border-box;
}
.storage__image {
width: 24.1rem;
height: 21.2rem;
}
@media (min-width: 600px) {
.storage__container {
padding: 2.6rem 1.9rem 1.8rem 3.4rem;
}
.storage__image {
margin-right: 2.5rem;
}
}
.storage__list {
margin-top: 0;
margin-bottom: 1rem;
padding: 0;
}
.storage__list li:nth-child(odd) {
background: #f1f1f2;
}
.storage__list li {
padding: 0.5rem 0.8rem 0.7rem 1.6rem;
}
@media (min-width: 600px) {
.storage__list {
margin: 0;
padding: 0;
}
}
.storage__title {
font-size: 3.6rem;
font-weight: bold;
line-height: normal;
letter-spacing: -1px;
color: var(--primary-color);
margin: 0;
}
.storage__info {
font-size: 2.2rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
}
@media (min-width: 600px) {
.storage__title {
font-size: 5.6rem;
}
.storage__info {
font-size: 3.2rem;
}
}
.storage__list-title {
font-size: 1.2rem;
font-weight: bold;
line-height: normal;
}
.storage__list-text {
font-size: 1.2rem;
line-height: normal;
}
.storage__price-list {
margin: 0;
padding: 0;
}
.storage__price-current-month {
font-size: 1.6rem;
font-weight: normal;
line-height: 1.55;
letter-spacing: normal;
color: #0d0d0d;
}
.storage__price-current-month-text {
font-size: 1.6rem;
font-weight: normal;
letter-spacing: normal;
color: #0d0d0d;
}
.storage__price-future-months {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.55;
letter-spacing: normal;
color: #0d0d0d;
}
.storage__price-future-months-text {
font-size: 1.6rem;
font-weight: bold;
letter-spacing: normal;
color: #0d0d0d;
}
@media (min-width: 600px) {
.storage__price-current-month {
font-size: 2rem;
}
.storage__price-current-month-text {
font-size: 2rem;
}
.storage__price-future-months {
font-size: 2rem;
}
.storage__price-future-months-text {
font-size: 2rem;
}
}
.info-points__title {
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
margin-bottom: 0.8rem;
margin-top: 0rem;
}
.info-points__list {
margin: 0;
padding: 0;
}
.info-points__list .info-points__list-item:first-child {
border-top: 0.1rem solid #d1d1d1;
}
.info-points__list-item {
border-bottom: 0.1rem solid #d1d1d1;
padding: 0.5rem 1rem 0.5rem 0.5rem;
}
.info-points__icon {
width: 5rem;
height: 5rem;
}
.info-points__text {
font-size: 1.6rem;
font-weight: 300;
line-height: 1.44;
letter-spacing: normal;
color: #0d0d0d;
margin-left: 1rem;
}
@media (min-width: 600px) {
.info-points__text {
font-size: 2.5rem;
}
}
.select-size__h2 {
font-size: 1.4rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
margin-bottom: 1.6rem;
}
.select-size__list {
margin: 0;
padding: 0 1.6rem;
list-style: none;
max-width: 128.1rem;
}
@media (min-width: 900px) {
.select-size__list {
padding: 0;
}
}
@media (min-width: 1300px) {
.select-size__list {
width: 128.1rem;
}
}
.select-size__list .select-size__list-item:first-child {
margin-left: 0;
}
.select-size__list .select-size__list-item {
margin-left: 2.7rem;
flex: 1;
}
.select-card {
padding: 1.8rem 2.1rem 2.3rem;
border-radius: 0.4rem;
border: solid 0.1rem #d1d1d1;
background-color: #ffffff;
max-width: 300px;
box-sizing: border-box;
flex: 1;
}
.select-card__image {
width: 16rem;
height: 14.1rem;
margin: 0 auto 0.8rem auto;
}
.select-card__title {
font-size: 3.2rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
margin: 0;
}
.select-card__price {
font-size: 1.8rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
}
.select-card__no-storage-wrapper {
min-height: 22px;
}
.select-card__no-storage {
font-size: 1.2rem;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
opacity: 0.25;
margin: 0;
}
.select-card__tag-list div:first-child {
margin-left: 0;
}
.select-card__tag-list div {
margin-left: 0.8rem;
margin-bottom: 0.8rem;
}
.select-card__btn--mt {
margin-top: auto;
}
.select-btn {
border-radius: 0.3rem;
border: none;
font-size: 1.4rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
padding: 1.4rem 2rem;
width: 100%;
}
.select-btn--red {
background-color: var(--primary-color);
}
.select-btn--black {
background-color: #0d0d0d;
}
.select-tag-btn {
border-radius: 0.4rem;
border: none;
font-size: 1.2rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
padding: 0.4rem 1.4rem 0.4rem 1.6rem;
}
.select-tag-btn-normal {
background-color: #d1d1d1;
color: #0d0d0d;
}
.select-tag-btn-inactive {
background-color: #d1d1d1;
color: #0d0d0d;
opacity: 0.35;
}
.select-tag-btn-selected {
background-color: var(--primary-color);
color: #ffffff;
}
.select-slider {
height: 50rem;
padding: 2rem;
}
.select-slider__container {
height: 38.5rem;
}
.facility-overview-wrapper {
width: 89.5rem;
}
.facility-overview__map {
width: 100%;
max-width: 43.2rem;
height: 24.9rem;
}
.facility-overview__h3 {
font-size: 1.4rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
margin-top: 0;
margin-bottom: 0.8rem;
}
.facility-overview__h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1;
letter-spacing: normal;
color: #0d0d0d;
margin: 0;
}
.facility-overview__postal-address {
font-size: 1.4rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
}
.facility-overview__content {
flex: 1;
margin-top: 2rem;
}
@media (min-width: 900px) {
.facility-overview__content {
margin-left: 3.4rem;
margin-top: 0;
}
}
.facility-overview__info {
font-size: 2rem;
font-weight: normal;
line-height: 1.55;
letter-spacing: normal;
color: #0d0d0d;
}
.facility-overview__info--padding {
padding-left: 2rem;
}
.facility-overview__contact-link {
font-size: 2rem;
font-weight: normal;
line-height: 1.55;
letter-spacing: normal;
color: #0d0d0d;
text-decoration: none;
}
.facility-overview__open-time {
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.facility-overview__desc {
margin-bottom: 1.2rem;
}
.facility-stars .facility-overview__star:first-child {
margin-left: 0;
}
.facility-overview__star {
width: 1.9rem;
height: 2rem;
margin-left: 0.7rem;
}
.date-box__date {
font-size: 2.4rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #313131;
margin-right: 0.5rem;
}
.date-box__month {
font-size: 1.2rem;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
color: #313131;
}
.date-box__weekday {
font-size: 0.9rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #999999;
}
.access-list--border {
box-sizing: border-box;
padding-bottom: 0.5rem;
border-bottom: 0.1rem solid #d1d1d1;
}
.access-list,
.access-list--ul {
margin: 0;
padding: 0;
list-style: none;
}
.access-list li:first-child {
margin-top: 0;
}
.access-list li {
margin-top: 3.5rem;
}
.access-list--ul .access-list--item:first-child {
margin-top: 1.1rem;
}
.access-list--ul .access-list--item {
margin-top: 0.8rem;
}
.access-list--item {
font-size: 1.2rem;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #0d0d0d;
white-space: pre-wrap;
}
.access-list--item-time {
width: 4rem;
margin-right: 0.5rem;
}
.access-list--status {
padding: 4px;
width: 12.1rem;
border-radius: 4px;
text-align: center;
margin-right: 1.8rem;
background-color: #d1d1d1;
color: #0d0d0d;
}
.access-list--status.entry {
background-color: #d1d1d1;
color: #0d0d0d;
}
.access-list--status.personRemoved {
background-color: var(--primary-color);
color: #ffffff;
}
.access-list--status.personAdded {
background-color: #4acb76;
color: #ffffff;
}
.access-list--status.newContract {
background-color: #4acb76;
color: #ffffff;
}
.access-list--status.contractEnded {
background-color: var(--primary-color);
color: #ffffff;
}
.access-list--status.alarmActivated {
background-color: #e6bf67;
}
.access-list--status.alarmDeactivated {
background-color: #b2de6c;
}
.my-menu__icon {
width: 17px;
height: 17px;
}
.my-menu__link {
font-size: 1.2rem;
color: #0d0d0d;
}
.my-menu__links--mt {
margin-top: 1.4rem;
}
.my-menu__links--mt > a:first-child {
margin-top: 0;
}
.my-menu__links--mt > a {
margin-top: 0.5rem;
}
.fast-select-title__container {
margin-bottom: 0.5rem;
}
.fast-select-input__container {
max-width: 60rem;
margin-bottom: 2rem;
}
.fast-select__input {
box-sizing: border-box;
border-radius: 0.4rem;
border: solid 0.1rem #d1d1d1;
background-color: #ffffff;
padding: 1.8rem 4rem 1.7rem 1.7rem;
}
.fast-select__input::placeholder {
font-size: 1.8rem;
font-weight: normal;
line-height: normal;
color: #d8d8d8;
}
.fast-select-btn--margin-bottom {
margin-bottom: 3rem;
}
.fast-select__btn {
padding: 0.8rem 1.8rem 1rem 1.5rem;
border-radius: 0.3rem;
border: solid 1px var(--primary-color);
text-decoration: none;
font-size: 1.4rem;
line-height: normal;
letter-spacing: normal;
color: #000000;
}
.fast-select__btn {
padding: 0.8rem 1.8rem 1rem 1.5rem;
border-radius: 0.3rem;
border: solid 1px var(--primary-color);
text-decoration: none;
font-size: 1.4rem;
line-height: normal;
letter-spacing: normal;
color: #000000;
}
@media (max-width: 600px) {
.fast-select__btn:first-child {
margin-right: 1.5rem;
}
}
.fast-select--icon {
position: absolute;
right: 2rem;
top: 2.3rem;
width: 1.2rem;
}
.monthly-stats__title {
font-size: 2rem;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: var(--primary-color);
margin-top: 0;
margin-bottom: 1rem;
}
.monthly-stats__list {
list-style: none;
margin: 0;
padding: 0;
}
.monthly-stats__list--space-around {
justify-content: space-around;
}
.monthly-stats__list-center-label {
margin-left: 3rem;
}
.monthly-stats__list--item {
width: 15rem;
margin-right: 3rem;
}
.monthly-stats-item__value {
font-size: 3.2rem;
font-weight: normal;
line-height: normal;
letter-spacing: -0.75px;
color: #000000;
}
.monthly-stats-item__title {
font-size: 1.6rem;
font-weight: normal;
line-height: normal;
letter-spacing: -0.36px;
color: #000000;
}
@media (min-width: 600px) {
.monthly-stats-item__value {
font-size: 4.2rem;
}
.monthly-stats-item__title {
font-size: 2rem;
}
}
.standard-row {
box-sizing: border-box;
}
.standard-row-padding {
padding: 0.5rem 1rem;
}
.medium-row-padding {
padding: 1rem;
}
/*
.standard-alternating-rows .standard-row:nth-of-type(2n + 1) {
background-color: #fafafa;
}
*/
.statistics-table-section__wrapper {
margin-bottom: 3rem;
}
.statistics-table-section__wrapper:last-child {
margin-bottom: 0;
}
.statistics-table-label--ml {
margin-left: 4.7rem;
}
.statistics-table__first-value {
width: 6.3rem;
}
.statistics-table__second-value {
width: 6.2rem;
}
.statistics-table__title {
font-size: 2rem;
font-weight: bold;
line-height: normal;
color: var(--primary-color);
margin-top: 0;
margin-bottom: 2.2rem;
}
.grey-image-background {
background-color: #d8d8d8;
}
.d-flex-align-center {
display: flex;
align-items: center;
}
.flex__half {
flex: 0.5;
}
.alarm-status-img__alarm-lock {
width: 42px;
height: 46px;
position: relative;
top: 3px;
}
.alarm-status-img__last-visit {
width: 46px;
height: 46px;
position: relative;
top: -4px;
}
.alarm-status-circle.grey {
background-color: #d1d1d1;
}
.alarm-status-circle.green {
background-color: #b2de6c;
}
.alarm-status-circle {
border-radius: 50%;
width: 94px;
height: 94px;
}
.alarm-status__margin {
margin: 0 10px;
}
.alarm-status-title {
margin: 0;
font-size: 24px;
}
/*----------- handle storage component ----------*/
.handle-storage-labels {
font-size: 14px;
}
.checkbox-storage {
margin-right: 15px;
}
.storage-number {
width: 127px;
}
.storage-number-label {
width: 155px;
}
.storage-size {
width: 121px;
}
.rental-fee {
width: 122px;
}
.standard-flag {
font-size: 12px;
color: #fff;
border-radius: 4px;
}
.standard-flag-padding {
padding: 0.4rem;
}
.status-icon-box {
width: 22px;
height: 22px;
border-radius: 4px;
box-sizing: border-box;
background-color: rgb(239, 239, 239);
font-size: 12px;
color: #fff;
}
.status-icon-box-padding {
padding: 4px;
}
.storage-status-button {
width: 121px;
height: 22px;
border: none;
border-radius: 4px;
font-size: 12px;
text-align: center;
background-color: rgb(239, 239, 239);
color: #fff;
}
.button-status-green {
background-color: #4acb76;
}
.button-status-light-green {
background-color: #abe6bf;
}
.button-status-light-grey {
background-color: #ebebeb;
}
.button-status-red {
background-color: var(--primary-color);
}
.button-status-yellow {
background-color: #b2de6c;
}
.button-status-black {
background-color: #000000;
}
.storage-status-button-container {
width: 148px;
}
.storage-customer {
width: 252px;
}
.storage-handle {
width: 115px;
}
.storage-arrow-icon {
margin-left: 3px;
width: 12px;
height: 12px;
}
.arrow-icon {
width: 12px;
height: 12px;
}
.more-icon {
width: 23px;
height: 23px;
}
.arrow-icon-open {
margin-left: 3px;
transform: rotate(180deg);
}
/* unpaid payment part */
.divider-line {
border: solid 1px #979797;
}
.divider-line-hr {
background-color: #979797;
}
.payment-amount {
width: 110px;
}
.payment-date {
width: 188px;
}
.insufficient-funds {
width: 521px;
}
.attempt-payment-button {
width: 156px;
height: 44px;
font-size: 14px;
border: none;
color: #fff;
border-radius: 3px;
background-color: var(--primary-color);
}
.unpaid-payment-row-padding {
padding: 1.6rem 0;
}
.unpaid-payment-label {
position: absolute;
bottom: 55px;
font-size: 14px;
}
.send-message-label {
font-size: 14px;
}
.dropdown-container {
width: 600px;
height: 57px;
margin: 5px 100px 12px 0;
border-radius: 3px;
border: solid 1px #d1d1d1;
background-color: #fff;
}
.dropdown-select {
border: none;
outline: none;
width: 600px;
height: 57px;
}
/* storage handle mobile */
.checkbox-storage-mobile {
margin-right: 6px;
}
.storage-number-mobile {
width: 65px;
}
.unpaid-payment-label-mobile {
position: absolute;
bottom: 110px;
font-size: 14px;
}
.storage-arrow-icon-mobile {
margin-left: 3px;
width: 10px;
height: 10px;
}
.insufficient-funds-mobile {
width: 121px;
}
.unpaid-payment-row-padding-mobile {
padding: 0.8rem 0;
}
.dropdown-container-mobile {
width: 100%;
height: 37px;
margin: 5px 100px 12px 0;
border-radius: 3px;
border: solid 1px #d1d1d1;
background-color: #fff;
display: flex;
}
.dropdown-select-mobile {
border: none;
outline: none;
width: 100%;
height: auto;
}
/* ----------- booking verification -------- */
.order-field-container {
border-radius: 4px;
border: solid 1px #d1d1d1;
background-color: #fff;
}
.order-field-padding {
padding: 1.2rem;
}
.order-field-padding-mobile {
padding: 1rem;
}
.field-inner-label {
font-size: 32px;
font-weight: bold;
color: var(--primary-color);
}
.field-inner-label-mobile {
font-size: 22px;
}
.field-inner-sublabel {
margin-top: 5px;
font-size: 20px;
}
.field-inner-sublabel-mobile {
margin-top: 4px;
font-size: 15px;
}
.order-button-container {
width: 189px;
height: 62px;
border-radius: 4px;
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.25);
background-color: var(--primary-color);
}
.order-button-container.mobile {
width: 100px;
height: 40px;
}
.order-button {
font-size: 24px;
text-align: center;
color: #fff;
}
.order-button.mobile {
font-size: 16px;
text-align: center;
color: #fff;
}
.access-code-stars {
font-size: 28px;
letter-spacing: 12.5px;
}
.access-code-stars.mobile {
font-size: 18px;
letter-spacing: 5.5px;
}
.access-code-stars.stars {
margin-bottom: -25px;
font-size: 60px;
}
.access-code-stars.mobile.stars {
margin-bottom: -20px;
font-size: 40px;
letter-spacing: 1.5px;
}
/*---------- montly report -----------*/
.monthly-report__title {
font-size: 24px;
font-weight: 600;
}
.monthly-report__amount-label {
width: 80px;
font-size: 12px;
font-weight: bold;
color: #0d0d0d;
text-align: right;
}
.monthly-report__storage {
width: 41px;
font-size: 12px;
color: #0d0d0d;
}
.monthly-report__amount {
width: 80px;
font-size: 12px;
text-align: right;
color: #0d0d0d;
}
.monthly-report__total {
width: 80px;
font-size: 12px;
font-weight: bold;
text-align: right;
}
/*--------- error report row ---------*/
.errorreport-row__container {
border-radius: 3px;
border: solid 1px #d1d1d1;
background-color: #fff;
}
.dropdown-option-item {
font-size: 18px;
}
.clear-input {
border: none;
outline: none;
}
.clear-textarea {
border: none;
outline: none;
resize: none;
}
.textarea-size-container {
height: 235px;
}
.error-report__button.mobile {
width: 256px;
height: 60px;
}
/*--------- manage error report -------*/
.manage-errorreport__title {
font-size: 32px;
font-weight: bold;
letter-spacing: -0.5px;
}
.manage-errorreport__title.mobile {
font-size: 22px;
letter-spacing: -0.5px;
}
.font-size-medium {
font-size: 16px;
}
.font-size-standard {
font-size: 18px;
}
.font-size-medium.bold {
font-weight: bold;
}
.ongoing-button {
width: 110px;
height: 36px;
border-radius: 3px;
border: solid 1px #d1d1d1;
font-size: 18px;
color: #0d0d0d;
}
.manage-errorreport__date {
width: 110px;
font-size: 12px;
line-height: 2.67;
text-align: right;
color: #a1a1a1;
}
.extra-messages-elements {
font-size: 12px;
}
.line-height-standard {
line-height: 1.5;
}
.show-all-comments {
width: 124px;
font-size: 12px;
font-weight: bold;
text-align: right;
}
.overflow-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.font-size-medium.mobile {
font-size: 14px;
}
.arrow-button-circle-right {
display: block;
position: relative;
top: 1px;
}
.plan-action-title {
font-size: 24px;
font-weight: 600;
}
.plan-action-button {
width: 160px;
height: 44px;
padding: 0 10px;
border-radius: 3px;
background-color: var(--primary-color);
}
.plan-action-button-label {
font-size: 14px;
text-align: center;
color: #fff;
}
.plan-action-description {
line-height: 1.5;
font-size: 16px;
color: #9c9a9f;
}
.occupancy-table-progress-bar-height {
height: 0.7rem;
}
.progress-bar {
background-color: #dddddd;
}
.occupancy-table-progress-bar > .indicator {
background-color: var(--primary-color);
}
.progress-bar.occupancy-table-maintenance-progress-bar {
background-color: #000000;
}
.occupancy-table-area-cell-width {
width: 7.5rem;
}
.ending-subscriptions-table-area-cell-width {
width: 12.5rem;
}
/*--------- image gallery -------*/
.image-gallery__container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 210px;
grid-gap: 1rem;
}
.image-gallery__container.grid-3 {
grid-auto-rows: 220px;
}
.image-gallery__container.mobile-gap {
grid-gap: 0.7rem;
}
.image-gallery__container.mobile-gap.grid-3 {
grid-auto-rows: 120px;
}
.image-gallery__container.mobile-gap.grid-2 {
grid-auto-rows: 120px;
}
.image-gallery__container.mobile-gap.grid-4 {
grid-auto-rows: 140px;
}
.image-gallery__container.three-columns {
grid-template-columns: repeat(9, 1fr);
}
.gallery-item {
width: 100%;
height: 100%;
}
.image-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transition: 0.5s ease-in-out;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
.column-1 {
grid-column: span 1;
}
.column-2 {
grid-column: span 2;
}
.column-3 {
grid-column: span 3;
}
.column-4 {
grid-column: span 4;
}
.column-5 {
grid-column: span 5;
}
.column-6 {
grid-column: span 6;
}
.row-1 {
grid-row: span 1;
}
.row-2 {
grid-row: span 2;
}
.row-3 {
grid-row: span 3;
}
.row-4 {
grid-row: span 4;
}
.row-5 {
grid-row: span 5;
}
.row-6 {
grid-row: span 6;
}
.gallery-icon__position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex-direction: column;
}
.gallery-icon {
width: 44px !important;
height: 44px !important;
}
.gallery-icon__text {
margin: 13px 0 0;
font-size: 16px;
text-align: center;
color: #fff;
}
.background-dark {
filter: brightness(40%);
width: 100%;
height: 100%;
}
/*--------- selected review -------*/
.review-item__review {
font-size: 20px;
line-height: 1.55;
}
.review-item__author {
text-align: right;
margin: 5px 0;
font-size: 14px;
font-weight: bold;
}
.selected-review__title {
font-weight: 600;
font-size: 32px;
}
.selected-review__title.mobile {
font-weight: 600;
font-size: 22px;
}
.selected-review__input {
padding: 10px 20px;
border-radius: 4px;
border: solid 1px #d1d1d1;
color: #d1d1d1;
font-size: 1.6rem;
font-weight: 600;
}
.hover-row {
background-color: rgba(52, 173, 187, 0);
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.hover-row:hover {
background-color: rgba(52, 173, 187, 0.1);
}
.review-item__date {
font-size: 14px;
}
.rate-star-size.large {
width: 40px;
height: 40px;
}
.rate-star-size {
width: 20px;
height: 20px;
}
.rate-star-size.mobile {
width: 15px;
height: 15px;
}
.facebook-link__container {
padding: 16px;
border-radius: 4px;
background-color: #fff;
color: #000;
}
.facebook-link__container.mobile {
padding: 8px 14px;
}
.medium-social-media {
width: 22px;
height: 22px;
}
.medium-social-media.mobile {
width: 16px;
height: 16px;
}
.facebook-link__label {
margin-left: 8px;
font-size: 16px;
font-weight: 600;
}
.facebook-link__label.mobile {
font-size: 14px;
}
/*------ personal log -------*/
.micro-icon {
width: 9px !important;
height: 9px !important;
}
.xmicro-icon {
width: 7px;
height: 7px;
}
.small-icon {
width: 16px;
height: 16px;
}
.small-icon.clipboard-icon {
width: 14px;
height: 14px;
}
.medium-icon {
width: 22px;
height: 22px;
}
.chevron-right {
transform: rotate(-90deg);
}
.image-ring {
border-radius: 50%;
border: 1px solid #d1d1d1;
}
.image-ring.facility-finance__image-ring {
padding: 10px;
}
.facility-finance__amount-label {
position: absolute;
top: -16px;
}
/*----- my referral code -----*/
.flex-half {
/* flex: 50%; */
width: 50%;
}
.mb-micro.my-referral-code-fb-logo {
margin-bottom: 0.2rem;
}
/*----- select size with details -----*/
.offer-section__border-radius {
position: absolute;
top: 0;
right: 0;
border-radius: 0 10px 0 25px;
}
.offer-section__padding {
padding: 1.6rem 4rem;
}
.offer-section__padding.mobile-padding__offer-section {
padding: 1rem 3rem;
}
.offer-section-theme-color {
background-color: var(--primary-color);
color: #ffffff;
font-weight: 600;
font-size: 1.8rem;
/* box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.25) inset; */
}
/*----- breadcrumb -----*/
.expanded-div {
position: absolute;
left: -15px;
top: -15px;
right: -15px;
bottom: -15px;
/* background-color: rgba(64, 224, 208, 0.527); */
}
.breadcrumb-font {
font-size: 1rem;
font-weight: 600;
}
.mb-small.mb-breadcrumb__dots {
margin-bottom: 6px;
}
.dropdown-btn {
outline: none;
border: none;
}
.dropdown-container {
margin-top: 10px;
width: 180px;
height: auto;
color: var(--primary-color);
}
.dropdown-content {
padding: 1rem 0;
overflow: hidden;
}
.breadcrumb-container {
background-color: var(--primary-color);
padding: 2rem;
color: white;
}
/*----- facility introduction -----*/
.image-ring.facility-introduction__inner-ring {
border-radius: 50%;
border: solid 1px var(--primary-color);
width: 140px;
height: 140px;
}
.facility-introduction__image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.facility-introduction__image.mobile {
width: 100px;
height: 100px;
}
.standard-button.facility-introduction__button {
color: #fff;
}
.standard-field.standard-button {
background-color: transparent;
color: #0d0d0d;
}
.standard-field.standard-button:hover {
background-color: rgba(52, 173, 187, 0.1);
color: #0d0d0d;
}
.custom-checkbox {
width: 32px;
height: 32px;
box-sizing: border-box;
border-radius: 0.3rem;
border: 0.1rem solid #d1d1d1;
}
.custom-checkbox.checked {
}
.custom-checkbox-padding {
padding: 8px;
}
.wp-block-image img {
max-width: 100%;
}
.cookie-bar-position {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.cookie-bar {
border-top: 1px solid var(--primary-color);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.7);
}
.cookie-bar-padding {
padding: 1rem;
}
.cookie-bar-title {
font-size: 1.2rem;
color: #959595;
font-weight: bold;
}
.cookie-setting-label {
font-size: 1.2rem;
color: #959595;
font-weight: bold;
}
.facility-status-icon {
width: 40px;
height: 40px;
padding: 14px 13px 15px 14px;
border: solid 1px #4acb76;
border-radius: 50%;
}
.facility-status-icon.mobile {
width: 26px;
height: 26px;
padding: 7px 6px 8px 7px;
}
.facility-status-icon-img-status-ok {
filter: none;
}
.facility-status-icon-img-status-error {
filter: brightness(0) invert(1);
}
.facility-status-icon-img-status-info {
filter: brightness(0) invert(0.82);
}
.facility-status-icon-ring-status-ok {
background-color: #fff;
border: solid 1px #4acb76;
}
.facility-status-icon-ring-status-error {
background-color: var(--primary-color);
border: solid 1px var(--primary-color);
}
.facility-status-icon-ring-status-info {
background-color: #fff;
border: solid 1px #d1d1d1;
}
.facility-status-icon-text {
color: #0d0d0d;
}
.facility-status-large-text {
font-size: 24px;
}
.facility-status-icon-status {
height: 28px;
margin: 2px 0 0;
font-size: 24px;
}
.grey-border {
border: solid 1px #d1d1d1;
}
.facility-status-bar-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.no-flex-shrink {
flex-shrink: 0;
}
.latest-events-status-icon {
width: 22px;
height: 22px;
border-radius: 4px;
box-sizing: border-box;
}
.latest-events-status-icon-padding {
padding: 4px;
}
.latest-events-icon-status-ok {
background-color: #4acb76;
}
.latest-events-icon-status-error {
background-color: var(--primary-color);
}
.latest-events-icon-status-info {
background-color: #d1d1d1;
}
.latest-events-icon-status-added {
background-color: #4acb76;
}
.latest-events-icon-status-removed {
background-color: var(--primary-color);
}
.latest-events-row-time {
width: 30px;
}
.latest-events-width {
width: 280px;
}
.latest-events-date-label {
color: #999999;
font-size: 1.2rem;
}
.latest-events-line {
background-color: #d1d1d1;
}
.table-cell-width-select {
width: 13px;
}
.table-cell-width-customer-select {
width: 13px;
}
.table-cell-width-customer-name {
width: 240px;
}
.table-cell-width-text-flag {
width: 148px;
}
.table-cell-width-short {
width: 80px;
}
.table-cell-width-medium-short {
width: 120px;
}
.table-cell-width-medium {
width: 160px;
}
.table-cell-width-long {
width: 240px;
}
.table-cell-width-extra-long {
width: 320px;
}
.table-cell-width-more-option {
width: 23px;
}
.list-item-margin-right {
margin-right: 10px;
}
.latest-events-day {
margin-bottom: 18px;
}
.facility-management-info {
display: flex;
flex-direction: row;
gap: 20px;
}
.facility-management-info-left {
width: 50%;
}
.facility-management-info-right {
width: 50%;
gap: 20px;
}
.facility-example-img {
height: 200px;
width: 100%;
}
.facility-management-info__h2 {
font-size: 2.6rem;
font-weight: 400;
}
.facility-staff-example-img {
width: 80px;
height: 100px;
}
.facility-management-info-staff-description {
margin-left: 0.8rem;
}
.facility-staff-contact-info {
color: var(--primary-color);
}
.facility-staff-contact-info * {
margin-right: 6px;
}
.storage-minisite-container {
gap: 5%;
}
.storage-minisite-item-image-mobile {
width: 80px;
}
.storage-minisite-item-image {
width: 160px;
}
.storage-minisite-left-container {
width: 406px;
}
.storage-minisite-heading {
text-align: center;
font-size: 2.8rem;
font-weight: 200;
margin: 10px 8px 8px 8px;
line-height: 1.4;
}
.storage-minisite-storage-description {
line-height: 1.2;
}
.storage-minisite-discount-box {
border: 1px solid var(--primary-color);
border-radius: 0.6rem;
padding: 8px;
margin-right: 1%;
}
.storage-minisite-discount-text {
color: var(--primary-color);
text-align: center;
vertical-align: middle;
padding: 0;
font-size: 1.2rem;
}
.storage-minisite-ordinary-price-text {
color: #959595;
font-size: 1.2rem;
}
.storage-minisite-item-row {
align-items: center;
width: 700px;
}
.storage-minisite-item-name {
width: 65px;
}
.storage-minisite-item-cta {
margin-left: auto;
font-size: 1.2rem;
}
.storage-minisite-divider-hr {
background-color: #f4f4f4;
}
.storage-minisite-store-img {
height: 270px;
width: 100%;
}
.storage-minisite-icon-box {
width: 70px;
height: 70px;
border: 1px solid #d1d1d1;
border-radius: 5px;
}
.storage-minisite-icon {
width: 30px;
display: block;
margin-left: auto;
margin-right: auto;
}
.storage-minisite-icon-container {
margin-top: 10px;
}
.storage-minisite-icon-text {
text-align: center;
font-size: 1rem;
}
.storage-minisite-icon-row {
margin-top: 25px;
justify-content: center;
gap: 3%;
}
.facility-progress-map-container {
width: 500px;
height: 500px;
}
.facility-progress-bar-overlay {
left: 20px;
z-index: 100000000;
}
.facility-progress-bar-container {
background-color: #fff;
width: 33px;
height: 8px;
border: 1px solid black;
border-radius: 2px;
position: absolute;
left: -23px;
top: -35px;
}
.facility-progress-bar-hr {
background-color: #4acb76;
height: 100%;
}
.economy-line-graph-container {
/* max-width: 1000px; */
}
.economy-line-graph-container-text-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.economy-overview-section-heading {
font-size: 2rem;
color: var(--primary-color);
}
.economy-line-graph-container-right-text {
margin-right: 10px;
}
.economy-line-graph-container-right-text > :first-child {
padding-right: 30px;
}
.economy-line-graph-container-right-text img {
padding-right: 8px;
}
.economy-result-heading-row {
display: flex;
flex-direction: row;
}
.economy-result-left-column {
position: relative;
left: -100px;
}
.small-circle-icon {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 6px;
}
.economy-overview-top-icons {
display: flex;
flex-direction: row;
}
.economy-overview-left-icon {
flex-grow: 3;
}
.customer-lease-info-panel hr {
background-color: #d1d1d1;
}
.customer-lease-info-panel-icon {
width: 40px;
height: 40px;
margin: 0 10px 0 0;
padding: 14px 13px 15px 14px;
border: solid 1px #d1d1d1;
border-radius: 50%;
}
.customer-lease-info-panel-row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 60%;
margin-right: 10%;
}
.customer-lease-info-panel-row-right {
display: flex;
flex-direction: row;
justify-content: end;
width: 30%;
}
.customer-lease-info-panel-row-bottom-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.customer-lease-info-panel-row-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 3vw;
}
.flex-row-full-width {
display: flex;
flex-direction: row;
width: 100%;
}
.customer-lease-info-panel-row-right-bottom {
align-self: flex-start;
}
.customer-lease-info-panel-lease-info-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.customer-lease-info-panel-lease-info {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 70%;
}
.customer-lease-info-panel-lease-info-header {
padding-bottom: 1rem;
}
.customer-lease-info-panel-date-label {
color: #d1d1d1;
font-size: 1.2rem;
}
.customer-lease-info-panel-events-timestamp {
color: #d1d1d1;
font-size: 1.6rem;
width: 4vw;
}
.customer-lease-info-panel-event-row {
align-items: center;
}
.custdomer-lease-info-panel-events-icon {
margin-right: 2rem;
}
.customer-lease-info-panel-event-description {
font-size: 1.6rem;
}
.customer-lease-info-panel-filter-icon {
float: right;
position: relative;
top: -2rem;
}
.customer-lease-info-panel-event-icon {
width: 20px;
height: 20px;
margin: 0 2rem 0 0;
padding: 4px;
border: solid 2px #d1d1d1;
border-radius: 50%;
}
.flex-row-space-between {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.full-width {
width: 100%;
}
.align-center {
align-items: center;
}
.customer-lease-info-panel-event-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 1.6rem;
padding-right: 0.8rem;
}
.customer-lease-info-panel-red-arrow {
width: 1rem;
height: 1.3rem;
}
.storage-pricing-header {
color: var(--primary-color);
font-size: 2rem;
}
.storage-pricing-table {
margin: 0;
padding: 0;
border: 1px solid #d1d1d1;
border-collapse: collapse;
border-top: none;
border-left: none;
width: 100%;
font-size: 1.4rem;
}
.storage-pricing-table-header {
border: 1px solid #d1d1d1;
border-left: none;
text-align: left;
padding-left: 10px;
}
.storage-pricing-table-td {
border: 1px solid #d1d1d1;
text-align: right;
width: 50px;
height: 32px;
padding-right: 4px;
}
.storage-pricing-table-size-header {
border: 1px solid #d1d1d1;
border-top: none;
text-align: left;
font-weight: 600;
padding: 6px;
}
.storage-pricing-table-td input {
border: none;
text-align: right;
}
.storage-pricing-table-td input:focus {
border: none;
outline: none;
}
.storage-pricing-button {
margin-top: 20px;
float: right;
border: none;
}
.blocked-area-overlay {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.7);
}
.autocomplete-popup {
box-sizing: border-box;
background: #ffffff;
border: 0.1rem solid #d1d1d1;
border-radius: 0.3rem;
max-height: 30rem;
overflow: auto;
}
.autocomplete-popup-padding {
padding: 1rem;
}
.find-facility-result-arrow-box {
box-sizing: border-box;
border-radius: 0.3rem;
width: 26px;
height: 30px;
background-color: #eeeeee;
}
.find-facility-result-arrow-box-padding {
padding: 0.8rem;
}
.find-facility-icon {
padding: 0.8rem;
width: 18px;
height: 18px;
}
.search-icon {
top: 14%;
}
.arrow-icon {
width: 12px;
height: 12px;
top: 20%;
padding-left: 0.3rem;
}
.find-position-button {
top: 20%;
right: 0;
border-radius: 8px;
padding-left: 0.8rem;
transition: all 0.3s;
margin-right: 0.8rem;
}
.find-position-button:hover {
background-color: rgba(52, 173, 187, 0.1);
}
.find-position-text {
font-size: 1rem;
}
.find-facility-dropdown {
margin: 5px 100px 12px 0;
border-radius: 3px;
border: solid 1px #d1d1d1;
background-color: #ffffff;
width: 91.7%;
transform: translateY(-10px);
}
.find-facility-dropdown-item {
padding: 0.8rem;
font-size: 1.5rem;
}
.find-facility-address-search {
padding-left: 3rem;
}
@media (max-width: 500px) {
.find-facility-dropdown-overlay {
width: auto;
}
.find-facility-address-search {
width: 100%;
}
.find-position-button {
top: 17%;
right: 20px;
}
}
.primary-background {
background-color: var(--primary-color);
}
.widget-sidebar-width {
width: 49rem;
}
.double-promo-horizontal-spacing {
width: 15rem;
}
.rental-length-btn {
width: 125px;
border: none;
}
.rental-length-category-circle {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
}
.credit-row {
width: 10rem;
}
.promo-carousel-container {
height: 300px;
}
.slider-steps-position {
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.slider-step {
width: 7.5px;
height: 7.5px;
border-radius: 50%;
background-color: #959595;
}
.slider-step.active {
background-color: #313131;
}
@media screen and (min-width: 640px) {
.promo-carousel-container {
height: 512px;
}
}
.link-button {
cursor: pointer;
font-size: 1.6rem;
border: none;
color: #0000ee;
text-decoration: underline;
}
.recent-access-date-width {
width: 10rem;
}
.recent-access-info-width {
width: 50rem;
}
@media screen and (max-width: 650px) {
.recent-access-info-width {
width: auto;
}
}
.custom-radio {
width: 22px;
height: 22px;
}
.half-transparency {
opacity: 0.4;
}
.fit-content-width {
width: fit-content;
}
.debug-frame {
outline: 1px solid red;
}
.price-dialog {
padding: 1rem;
width: 200px;
border: 1px solid #d1d1d1;
background-color: white;
animation: fadeIn 0.4s ease;
}
.price-dialog.position {
right: -250px;
top: -14px;
}
.price-dialog-peak {
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background-color: white;
width: 20px;
height: 20px;
transform: rotate(45deg);
left: -11px;
top: 40%;
z-index: 2;
}
.step-indicator {
width: 100px;
}
.step-indicator-inner-number {
width: 20px;
height: 20px;
}
.step-indicator-circle {
border: 2px solid #d1d1d1;
background-color: white;
color: #000;
border-radius: 50%;
min-width: 60px;
height: 60px;
z-index: 2;
transition: all 0.3s;
}
.step-indicator-circle.completed {
border: 2px solid #5ce763;
background-color: #5ce7635f;
color: #5ce763;
}
.step-indicator-circle.hide {
visibility: hidden;
}
.step-indicator-line {
left: 47%;
bottom: 63px;
transform: rotate(180deg);
z-index: 1;
transition: all 0.3s;
}
.step-indicator-line.completed {
background-color: #5ce763;
}
.step-indicator-piece {
width: 93px;
height: 93px;
}
.step-indicator-curve {
top: 63px;
left: -14px;
transition: all 0.3s;
}
.step-indicator-corner {
left: 44.5px;
top: 45px;
transition: all 0.3s;
}
.step-indicator-horizontal {
left: calc(93px + 43px);
top: calc(93px + 30px);
}
.debug-frame-2 {
outline: 1px solid blue;
}
.font-bold {
font-weight: 600;
}
.smaller-button {
padding: 0.5rem 1.2rem;
font-size: 1.2rem;
}
.current-step-symbol {
width: 30px;
height: 30px;
left: -40px;
top: 15px;
transition: all 0.5s ease;
opacity: 1;
}
.current-step-symbol.step-two {
transform: translateY(180px);
}
.current-step-symbol.step-two.step-three {
transform: translateY(445px);
}
.current-step-symbol.hide {
opacity: 0;
}
.faq-width {
width: 50%;
}
@media (max-width: 850px) {
.faq-width {
width: 80%;
}
}
.faq-icon {
width: 40px;
height: 40px;
}
.faq-icon.small {
width: 30px;
height: 30px;
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
.faq-icon.small.open {
transform: rotate(90deg);
}
.faq-question {
}
@media (max-width: 850px) {
.faq-question {
padding: 0.5rem;
}
}
.faq-question-title {
max-width: 650px;
}
@media (max-width: 850px) {
.faq-question-title {
max-width: 230px;
font-size: 1.3rem;
}
}
.faq-answer {
max-height: 0;
opacity: 0;
transition: all 0.3s ease;
}
.faq-answer.open {
max-height: 320px;
/* height: 150px; */
opacity: 1;
}
@media (max-width: 850px) {
.faq-answer.open {
max-height: 500px;
}
}
.faq-answer div {
display: none;
}
.faq-answer div.open {
display: block;
}
.faq-search {
margin-bottom: 1.5rem;
}
.faq-search-icon {
width: 30px;
height: 30px;
left: 1rem;
top: 0.9rem;
}
.faq-search-input {
padding-left: calc(2rem + 30px);
}
.padding.small {
padding: 1.5rem;
}
.separator {
height: 1px;
width: 100%;
background-color: #d1d1d1;
}
.no-matches {
margin-top: 1rem;
color: #acacac;
}
.count-notice {
border-radius: 9999px;
font-size: 10px;
font-weight: bold;
}
.count-notice.info {
border: 1px solid #999999;
color: #999999;
}
.count-notice.action-needed {
border: 1px solid #d31313;
color: #FFFFFF;
background-color: #920000;
}
.count-notice.incomplete {
border: 1px solid #572929;
color: #FFFFFF;
background-color: #9f3737;
}
.count-notice-padding {
padding: 3px 12px;
}
.status-bar-status {
width: 40px;
aspect-ratio: 1;
border: solid 1px #d1d1d1;
border-radius: 9999px;
}
.status-bar-status-padding {
padding: 14px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.center-below {
top: 100%;
left: 50%;
}
.newsletter-form {
box-sizing: border-box;
background-color: #0D0D0D;
color: #FFFFFF;
}
.newsletter-form-width {
width: 48rem;
}
.newsletter-form-padding {
padding: 6rem;
}
.newsletter-form-title {
color: #DF0000;
font-weight: bold;
margin: 0;
font-size: 3.2rem;
}
.block-border {
border: 1px solid #e3e5e7;
}
.block-padding {
padding: 1rem;
}
.block-title {
font-size: 2.4rem;
text-align: center;
}