/*-------------------------------------------------------
UM PAGE
-------------------------------------------------------*/
/* Ultimate Member pages (login, register, password, account, profile).
   Loaded by functions.php after the plugin's CSS, replacing its color file
   (um-old-default.css). Several rules of um-styles.css are declared with
   !important by the plugin: the few !important here only override those
   and are marked with "plugin !important". */
.um-page .page__content {
  background-color: var(--color-bg-soft);
}

.um-page .page__content__inner > h1 {
  margin-bottom: 32px;
  text-align: center;
}

.um:not(.um-admin) {
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}

.um .um-field-block {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

@media (min-width: 1024px) {
  .um-page .page__content__inner > h1 {
    margin-bottom: 48px;
  }
}
/*-------------------------------------------------------
UM FIELDS
-------------------------------------------------------*/
/* Same underline-only fields as the contact form (.contact__input) */
.um .um-field {
  padding-top: 20px;
}

.um .um-field-label {
  margin-bottom: 0;
  color: var(--color-taupe);
}

.um .um-field-label label {
  font-size: 0.875rem !important; /* plugin !important */
  line-height: 1.4 !important; /* plugin !important */
  font-weight: 400;
  letter-spacing: 0.02em;
}

.um .um-req,
.um .um-tip,
.um .um-field-icon i {
  color: var(--color-taupe);
}

.um .um-form input:is([type="text"], [type="email"], [type="date"], [type="time"], [type="url"], [type="search"], [type="tel"], [type="number"], [type="password"]) {
  height: auto !important; /* plugin !important */
  padding: 12px 0 10px !important; /* plugin !important */
  border-bottom: 1.5px solid var(--color-text-soft);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem !important; /* plugin !important */
  line-height: 1.5;
  color: var(--color-text);
  background-color: transparent;
  transition: border-color 200ms ease;
}

/* Room for the show/hide password button */
.um .um-form .um-field-area-password input[type="password"],
.um .um-form .um-field-area-password input[type="text"] {
  padding-right: 40px !important; /* plugin !important */
}

.um .um-form input:focus-visible,
.um .um-form textarea:focus-visible {
  border-color: var(--color-primary);
}

.um .um-form input:disabled {
  border-bottom-style: dashed;
  color: var(--color-text-soft);
}

.um .um-form ::placeholder {
  color: var(--color-text-soft);
  opacity: 1;
}

/* Chrome autofill: keep the page background instead of the yellow fill */
.um .um-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--color-bg-soft) inset;
  -webkit-text-fill-color: var(--color-text);
}

.um .um-form textarea {
  padding: 12px 14px !important; /* plugin !important */
  border: 1.5px solid var(--color-text-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem !important; /* plugin !important */
  line-height: 1.5 !important; /* plugin !important */
  color: var(--color-text);
  background-color: transparent;
  transition: border-color 200ms ease;
}

.um .um-form input.um-error,
.um .um-form textarea.um-error {
  border-color: var(--color-primary-dark) !important; /* plugin !important */
}

.um .um-toggle-password {
  width: 36px;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--color-text-soft);
}

.um .um-toggle-password:hover i {
  color: var(--color-primary-dark);
}
/*-------------------------------------------------------
UM CHECKBOXES
-------------------------------------------------------*/
/* The plugin draws the box with an icon font; it is replaced by the same
   square/round box used in the contact form. Checked state by :has() (the
   plugin's .active class as fallback). */
.um .um-field-checkbox,
.um .um-field-radio {
  cursor: pointer;
}

.um :is(.um-field-checkbox-state, .um-field-radio-state) {
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-text-soft);
  border-radius: 3px;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.um .um-field-radio-state {
  border-radius: 50%;
}

.um :is(.um-field-checkbox-state, .um-field-radio-state) i {
  display: none;
}

.um .um-field-checkbox:is(.active, :has(input:checked)) .um-field-checkbox-state {
  border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.um .um-field-radio:is(.active, :has(input:checked)) .um-field-radio-state {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg-soft);
}

/* The real input is invisible: show the keyboard focus on the box */
.um :is(.um-field-checkbox, .um-field-radio):has(input:focus-visible) :is(.um-field-checkbox-state, .um-field-radio-state) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.um :is(.um-field-checkbox-option, .um-field-radio-option) {
  margin-left: 30px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-soft) !important; /* plugin !important */
}
.um .um-field-checkbox-option a:hover{
    color: var(--color-primary);
}
.um .um-field-c .um-field-checkbox {
  margin-bottom: 0;
}

/* Privacy policy (register form): toggle link and text box */
.um .um-field-type_terms_conditions {
  margin-top: 24px;
}

.um .um-toggle-gdpr {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.um .um-toggle-gdpr:hover {
  color: var(--color-primary-dark);
}

.um .um-gdpr-content {
  max-height: 240px;
  margin-bottom: 16px;
  padding: 16px;
  overflow-y: auto;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}
/*-------------------------------------------------------
UM BUTTONS
-------------------------------------------------------*/
/* Same look as .btn.btn--primary.btn--pill */
.um .um-col-alt {
  margin-top: 32px;
}

/* "Manter conectado" (login) sits above the button, in the same block */
.um .um-col-alt .um-field-c {
  margin-bottom: 28px;
}

.um :is(input[type="submit"].um-button, a.um-button),
.um :is(input[type="submit"].um-button, a.um-button):focus {
  min-height: 50px;
  padding: 16px 28px !important; /* plugin !important */
  border-radius: var(--radius-pill) !important; /* plugin !important */
  font-family: var(--font-body);
  font-weight: 500 !important; /* plugin !important */
  font-size: 1rem;
  line-height: 1.2 !important; /* plugin !important */
  letter-spacing: 0.02em;
  text-transform: uppercase !important; /* plugin !important */
  color: var(--color-white);
  background-color: var(--color-primary);
  box-shadow: none;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.um :is(input[type="submit"].um-button, a.um-button):hover {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  box-shadow: 0 8px 12px 4px rgba(94, 77, 65, 0.25);
  transform: translateY(-4px);
}

.um :is(input[type="submit"].um-button, a.um-button):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Secondary button (e.g. "Cancelar"): outlined. The plugin forces border: none,
   so the outline is drawn with box-shadow */
.um :is(input[type="submit"].um-button.um-alt, a.um-button.um-alt),
.um :is(input[type="submit"].um-button.um-alt, a.um-button.um-alt):focus {
  color: var(--color-text);
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-text-soft);
}

.um :is(input[type="submit"].um-button.um-alt, a.um-button.um-alt):hover {
  color: var(--color-white);
  background-color: var(--color-text-soft);
  box-shadow: inset 0 0 0 1.5px var(--color-text-soft);
}

.um input[type="submit"].um-button:disabled:hover,
.um a.um-button.um-disabled:hover {
  background-color: var(--color-primary);
  box-shadow: none;
  transform: none;
}

.um .um-button::before {
  color: currentColor;
}

/* Request buttons in the privacy tab of the account page */
.um-request-button {
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transition: background-color 300ms ease;
}

.um-request-button:hover {
  background-color: var(--color-primary-dark);
}
/*-------------------------------------------------------
UM LINKS
-------------------------------------------------------*/
.um a.um-link-alt {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--color-text-soft) !important; /* plugin !important */
  text-underline-offset: 2px;
}

.um a.um-link-alt:hover {
  color: var(--color-primary-dark) !important; /* plugin !important */
}

.um a.um-link,
.um .um-item-meta a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.um a.um-link:hover,
.um a.um-link-hvr:hover {
  color: var(--color-text);
}

i.um-active-color,
span.um-active-color {
  color: var(--color-primary);
}

.um .um-toggle-gdpr{
    display: none;
}
/*-------------------------------------------------------
UM MESSAGES
-------------------------------------------------------*/
/* Field errors: plain text below the field, like the CF7 tips */
.um .um-field-error {
  margin-top: 6px;
  padding: 0;
  border-radius: 0;
  font-size: 0.8125rem;
  color: var(--color-primary-dark);
  background: none;
}

.um .um-field-error a {
  color: var(--color-primary-dark) !important; /* plugin !important */
}

.um .um-field-arrow {
  display: none;
}

.um .um-field-notice {
  margin-top: 6px;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  background: none;
}

.um .um-field-notice a {
  color: var(--color-text-soft) !important; /* plugin !important */
}

/* Form-level messages (wrong password, account updated, privacy not accepted...) */
.um p.um-notice,
.um .um-error-block,
.um .um-notice-block {
  margin-top: 16px;
  padding-right: 44px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5 !important; /* plugin !important */
  color: var(--color-text);
  background-color: var(--color-sand);
}

.um p.um-notice.success,
.um .um-notice-block {
  background-color: var(--color-butter);
}

.um p.um-notice.warning {
  border: 0;
  color: var(--color-text);
  background-color: var(--color-butter);
}

.um p.um-notice a {
  color: var(--color-text);
}

.um p.um-notice i {
  top: 50%;
  right: 12px;
  font-size: 24px;
  color: var(--color-text-soft);
  transform: translateY(-50%);
}
/*-------------------------------------------------------
UM ACCOUNT
-------------------------------------------------------*/
/* Name and avatar above the side menu */
.um-account-meta-img{
    display: none;
}

.um-account-name > a {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--color-text);
}

.um-account-name > a:hover {
  color: var(--color-primary-dark);
}

.um-account-profile-link {
  margin-top: 4px;
}

.um-account-profile-link a.um-link {
  font-size: 0.875rem;
}

.um-account-meta img {
  background-color: var(--color-sand);
}

/* Side menu: list with lines instead of grey boxes (heights stay the plugin's,
   the items are floated) */
.um-account-side li {
  background: none;
}

.um-account-side li a {
  border-bottom: 1px solid var(--color-line);
  transition: color 300ms ease;
}

.um-account-side li a span.um-account-icon,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a span.um-account-icontip {
  border-right-color: var(--color-line);
  color: var(--color-taupe);
}

.um-account-side li a span.um-account-title,
.um-account-side li a span.um-account-arrow {
  color: var(--color-text-soft);
}

.um-account-side li a:hover,
.um-account-side li a.current,
.um-account-side li a.current:hover {
  background: none;
}

.um-account-side li a:hover span.um-account-title,
.um-account-side li a.current span.um-account-title,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon {
  color: var(--color-primary-dark);
}

/* Small screens: icon-only side menu */
div.uimob800 .um-account-side ul,
div.uimob800 .um-account-meta-img-b img {
  border-color: var(--color-line);
}

div.uimob800 .um-account-side li a {
  background-color: var(--color-bg);
}

div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover {
  background-color: var(--color-primary);
}

div.uimob800 .um-account-side li a.current span.um-account-icontip {
  color: var(--color-white);
}

.um-account-main div.um-account-heading {
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--color-text);
}

.um-account-main div.um-account-heading i {
  font-size: 1.25rem;
  color: var(--color-primary);
}

/* Mobile accordion headers */
.um-account-nav a {
  border-bottom: 1px solid var(--color-line) !important; /* plugin !important */
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text) !important; /* plugin !important */
}

.um-account-nav a.current {
  font-weight: 400;
  color: var(--color-primary-dark) !important; /* plugin !important */
}

.um-account-nav a .ico,
.um-account-nav a .arr {
  color: var(--color-taupe);
}
/*-------------------------------------------------------
UM PROFILE
-------------------------------------------------------*/
.um .um-cover {
  background-color: var(--color-sand);
}
.um .um-header.no-cover {
	display: flex;
	justify-content: end;
	flex-direction: row-reverse;
	gap: 24px;
	align-items: center;
	padding: 0;
	min-height: 50px;
}
.um .um-header.no-cover .um-profile-edit {
	position: relative;
	top: 0;	
	margin-right: 0;
}
.um .um-header.no-cover .um-dropdown {
	top: 40px !important;
	right: 0 !important;
}
.um .um-header.no-cover .um-dropdown ul li:first-child{
    display: none;
}
.um .um-header.no-cover .um-dropdown-arr {
	display: none !important;
}
.um .um-profile-photo {
    display: none;
}

.um .um-cover-add {
  color: var(--color-taupe);
}

.um .um-cover-add:hover {
  color: var(--color-primary-dark);
}

.um .um-profile-photo :is(a.um-profile-photo-img, img, span.um-profile-photo-overlay) {
  border-radius: 50%;
}

/* "Change photo" layers (edit mode): brown instead of black */
.um .um-profile-photo-overlay,
.um .um-cover-overlay {
  background-color: rgba(74, 59, 48, 0.55);
}

.um .um-profile-photo-overlay:hover,
.um .um-cover-overlay:hover {
  background-color: rgba(74, 59, 48, 0.7);
}

.um-profile.um .um-profile-meta{    
    width: max-content;
}

.um-profile.um .um-name a {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-text);
}

.um-profile.um .um-name a:hover {
  color: var(--color-primary-dark);
}

.um-profile.um .um-profile-meta,
.um .um-meta-text {
  color: var(--color-text-soft);
}

.um-profile.um .um-profile-headericon a {
  color: var(--color-taupe);
}

.um-profile.um .um-profile-headericon a:hover,
.um-profile.um .um-profile-edit-a.active {
  color: var(--color-primary-dark);
}

/* Tabs bar */
.um .um-profile-nav {
  border-radius: var(--radius-sm);
  background-color: var(--color-taupe);
}

.um .um-profile-nav-item a {
  border-radius: var(--radius-sm);
  transition: background-color 300ms ease;
}

.um .um-profile-nav-item a:hover {
  background-color: rgba(74, 59, 48, 0.35);
}

.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover {
  background-color: var(--color-text);
}

.um .um-profile-subnav {
  background-color: var(--color-bg);
}

.um .um-profile-subnav a {
  color: var(--color-text-soft);
}

.um .um-profile-subnav a:hover,
.um .um-profile-subnav a.active {
  color: var(--color-primary-dark);
}

.um .um-profile-note,
.um .um-profile-note span {
  color: var(--color-text-soft);
}

.um .um-field-value {
  color: var(--color-text);
}

/* Photo/cover menu */
.um-dropdown {
  border-color: var(--color-line);
  border-radius: 0;
}

.um-dropdown li a {
  color: var(--color-text);
}

.um-dropdown li a:hover {
  color: var(--color-primary-dark);
}
/*-------------------------------------------------------
UM MODAL
-------------------------------------------------------*/
/* Photo upload window */
.um-modal-header {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-white);
  background-color: var(--color-taupe);
}

.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled:hover {
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background-color: var(--color-primary);
}

.um-modal-btn:hover {
  background-color: var(--color-primary-dark);
}

.um-modal-btn.alt {
  color: var(--color-text);
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-text-soft);
}

.um-modal-btn.alt:hover {
  color: var(--color-white);
  background-color: var(--color-text-soft);
}

.upload {
  background-color: var(--color-primary);
}

.um .um-field-group-head {
  background-color: var(--color-taupe);
}

.um .um-field-group-head:hover {
  background-color: var(--color-text);
}
/*-------------------------------------------------------
UM DATEPICKER
-------------------------------------------------------*/
.picker__box,
.picker__nav--prev:hover,
.picker__nav--next:hover {
  background-color: var(--color-primary);
}

.picker__footer,
.picker__header,
.picker__day--infocus:hover,
.picker__day--outfocus:hover,
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted,
.picker__list-item:hover,
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted,
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background-color: var(--color-primary-dark);
}
/*-------------------------------------------------------
UM SELECT
-------------------------------------------------------*/
/* Select2 dropdowns used by UM select fields */
.um .select2-container .select2-selection,
.um .select2-container .select2-choice {
  min-height: 46px;
  border: 0;
  border-bottom: 1.5px solid var(--color-text-soft);
  border-radius: 0;
  background-color: transparent;
}

.um .select2-container--focus .select2-selection,
.um .select2-container--open .select2-selection {
  border-bottom-color: var(--color-primary);
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted.select2-results__option--selectable {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
}

.select2-dropdown {
  border-color: var(--color-line);
}
/*-------------------------------------------------------
UM OWN PROFILE 
-------------------------------------------------------*/
.um-own-profile{
    overflow-y: hidden;
}
.um-own-profile .site-header{
    width: 100vw;
    pointer-events: none;
}
.um-own-profile .site-header[data-scrolled="true"] {
	background: transparent;
	box-shadow: none;
}
.um-own-profile .site-header__inner {
	padding: 10px 24px;
}
.um-own-profile .site-header__logo {
	height: 40px;   
}
.um-own-profile .site-header__logo img {
	width: 172px;
	height: 40px;
	object-fit: cover;
	object-position: center top;
}
.um-own-profile .site-header__logo,
.um-own-profile .login-nav,
.um-own-profile .menu-toggle{
    pointer-events: all;
}
.um-own-profile .page__content {
	min-height: calc( 100vh - 90px );
	padding-block: 90px 50px;
}
.um-own-profile .um-header.no-cover {
	border-bottom: none;
	min-height: 40px !important;
	position: absolute;
	top: 50px;
	left: calc( 100% - 24px );
	transform: translateX(-100%);
	z-index: 100;
}
.um-own-profile .um-profile-body.meu_espaco_vip{
    position: relative;
}
.um-own-profile .um-item.dashboards {
    width: 100vw;
	padding: 0 0 20px;	
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.um-own-profile h1 {
    display: none;
}
@media (min-width: 1024px) {
    .um-own-profile{
        overflow-y: hidden;
    }
    .um-own-profile .site-header{
        pointer-events: none;
    }
    .um-own-profile .site-header[data-scrolled="true"] {
        background: transparent;
        box-shadow: none;
    }
    .um-own-profile .site-header__inner {
        padding: 10px 24px;
    }
    .um-own-profile .site-header__logo {
        height: 40px;   
    }
    .um-own-profile .site-header__logo img {
        width: 172px;
        height: 40px;
        object-fit: cover;
        object-position: center top;
    }
    .um-own-profile .site-header__logo,
    .um-own-profile .login-nav,
    .um-own-profile .menu-toggle{
        pointer-events: all;
    }
    .um-own-profile .page__content {
        min-height: 100vh;
        padding-block: 60px 0;
    }
    .um-own-profile .um-header.no-cover  {
        border-bottom: none;
        min-height: 40px !important;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(215px);   
        z-index: 100; 
    }
    .um-own-profile .um-profile-body.meu_espaco_vip{
        position: relative;
    }
    .um-own-profile .um-item.dashboards {
        width: 100vw;
        padding: 0 24px 20px;	
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .um-own-profile h1 {
        display: none;
    }

}
/*-------------------------------------------------------
UM DASHBOARDS
-------------------------------------------------------*/
.dashboards__tabs {
	display: flex;
	justify-content: start;
	flex-wrap: nowrap;	
	margin-bottom: 0;
	padding: 0 24px 10px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.dashboards__tab {
	padding: 10px 15px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
    text-wrap: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	line-height: 1;
	flex: none;
}

.dashboards__tab:hover,
.dashboards__tab.is-active {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.dashboards__frame {
  display: block;
  width: 100%;
  height: calc( 100vh - 150px);
  border: 0;
  overflow: hidden;
}

.dashboards__missing {
  margin: 0;
  padding: 32px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  text-align: center;
}
@media (min-width: 1024px) {
    .dashboards__tabs {
        justify-content: safe center;
        padding: 0 24px 15px;
    }
}
/* Installed app (no footer): the dashboard area is fixed from below the profile to the bottom of the
   screen and the frame fills it, so the browser keeps it fitted on any phone, also while the app opens
   and the screen size settles (measuring with JS left a gap on Android). Top = where the area sits in
   the page: .page__content padding-top (90px, 60px from 1024px) + .um-profile-body padding-top (15px).
   The spacing below the area is removed so the page itself doesn't scroll. */
@media (display-mode: standalone) {
    .um-own-profile .page__content {
        padding-bottom: 0;
    }
    .um-own-profile .um.um-profile {
        margin-bottom: 0 !important; /* plugin !important */
        padding-bottom: 0;
    }
    .um-own-profile .um-profile-body.meu_espaco_vip {
        padding-bottom: 0;
    }
    .um-own-profile .um-item.dashboards {
        position: fixed;
        top: 105px;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        padding-bottom: 12px;
        transform: none;
    }
    .um-own-profile .dashboards__panel {
        flex: 1;
        min-height: 0;
    }
    .um-own-profile .dashboards__frame {
        height: 100%;
    }
    @media (min-width: 1024px) {
        .um-own-profile .um-item.dashboards {
            top: 75px;
        }
    }
}