.smartbanner-show.smartbanner-margin-top{margin-top:80px}.smartbanner-show.smartbanner-margin-bottom{margin-bottom:80px}.smartbanner-show .smartbanner{display:block}.smartbanner{left:0;display:none;width:100%;height:80px;line-height:80px;font-family:Helvetica Neue,sans-serif;background:#f4f4f4;z-index:9998;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-text-size-adjust:none}.smartbanner-top{position:absolute;top:0}.smartbanner-bottom{position:fixed;bottom:0}.smartbanner-container{margin:0 auto;padding:0 5px}.smartbanner-close{display:inline-block;vertical-align:middle;margin:0 5px 0 0;font-family:ArialRoundedMTBold,Arial;font-size:20px;text-align:center;color:#888;text-decoration:none;border:0;border-radius:14px;padding:0 0 1px;background-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.smartbanner-close:active,.smartbanner-close:hover{color:#aaa}.smartbanner-icon{width:57px;height:57px;margin-right:12px;background-size:cover;border-radius:10px}.smartbanner-icon,.smartbanner-info{display:inline-block;vertical-align:middle}.smartbanner-info{white-space:normal;width:calc(99% - 201px);font-size:11px;line-height:1.2em;font-weight:700}.smartbanner-wrapper{max-width:110px;display:inline-block;text-align:right;width:100%}.smartbanner-title{font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-description{max-height:40px;overflow:hidden}.smartbanner-author{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-author:empty+.smartbanner-description{max-height:50px}.smartbanner-button{margin:auto 0;height:24px;font-size:14px;line-height:24px;text-align:center;font-weight:700;color:#6a6a6a;text-transform:uppercase;text-decoration:none;display:inline-block;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-button:active,.smartbanner-button:hover{color:#aaa}.smartbanner-ios{background:#f2f2f2;box-shadow:0 1px 1px rgba(0,0,0,.2);line-height:80px}.smartbanner-ios .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;font-family:Arial;color:#888;text-shadow:0 1px 0 #fff;-webkit-font-smoothing:none}.smartbanner-ios .smartbanner-close:active,.smartbanner-ios .smartbanner-close:hover{color:#888}.smartbanner-ios .smartbanner-icon{background-size:cover}.smartbanner-ios .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8);font-weight:300}.smartbanner-ios .smartbanner-title{color:#4d4d4d;font-weight:500}.smartbanner-ios .smartbanner-button{padding:0 10px;font-size:15px;min-width:10%;font-weight:400;color:#0c71fd}.smartbanner-ios .smartbanner-button:active,.smartbanner-ios .smartbanner-button:hover{background:#f2f2f2}.smartbanner-android{background:#3d3d3d url(data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7);box-shadow:inset 0 4px 0 #88b131;line-height:82px}.smartbanner-android .smartbanner-close{border:0;max-width:17px;width:100%;height:17px;line-height:17px;margin-right:7px;color:#b1b1b3;background:#1c1e21;text-shadow:0 1px 1px #000;text-decoration:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 1px hsla(0,0%,100%,.3);cursor:pointer}.smartbanner-android .smartbanner-close:active,.smartbanner-android .smartbanner-close:hover{color:#eee}.smartbanner-android .smartbanner-icon{background-color:transparent;box-shadow:none}.smartbanner-android .smartbanner-info{color:#ccc;text-shadow:0 1px 2px #000}.smartbanner-android .smartbanner-title{color:#fff;font-weight:700}.smartbanner-android .smartbanner-button{min-width:12%;color:#d1d1d1;font-weight:700;padding:0;background:none;border-radius:0;box-shadow:0 0 0 1px #333,0 0 0 2px #dddcdc}.smartbanner-android .smartbanner-button:active,.smartbanner-android .smartbanner-button:hover{background:none}.smartbanner-android .smartbanner-button-text{text-align:center;display:block;padding:0 10px;background:#42b6c9;background:linear-gradient(180deg,#42b6c9,#39a9bb);text-transform:none;text-shadow:none;box-shadow:none}.smartbanner-android .smartbanner-button-text:active,.smartbanner-android .smartbanner-button-text:hover{background:#2ac7e1}.smartbanner-kindle,.smartbanner-windows{background:#f4f4f4;background:linear-gradient(180deg,#f4f4f4,#cdcdcd);box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:80px}.smartbanner-kindle .smartbanner-close,.smartbanner-windows .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;color:#888;text-shadow:0 1px 0 #fff}.smartbanner-kindle .smartbanner-close:active,.smartbanner-kindle .smartbanner-close:hover,.smartbanner-windows .smartbanner-close:active,.smartbanner-windows .smartbanner-close:hover{color:#aaa}.smartbanner-kindle .smartbanner-icon,.smartbanner-windows .smartbanner-icon{background:rgba(0,0,0,.6);background-size:cover;box-shadow:0 1px 3px rgba(0,0,0,.3)}.smartbanner-kindle .smartbanner-info,.smartbanner-windows .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-kindle .smartbanner-title,.smartbanner-windows .smartbanner-title{color:#4d4d4d;font-weight:700}.smartbanner-kindle .smartbanner-button,.smartbanner-windows .smartbanner-button{padding:0 10px;min-width:10%;color:#6a6a6a;background:#efefef;background:linear-gradient(180deg,#efefef,#dcdcdc);border-radius:3px;box-shadow:inset 0 0 0 1px #bfbfbf,0 1px 0 hsla(0,0%,100%,.6),inset 0 2px 0 hsla(0,0%,100%,.7)}.smartbanner-kindle .smartbanner-button:active,.smartbanner-kindle .smartbanner-button:hover,.smartbanner-windows .smartbanner-button:active,.smartbanner-windows .smartbanner-button:hover{background:#dcdcdc;background:linear-gradient(180deg,#dcdcdc,#efefef)} /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-button-primary { background-color: #8755f4; background-color: var(--mbw-button-primary, #8755f4); color: #fff; color: var(--mbw-text-tertiary, #fff); border: none; justify-content: center; width: 100%; display: flex; flex-direction: row; padding: 0.625rem; padding: var(--mbw-button-padding, 0.625rem); border-radius: 0.625rem; border-radius: var(--mbw-button-border-radius, 0.625rem); align-items: center; height: 3rem; height: var(--mbw-button-height, 3rem); } @media (max-width: 48rem) { .mbw-button-primary { height: 2.563rem; height: var(--mbw-button-height-sm, 2.563rem); } } .mbw-button-primary:hover { cursor: pointer; background-color: #a479ff; background-color: var(--mbw-button-primary-hover, #a479ff); box-shadow: none; } .mbw-button-primary:disabled { background-color: #d3d3d3; background-color: var(--mbw-button-primary-dissabled, #d3d3d3); box-shadow: none; cursor: auto; } .mbw-button-secondary { background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #121212; color: var(--mbw-button-secondary, #121212); border: solid 1px #eaeaea; border: solid 1px var(--mbw-default-border, #eaeaea); box-shadow: inset 0 -3px 0 #f7f7f7; box-shadow: inset 0 -3px 0 var(--mbw-default-shadow-color, #f7f7f7); justify-content: center; width: 100%; display: flex; flex-direction: row; padding: 0.625rem; padding: var(--mbw-button-padding, 0.625rem); border-radius: 0.625rem; border-radius: var(--mbw-button-border-radius, 0.625rem); align-items: center; height: 3rem; height: var(--mbw-button-height, 3rem); } @media (max-width: 48rem) { .mbw-button-secondary { height: 2.563rem; height: var(--mbw-button-height-sm, 2.563rem); } } .mbw-button-secondary:hover { cursor: pointer; background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #8755f4; color: var(--mbw-button-secondary-hover, #8755f4); box-shadow: none; } .mbw-button-secondary:disabled { background-color: #f7f7f7; background-color: var(--mbw-background-secondary, #f7f7f7); color: #636570; color: var(--mbw-button-secondary-disabled, #636570); box-shadow: none; cursor: auto; } .mbw-button-link { background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #8755f4; color: var(--mbw-button-primary, #8755f4); border: none; justify-content: flex-start; width: auto; display: flex; flex-direction: row; padding: 0.625rem; padding: var(--mbw-button-padding, 0.625rem); border-radius: 0.625rem; border-radius: var(--mbw-button-border-radius, 0.625rem); align-items: center; height: 3rem; height: var(--mbw-button-height, 3rem); } @media (max-width: 48rem) { .mbw-button-link { height: 2.563rem; height: var(--mbw-button-height-sm, 2.563rem); } } .mbw-button-link:hover { cursor: pointer; background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #a479ff; color: var(--mbw-button-primary-hover, #a479ff); box-shadow: none; } .mbw-button-link:disabled { background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #d3d3d3; color: var(--mbw-button-primary-dissabled, #d3d3d3); box-shadow: none; cursor: auto; } .mbw-button-title { background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #8755f4; color: var(--mbw-button-primary, #8755f4); border: none; justify-content: flex-start; width: auto; display: flex; flex-direction: row; padding: 0.625rem; padding: var(--mbw-button-padding, 0.625rem); border-radius: 0.625rem; border-radius: var(--mbw-button-border-radius, 0.625rem); align-items: center; height: 3rem; height: var(--mbw-button-height, 3rem); } @media (max-width: 48rem) { .mbw-button-title { height: 2.563rem; height: var(--mbw-button-height-sm, 2.563rem); } } .mbw-button-title:hover { cursor: pointer; background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #a479ff; color: var(--mbw-button-primary-hover, #a479ff); box-shadow: none; } .mbw-button-title:disabled { background-color: #fff; background-color: var(--mbw-background-primary, #fff); color: #d3d3d3; color: var(--mbw-button-primary-dissabled, #d3d3d3); box-shadow: none; cursor: auto; } .mbw-button-no-title { width: 3rem; width: var(--mbw-button-no-title-width, 3rem); } @media (max-width: 48rem) { .mbw-button-no-title { width: 2.563rem; width: var(--mbw-button-no-title-width-sm, 2.563rem); } } .mbw-button-dynemic-height { height: 100%; } .mbw-button--center { display: flex; } .mbw-button--center-text { display: flex; justify-content: center; flex-direction: column; } .mbw-button--button-icon-container { margin-right: 0.625rem; margin-right: var(--mbw-button-icon-margin, 0.625rem); } .mbw-button--button-icon { width: 1.375rem; width: var(--mbw-button-icon-width, 1.375rem); height: 1.375rem; height: var(--mbw-button-icon-height, 1.375rem); } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-title-heading-jumbo { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-jumbo { font-size: 4rem; font-size: var(--mbw-fs-jumbo-lg, 4rem); line-height: 1.3; line-height: var(--mbw-line-height-small, 1.3); } } @media (max-width: 105rem) { .mbw-title-heading-jumbo { font-size: 3.375rem; font-size: var(--mbw-fs-jumbo-md, 3.375rem); line-height: 1.3; line-height: var(--mbw-line-height-small, 1.3); } } @media (max-width: 80rem) { .mbw-title-heading-jumbo { font-size: 1.75rem; font-size: var(--mbw-fs-jumbo-sm, 1.75rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-jumbo { font-size: 1.75rem; font-size: var(--mbw-fs-jumbo-sm, 1.75rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-jumbo.mbw-title-bold { font-weight: 700; font-weight: var(--mbw-font-weight-bold, 700); } @media (min-width: 105rem) { .skeleton-heading-jumbo { min-height: calc(1.3 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-small, 1.3) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-jumbo { min-height: calc(1.3 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-small, 1.3) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-jumbo { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-jumbo { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h1 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h1 { font-size: 3rem; font-size: var(--mbw-fs-h1-lg, 3rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-heading-h1 { font-size: 2.375rem; font-size: var(--mbw-fs-h1-md, 2.375rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-heading-h1 { font-size: 1.75rem; font-size: var(--mbw-fs-h1-sm, 1.75rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h1 { font-size: 1.75rem; font-size: var(--mbw-fs-h1-sm, 1.75rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h1.mbw-title-bold { font-weight: 700; font-weight: var(--mbw-font-weight-bold, 700); } @media (min-width: 105rem) { .skeleton-heading-h1 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h1 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h1 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h1 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h2 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h2 { font-size: 2.125rem; font-size: var(--mbw-fs-h2-lg, 2.125rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 105rem) { .mbw-title-heading-h2 { font-size: 1.75rem; font-size: var(--mbw-fs-h2-md, 1.75rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-heading-h2 { font-size: 1.5rem; font-size: var(--mbw-fs-h2-sm, 1.5rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h2 { font-size: 1.5rem; font-size: var(--mbw-fs-h2-sm, 1.5rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h2.mbw-title-bold { font-weight: 700; font-weight: var(--mbw-font-weight-bold, 700); } @media (min-width: 105rem) { .skeleton-heading-h2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h3 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h3 { font-size: 1.75rem; font-size: var(--mbw-fs-h3-lg, 1.75rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-heading-h3 { font-size: 1.5rem; font-size: var(--mbw-fs-h3-md, 1.5rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 80rem) { .mbw-title-heading-h3 { font-size: 1.375rem; font-size: var(--mbw-fs-h3-sm, 1.375rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h3 { font-size: 1.375rem; font-size: var(--mbw-fs-h3-sm, 1.375rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h3.mbw-title-bold { font-weight: 700; font-weight: var(--mbw-font-weight-bold, 700); } @media (min-width: 105rem) { .skeleton-heading-h3 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h3 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h3 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h3 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h4 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h4 { font-size: 1.375rem; font-size: var(--mbw-fs-h4-lg, 1.375rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-heading-h4 { font-size: 1.25rem; font-size: var(--mbw-fs-h4-md, 1.25rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 80rem) { .mbw-title-heading-h4 { font-size: 1.125rem; font-size: var(--mbw-fs-h4-sm, 1.125rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h4 { font-size: 1.125rem; font-size: var(--mbw-fs-h4-sm, 1.125rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h4.mbw-title-bold { font-weight: 700; font-weight: var(--mbw-font-weight-bold, 700); } @media (min-width: 105rem) { .skeleton-heading-h4 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h4 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h4 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h4 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h5 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h5 { font-size: 1.25rem; font-size: var(--mbw-fs-h5-lg, 1.25rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 105rem) { .mbw-title-heading-h5 { font-size: 1.125rem; font-size: var(--mbw-fs-h5-md, 1.125rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-heading-h5 { font-size: 1rem; font-size: var(--mbw-fs-h5-sm, 1rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h5 { font-size: 1rem; font-size: var(--mbw-fs-h5-sm, 1rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h5.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-heading-h5 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h5 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h5 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h5 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-heading-h6 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-heading-h6 { font-size: 1.125rem; font-size: var(--mbw-fs-h6-lg, 1.125rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 105rem) { .mbw-title-heading-h6 { font-size: 1.063rem; font-size: var(--mbw-fs-h6-md, 1.063rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-heading-h6 { font-size: 0.938rem; font-size: var(--mbw-fs-h6-sm, 0.938rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-heading-h6 { font-size: 0.938rem; font-size: var(--mbw-fs-h6-sm, 0.938rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-heading-h6.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-heading-h6 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-heading-h6 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-heading-h6 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-heading-h6 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-content-default { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-content-default { font-size: 1.063rem; font-size: var(--mbw-fs-default-lg, 1.063rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-content-default { font-size: 1rem; font-size: var(--mbw-fs-default-md, 1rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 80rem) { .mbw-title-content-default { font-size: 0.938rem; font-size: var(--mbw-fs-default-sm, 0.938rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 48rem) { .mbw-title-content-default { font-size: 0.938rem; font-size: var(--mbw-fs-default-sm, 0.938rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } .mbw-title-content-default.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-content-default { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-content-default { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-content-default { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-content-default { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } .mbw-title-content-medium { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-content-medium { font-size: 0.938rem; font-size: var(--mbw-fs-medium-lg, 0.938rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-content-medium { font-size: 0.938rem; font-size: var(--mbw-fs-medium-md, 0.938rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 80rem) { .mbw-title-content-medium { font-size: 0.875rem; font-size: var(--mbw-fs-medium-sm, 0.875rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 48rem) { .mbw-title-content-medium { font-size: 0.875rem; font-size: var(--mbw-fs-medium-sm, 0.875rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } .mbw-title-content-medium.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-content-medium { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-content-medium { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-content-medium { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-content-medium { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } .mbw-title-content-small { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-content-small { font-size: 0.938rem; font-size: var(--mbw-fs-small-lg, 0.938rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 105rem) { .mbw-title-content-small { font-size: 0.938rem; font-size: var(--mbw-fs-small-md, 0.938rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-content-small { font-size: 0.875rem; font-size: var(--mbw-fs-small-sm, 0.875rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-content-small { font-size: 0.875rem; font-size: var(--mbw-fs-small-sm, 0.875rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-content-small.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-content-small { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-content-small { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-content-small { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-content-small { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-caption-1 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-caption-1 { font-size: 0.75rem; font-size: var(--mbw-fs-caption-1-lg, 0.75rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 105rem) { .mbw-title-caption-1 { font-size: 0.75rem; font-size: var(--mbw-fs-caption-1-md, 0.75rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 80rem) { .mbw-title-caption-1 { font-size: 0.75rem; font-size: var(--mbw-fs-caption-1-sm, 0.75rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } @media (max-width: 48rem) { .mbw-title-caption-1 { font-size: 0.75rem; font-size: var(--mbw-fs-caption-1-sm, 0.75rem); line-height: 1.5; line-height: var(--mbw-line-height-large, 1.5); } } .mbw-title-caption-1.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-caption-1 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-caption-1 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-caption-1 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-caption-1 { min-height: calc(1.5 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-large, 1.5) * var(--rows) * 1rem); } } .mbw-title-caption-2 { font-weight: 400; font-weight: var(--mbw-font-weight-normal, 400); transition: all 0.4s; } @media (min-width: 105rem) { .mbw-title-caption-2 { font-size: 0.625rem; font-size: var(--mbw-fs-caption-2-lg, 0.625rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 105rem) { .mbw-title-caption-2 { font-size: 0.625rem; font-size: var(--mbw-fs-caption-2-md, 0.625rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 80rem) { .mbw-title-caption-2 { font-size: 0.625rem; font-size: var(--mbw-fs-caption-2-sm, 0.625rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } @media (max-width: 48rem) { .mbw-title-caption-2 { font-size: 0.625rem; font-size: var(--mbw-fs-caption-2-sm, 0.625rem); line-height: 1.4; line-height: var(--mbw-line-height-medium, 1.4); } } .mbw-title-caption-2.mbw-title-bold { font-weight: 600; font-weight: var(--mbw-font-weight-semibold, 600); } @media (min-width: 105rem) { .skeleton-caption-2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 105rem) { .skeleton-caption-2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 80rem) { .skeleton-caption-2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } @media (max-width: 48rem) { .skeleton-caption-2 { min-height: calc(1.4 * var(--rows) * 1rem); min-height: calc(var(--mbw-line-height-medium, 1.4) * var(--rows) * 1rem); } } .mbw-title-ellipsis-text { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: var(--rows); -webkit-box-orient: vertical; white-space: normal; word-break: break-all; } .mbw-title-ellipsis-text * { display: inline; } .carousel .control-arrow,.carousel.carousel-slider .control-arrow{transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{transition:all .15s ease-in;transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1} /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-duration-item { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; width: 100%; height: 100%; padding: 1.375rem 0.75rem 0.75rem 0.75rem; background: #f7f7f7; background: var(--mbw-duration-item-bg-color, var(--mbw-background-secondary, #f7f7f7)); color: #121212; color: var(--mbw-duration-item-fg-color, var(--mbw-text-primary, #121212)); border: 0.063rem solid #eaeaea; border-radius: 1.25rem; } .mbw-duration-item-selected { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; width: 100%; height: 100%; padding: 1.563rem 0.875rem 0.875rem 0.875rem; background: rgba(135, 85, 244, 0.1019607843); background: var(--mbw-duration-item-selected-bg-color, rgba(135, 85, 244, 0.1019607843)); color: #8755f4; color: var(--mbw-duration-item-selected-fg-color, #8755f4); border: 0.125rem solid #8755f4; border: 0.125rem solid var(--mbw-duration-item-selected-fg-color, #8755f4); border-radius: 1.563rem; } @media (max-width: 48rem) { .mbw-duration-item-selected { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } } .mbw-duration-item-duration-text { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (max-width: 48rem) { .mbw-duration-item-duration-text { display: none; } } .mbw-duration-item-duration-seconds-text { display: flex; align-items: center; justify-content: center; flex-direction: column; } .mbw-duration-item-duration-text-mobile { display: none; } @media (max-width: 48rem) { .mbw-duration-item-duration-text-mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; } } .mbw-duration-item-duration { text-align: center; font-weight: 600; font-size: 5.25rem; } @media (max-width: 48rem) { .mbw-duration-item-duration { font-size: 4rem; } } .mbw-duration-item-duration-selected { text-align: center; font-weight: 600; font-size: 5.25rem; line-height: 5rem; } @media (max-width: 48rem) { .mbw-duration-item-duration-selected { font-size: 4.75rem; } } .mbw-duration-item-price-selected { display: flex; justify-content: center; align-items: center; border-radius: 3.125rem; background: #fff; background: var(--mbw-duration-item-price-bg-color, var(--mbw-background-primary, #fff)); color: #8755f4; color: var(--mbw-duration-item-selected-price-fg-color, #8755f4); margin-top: 0.625rem; margin-bottom: 0.625rem; padding: 0.313rem 1.063rem; } .mbw-duration-item-price { display: flex; justify-content: center; align-items: center; border-radius: 3.125rem; background: #fff; background: var(--mbw-duration-item-price-bg-color, var(--mbw-background-primary, #fff)); margin-top: 0.813rem; margin-bottom: 0.625rem; padding: 0 0.625rem; color: #121212; color: var(--mbw-duration-item-price-fg-color, var(--mbw-text-primary, #121212)); border: 0.031rem solid #eaeaea; } .mbw-duration-item-current-balance { color: #121212; color: var(--mbw-text-primary, #121212); text-align: center; padding-top: 0.625rem; } .mbw-duration-item-duration-container { display: flex; flex-direction: inherit; align-items: center; } @media (max-width: 48rem) { .mbw-duration-item-new-user, .mbw-duration-item-new-user-selected { padding: 0.938rem; } } .mbw-duration-item-new-user .mbw-duration-item-duration, .mbw-duration-item-new-user-selected .mbw-duration-item-duration { font-size: 3.125rem; line-height: 2.75rem; } .mbw-duration-item-new-user .mbw-duration-item-duration-selected, .mbw-duration-item-new-user-selected .mbw-duration-item-duration-selected { font-size: 4.375rem; line-height: 3.5rem; } .mbw-duration-item-new-user .mbw-duration-item-price, .mbw-duration-item-new-user-selected .mbw-duration-item-price { color: #121212; color: var(--mbw-duration-item-price-fg-color, var(--mbw-text-primary, #121212)); } @media (max-width: 48rem) { .mbw-duration-item-new-user .mbw-duration-item-price, .mbw-duration-item-new-user-selected .mbw-duration-item-price { margin-top: 0.313rem; margin-bottom: 0; padding: 0.313rem; } } .mbw-duration-item-new-user .mbw-duration-item-price-selected, .mbw-duration-item-new-user-selected .mbw-duration-item-price-selected { padding: 0 1.063rem; color: #8755f4; color: var(--mbw-duration-item-selected-price-fg-color, #8755f4); } @media (max-width: 48rem) { .mbw-duration-item-new-user .mbw-duration-item-price-selected, .mbw-duration-item-new-user-selected .mbw-duration-item-price-selected { margin-top: 0.313rem; margin-bottom: 0; padding: 0.313rem; } } @media (max-width: 48rem) { .mbw-duration-item-new-user .mbw-duration-item-price-text, .mbw-duration-item-new-user-selected .mbw-duration-item-price-text { display: none; } } .mbw-duration-item-new-user .mbw-duration-item-price-text-mobile, .mbw-duration-item-new-user-selected .mbw-duration-item-price-text-mobile { display: none; } @media (max-width: 48rem) { .mbw-duration-item-new-user .mbw-duration-item-price-text-mobile, .mbw-duration-item-new-user-selected .mbw-duration-item-price-text-mobile { display: flex; } } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-avatar-round-container { width: 100%; position: relative; } .mbw-avatar-round-img-container-holder { display: flex; position: relative; width: 100%; overflow: hidden; border-radius: 50%; border-radius: var(--mbw-avatar-round-border-radius, 50%); } @media (max-width: 80rem) { .mbw-avatar-round-img-container-holder { border-radius: 50%; border-radius: var(--mbw-avatar-round-medium-border-radius, 50%); } } @media (max-width: 48rem) { .mbw-avatar-round-img-container-holder { border-radius: 50%; border-radius: var(--mbw-avatar-round-small-border-radius, 50%); } } .mbw-avatar-round-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-round-large-img-container-holder { display: flex; position: relative; width: 6.25rem; width: var(--mbw-avatar-round-large-width, 6.25rem); height: 6.25rem; height: var(--mbw-avatar-round-large-height, 6.25rem); overflow: hidden; border-radius: 50%; border-radius: var(--mbw-avatar-round-border-radius, 50%); } .mbw-avatar-round-large-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-round-medium-img-container-holder { display: flex; position: relative; width: 4.375rem; width: var(--mbw-avatar-round-medium-width, 4.375rem); height: 4.375rem; height: var(--mbw-avatar-round-medium-height, 4.375rem); overflow: hidden; border-radius: 50%; border-radius: var(--mbw-avatar-round-medium-border-radius, 50%); } .mbw-avatar-round-medium-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-round-small-img-container-holder { display: flex; position: relative; width: 3.125rem; width: var(--mbw-avatar-round-small-width, 3.125rem); height: 3.125rem; height: var(--mbw-avatar-round-small-height, 3.125rem); overflow: hidden; border-radius: 50%; border-radius: var(--mbw-avatar-round-small-border-radius, 50%); } .mbw-avatar-round-small-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-round-extra-small-img-container-holder { display: flex; position: relative; width: 2.25rem; width: var(--mbw-avatar-round-extra-small-width, 2.25rem); height: 2.25rem; height: var(--mbw-avatar-round-extra-small-height, 2.25rem); overflow: hidden; border-radius: 50%; border-radius: var(--mbw-avatar-round-extra-small-border-radius, 50%); } .mbw-avatar-round-extra-small-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-rectangle-container { width: 100%; position: relative; } .mbw-avatar-rectangle-img-container-holder { display: flex; position: relative; width: 100%; overflow: hidden; border-radius: 1.563rem; border-radius: var(--mbw-avatar-rectangle-large-border-radius, 1.563rem); } @media (max-width: 80rem) { .mbw-avatar-rectangle-img-container-holder { border-radius: 1.563rem; border-radius: var(--mbw-avatar-rectangle-medium-border-radius, 1.563rem); } } @media (max-width: 48rem) { .mbw-avatar-rectangle-img-container-holder { border-radius: 0.938rem; border-radius: var(--mbw-avatar-rectangle-small-border-radius, 0.938rem); } } .mbw-avatar-rectangle-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-rectangle-large-img-container-holder { display: flex; position: relative; width: 6.25rem; width: var(--mbw-avatar-rectangle-large-width, 6.25rem); height: 6.25rem; height: var(--mbw-avatar-rectangle-large-height, 6.25rem); overflow: hidden; border-radius: 1.563rem; border-radius: var(--mbw-avatar-rectangle-large-border-radius, 1.563rem); } .mbw-avatar-rectangle-large-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-rectangle-medium-img-container-holder { display: flex; position: relative; width: 4.375rem; width: var(--mbw-avatar-rectangle-medium-width, 4.375rem); height: 4.375rem; height: var(--mbw-avatar-rectangle-medium-height, 4.375rem); overflow: hidden; border-radius: 1.563rem; border-radius: var(--mbw-avatar-rectangle-medium-border-radius, 1.563rem); } .mbw-avatar-rectangle-medium-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-rectangle-small-img-container-holder { display: flex; position: relative; width: 3.125rem; width: var(--mbw-avatar-rectangle-small-width, 3.125rem); height: 3.125rem; height: var(--mbw-avatar-rectangle-small-height, 3.125rem); overflow: hidden; border-radius: 0.938rem; border-radius: var(--mbw-avatar-rectangle-small-border-radius, 0.938rem); } .mbw-avatar-rectangle-small-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-rectangle-extra-small-img-container-holder { display: flex; position: relative; width: 2.25rem; width: var(--mbw-avatar-rectangle-extra-small-width, 2.25rem); height: 2.25rem; height: var(--mbw-avatar-rectangle-extra-small-height, 2.25rem); overflow: hidden; border-radius: 0.313rem; border-radius: var(--mbw-avatar-rectangle-extra-small-border-radius, 0.313rem); } .mbw-avatar-rectangle-extra-small-img-container-holder::after { content: ""; display: block; padding-bottom: 100%; } .mbw-avatar-img { width: 100%; height: 100%; } .mbw-avatar-img-container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-self: center; align-items: center; flex-direction: column; } .mbw-avatar-image { width: 100%; height: 100%; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; } .mbw-avatar-overlays-container { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.563rem; padding: var(--mbw-avatar-large-padding, 1.563rem); background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); } @media (max-width: 80rem) { .mbw-avatar-overlays-container { padding: 1.25rem; padding: var(--mbw-avatar-medium-padding, 1.25rem); } } @media (max-width: 48rem) { .mbw-avatar-overlays-container { padding: 1rem; padding: var(--mbw-avatar-small-padding, 1rem); } } .mbw-avatar-top-overlay-container { display: flex; width: 100%; } .mbw-avatar-bottom-overlay-container { display: flex; width: 100%; } .mbw-avatar-transform-container-holder { width: 100%; position: absolute; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); } .mbw-avatar-hide-left-top-border-radius { border-top-left-radius: 0; } .mbw-avatar-hide-right-top-border-radius { border-top-right-radius: 0; } .mbw-avatar-hide-right-bottom-border-radius { border-bottom-right-radius: 0; } .mbw-avatar-hide-left-bottom-border-radius { border-bottom-left-radius: 0; } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } /* stylelint-disable-next-line selector-no-qualifying-type */ body:has(dialog[open]) { overflow: hidden !important; } .mbw-popover-dialog { position: fixed; width: 31.25rem; width: var(--mbw-popover-width, 31.25rem); max-height: 85vh; background: #fff; background: var(--mbw-background-primary, #fff); border: none; border-radius: 1.563rem; border-radius: var(--mbw-popover-border-radius, 1.563rem); padding: 2.5rem; padding: var(--mbw-popover-dialog-padding-lg, var(--mbw-popover-dialog-padding, 2.5rem)); box-sizing: border-box; overflow: visible; } .mbw-popover-dialog[open] { display: flex; flex-direction: column; row-gap: 1.25rem; row-gap: var(--mbw-popover-dialog-row-gap-lg, var(--mbw-popover-dialog-row-gap, 1.25rem)); } @media (max-width: 48rem) { .mbw-popover-dialog[open] { row-gap: 0.625rem; row-gap: var(--mbw-popover-dialog-row-gap-sm, var(--mbw-popover-dialog-row-gap, 0.625rem)); } } .mbw-popover-dialog::backdrop { background: rgba(39, 39, 39, 0.9); } .mbw-popover-dialog.centered { margin: auto !important; } @media (max-width: 48rem) { .mbw-popover-dialog.centered { border-bottom-left-radius: 1.563rem; border-bottom-left-radius: var(--mbw-popover-border-radius, 1.563rem); border-bottom-right-radius: 1.563rem; border-bottom-right-radius: var(--mbw-popover-border-radius, 1.563rem); } } @media (max-width: 48rem) { .mbw-popover-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding: 1.25rem; padding: var(--mbw-popover-dialog-padding-sm, var(--mbw-popover-dialog-padding, 1.25rem)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } @media only screen and (max-height: 900px) { .mbw-popover-dialog { max-height: 90vh; } } .mbw-popover-top-overlay-container { display: flex; align-self: center; height: 6.25rem; align-items: flex-end; } @media (max-width: 48rem) { .mbw-popover-top-overlay-container { height: 3.125rem; } } .mbw-popover-close-btn-container { position: absolute; top: 1.25rem; right: 1.25rem; } .mbw-popover-close-btn, .mbw-popover-back-btn { background: none; outline: none; border: none; display: flex; padding: 0; cursor: pointer; } .mbw-popover-close-btn div, .mbw-popover-back-btn div { display: flex; } .mbw-popover-back-btn-container { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; } .mbw-popover-title-container { display: flex; flex-direction: row; -moz-column-gap: 0.625rem; column-gap: 0.625rem; } .mbw-popover-title { flex-grow: 1; } .mbw-popover-back-btn-container + .mbw-popover-title { padding-top: 0.375rem; } .mbw-popover-content { width: 100%; overflow-y: scroll; } .mbw-popover-content::-webkit-scrollbar { display: none; } .mbw-popover-content::-webkit-scrollbar-track { background: transparent; } .mbw-popover-content::-webkit-scrollbar-thumb { background: transparent; } .mbw-popover-content::-webkit-scrollbar-thumb:hover { background: transparent; } @media only screen and (max-height: 900px) { .mbw-popover-content { max-height: 90vh; } } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-marketing-banner-wrapper { display: flex; width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem; align-items: center; justify-content: center; background: linear-gradient(93deg, #b38fff 29.97%, #8957f5 100%); background: linear-gradient(var(--mbw-marketing-banner-rotation, 93deg), var(--wbw-marketing-banner-first-color, #b38fff) 29.97%, var(--mbw-marketing-banner-second-color, #8957f5) 100%); padding-left: 0.75rem; padding-right: 0.75rem; } .mbw-marketing-banner-title { display: flex; flex-direction: column; justify-content: flex-end; align-self: flex-end; } .mbw-marketing-banner-content-holder { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; } .mbw-marketing-banner-item-wrapper { display: flex; flex-direction: column; color: #fff; color: var(--mbw-marketing-banner-titile-color, var(--mbw-text-tertiary, #fff)); width: 100%; flex: 1 1; } .mbw-marketing-banner-wraper-single-item { flex: 1 1; text-align: start; } .mbw-marketing-banner-wraper-single-item:first-of-type { text-align: start; } .mbw-marketing-banner-icon { display: flex; justify-content: center; align-items: center; flex: 0 1 auto; text-align: center; } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-footer { display: grid; grid-gap: 1.5rem; gap: 1.5rem; transition: 300ms; } @media (max-width: 80rem) { .mbw-footer { -moz-column-gap: 0; column-gap: 0; } } @media (max-width: 48rem) { .mbw-footer { grid-template-columns: minmax(max-content, 1fr); gap: 2.25rem; } } .mbw-footer-logo { cursor: pointer; align-items: center; } .mbw-footer-logo svg { margin-right: 1.25rem; } .mbw-footer-download-app { grid-area: 3/1; } .mbw-footer-download-app { color: #121212; color: var(--mbw-text-primary, #121212); display: flex; flex-direction: column; gap: 1.25rem; max-width: 20rem; grid-area: 3/1; } .mbw-footer-download-app-links { display: flex; flex-direction: row; gap: 1.25rem; } @media (max-width: 80rem) { .mbw-footer-download-app-links { gap: 1rem; } } .mbw-footer-social-media { grid-area: 4/1; display: flex; gap: 1.25rem; } .mbw-footer-links { display: grid; grid-template: 1fr/repeat(3, minmax(max-content, 1fr)); grid-row-end: span 4; } @media (max-width: 80rem) { .mbw-footer-links { grid-template: 1fr/repeat(2, minmax(max-content, 1fr)); } .mbw-footer-links .mbw-footer-link:nth-last-child(2) { display: none; } } @media (max-width: 48rem) { .mbw-footer-links { grid-template: repeat(2, 1fr)/1fr; grid-row: 2; gap: 2.5rem; } } .mbw-footer-link { grid-row-end: span 4; display: flex; flex-direction: column; gap: 2.25rem; } .mbw-footer-link > span { color: #636570; color: var(--mbw-text-secondary, #636570); } .mbw-footer-link-title { color: #636570; color: var(--mbw-text-secondary, #636570); } .mbw-footer-svg { color: #636570; color: var(--mbw-icon-secondary, #636570); } .mbw-footer-path { text-decoration: none; color: #121212; color: var(--mbw-text-primary, #121212); } .mbw-footer-link-items { display: flex; flex-direction: column; gap: 1.25rem; } .mbw-footer-company-info { grid-area: 5/1/auto/span 2; border-top: 1px solid #eaeaea; border-top: 1px solid var(--mbw-default-border, #eaeaea); color: #636570; color: var(--mbw-text-secondary, #636570); padding-top: 3rem; } @media (max-width: 48rem) { .mbw-footer-company-info { grid-area: 6/1; padding-top: 1rem; } } .mbw-footer-terms-links { grid-area: 5/2; display: flex; justify-content: flex-end; align-items: flex-end; gap: 2.5rem; } .mbw-footer-terms-links a { color: #636570; color: var(--mbw-text-secondary, #636570); padding: 0; text-decoration: none; } @media (max-width: 48rem) { .mbw-footer-terms-links { gap: 0.625rem; grid-area: 5/1; justify-content: stretch; } } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-speciality-standard-love-readings { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(186, 90, 90, 0.0392156863) 33.44%, #f1dede 100%); background: var(--mbw-speciality-love-readings-background-color, linear-gradient(107deg, var(--mbw-bg-love-readings-gradient, rgba(186, 90, 90, 0.0392156863)) 33.44%, var(--mbw-bg-love-readings, #f1dede) 100%)); color: #ba5a5a; color: var(--mbw-love-readings, #ba5a5a); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #f1dede; border-color: var(--mbw-bg-love-readings, #f1dede); } @media (max-width: 48rem) { .mbw-speciality-standard-love-readings { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-love-readings:hover .mbw-speciality-icon-standard-love-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-love-readings:hover { background: linear-gradient(107deg, rgba(186, 90, 90, 0.0392156863) 33.44%, #f1dede 100%); background: var(--mbw-speciality-love-readings-background-color, linear-gradient(107deg, var(--mbw-bg-love-readings-gradient, rgba(186, 90, 90, 0.0392156863)) 33.44%, var(--mbw-bg-love-readings, #f1dede) 100%)); } } .mbw-speciality-icon-standard-love-readings { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-love-readings { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-love-readings { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-psychic-readings { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(147, 86, 165, 0.0392156863) 33.44%, #e9dded 100%); background: var(--mbw-speciality-psychic-readings-background-color, linear-gradient(107deg, var(--mbw-bg-psychic-readings-gradient, rgba(147, 86, 165, 0.0392156863)) 33.44%, var(--mbw-bg-psychic-readings, #e9dded) 100%)); color: #9356a5; color: var(--mbw-psychic-readings, #9356a5); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #e9dded; border-color: var(--mbw-bg-psychic-readings, #e9dded); } @media (max-width: 48rem) { .mbw-speciality-standard-psychic-readings { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-psychic-readings:hover .mbw-speciality-icon-standard-psychic-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-psychic-readings:hover { background: linear-gradient(107deg, rgba(147, 86, 165, 0.0392156863) 33.44%, #e9dded 100%); background: var(--mbw-speciality-psychic-readings-background-color, linear-gradient(107deg, var(--mbw-bg-psychic-readings-gradient, rgba(147, 86, 165, 0.0392156863)) 33.44%, var(--mbw-bg-psychic-readings, #e9dded) 100%)); } } .mbw-speciality-icon-standard-psychic-readings { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-psychic-readings { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-psychic-readings { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-tarot-readings { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(71, 135, 185, 0.0392156863) 33.44%, #dae7f1 100%); background: var(--mbw-speciality-tarot-readings-background-color, linear-gradient(107deg, var(--mbw-bg-tarot-readings-gradient, rgba(71, 135, 185, 0.0392156863)) 33.44%, var(--mbw-bg-tarot-readings, #dae7f1) 100%)); color: #4787b9; color: var(--mbw-tarot-readings, #4787b9); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #dae7f1; border-color: var(--mbw-bg-tarot-readings, #dae7f1); } @media (max-width: 48rem) { .mbw-speciality-standard-tarot-readings { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-tarot-readings:hover .mbw-speciality-icon-standard-tarot-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-tarot-readings:hover { background: linear-gradient(107deg, rgba(71, 135, 185, 0.0392156863) 33.44%, #dae7f1 100%); background: var(--mbw-speciality-tarot-readings-background-color, linear-gradient(107deg, var(--mbw-bg-tarot-readings-gradient, rgba(71, 135, 185, 0.0392156863)) 33.44%, var(--mbw-bg-tarot-readings, #dae7f1) 100%)); } } .mbw-speciality-icon-standard-tarot-readings { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-tarot-readings { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-tarot-readings { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-astrology-horoscopes { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(62, 158, 168, 0.0392156863) 33.44%, #d8ecee 100%); background: var(--mbw-speciality-astrology-horoscopes-background-color, linear-gradient(107deg, var(--mbw-bg-astrology-horoscopes-gradient, rgba(62, 158, 168, 0.0392156863)) 33.44%, var(--mbw-bg-astrology-horoscopes, #d8ecee) 100%)); color: #3e9ea8; color: var(--mbw-astrology-horoscopes, #3e9ea8); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #d8ecee; border-color: var(--mbw-bg-astrology-horoscopes, #d8ecee); } @media (max-width: 48rem) { .mbw-speciality-standard-astrology-horoscopes { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-astrology-horoscopes:hover .mbw-speciality-icon-standard-astrology-horoscopes { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-astrology-horoscopes:hover { background: linear-gradient(107deg, rgba(62, 158, 168, 0.0392156863) 33.44%, #d8ecee 100%); background: var(--mbw-speciality-astrology-horoscopes-background-color, linear-gradient(107deg, var(--mbw-bg-astrology-horoscopes-gradient, rgba(62, 158, 168, 0.0392156863)) 33.44%, var(--mbw-bg-astrology-horoscopes, #d8ecee) 100%)); } } .mbw-speciality-icon-standard-astrology-horoscopes { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-astrology-horoscopes { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-astrology-horoscopes { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-palm-readings { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(73, 156, 86, 0.0392156863) 33.44%, #dbebdd 100%); background: var(--mbw-speciality-palm-readings-background-color, linear-gradient(107deg, var(--mbw-bg-palm-readings-gradient, rgba(73, 156, 86, 0.0392156863)) 33.44%, var(--mbw-bg-palm-readings, #dbebdd) 100%)); color: #499c56; color: var(--mbw-palm-readings, #499c56); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #dbebdd; border-color: var(--mbw-bg-palm-readings, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-standard-palm-readings { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-palm-readings:hover .mbw-speciality-icon-standard-palm-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-palm-readings:hover { background: linear-gradient(107deg, rgba(73, 156, 86, 0.0392156863) 33.44%, #dbebdd 100%); background: var(--mbw-speciality-palm-readings-background-color, linear-gradient(107deg, var(--mbw-bg-palm-readings-gradient, rgba(73, 156, 86, 0.0392156863)) 33.44%, var(--mbw-bg-palm-readings, #dbebdd) 100%)); } } .mbw-speciality-icon-standard-palm-readings { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-palm-readings { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-palm-readings { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-angel-insights { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(191, 80, 160, 0.0392156863) 33.44%, #f2dcec 100%); background: var(--mbw-speciality-angel-insights-background-color, linear-gradient(107deg, var(--mbw-bg-angel-insights-gradient, rgba(191, 80, 160, 0.0392156863)) 33.44%, var(--mbw-bg-angel-insights, #f2dcec) 100%)); color: #bf50a0; color: var(--mbw-angel-insights, #bf50a0); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #f2dcec; border-color: var(--mbw-bg-angel-insights, #f2dcec); } @media (max-width: 48rem) { .mbw-speciality-standard-angel-insights { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-angel-insights:hover .mbw-speciality-icon-standard-angel-insights { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-angel-insights:hover { background: linear-gradient(107deg, rgba(191, 80, 160, 0.0392156863) 33.44%, #f2dcec 100%); background: var(--mbw-speciality-angel-insights-background-color, linear-gradient(107deg, var(--mbw-bg-angel-insights-gradient, rgba(191, 80, 160, 0.0392156863)) 33.44%, var(--mbw-bg-angel-insights, #f2dcec) 100%)); } } .mbw-speciality-icon-standard-angel-insights { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-angel-insights { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-angel-insights { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-oracle-guidance { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(182, 157, 30, 0.0392156863) 33.44%, #f0ebd2 100%); background: var(--mbw-speciality-oracle-guidance-background-color, linear-gradient(107deg, var(--mbw-bg-oracle-guidence-gradient, rgba(182, 157, 30, 0.0392156863)) 33.44%, var(--mbw-bg-oracle-guidence, #f0ebd2) 100%)); color: #b69d1e; color: var(--mbw-oracle-guidence, #b69d1e); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #f0ebd2; border-color: var(--mbw-bg-oracle-guidence, #f0ebd2); } @media (max-width: 48rem) { .mbw-speciality-standard-oracle-guidance { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-oracle-guidance:hover .mbw-speciality-icon-standard-oracle-guidance { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-oracle-guidance:hover { background: linear-gradient(107deg, rgba(182, 157, 30, 0.0392156863) 33.44%, #f0ebd2 100%); background: var(--mbw-speciality-oracle-guidance-background-color, linear-gradient(107deg, var(--mbw-bg-oracle-guidence-gradient, rgba(182, 157, 30, 0.0392156863)) 33.44%, var(--mbw-bg-oracle-guidence, #f0ebd2) 100%)); } } .mbw-speciality-icon-standard-oracle-guidance { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-oracle-guidance { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-oracle-guidance { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-dream-analysis { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(112, 112, 229, 0.0392156863) 33.44%, #e2e2fa 100%); background: var(--mbw-speciality-dream-analysis-background-color, linear-gradient(107deg, var(--mbw-bg-dream-analysis-gradient, rgba(112, 112, 229, 0.0392156863)) 33.44%, var(--mbw-bg-dream-analysis, #e2e2fa) 100%)); color: #7070e5; color: var(--mbw-dream-analysis, #7070e5); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #e2e2fa; border-color: var(--mbw-bg-dream-analysis, #e2e2fa); } @media (max-width: 48rem) { .mbw-speciality-standard-dream-analysis { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-dream-analysis:hover .mbw-speciality-icon-standard-dream-analysis { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-dream-analysis:hover { background: linear-gradient(107deg, rgba(112, 112, 229, 0.0392156863) 33.44%, #e2e2fa 100%); background: var(--mbw-speciality-dream-analysis-background-color, linear-gradient(107deg, var(--mbw-bg-dream-analysis-gradient, rgba(112, 112, 229, 0.0392156863)) 33.44%, var(--mbw-bg-dream-analysis, #e2e2fa) 100%)); } } .mbw-speciality-icon-standard-dream-analysis { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-dream-analysis { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-dream-analysis { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-spiritual-medium { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: linear-gradient(107deg, rgba(73, 156, 86, 0.0392156863) 33.44%, #dbebdd 100%); background: var(--mbw-speciality-palm-readings-background-color, linear-gradient(107deg, var(--mbw-bg-palm-readings-gradient, rgba(73, 156, 86, 0.0392156863)) 33.44%, var(--mbw-bg-palm-readings, #dbebdd) 100%)); color: #499c56; color: var(--mbw-spiritual-medium, #499c56); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #dbebdd; border-color: var(--mbw-bg-spiritual-medium, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-standard-spiritual-medium { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-spiritual-medium:hover .mbw-speciality-icon-standard-spiritual-medium { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-spiritual-medium:hover { background: linear-gradient(107deg, rgba(73, 156, 86, 0.0392156863) 33.44%, #dbebdd 100%); background: var(--mbw-speciality-palm-readings-background-color, linear-gradient(107deg, var(--mbw-bg-palm-readings-gradient, rgba(73, 156, 86, 0.0392156863)) 33.44%, var(--mbw-bg-palm-readings, #dbebdd) 100%)); } } .mbw-speciality-icon-standard-spiritual-medium { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-spiritual-medium { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-spiritual-medium { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-standard-default { display: flex; justify-content: flex-start; width: 100%; height: inherit; background: #fff; background: var(--mbw-speciality-bg-color, #fff); color: #121212; color: var(--mbw-speciality-fg-color, #121212); border-radius: 1.25rem; border: 0.063rem solid; border: var(--mbw-speciality-standard-border, 0.063rem solid); border-color: #eaeaea; border-color: var(--mbw-speciality-border-color, var(--mbw-border-primary, #eaeaea)); } @media (max-width: 48rem) { .mbw-speciality-standard-default { border-radius: 1.25rem; } } @media (max-width: 48rem) { .mbw-speciality-standard-default:hover .mbw-speciality-icon-standard-default { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-standard-default:hover { background: #fff; background: var(--mbw-speciality-bg-color, #fff); } } .mbw-speciality-icon-standard-default { display: flex; flex-direction: column; width: 4.75rem; height: 4.75rem; border-radius: 0.875rem; margin-right: 1.5rem; margin-bottom: 0; transition: transform 0.3s ease-in-out; } @media (max-width: 80rem) { .mbw-speciality-icon-standard-default { margin-bottom: 0.5rem; } } @media (max-width: 48rem) { .mbw-speciality-icon-standard-default { width: 4.75rem; height: 4.75rem; margin-right: 0; margin-bottom: 0.5rem; } } .mbw-speciality-content-standard { display: flex; flex-direction: row; align-items: left; padding: 1.5rem; text-align: left; } @media (max-width: 80rem) { .mbw-speciality-content-standard { flex-direction: column; } } @media (max-width: 48rem) { .mbw-speciality-content-standard { padding: 1.5rem; } } .mbw-speciality-title-standard { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-standard { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .mbw-speciality-description-standard { display: flex; padding-top: 0.5rem; } .mbw-speciality-footer-standard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 1.25rem; } .mbw-speciality-title-desktop-standard { display: flex; flex-direction: column; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-standard { display: none; } } .mbw-speciality-title-mobile-standard { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-standard { display: flex; } } .mbw-speciality-large-love-readings { display: flex; color: #ba5a5a; color: var(--mbw-love-readings, #ba5a5a); border-color: #f1dede; border-color: var(--mbw-bg-love-readings, #f1dede); } @media (max-width: 48rem) { .mbw-speciality-large-love-readings:hover .mbw-speciality-icon-large-love-readings { transform: none; } } .mbw-speciality-icon-large-love-readings { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-psychic-readings { display: flex; color: #9356a5; color: var(--mbw-psychic-readings, #9356a5); border-color: #e9dded; border-color: var(--mbw-bg-psychic-readings, #e9dded); } @media (max-width: 48rem) { .mbw-speciality-large-psychic-readings:hover .mbw-speciality-icon-large-psychic-readings { transform: none; } } .mbw-speciality-icon-large-psychic-readings { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-tarot-readings { display: flex; color: #4787b9; color: var(--mbw-tarot-readings, #4787b9); border-color: #dae7f1; border-color: var(--mbw-bg-tarot-readings, #dae7f1); } @media (max-width: 48rem) { .mbw-speciality-large-tarot-readings:hover .mbw-speciality-icon-large-tarot-readings { transform: none; } } .mbw-speciality-icon-large-tarot-readings { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-astrology-horoscopes { display: flex; color: #3e9ea8; color: var(--mbw-astrology-horoscopes, #3e9ea8); border-color: #d8ecee; border-color: var(--mbw-bg-astrology-horoscopes, #d8ecee); } @media (max-width: 48rem) { .mbw-speciality-large-astrology-horoscopes:hover .mbw-speciality-icon-large-astrology-horoscopes { transform: none; } } .mbw-speciality-icon-large-astrology-horoscopes { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-palm-readings { display: flex; color: #499c56; color: var(--mbw-palm-readings, #499c56); border-color: #dbebdd; border-color: var(--mbw-bg-palm-readings, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-large-palm-readings:hover .mbw-speciality-icon-large-palm-readings { transform: none; } } .mbw-speciality-icon-large-palm-readings { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-angel-insights { display: flex; color: #bf50a0; color: var(--mbw-angel-insights, #bf50a0); border-color: #f2dcec; border-color: var(--mbw-bg-angel-insights, #f2dcec); } @media (max-width: 48rem) { .mbw-speciality-large-angel-insights:hover .mbw-speciality-icon-large-angel-insights { transform: none; } } .mbw-speciality-icon-large-angel-insights { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-oracle-guidance { display: flex; color: #b69d1e; color: var(--mbw-oracle-guidence, #b69d1e); border-color: #f0ebd2; border-color: var(--mbw-bg-oracle-guidence, #f0ebd2); } @media (max-width: 48rem) { .mbw-speciality-large-oracle-guidance:hover .mbw-speciality-icon-large-oracle-guidance { transform: none; } } .mbw-speciality-icon-large-oracle-guidance { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-dream-analysis { display: flex; color: #7070e5; color: var(--mbw-dream-analysis, #7070e5); border-color: #e2e2fa; border-color: var(--mbw-bg-dream-analysis, #e2e2fa); } @media (max-width: 48rem) { .mbw-speciality-large-dream-analysis:hover .mbw-speciality-icon-large-dream-analysis { transform: none; } } .mbw-speciality-icon-large-dream-analysis { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-spiritual-medium { display: flex; color: #499c56; color: var(--mbw-spiritual-medium, #499c56); border-color: #dbebdd; border-color: var(--mbw-bg-spiritual-medium, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-large-spiritual-medium:hover .mbw-speciality-icon-large-spiritual-medium { transform: none; } } .mbw-speciality-icon-large-spiritual-medium { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-large-default { display: flex; color: #121212; color: var(--mbw-speciality-fg-color, #121212); border-color: #eaeaea; border-color: var(--mbw-speciality-border-color, var(--mbw-border-primary, #eaeaea)); } @media (max-width: 48rem) { .mbw-speciality-large-default:hover .mbw-speciality-icon-large-default { transform: none; } } .mbw-speciality-icon-large-default { display: flex; flex-direction: column; border-radius: 0.875rem; transition: transform 0.3s ease-in-out; } .mbw-speciality-content-large { display: flex; } .mbw-speciality-title-large { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-large { display: flex; } .mbw-speciality-description-large { padding-top: 0.5rem; } .mbw-speciality-footer-large { flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-large { display: flex; } @media (max-width: 48rem) { .mbw-speciality-title-desktop-large { display: none; } } .mbw-speciality-title-mobile-large { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-large { display: flex; } } .mbw-speciality-button-love-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #f1dede; background: var(--mbw-bg-love-readings, #f1dede); color: #ba5a5a; color: var(--mbw-love-readings, #ba5a5a); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #f1dede; border-color: var(--mbw-bg-love-readings, #f1dede); } @media (max-width: 48rem) { .mbw-speciality-button-love-readings { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-love-readings:hover .mbw-speciality-icon-button-love-readings { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-love-readings:hover .mbw-speciality-icon-button-love-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-love-readings:hover { background: #f1dede; background: var(--mbw-bg-love-readings, #f1dede); } } .mbw-speciality-icon-button-love-readings { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-love-readings { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-love-readings { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-love-readings { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-psychic-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #e9dded; background: var(--mbw-bg-psychic-readings, #e9dded); color: #9356a5; color: var(--mbw-psychic-readings, #9356a5); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #e9dded; border-color: var(--mbw-bg-psychic-readings, #e9dded); } @media (max-width: 48rem) { .mbw-speciality-button-psychic-readings { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-psychic-readings:hover .mbw-speciality-icon-button-psychic-readings { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-psychic-readings:hover .mbw-speciality-icon-button-psychic-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-psychic-readings:hover { background: #e9dded; background: var(--mbw-bg-psychic-readings, #e9dded); } } .mbw-speciality-icon-button-psychic-readings { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-psychic-readings { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-psychic-readings { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-psychic-readings { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-tarot-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #dae7f1; background: var(--mbw-bg-tarot-readings, #dae7f1); color: #4787b9; color: var(--mbw-tarot-readings, #4787b9); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #dae7f1; border-color: var(--mbw-bg-tarot-readings, #dae7f1); } @media (max-width: 48rem) { .mbw-speciality-button-tarot-readings { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-tarot-readings:hover .mbw-speciality-icon-button-tarot-readings { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-tarot-readings:hover .mbw-speciality-icon-button-tarot-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-tarot-readings:hover { background: #dae7f1; background: var(--mbw-bg-tarot-readings, #dae7f1); } } .mbw-speciality-icon-button-tarot-readings { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-tarot-readings { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-tarot-readings { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-tarot-readings { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-astrology-horoscopes { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #d8ecee; background: var(--mbw-bg-astrology-horoscopes, #d8ecee); color: #3e9ea8; color: var(--mbw-astrology-horoscopes, #3e9ea8); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #d8ecee; border-color: var(--mbw-bg-astrology-horoscopes, #d8ecee); } @media (max-width: 48rem) { .mbw-speciality-button-astrology-horoscopes { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-astrology-horoscopes:hover .mbw-speciality-icon-button-astrology-horoscopes { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-astrology-horoscopes:hover .mbw-speciality-icon-button-astrology-horoscopes { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-astrology-horoscopes:hover { background: #d8ecee; background: var(--mbw-bg-astrology-horoscopes, #d8ecee); } } .mbw-speciality-icon-button-astrology-horoscopes { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-astrology-horoscopes { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-astrology-horoscopes { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-astrology-horoscopes { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-palm-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #dbebdd; background: var(--mbw-bg-palm-readings, #dbebdd); color: #499c56; color: var(--mbw-palm-readings, #499c56); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #dbebdd; border-color: var(--mbw-bg-palm-readings, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-button-palm-readings { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-palm-readings:hover .mbw-speciality-icon-button-palm-readings { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-palm-readings:hover .mbw-speciality-icon-button-palm-readings { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-palm-readings:hover { background: #dbebdd; background: var(--mbw-bg-palm-readings, #dbebdd); } } .mbw-speciality-icon-button-palm-readings { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-palm-readings { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-palm-readings { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-palm-readings { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-angel-insights { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #f2dcec; background: var(--mbw-bg-angel-insights, #f2dcec); color: #bf50a0; color: var(--mbw-angel-insights, #bf50a0); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #f2dcec; border-color: var(--mbw-bg-angel-insights, #f2dcec); } @media (max-width: 48rem) { .mbw-speciality-button-angel-insights { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-angel-insights:hover .mbw-speciality-icon-button-angel-insights { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-angel-insights:hover .mbw-speciality-icon-button-angel-insights { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-angel-insights:hover { background: #f2dcec; background: var(--mbw-bg-angel-insights, #f2dcec); } } .mbw-speciality-icon-button-angel-insights { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-angel-insights { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-angel-insights { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-angel-insights { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-oracle-guidance { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #f0ebd2; background: var(--mbw-bg-oracle-guidence, #f0ebd2); color: #b69d1e; color: var(--mbw-oracle-guidence, #b69d1e); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #f0ebd2; border-color: var(--mbw-bg-oracle-guidence, #f0ebd2); } @media (max-width: 48rem) { .mbw-speciality-button-oracle-guidance { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-oracle-guidance:hover .mbw-speciality-icon-button-oracle-guidance { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-oracle-guidance:hover .mbw-speciality-icon-button-oracle-guidance { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-oracle-guidance:hover { background: #f0ebd2; background: var(--mbw-bg-oracle-guidence, #f0ebd2); } } .mbw-speciality-icon-button-oracle-guidance { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-oracle-guidance { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-oracle-guidance { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-oracle-guidance { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-dream-analysis { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #e2e2fa; background: var(--mbw-bg-dream-analysis, #e2e2fa); color: #7070e5; color: var(--mbw-dream-analysis, #7070e5); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #e2e2fa; border-color: var(--mbw-bg-dream-analysis, #e2e2fa); } @media (max-width: 48rem) { .mbw-speciality-button-dream-analysis { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-dream-analysis:hover .mbw-speciality-icon-button-dream-analysis { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-dream-analysis:hover .mbw-speciality-icon-button-dream-analysis { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-dream-analysis:hover { background: #e2e2fa; background: var(--mbw-bg-dream-analysis, #e2e2fa); } } .mbw-speciality-icon-button-dream-analysis { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-dream-analysis { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-dream-analysis { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-dream-analysis { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-spiritual-medium { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #dbebdd; background: var(--mbw-bg-spiritual-medium, #dbebdd); color: #499c56; color: var(--mbw-spiritual-medium, #499c56); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #dbebdd; border-color: var(--mbw-bg-spiritual-medium, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-button-spiritual-medium { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-spiritual-medium:hover .mbw-speciality-icon-button-spiritual-medium { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-spiritual-medium:hover .mbw-speciality-icon-button-spiritual-medium { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-spiritual-medium:hover { background: #dbebdd; background: var(--mbw-bg-spiritual-medium, #dbebdd); } } .mbw-speciality-icon-button-spiritual-medium { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-spiritual-medium { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-spiritual-medium { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-spiritual-medium { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-button-default { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-align, center); width: 100%; width: var(--mbw-speciality-button-width, 100%); height: 100%; height: var(--mbw-speciality-button-height, 100%); background: #fff; background: var(--mbw-speciality-bg-color, #fff); color: #121212; color: var(--mbw-speciality-fg-color, #121212); border-radius: 1.563rem; border-radius: var(--mbw-speciality-button-border-radius, 1.563rem); border-right: none; border-right: var(--mbw-speciality-button-border-right, none); border-color: #eaeaea; border-color: var(--mbw-speciality-border-color, var(--mbw-border-primary, #eaeaea)); } @media (max-width: 48rem) { .mbw-speciality-button-default { border-radius: 0.938rem; border-radius: var(--mbw-speciality-button-mobile-border-radius, 0.938rem); } } .mbw-speciality-button-default:hover { background: #f7f7f7; background: var(--mbw-background-secondary, #f7f7f7); } .mbw-speciality-button-default:hover .mbw-speciality-icon-button-default { transform: scale(1.2); transform: var(--mbw-speciality-button-hover-transform, scale(1.2)); } @media (max-width: 48rem) { .mbw-speciality-button-default:hover .mbw-speciality-icon-button-default { transform: none; } } @media (max-width: 48rem) { .mbw-speciality-button-default:hover { background: #fff; background: var(--mbw-speciality-bg-color, #fff); } } .mbw-speciality-icon-button-default { display: flex; flex-direction: column; width: 6.75rem; width: var(--mbw-speciality-button-icon-width, 6.75rem); height: 6.75rem; height: var(--mbw-speciality-button-icon-height, 6.75rem); border-radius: 0.875rem; margin-bottom: 1.25rem; margin-bottom: var(--mbw-speciality-button-icon-margin-bottom, 1.25rem); transition: transform 0.3s ease-in-out; } @media (max-width: 105rem) { .mbw-speciality-icon-button-default { width: 5.125rem; width: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); height: 5.125rem; height: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); } } @media (max-width: 80rem) { .mbw-speciality-icon-button-default { width: 3.938rem; width: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); height: 3.938rem; height: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); } } @media (max-width: 48rem) { .mbw-speciality-icon-button-default { width: 4.688rem; width: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); height: 4.688rem; height: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); margin-bottom: 0; margin-bottom: var(--mbw-speciality-button-icon-mobile-margin-bottom, 0); } } .mbw-speciality-content-button { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-direction, column); align-items: center; align-items: var(--mbw-speciality-button-text-align, center); padding: 1.3125rem 0 1.563rem 0; padding: var(--mbw-speciality-button-paddings, 1.3125rem 0 1.563rem 0); text-align: center; text-align: var(--mbw-speciality-button-text-align, center); } @media (max-width: 48rem) { .mbw-speciality-content-button { padding: 0.313rem 0 1rem 0; padding: var(--mbw-speciality-button-mobile-padding, 0.313rem 0 1rem 0); } } .mbw-speciality-title-button { display: flex; align-items: center; flex-direction: column; } .mbw-speciality-title-content-button { display: flex; justify-content: center; justify-content: var(--mbw-speciality-button-title-content-justify, center); height: 100%; height: var(--mbw-speciality-button-title-content-height, 100%); align-items: center; align-items: var(--mbw-speciality-button-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } .mbw-speciality-description-button { display: none; display: var(--mbw-speciality-button-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-button { display: none; display: var(--mbw-speciality-button-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-button-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-button { display: none; } } .mbw-speciality-title-mobile-button { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-button { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-button-title-width, -moz-min-content); width: var(--mbw-speciality-button-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-love-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #ba5a5a; color: var(--mbw-love-readings, #ba5a5a); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #f1dede; border-color: var(--mbw-bg-love-readings, #f1dede); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-love-readings { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-love-readings:hover .mbw-speciality-icon-advisor-profile-love-readings { transform: none; } } .mbw-speciality-icon-advisor-profile-love-readings { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #f1dede; background-color: var(--mbw-bg-love-readings, #f1dede); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-love-readings { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-psychic-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #9356a5; color: var(--mbw-psychic-readings, #9356a5); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #e9dded; border-color: var(--mbw-bg-psychic-readings, #e9dded); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-psychic-readings { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-psychic-readings:hover .mbw-speciality-icon-advisor-profile-psychic-readings { transform: none; } } .mbw-speciality-icon-advisor-profile-psychic-readings { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #e9dded; background-color: var(--mbw-bg-psychic-readings, #e9dded); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-psychic-readings { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-tarot-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #4787b9; color: var(--mbw-tarot-readings, #4787b9); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #dae7f1; border-color: var(--mbw-bg-tarot-readings, #dae7f1); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-tarot-readings { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-tarot-readings:hover .mbw-speciality-icon-advisor-profile-tarot-readings { transform: none; } } .mbw-speciality-icon-advisor-profile-tarot-readings { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #dae7f1; background-color: var(--mbw-bg-tarot-readings, #dae7f1); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-tarot-readings { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-astrology-horoscopes { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #3e9ea8; color: var(--mbw-astrology-horoscopes, #3e9ea8); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #d8ecee; border-color: var(--mbw-bg-astrology-horoscopes, #d8ecee); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-astrology-horoscopes { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-astrology-horoscopes:hover .mbw-speciality-icon-advisor-profile-astrology-horoscopes { transform: none; } } .mbw-speciality-icon-advisor-profile-astrology-horoscopes { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #d8ecee; background-color: var(--mbw-bg-astrology-horoscopes, #d8ecee); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-astrology-horoscopes { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-palm-readings { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #499c56; color: var(--mbw-palm-readings, #499c56); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #dbebdd; border-color: var(--mbw-bg-palm-readings, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-palm-readings { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-palm-readings:hover .mbw-speciality-icon-advisor-profile-palm-readings { transform: none; } } .mbw-speciality-icon-advisor-profile-palm-readings { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #dbebdd; background-color: var(--mbw-bg-palm-readings, #dbebdd); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-palm-readings { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-angel-insights { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #bf50a0; color: var(--mbw-angel-insights, #bf50a0); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #f2dcec; border-color: var(--mbw-bg-angel-insights, #f2dcec); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-angel-insights { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-angel-insights:hover .mbw-speciality-icon-advisor-profile-angel-insights { transform: none; } } .mbw-speciality-icon-advisor-profile-angel-insights { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #f2dcec; background-color: var(--mbw-bg-angel-insights, #f2dcec); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-angel-insights { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-oracle-guidance { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #b69d1e; color: var(--mbw-oracle-guidence, #b69d1e); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #f0ebd2; border-color: var(--mbw-bg-oracle-guidence, #f0ebd2); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-oracle-guidance { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-oracle-guidance:hover .mbw-speciality-icon-advisor-profile-oracle-guidance { transform: none; } } .mbw-speciality-icon-advisor-profile-oracle-guidance { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #f0ebd2; background-color: var(--mbw-bg-oracle-guidence, #f0ebd2); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-oracle-guidance { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-dream-analysis { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #7070e5; color: var(--mbw-dream-analysis, #7070e5); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #e2e2fa; border-color: var(--mbw-bg-dream-analysis, #e2e2fa); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-dream-analysis { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-dream-analysis:hover .mbw-speciality-icon-advisor-profile-dream-analysis { transform: none; } } .mbw-speciality-icon-advisor-profile-dream-analysis { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #e2e2fa; background-color: var(--mbw-bg-dream-analysis, #e2e2fa); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-dream-analysis { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-spiritual-medium { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #499c56; color: var(--mbw-spiritual-medium, #499c56); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #dbebdd; border-color: var(--mbw-bg-spiritual-medium, #dbebdd); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-spiritual-medium { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-spiritual-medium:hover .mbw-speciality-icon-advisor-profile-spiritual-medium { transform: none; } } .mbw-speciality-icon-advisor-profile-spiritual-medium { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #dbebdd; background-color: var(--mbw-bg-spiritual-medium, #dbebdd); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-spiritual-medium { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-advisor-profile-default { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-align, center); width: -moz-fit-content; width: fit-content; width: var(--mbw-speciality-advisor-profile-width, -moz-fit-content); width: var(--mbw-speciality-advisor-profile-width, fit-content); color: #121212; color: var(--mbw-speciality-fg-color, #121212); border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-border-radius, 0); border: none; border: var(--mbw-speciality-advisor-profile-border, none); border-color: #eaeaea; border-color: var(--mbw-speciality-border-color, var(--mbw-border-primary, #eaeaea)); } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-default { border-radius: 0; border-radius: var(--mbw-speciality-advisor-profile-mobile-border-radius, 0); } } @media (max-width: 48rem) { .mbw-speciality-advisor-profile-default:hover .mbw-speciality-icon-advisor-profile-default { transform: none; } } .mbw-speciality-icon-advisor-profile-default { display: flex; flex-direction: column; width: 6.25rem; width: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); height: 6.25rem; height: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); background-color: #fff; background-color: var(--mbw-speciality-bg-color, #fff); border-radius: 0.875rem; margin-right: 0; margin-right: var(--mbw-speciality-advisor-profile-icon-margin-right, 0); margin-bottom: 0.313rem; margin-bottom: var(--mbw-speciality-advisor-profile-icon-margin-bottom, 0.313rem); transition: transform 0.3s ease-in-out; } @media (max-width: 48rem) { .mbw-speciality-icon-advisor-profile-default { width: 3.75rem; width: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); height: 3.75rem; height: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); } } .mbw-speciality-content-advisor-profile { display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-direction, column); align-items: center; align-items: var(--mbw-speciality-advisor-profile-text-align, center); padding: 0; padding: var(--mbw-speciality-advisor-profile-paddings, 0); text-align: center; text-align: var(--mbw-speciality-advisor-profile-text-align, center); } .mbw-speciality-title-advisor-profile { display: flex; align-items: center; flex-direction: column; color: #121212; color: var(--mbw-speciality-advisor-profile-title-color, var(--mbw-text-primary, #121212)); } .mbw-speciality-title-content-advisor-profile { display: flex; justify-content: center; justify-content: var(--mbw-speciality-advisor-profile-title-content-justify, center); align-items: center; align-items: var(--mbw-speciality-advisor-profile-title-content-align, center); flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } .mbw-speciality-description-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-description-display, none); padding-top: 0.5rem; } .mbw-speciality-footer-advisor-profile { display: none; display: var(--mbw-speciality-advisor-profile-footer-display, none); flex-direction: row; justify-content: space-between; align-items: center; } .mbw-speciality-title-desktop-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; flex-direction: column; flex-direction: var(--mbw-speciality-advisor-profile-title-direction, column); } @media (max-width: 48rem) { .mbw-speciality-title-desktop-advisor-profile { display: none; } } .mbw-speciality-title-mobile-advisor-profile { display: none; } @media (max-width: 48rem) { .mbw-speciality-title-mobile-advisor-profile { width: -moz-min-content; width: min-content; width: var(--mbw-speciality-advisor-profile-title-width, -moz-min-content); width: var(--mbw-speciality-advisor-profile-title-width, min-content); display: flex; } } .mbw-speciality-extra-content { display: flex; flex-direction: column; } @media (max-width: 80rem) { .mbw-speciality-advisor-group { display: none; } } .mbw-specialitysee-see-all-button { width: 180px; } @media (max-width: 80rem) { .mbw-specialitysee-see-all-button { width: 100%; } } @media (max-width: 48rem) { .mbw-speciality-description-desktop { display: none; } } .mbw-speciality-description-mobile { display: none; } @media (max-width: 48rem) { .mbw-speciality-description-mobile { display: inline; display: initial; } } /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *TYPOGRAPHY* ================================*/ /* This file defines fonts that will be used for styling.Fonts will be defaulted to the font sizes defined in _variables.scss. Prefix for setting is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *FONT SIZES* ================================*/ /*=============================== *LINE HEIGHTS* ================================*/ /*=============================== *FONT HEIGHTS* ================================*/ /*=============================== *COLORS* ================================*/ /* This file defines colors that will be used for styling. Colors will be defaulted to the pallete defined in _variables.scss. Prefix for setting colors is "mbw" (Multi brand web), by setting it from application it will be overrided , if not default color will be used var is added for case when app won't use scss, so they can override css var default is added for case when app is using scss, so if variable is defined in app it will override variable */ /*=============================== *GENEAL* ================================*/ /*=============================== *BACKGROUNDS* ================================*/ /*=============================== *BRANDING* ================================*/ /*=============================== *TEXTS* ================================*/ /*=============================== *BORDERS* ================================*/ /*=============================== *ICONS* ================================*/ /*=============================== *BUTTONS* ================================*/ /*=============================== *CHANNELS* ================================*/ /*=============================== *STATES* ================================*/ /*=============================== *ACCENTS* ================================*/ /*=============================== *SPECIALITIES* ================================*/ /*=============================== *OTHER* (Not named in design system) ================================*/ /*=============================== *FORMS* ================================*/ /*=============================== *LABEL* ================================*/ /*=============================== *MENU-ITEM* ================================*/ /*=============================== *FOOTER* ================================*/ /*=============================== *INPUT* ================================*/ /*=============================== *TABLE* ================================*/ /*=============================== *DURATION ITEM* ================================*/ /*=============================== *OVERLAY* ================================*/ /*=============================== *TEXT CHAT* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*=============================== *CHANEL-BUTTON* ================================*/ /*=============================== *SWITCH* ================================*/ /*=============================== *MY-ORDERS-DETAILS-ITEM* ================================*/ /*=============================== *ADVISOR-CARD-ITEM* ================================*/ /*=============================== *MARKETING-BANNER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *PAGINATION-DOTS* ================================*/ /*=============================== *MIXINS* ================================*/ /* This file contains reusable mixins */ @keyframes animation-bzdot9 { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ /*=============================== *VARIABLES* ================================*/ /** CONTENTS COLORS: General colors.............................Main colors for header colors button colors, titles etc Secondary colors...........................Colors for borders, shadows etc TYPOGRAPHY: Font families..............................Font family used per application Line heights....................................Possible line heights Font sizes large.................................Large font sizes Font sizes medium.................................Medium font sizes Font sizes small.................................Small font sizes Font weights...............................Font weights BREAKPOINTS: Breakpoints................................Breakpoints definitions SPACINGS Spacings...................................Global set of spacings SIZES Pem mapping..................................Mapping of pem to px **/ /*=============================== *COLORS* ================================*/ /* GENERAL COLORS */ /* SECONDARY COLORS */ /*=============================== *SIZES* ================================*/ /* PEM MAPPINGS */ /*=============================== *TYPOGRAPHY* ================================*/ /* LINE HEIGHTS */ /* FONT SIZES LARGE */ /* FONT SIZES MEDIUM */ /* FONT SIZES SMALL */ /*=============================== *FONT WEIGHTS* ================================*/ /*=============================== *FONT SIZES* ================================*/ /*=============================== *BREAKPOINTS* ================================*/ /*=============================== *BUTTON* ================================*/ /*=============================== *CHANNEL-BUTTON* ================================*/ /*=============================== *FONTS* ================================*/ /*=============================== *AVATAR* ================================*/ /*=============================== *STATUS INDICATOR* ================================*/ /*=============================== *MY ORDERS ADVISOR CELL* ================================*/ /*=============================== *MY ORDERS ORDERS CELL* ================================*/ /*=============================== *MY ORDERS SECTION DIVIDER* ================================*/ /*=============================== *FILTER TAB* ================================*/ /*============================= *SPECIALITY* ================================*/ /*=============================== *METHOD CELL* ================================*/ /*=============================== *PLAY BUTTON* ================================*/ /*=============================== *RATING* ================================*/ /*=============================== *CHANNELS CARD* ================================*/ /*=============================== *ADVISOR LIST CARD* ================================*/ /*=============================== *STAFF PICK* ================================*/ /*=============================== *LIVE MODES PRICES* ================================*/ /*=============================== *ADVISOR SECTION TITLE LABEL* ================================*/ /*=============================== *ADVISOR SECTION SHORT DESCRIPTION* ================================*/ /*=============================== *ADVISOR SECTION* ================================*/ /*=============================== *PAYMENT METHOD DETAILS* ================================*/ /*=============================== *POPOVER* ================================*/ /*=============================== *COUPON* ================================*/ :root { --mbw-speciality-button-icon-width-desktop: var(--mbw-speciality-button-icon-width, 6.75rem); --mbw-speciality-button-icon-height-desktop: var(--mbw-speciality-button-icon-height, 6.75rem); --mbw-speciality-button-icon-width-laptop: var(--mbw-speciality-button-laptop-icon-width, 5.125rem); --mbw-speciality-button-icon-height-laptop: var(--mbw-speciality-button-laptop-icon-height, 5.125rem); --mbw-speciality-button-icon-width-tablet: var(--mbw-speciality-button-tablet-icon-width, 3.938rem); --mbw-speciality-button-icon-height-tablet: var(--mbw-speciality-button-tablet-icon-height, 3.938rem); --mbw-speciality-button-icon-width-mobile: var(--mbw-speciality-button-mobile-icon-width, 4.688rem); --mbw-speciality-button-icon-height-mobile: var(--mbw-speciality-button-mobile-icon-height, 4.688rem); --mbw-speciality-advisor-profile-icon-width-desktop: var(--mbw-speciality-advisor-profile-icon-width, 6.25rem); --mbw-speciality-advisor-profile-icon-height-desktop: var(--mbw-speciality-advisor-profile-icon-height, 6.25rem); --mbw-speciality-advisor-profile-icon-width-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-width, 3.75rem); --mbw-speciality-advisor-profile-icon-height-mobile: var(--mbw-speciality-advisor-profile-mobile-icon-height, 3.75rem); --mbw-speciality-standard-icon-width-desktop: 4.75rem; --mbw-speciality-standard-icon-height-desktop: 4.75rem; --mbw-speciality-standard-icon-width-mobile: 4.75rem; --mbw-speciality-standard-icon-height-mobile: 4.75rem; } .mbw-coupon-container-small { width: 100%; display: flex; flex-direction: row; align-items: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 26%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath d=%27M11.4487 0.837094C11.1828 0.385038 10.7487 0 10.2221 0H5.53589C2.4785 0 0 2.46489 0 5.50549V20.4945C0 23.5351 2.4785 26 5.53589 26H10.2221C10.7487 26 11.1828 25.615 11.4487 25.1629C11.9289 24.3463 12.8199 23.7978 13.8397 23.7978C14.8596 23.7978 15.7506 24.3463 16.2308 25.1629C16.4966 25.615 16.9307 26 17.4573 26H74.4661C77.5235 26 80.002 23.5351 80.002 20.4945V5.50549C80.002 2.46489 77.5235 0 74.4661 0H17.4573C16.9307 0 16.4966 0.385038 16.2308 0.837094C15.7506 1.65367 14.8596 2.2022 13.8397 2.2022C12.8199 2.2022 11.9289 1.65367 11.4487 0.837094Z%27 fill=%27url%28%23paint0_linear_3159_12083%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_12083%27 x1=%27-2.52107%27 y1=%272.04286%27 x2=%2780.2829%27 y2=%273.05667%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); mask-image: var(--coupon-bg-color-small, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 26%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath d=%27M11.4487 0.837094C11.1828 0.385038 10.7487 0 10.2221 0H5.53589C2.4785 0 0 2.46489 0 5.50549V20.4945C0 23.5351 2.4785 26 5.53589 26H10.2221C10.7487 26 11.1828 25.615 11.4487 25.1629C11.9289 24.3463 12.8199 23.7978 13.8397 23.7978C14.8596 23.7978 15.7506 24.3463 16.2308 25.1629C16.4966 25.615 16.9307 26 17.4573 26H74.4661C77.5235 26 80.002 23.5351 80.002 20.4945V5.50549C80.002 2.46489 77.5235 0 74.4661 0H17.4573C16.9307 0 16.4966 0.385038 16.2308 0.837094C15.7506 1.65367 14.8596 2.2022 13.8397 2.2022C12.8199 2.2022 11.9289 1.65367 11.4487 0.837094Z%27 fill=%27url%28%23paint0_linear_3159_12083%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_12083%27 x1=%27-2.52107%27 y1=%272.04286%27 x2=%2780.2829%27 y2=%273.05667%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 26%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath d=%27M11.4487 0.837094C11.1828 0.385038 10.7487 0 10.2221 0H5.53589C2.4785 0 0 2.46489 0 5.50549V20.4945C0 23.5351 2.4785 26 5.53589 26H10.2221C10.7487 26 11.1828 25.615 11.4487 25.1629C11.9289 24.3463 12.8199 23.7978 13.8397 23.7978C14.8596 23.7978 15.7506 24.3463 16.2308 25.1629C16.4966 25.615 16.9307 26 17.4573 26H74.4661C77.5235 26 80.002 23.5351 80.002 20.4945V5.50549C80.002 2.46489 77.5235 0 74.4661 0H17.4573C16.9307 0 16.4966 0.385038 16.2308 0.837094C15.7506 1.65367 14.8596 2.2022 13.8397 2.2022C12.8199 2.2022 11.9289 1.65367 11.4487 0.837094Z%27 fill=%27url%28%23paint0_linear_3159_12083%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_12083%27 x1=%27-2.52107%27 y1=%272.04286%27 x2=%2780.2829%27 y2=%273.05667%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); -webkit-mask-image: var(--coupon-bg-color-small, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 26%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath d=%27M11.4487 0.837094C11.1828 0.385038 10.7487 0 10.2221 0H5.53589C2.4785 0 0 2.46489 0 5.50549V20.4945C0 23.5351 2.4785 26 5.53589 26H10.2221C10.7487 26 11.1828 25.615 11.4487 25.1629C11.9289 24.3463 12.8199 23.7978 13.8397 23.7978C14.8596 23.7978 15.7506 24.3463 16.2308 25.1629C16.4966 25.615 16.9307 26 17.4573 26H74.4661C77.5235 26 80.002 23.5351 80.002 20.4945V5.50549C80.002 2.46489 77.5235 0 74.4661 0H17.4573C16.9307 0 16.4966 0.385038 16.2308 0.837094C15.7506 1.65367 14.8596 2.2022 13.8397 2.2022C12.8199 2.2022 11.9289 1.65367 11.4487 0.837094Z%27 fill=%27url%28%23paint0_linear_3159_12083%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_12083%27 x1=%27-2.52107%27 y1=%272.04286%27 x2=%2780.2829%27 y2=%273.05667%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); color: #fff; color: var(--mbw-text-tertiary, #fff); position: relative; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .mbw-coupon-icon-small { width: 1.875rem; height: 1.875rem; width: 30%; display: none; align-items: center; justify-content: center; } .mbw-coupon-info-small { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .mbw-coupon-arrow-small { display: none; width: 1.5rem; height: 1.5rem; } .mbw-coupon-container-medium { width: 100%; display: flex; flex-direction: row; align-items: center; mask-image: url("data:image/svg+xml,%3Csvg width=%27101%27 height=%2733%27 viewBox=%270 0 101 33%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.4536 1.06247C14.118 0.488703 13.5699 0 12.9051 0H6.98889C3.12903 0 0 3.12852 0 6.98774V26.0123C0 29.8715 3.12903 33 6.98889 33H12.9051C13.5699 33 14.118 32.5113 14.4536 31.9375C15.0598 30.9011 16.1847 30.2049 17.4722 30.2049C18.7597 30.2049 19.8846 30.9011 20.4909 31.9375C20.8265 32.5113 21.3745 33 22.0393 33H94.0111C97.871 33 101 29.8715 101 26.0123V6.98774C101 3.12852 97.871 0 94.0111 0H22.0393C21.3745 0 20.8265 0.488703 20.4909 1.06247C19.8846 2.09889 18.7597 2.7951 17.4722 2.7951C16.1847 2.7951 15.0598 2.09889 14.4536 1.06247Z%27 fill=%27url%28%23paint0_linear_2837_11548%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_2837_11548%27 x1=%27-3.18277%27 y1=%272.59286%27 x2=%27101.355%27 y2=%273.86595%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); mask-image: var(--coupon-bg-color-medium, url("data:image/svg+xml,%3Csvg width=%27101%27 height=%2733%27 viewBox=%270 0 101 33%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.4536 1.06247C14.118 0.488703 13.5699 0 12.9051 0H6.98889C3.12903 0 0 3.12852 0 6.98774V26.0123C0 29.8715 3.12903 33 6.98889 33H12.9051C13.5699 33 14.118 32.5113 14.4536 31.9375C15.0598 30.9011 16.1847 30.2049 17.4722 30.2049C18.7597 30.2049 19.8846 30.9011 20.4909 31.9375C20.8265 32.5113 21.3745 33 22.0393 33H94.0111C97.871 33 101 29.8715 101 26.0123V6.98774C101 3.12852 97.871 0 94.0111 0H22.0393C21.3745 0 20.8265 0.488703 20.4909 1.06247C19.8846 2.09889 18.7597 2.7951 17.4722 2.7951C16.1847 2.7951 15.0598 2.09889 14.4536 1.06247Z%27 fill=%27url%28%23paint0_linear_2837_11548%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_2837_11548%27 x1=%27-3.18277%27 y1=%272.59286%27 x2=%27101.355%27 y2=%273.86595%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%27101%27 height=%2733%27 viewBox=%270 0 101 33%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.4536 1.06247C14.118 0.488703 13.5699 0 12.9051 0H6.98889C3.12903 0 0 3.12852 0 6.98774V26.0123C0 29.8715 3.12903 33 6.98889 33H12.9051C13.5699 33 14.118 32.5113 14.4536 31.9375C15.0598 30.9011 16.1847 30.2049 17.4722 30.2049C18.7597 30.2049 19.8846 30.9011 20.4909 31.9375C20.8265 32.5113 21.3745 33 22.0393 33H94.0111C97.871 33 101 29.8715 101 26.0123V6.98774C101 3.12852 97.871 0 94.0111 0H22.0393C21.3745 0 20.8265 0.488703 20.4909 1.06247C19.8846 2.09889 18.7597 2.7951 17.4722 2.7951C16.1847 2.7951 15.0598 2.09889 14.4536 1.06247Z%27 fill=%27url%28%23paint0_linear_2837_11548%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_2837_11548%27 x1=%27-3.18277%27 y1=%272.59286%27 x2=%27101.355%27 y2=%273.86595%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); -webkit-mask-image: var(--coupon-bg-color-medium, url("data:image/svg+xml,%3Csvg width=%27101%27 height=%2733%27 viewBox=%270 0 101 33%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M14.4536 1.06247C14.118 0.488703 13.5699 0 12.9051 0H6.98889C3.12903 0 0 3.12852 0 6.98774V26.0123C0 29.8715 3.12903 33 6.98889 33H12.9051C13.5699 33 14.118 32.5113 14.4536 31.9375C15.0598 30.9011 16.1847 30.2049 17.4722 30.2049C18.7597 30.2049 19.8846 30.9011 20.4909 31.9375C20.8265 32.5113 21.3745 33 22.0393 33H94.0111C97.871 33 101 29.8715 101 26.0123V6.98774C101 3.12852 97.871 0 94.0111 0H22.0393C21.3745 0 20.8265 0.488703 20.4909 1.06247C19.8846 2.09889 18.7597 2.7951 17.4722 2.7951C16.1847 2.7951 15.0598 2.09889 14.4536 1.06247Z%27 fill=%27url%28%23paint0_linear_2837_11548%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_2837_11548%27 x1=%27-3.18277%27 y1=%272.59286%27 x2=%27101.355%27 y2=%273.86595%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); color: #fff; color: var(--mbw-text-tertiary, #fff); position: relative; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .mbw-coupon-icon-medium { width: 1.875rem; height: 1.875rem; width: 30%; display: none; align-items: center; justify-content: center; } .mbw-coupon-info-medium { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .mbw-coupon-arrow-medium { display: none; width: 1.5rem; height: 1.5rem; } .mbw-coupon-container-large { width: 100%; display: flex; flex-direction: row; align-items: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 268 70%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M57.5 6.98242V7.93333C57.5 8.20948 57.2761 8.43333 57 8.43333C56.7239 8.43333 56.5 8.20948 56.5 7.93333V6.98242C53.8872 6.79802 51.6702 5.17965 50.6314 2.90951C49.942 1.4029 48.6569 0 47 0H10C4.47715 0 0 4.47715 0 10V60C0 65.5229 4.47715 70 10 70H47C48.6569 70 49.942 68.5971 50.6314 67.0905C51.6702 64.8204 53.8872 63.202 56.5 63.0176V62.0667C56.5 61.7905 56.7239 61.5667 57 61.5667C57.2761 61.5667 57.5 61.7905 57.5 62.0667V63.0176C60.1128 63.202 62.3298 64.8204 63.3686 67.0905C64.058 68.5971 65.3432 70 67 70H258C263.523 70 268 65.5229 268 60V10C268 4.47715 263.523 0 258 0H67C65.3431 0 64.058 1.4029 63.3686 2.90951C62.3298 5.17964 60.1128 6.79802 57.5 6.98242ZM56.5 56.2667C56.5 56.5428 56.7239 56.7667 57 56.7667C57.2761 56.7667 57.5 56.5428 57.5 56.2667V52.4C57.5 52.1239 57.2761 51.9 57 51.9C56.7239 51.9 56.5 52.1239 56.5 52.4V56.2667ZM56.5 46.6C56.5 46.8761 56.7239 47.1 57 47.1C57.2761 47.1 57.5 46.8761 57.5 46.6V42.7333C57.5 42.4572 57.2761 42.2333 57 42.2333C56.7239 42.2333 56.5 42.4572 56.5 42.7333V46.6ZM56.5 36.9333C56.5 37.2095 56.7239 37.4333 57 37.4333C57.2761 37.4333 57.5 37.2095 57.5 36.9333V33.0667C57.5 32.7905 57.2761 32.5667 57 32.5667C56.7239 32.5667 56.5 32.7905 56.5 33.0667V36.9333ZM56.5 27.2667C56.5 27.5428 56.7239 27.7667 57 27.7667C57.2761 27.7667 57.5 27.5428 57.5 27.2667V23.4C57.5 23.1239 57.2761 22.9 57 22.9C56.7239 22.9 56.5 23.1239 56.5 23.4V27.2667ZM56.5 17.6C56.5 17.8761 56.7239 18.1 57 18.1C57.2761 18.1 57.5 17.8761 57.5 17.6V13.7333C57.5 13.4572 57.2761 13.2333 57 13.2333C56.7239 13.2333 56.5 13.4572 56.5 13.7333V17.6Z%27 fill=%27url%28%23paint0_linear_3159_14357%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_14357%27 x1=%27-8.44538%27 y1=%275.5%27 x2=%27268.918%27 y2=%279.7254%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); mask-image: var(--coupon-bg-color-large, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 268 70%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M57.5 6.98242V7.93333C57.5 8.20948 57.2761 8.43333 57 8.43333C56.7239 8.43333 56.5 8.20948 56.5 7.93333V6.98242C53.8872 6.79802 51.6702 5.17965 50.6314 2.90951C49.942 1.4029 48.6569 0 47 0H10C4.47715 0 0 4.47715 0 10V60C0 65.5229 4.47715 70 10 70H47C48.6569 70 49.942 68.5971 50.6314 67.0905C51.6702 64.8204 53.8872 63.202 56.5 63.0176V62.0667C56.5 61.7905 56.7239 61.5667 57 61.5667C57.2761 61.5667 57.5 61.7905 57.5 62.0667V63.0176C60.1128 63.202 62.3298 64.8204 63.3686 67.0905C64.058 68.5971 65.3432 70 67 70H258C263.523 70 268 65.5229 268 60V10C268 4.47715 263.523 0 258 0H67C65.3431 0 64.058 1.4029 63.3686 2.90951C62.3298 5.17964 60.1128 6.79802 57.5 6.98242ZM56.5 56.2667C56.5 56.5428 56.7239 56.7667 57 56.7667C57.2761 56.7667 57.5 56.5428 57.5 56.2667V52.4C57.5 52.1239 57.2761 51.9 57 51.9C56.7239 51.9 56.5 52.1239 56.5 52.4V56.2667ZM56.5 46.6C56.5 46.8761 56.7239 47.1 57 47.1C57.2761 47.1 57.5 46.8761 57.5 46.6V42.7333C57.5 42.4572 57.2761 42.2333 57 42.2333C56.7239 42.2333 56.5 42.4572 56.5 42.7333V46.6ZM56.5 36.9333C56.5 37.2095 56.7239 37.4333 57 37.4333C57.2761 37.4333 57.5 37.2095 57.5 36.9333V33.0667C57.5 32.7905 57.2761 32.5667 57 32.5667C56.7239 32.5667 56.5 32.7905 56.5 33.0667V36.9333ZM56.5 27.2667C56.5 27.5428 56.7239 27.7667 57 27.7667C57.2761 27.7667 57.5 27.5428 57.5 27.2667V23.4C57.5 23.1239 57.2761 22.9 57 22.9C56.7239 22.9 56.5 23.1239 56.5 23.4V27.2667ZM56.5 17.6C56.5 17.8761 56.7239 18.1 57 18.1C57.2761 18.1 57.5 17.8761 57.5 17.6V13.7333C57.5 13.4572 57.2761 13.2333 57 13.2333C56.7239 13.2333 56.5 13.4572 56.5 13.7333V17.6Z%27 fill=%27url%28%23paint0_linear_3159_14357%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_14357%27 x1=%27-8.44538%27 y1=%275.5%27 x2=%27268.918%27 y2=%279.7254%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 268 70%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M57.5 6.98242V7.93333C57.5 8.20948 57.2761 8.43333 57 8.43333C56.7239 8.43333 56.5 8.20948 56.5 7.93333V6.98242C53.8872 6.79802 51.6702 5.17965 50.6314 2.90951C49.942 1.4029 48.6569 0 47 0H10C4.47715 0 0 4.47715 0 10V60C0 65.5229 4.47715 70 10 70H47C48.6569 70 49.942 68.5971 50.6314 67.0905C51.6702 64.8204 53.8872 63.202 56.5 63.0176V62.0667C56.5 61.7905 56.7239 61.5667 57 61.5667C57.2761 61.5667 57.5 61.7905 57.5 62.0667V63.0176C60.1128 63.202 62.3298 64.8204 63.3686 67.0905C64.058 68.5971 65.3432 70 67 70H258C263.523 70 268 65.5229 268 60V10C268 4.47715 263.523 0 258 0H67C65.3431 0 64.058 1.4029 63.3686 2.90951C62.3298 5.17964 60.1128 6.79802 57.5 6.98242ZM56.5 56.2667C56.5 56.5428 56.7239 56.7667 57 56.7667C57.2761 56.7667 57.5 56.5428 57.5 56.2667V52.4C57.5 52.1239 57.2761 51.9 57 51.9C56.7239 51.9 56.5 52.1239 56.5 52.4V56.2667ZM56.5 46.6C56.5 46.8761 56.7239 47.1 57 47.1C57.2761 47.1 57.5 46.8761 57.5 46.6V42.7333C57.5 42.4572 57.2761 42.2333 57 42.2333C56.7239 42.2333 56.5 42.4572 56.5 42.7333V46.6ZM56.5 36.9333C56.5 37.2095 56.7239 37.4333 57 37.4333C57.2761 37.4333 57.5 37.2095 57.5 36.9333V33.0667C57.5 32.7905 57.2761 32.5667 57 32.5667C56.7239 32.5667 56.5 32.7905 56.5 33.0667V36.9333ZM56.5 27.2667C56.5 27.5428 56.7239 27.7667 57 27.7667C57.2761 27.7667 57.5 27.5428 57.5 27.2667V23.4C57.5 23.1239 57.2761 22.9 57 22.9C56.7239 22.9 56.5 23.1239 56.5 23.4V27.2667ZM56.5 17.6C56.5 17.8761 56.7239 18.1 57 18.1C57.2761 18.1 57.5 17.8761 57.5 17.6V13.7333C57.5 13.4572 57.2761 13.2333 57 13.2333C56.7239 13.2333 56.5 13.4572 56.5 13.7333V17.6Z%27 fill=%27url%28%23paint0_linear_3159_14357%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_14357%27 x1=%27-8.44538%27 y1=%275.5%27 x2=%27268.918%27 y2=%279.7254%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); -webkit-mask-image: var(--coupon-bg-color-large, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 268 70%27 preserveAspectRatio=%27none%27 fill=%27none%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M57.5 6.98242V7.93333C57.5 8.20948 57.2761 8.43333 57 8.43333C56.7239 8.43333 56.5 8.20948 56.5 7.93333V6.98242C53.8872 6.79802 51.6702 5.17965 50.6314 2.90951C49.942 1.4029 48.6569 0 47 0H10C4.47715 0 0 4.47715 0 10V60C0 65.5229 4.47715 70 10 70H47C48.6569 70 49.942 68.5971 50.6314 67.0905C51.6702 64.8204 53.8872 63.202 56.5 63.0176V62.0667C56.5 61.7905 56.7239 61.5667 57 61.5667C57.2761 61.5667 57.5 61.7905 57.5 62.0667V63.0176C60.1128 63.202 62.3298 64.8204 63.3686 67.0905C64.058 68.5971 65.3432 70 67 70H258C263.523 70 268 65.5229 268 60V10C268 4.47715 263.523 0 258 0H67C65.3431 0 64.058 1.4029 63.3686 2.90951C62.3298 5.17964 60.1128 6.79802 57.5 6.98242ZM56.5 56.2667C56.5 56.5428 56.7239 56.7667 57 56.7667C57.2761 56.7667 57.5 56.5428 57.5 56.2667V52.4C57.5 52.1239 57.2761 51.9 57 51.9C56.7239 51.9 56.5 52.1239 56.5 52.4V56.2667ZM56.5 46.6C56.5 46.8761 56.7239 47.1 57 47.1C57.2761 47.1 57.5 46.8761 57.5 46.6V42.7333C57.5 42.4572 57.2761 42.2333 57 42.2333C56.7239 42.2333 56.5 42.4572 56.5 42.7333V46.6ZM56.5 36.9333C56.5 37.2095 56.7239 37.4333 57 37.4333C57.2761 37.4333 57.5 37.2095 57.5 36.9333V33.0667C57.5 32.7905 57.2761 32.5667 57 32.5667C56.7239 32.5667 56.5 32.7905 56.5 33.0667V36.9333ZM56.5 27.2667C56.5 27.5428 56.7239 27.7667 57 27.7667C57.2761 27.7667 57.5 27.5428 57.5 27.2667V23.4C57.5 23.1239 57.2761 22.9 57 22.9C56.7239 22.9 56.5 23.1239 56.5 23.4V27.2667ZM56.5 17.6C56.5 17.8761 56.7239 18.1 57 18.1C57.2761 18.1 57.5 17.8761 57.5 17.6V13.7333C57.5 13.4572 57.2761 13.2333 57 13.2333C56.7239 13.2333 56.5 13.4572 56.5 13.7333V17.6Z%27 fill=%27url%28%23paint0_linear_3159_14357%29%27/%3E%3Cdefs%3E%3ClinearGradient id=%27paint0_linear_3159_14357%27 x1=%27-8.44538%27 y1=%275.5%27 x2=%27268.918%27 y2=%279.7254%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%238755F4%27/%3E%3Cstop offset=%271%27 stop-color=%27%23FC8D3C%27/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")); color: #fff; color: var(--mbw-text-tertiary, #fff); position: relative; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .mbw-coupon-icon-large { width: 1.875rem; height: 1.875rem; width: 30%; display: flex; align-items: center; justify-content: center; } .mbw-coupon-info-large { width: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .mbw-coupon-arrow-large { display: flex; width: 1.5rem; height: 1.5rem; } .mbw-coupon-active { background: linear-gradient(90deg, #8755f4 -3.11%, #fc8d3c 100%); background: var(--coupon-bg-color-large-active, linear-gradient(90deg, #8755f4 -3.11%, #fc8d3c 100%)); } .mbw-coupon-inactive { background: #9c9c9c; background: var(--coupon-bg-color-small-inactive, #9c9c9c); } .mbw-coupon-inactive .mbw-coupon-arrow { display: none; } .mbw-coupon-badge { position: absolute; top: -20%; right: -5%; z-index: 1; } .mbw-coupon-content { width: 100%; position: relative; display: flex; flex-direction: row; align-items: center; } .mbw-coupon-info-container { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 5%; } svg { overflow: visible; } @keyframes react-loading-skeleton { 100% { transform: translateX(100%); } } .react-loading-skeleton { --base-color: #ebebeb; --highlight-color: #f5f5f5; --animation-duration: 1.5s; --animation-direction: normal; --pseudo-element-display: block; /* Enable animation */ background-color: #ebebeb; background-color: var(--base-color); width: 100%; border-radius: 0.25rem; display: inline-flex; line-height: 1; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: hidden; z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */ } .react-loading-skeleton::after { content: ' '; display: var(--pseudo-element-display); position: absolute; top: 0; left: 0; right: 0; height: 100%; background-repeat: no-repeat; background-image: linear-gradient( 90deg, var(--base-color), var(--highlight-color), var(--base-color) ); transform: translateX(-100%); animation-name: react-loading-skeleton; animation-direction: var(--animation-direction); animation-duration: var(--animation-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .react-loading-skeleton { --pseudo-element-display: none; /* Disable animation */ } } /*# sourceMappingURL=1414-b7223633109b328a95dd.css.map*/