/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./src/styles/main.scss ***!
  \***************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;500;700&family=Muli&family=Mulish&family=Noto+Serif&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;800;900&family=Source+Sans+Pro:wght@400;600&family=Source+Serif+Pro&family=Work+Sans:wght@400;500;600&display=swap);
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./src/styles/main.scss (1) ***!
  \*******************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:wght@400;500;700&display=swap);
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/ComingSoon.vue?vue&type=style&index=0&id=0d3e2b10&lang=scss&global=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:wght@400;500;700&display=swap);
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./src/styles/main.scss (2) ***!
  \*******************************************************************************************************************************************/
@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}
footer, header, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: var(--base00);
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a:not([href]):not([tabindex]) {
  text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.grid {
  --gridGap: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.grid {
  grid-gap: var(--gridGap);
  grid-template-rows: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1024px) {
  .grid {
    --gridGap: 48px;
    padding-left: 126px;
    padding-right: 126px;
  }
}
@media (min-width: 1440px) {
  .grid {
    max-width: 1440px;
    margin: 0 auto;
  }
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

:root {
  --blue80: #3FC2FF;
  --blue100: #00B8FF;
  --blue120: #00A4E2;
  --redBright: #E30551;
  --yellowBright: #f8e71c;
  --base00: #FFFFFF;
  --base10: #FCFCFC;
  --base100: #1D1D1D;
  --carbon10: #F8F9FB;
  --carbon20: #F1F2F5;
  --carbon30: #E2E3E8;
  --carbon40: #CCCFD7;
  --carbon50: #8D98A9;
  --carbon60: #5B6579;
  --carbon70: #3E4B5B;
  --carbon80: #2E3849;
  --carbon90: #1D2530;
  --carbon100: #121823;
  --twitter10: #E5F8FF;
  --twitter20: #A8E7FF;
  --twitter30: #4EC7FF;
  --twitter40: #05B2FF;
  --twitter50: #03A1E3;
  --twitter60: #1087C6;
  --twitter70: #0084B7;
  --twitter80: #006E99;
  --twitter90: #064562;
  --twitter100: #002C40;
  --meta10: #F4F7FF;
  --meta20: #EDF3FE;
  --meta30: #CBDCFD;
  --meta40: #A9C6FC;
  --meta50: #79A6FB;
  --meta60: #4884FA;
  --meta70: #3A6DFF;
  --meta80: #1259E7;
  --meta90: #004BE2;
  --meta100: #003DB5;
  --twitch10: #F3F4FE;
  --twitch20: #DCDCFD;
  --twitch30: #BBBEFA;
  --twitch40: #8F95F7;
  --twitch50: #6552EB;
  --twitch60: #4A34EF;
  --twitch70: #162FF4;
  --twitch80: #011EC5;
  --twitch90: #001489;
  --twitch100: #05104B;
  --hbo10: #EAE6FC;
  --hbo20: #EAE6FC;
  --hbo30: #B0A3F4;
  --hbo40: #8978F0;
  --hbo50: #6552EB;
  --hbo60: #4333E8;
  --hbo70: #3528B3;
  --hbo80: #D7D0F9;
  --hbo90: #15144E;
  --hbo100: #01002E;
  --skype10: #DFF2F3;
  --skype20: #C1E6E8;
  --skype30: #77CFCF;
  --skype40: #1BB3B3;
  --skype50: #0198A2;
  --skype60: #007E86;
  --skype70: #0A565B;
  --skype80: #033D41;
  --skype90: #053033;
  --skype100: #031D1F;
  --spotify10: #C9F7EF;
  --spotify20: #A8F1E4;
  --spotify30: #87EBDA;
  --spotify40: #2AEDD6;
  --spotify50: #27E3CD;
  --spotify60: #20DCBA;
  --spotify70: #26C7A7;
  --spotify80: #0CA384;
  --spotify90: #057E66;
  --spotify100: #045E4C;
  --snapchat10: #FEFBE5;
  --snapchat20: #FBF2B1;
  --snapchat30: #F8EB83;
  --snapchat40: #F5E25A;
  --snapchat50: #F6E852;
  --snapchat60: #F0E13F;
  --snapchat70: #E5D311;
  --snapchat80: #D0C118;
  --snapchat90: #B9A900;
  --snapchat100: #877B01;
  --headspace10: #FFEFEB;
  --headspace20: #FFC2B1;
  --headspace30: #FFA38A;
  --headspace40: #FE9378;
  --headspace50: #FE7555;
  --headspace60: #FD5A37;
  --headspace70: #FD401E;
  --headspace80: #E93015;
  --headspace90: #CB2207;
  --headspace100: #A51A03;
  --netflix10: #FFE0E4;
  --netflix20: #FDC6D0;
  --netflix30: #FD99AB;
  --netflix40: #FB6483;
  --netflix50: #F3355D;
  --netflix60: #ED0C38;
  --netflix70: #BC0C2E;
  --netflix80: #8D0B24;
  --netflix90: #610A1B;
  --netflix100: #41000D;
  --lyft10: #FFE2EB;
  --lyft20: #FEC5D9;
  --lyft30: #FE8FB3;
  --lyft40: #FC5C8F;
  --lyft50: #FC2E6D;
  --lyft60: #FE0158;
  --lyft70: #E80150;
  --lyft80: #BB0040;
  --lyft90: #950033;
  --lyft100: #690024;
  --tmobile10: #FCE2EE;
  --tmobile20: #F8C5DD;
  --tmobile30: #F28FBC;
  --tmobile40: #EC5D9D;
  --tmobile50: #E62F7F;
  --tmobile60: #E6016F;
  --tmobile70: #AE074E;
  --tmobile80: #7E063A;
  --tmobile90: #590029;
  --tmobile100: #37001C;
  --asphalt10: #FEFEFE;
  --asphalt15: #F9F9F9;
  --asphalt20: #EEEEEE;
  --asphalt30: #D1D1D1;
  --asphalt40: #ADADAD;
  --asphalt50: #707070;
  --asphalt60: #4D4C4C;
  --asphalt70: #3D3D3D;
  --asphalt80: #333333;
  --asphalt90: #262626;
  --asphalt95: #1A1A1A;
  --asphalt100: #0F0F0F;
  --volt: #DCFA37;
  --statis10: #E9EBFD;
  --statis100: #2400ED;
  --zest10: #FEF3C7;
  --zest15: #FEFAF4;
  --zest20: #FCEFD7;
  --zest30: #FBDBA6;
  --zest40: #FAD69B;
  --zest50: #F59E0B;
  --zest60: #A66F10;
  --zest70: #694915;
  --zest80: #3D2F18;
  --zest90: #231F19;
  --zest100: #1C1B1A;
  --rose10: #FEE2E2;
  --rose15: #FDF7F7;
  --rose20: #FCE0E0;
  --rose30: #F9BBBB;
  --rose40: #F48787;
  --rose50: #EF4444;
  --rose60: #9E3131;
  --rose70: #672929;
  --rose80: #672929;
  --rose90: #231C1C;
  --rose100: #1C1A1A;
  --error10: var(--rose10);
  --error20: var(--rose20);
  --error30: var(--rose30);
  --error40: var(--rose40);
  --error50: var(--rose50);
  --error60: var(--rose60);
  --error70: var(--rose70);
  --error80: var(--rose80);
  --error90: var(--rose90);
  --error100: var(--rose100);
  --mint10: #E4FCF0;
  --mint15: #F6FCFA;
  --mint20: #DEF7EE;
  --mint30: #B5EED9;
  --mint40: #7CE3BD;
  --mint50: #2DC28C;
  --mint60: #2B906C;
  --mint70: #245D48;
  --mint80: #1E382E;
  --mint90: #1B211F;
  --mint100: #1A1C1B;
  --success10: var(--mint10);
  --success20: var(--mint20);
  --success30: var(--mint30);
  --success40: var(--mint40);
  --success50: var(--mint50);
  --success60: var(--mint60);
  --success70: var(--mint70);
  --success80: var(--mint80);
  --success90: var(--mint90);
  --success100: var(--mint100);
  --fabColor: var(--asphalt10);
  --fabBackgroundColor: var(--asphalt95);
  --fabHoverBackgroundColor: var(--asphalt90);
  --fabDisabledColor: var(--asphalt50);
  --fabSelectedBackgroundColor: var(--asphalt80);
  --fabSubtleColor: var(--asphalt100);
  --fabSubtleBackgroundColor: linear-gradient(0deg, rgba(15, 15, 15, 0.16) 0%, rgba(15, 15, 15, 0.16) 100%), #FFF;
  --fabSubtleHoverBackgroundColor: linear-gradient(0deg, rgba(15, 15, 15, 0.32) 0%, rgba(15, 15, 15, 0.32) 100%), #FFF;
  --fabAlertColor: var(--error50);
  --fabAlertHoverColor: var(--asphalt10);
  --fabAlertHoverBackgroundColor: var(--error50);
  --fabAlertTinyBackgroundColor: var(--error40);
  --fabDarkColor: var(--asphalt100);
  --fabDarkBackgroundColor: var(--asphalt10);
  --fabDarkHoverBackgroundColor: var(--asphalt20);
  --fabDarkDisabledColor: var(--asphalt50);
  --fabDarkSelectedBackgroundColor: var(--asphalt30);
  --fabDarkSubtleColor: var(--asphalt10);
  --fabDarkSubtleBackgroundColor: linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.16) 100%), #000;
  --fabDarkSubtleHoverBackgroundColor: linear-gradient(0deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.32) 100%), #000;
  --toolbarColor: var(--asphalt30);
  --toolbarHoverColor: var(--asphalt10);
  --toolHoverBackgroundColor: var(--asphalt70);
  --toolActiveBackgroundColor: var(--asphalt80);
  --toolDisabledColor: var(--asphalt60);
  --toolDisabledBackgroundColor: var(--asphalt95);
  --toolDdOptionsShadow: var(--shadow-light-small);
  --toolbarDarkColor: var(--asphalt80);
  --toolbarDarkHoverColor: var(--asphalt100);
  --toolDarkHoverBackgroundColor: var(--asphalt20);
  --toolDarkActiveBackgroundColor: var(--asphalt30);
  --toolDarkDisabledColor: var(--asphalt40);
  --toolDarkDisabledBackgroundColor: var(--asphalt10);
  --toolDdDarkOptionsShadow: var(--shadow-dark-small);
  --outlineColor: transparent;
  --hoverOutlineColor: color-mix(in srgb, var(--asphalt100) 32%, transparent);
  --focusOutlineColor: var(--asphalt90);
  --darkOutlineColor: transparent;
  --darkHoverOutlineColor: color-mix(in srgb, var(--asphalt10) 32%, transparent);
  --darkFocusOutlineColor: var(--asphalt10);
  --affirm100: #3AE5AD;
  --gradientStart: #00B8FF;
  --gradientEnd: #3D68FF;
  --option-gradient-start: #8F8F8F;
  --option-gradient-end: #515151;
  --option-gradient-selected-start: #FDFDFD;
  --option-gradient-selected-end: #979797;
  --base-gradient: linear-gradient(91deg, var(--start-color) 9.78%, var(--end-color) 89.38%);
  --primary-gradient-10: linear-gradient(91deg, var(--twitter40, #05B2FF) 9.78%, var(--meta70, #3A6DFF) 89.38%);
  --primary-gradient-20: linear-gradient(91deg, var(--twitter30, #4EC7FF) 9.78%, #3F90FF 89.38%);
  --primary-gradient-30: linear-gradient(91deg, var(--twitter50, #03A1E3) 9.78%, var(--twitch60, #4A34EF) 89.38%);
  --feedback-gradient-10: linear-gradient(91deg, #1D9AEC 9.78%, #5836F0 89.38%);
  --feedback-gradient-20: linear-gradient(91deg, #4F2CF0 9.78%, #291561 89.38%);
  --feedback-gradient-30: linear-gradient(91deg, #9D88FB 9.78%, #4F2CF0 89.38%);
  --feedback-gradient-40: linear-gradient(91deg, #FC3D83 9.78%, #4F2CF0 89.38%);
  --warning-gradient-10: linear-gradient(91deg, var(--tmobile60, #E6016F) 9.78%, var(--lyft60, #FE0158) 89.38%);
  --warning-gradient-20: linear-gradient(91deg, #FF80AC 9.78%, var(--lyft60, #FE0158) 89.38%);
  --warning-gradient-30: linear-gradient(91deg, #FE3479 9.78%, #CB0146 89.38%);
  --affirm-gradient-10: linear-gradient(91deg, var(--spotify60, #20DCBA) 9.78%, var(-skype50, #0198A2) 89.38%);
  --loading-gradient-10: linear-gradient(91deg, var(--meta10, #F4F7FF) 9.78%, var(--meta30, #CBDCFD) 89.38%);
  --karma-gradient-10: linear-gradient(91deg, var(--netflix30, #FD99AB) 9.78%, var(--netflix50, #F3355D) 89.38%);
  --primaryHeader: "Bricolage Grotesque", sans-serif;
  --primarySans: "Work Sans", sans-serif;
  --secondarySans: "Source Sans Pro", sans-serif;
  --primarySerif: "PT Serif", serif;
  --editor-ui-h0: 600 32px/normal var(--primaryHeader);
  --editor-ui-h1: 600 24px/125% var(--primarySans);
  --editor-ui-h2: 600 20px/125% var(--primarySans);
  --editor-ui-h3: 600 18px/125% var(--primarySans);
  --editor-ui-b1-regular: 400 16px/24px var(--primarySans);
  --editor-ui-b1-medium: 500 16px/24px var(--primarySans);
  --editor-ui-b1-semibold: 600 16px/24px var(--primarySans);
  --editor-ui-b2-regular: 400 14px/20px var(--primarySans);
  --editor-ui-b2-medium: 500 14px/20px var(--primarySans);
  --editor-ui-b2-semibold: 600 14px/20px var(--primarySans);
  --editor-ui-b3-regular: 400 12px/18px var(--primarySans);
  --editor-ui-b3-medium: 500 12px/18px var(--primarySans);
  --editor-ui-b3-semibold: 600 12px/18px var(--primarySans);
  --editor-ui-l-regular: 400 12px/124% var(--primarySans);
  --editor-ui-l-medium: 500 12px/124% var(--primarySans);
  --editor-ui-l-semibold: 600 12px/124% var(--primarySans);
  --editor-ui-btn-l-large: 600 16px/24px var(--primarySans);
  --editor-ui-btn-l-default: 600 14px/20px var(--primarySans);
  --editor-ui-btn-l-small: 600 12px/18px var(--primarySans);
  --review-ui-b1-medium: 500 16px/125% var(--primaryHeader);
  --ai-ui-h3: 400 20px/125% var(--primaryHeader);
  --ai-ui-b1-regular: 400 16px/20px var(--primaryHeader);
  --overlay-weak-dim: rgba(15, 15, 15, 0.25);
  --overlay-medium-dim: rgba(15, 15, 15, 0.50);
  --overlay-strong-dim: rgba(15, 15, 15, 0.75);
  --overlay-weak-brighten: rgba(255, 255, 255, 0.25);
  --overlay-medium-brighten: rgba(255, 255, 255, 0.50);
  --overlay-strong-brighten: rgba(255, 255, 255, 0.75);
  --preview-inactive: linear-gradient(161deg, #8F8F8F 12.93%, #515151 89.74%);
  --preview-active: linear-gradient(161deg, #FDFDFD 12.93%, #979797 89.74%);
  --shadow-dark-small: 0px 4px 8px 0px rgba(0, 0, 0, 0.26), 0px 12px 16px 0px rgba(0, 0, 0, 0.21);
  --shadow-dark-medium: 0px 6px 16px 0px rgba(0, 0, 0, 0.26), 0px 16px 24px 0px rgba(0, 0, 0, 0.21);
  --shadow-dark-large: 0px 8px 24px 0px rgba(0, 0, 0, 0.26), 0px 32px 40px 0px rgba(0, 0, 0, 0.21);
  --shadow-light-small: 0px 4px 8px 0px rgba(0, 0, 0, 0.16), 0px 12px 16px 0px rgba(0, 0, 0, 0.1);
  --shadow-light-medium: 0px 6px 16px 0px rgba(0, 0, 0, 0.16), 0px 16px 24px 0px rgba(0, 0, 0, 0.1);
  --shadow-light-large: 0px 8px 24px 0px rgba(0, 0, 0, 0.16), 0px 32px 40px 0px rgba(0, 0, 0, 0.1);
}

.e-ui-h0 {
  font: var(--editor-ui-h0);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-h1 {
  font: var(--editor-ui-h1);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-h2 {
  font: var(--editor-ui-h2);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-h3 {
  font: var(--editor-ui-h3);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b1-regular {
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b1-medium {
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b1-semibold {
  font: var(--editor-ui-b1-semibold);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b2-regular {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b2-medium {
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-b2-semibold {
  font: var(--editor-ui-b2-semibold);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-l-regular {
  font: var(--editor-ui-l-regular);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-l-medium {
  font: var(--editor-ui-l-medium);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-l-semibold {
  font: var(--editor-ui-l-semibold);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-btn-l-large {
  font: var(--editor-ui-btn-l-large);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-btn-l-default {
  font: var(--editor-ui-btn-l-default);
  color: var(--asphalt100);
  margin: 0;
}

.e-ui-btn-l-small {
  font: var(--editor-ui-btn-l-small);
  color: var(--asphalt100);
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "liga", "kern";
  font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  overscroll-behavior: none;
}
body.contact-page-open {
  overflow: hidden;
}

body.thumbnail-generator-visible, html.thumbnail-generator-visible {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #fafafa;
}

::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 6px;
  border: 3px solid #fafafa;
}

::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #7d7d7d #fafafa;
}

a.link {
  color: var(--meta60);
}

a:hover {
  text-decoration: none;
}

.ufo--container {
  width: 1110px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .ufo--container {
    padding: 0 12px;
  }
}

textarea {
  background: transparent;
  border: none;
  color: var(--base00);
  resize: none;
}
textarea:focus {
  outline: none;
}

.project-status-indicators {
  height: 100%;
  display: flex;
  flex-direction: column;
  float: left;
  margin-left: 35px;
  padding: 13px 0;
}

.project-status-display {
  font-size: 10px;
  color: var(--base00);
  line-height: 1;
  font-family: var(--secondarySans);
  font-weight: 700;
}
.project-status-display .draft,
.project-status-display .public {
  position: relative;
  padding-left: 13px;
}
.project-status-display .draft:before,
.project-status-display .public:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.project-status-display .draft:after,
.project-status-display .public:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: solid 2px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.error-wrapper {
  background: #edf1f1;
  width: 100%;
  height: 100%;
  position: absolute;
}
.error-wrapper .error {
  width: 540px;
  max-width: 100%;
  background: var(--base00);
  padding: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.error-wrapper .error-picto {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.error-wrapper .error-picto.error-400 {
  background: url(/dist/src/assets/images/error-404..svg) center center no-repeat;
}
.error-wrapper .error-picto.error-401 {
  background: url(/dist/src/assets/images/error-401..svg) center center no-repeat;
}
.error-wrapper .error-picto.error-403 {
  background: url(/dist/src/assets/images/error-401..svg) center center no-repeat;
}
.error-wrapper .error-picto.error-404 {
  background: url(/dist/src/assets/images/error-404..svg) center center no-repeat;
}
.error-wrapper .error-picto.error-500 {
  background: url(/dist/src/assets/images/error-500..svg) center center no-repeat;
}
.error-wrapper .error-message {
  font-size: 24px;
  columns: #475461;
  margin: 20px auto;
  text-align: center;
  max-width: 300px;
}
.error-wrapper .error-exp {
  font-size: 14px;
  color: #778390;
  text-align: center;
  max-width: 300px;
  margin: 0 auto 50px auto;
}
.error-wrapper .btn--error {
  width: 300px;
  margin: 20px auto;
  background: var(--meta60);
  padding: 13px 0;
  text-align: center;
  font-size: 16px;
  color: var(--base00);
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  display: block;
}
.error-wrapper .btn--error:hover {
  text-decoration: none;
}

.password-protected-project-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  z-index: 1;
  background-color: var(--base00);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}

.tooltip-fade-to-right-enter-active, .tooltip-fade-to-right-leave-active {
  transition: all 0.5s;
  transition-delay: 0.1s;
  transform: translateX(0px);
}

.tooltip-fade-to-right-enter-from, .tooltip-fade-to-right-leave-to {
  opacity: 0;
  transform: translateX(-20px);
  transition-delay: 0s;
  transition: all 0.25s;
}

.fade-up-enter-active,
.fade-up-leave-active {
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
}

.fade-up-enter-from,
.fade-up-leave-to {
  opacity: 0;
  transform: translateY(32px);
}

.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(-100%);
}

.slide-panel-enter-active,
.slide-panel-leave-active {
  transition: all 0.3s ease-out;
}

.slide-panel-enter-from,
.slide-panel-leave-to {
  opacity: 0;
  transition: all 0.2s ease-in;
}

.drop-down-enter-active {
  --tY: -60px;
  animation: growDown 100ms ease-in-out forwards;
  transform-origin: top center;
}

.drop-down-leave-active {
  --tY: -60px;
  animation-name: growDown;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
  transform-origin: top center;
}

.drop-down-from-toolbar-enter-active {
  animation: growDown 100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform-origin: top center;
}

.drop-down-from-toolbar-leave-active {
  animation-name: growDown;
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-direction: reverse;
  transform-origin: top center;
}

/* Reverse  dropdown from toolbar */
.drop-down-from-toolbar-reverse-enter-active {
  animation: growUp 100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform-origin: bottom center;
}

.drop-down-from-toolbar-reverse-leave-active {
  animation-name: growUp;
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-direction: reverse;
  transform-origin: bottom center;
}

.fade-in-enter-active,
.fade-in-leave-active {
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
}

.fade-in-enter-from,
.fade-in-leave-to {
  opacity: 0;
}

@keyframes growDown {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}
@keyframes growUp {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
    transform-origin: bottom;
  }
}
.scroll-down {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(40, 42, 43, 0.2);
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.scroll-down:before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background: url(/dist/src/assets/images/icon-left..svg) center center no-repeat;
  background-size: 16px 16px;
  transform: rotate(-90deg);
}
.scroll-down:hover {
  background-color: rgba(40, 42, 43, 0.35);
  bottom: 25px;
}
.scroll-down.hidden {
  display: none;
}

.scroll-to-top {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(40, 42, 43, 0.1);
  position: -webkit-sticky;
  position: sticky;
  bottom: -64px;
  margin: -108px 20px 0 0;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  float: right;
  opacity: 0;
}
.scroll-to-top:before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background: url(/dist/src/assets/images/icon-left..svg) center center no-repeat;
  background-size: 16px 16px;
  transform: rotate(90deg);
}
.scroll-to-top.visible {
  opacity: 1;
  bottom: 20px;
  z-index: 10;
}
.scroll-to-top.visible:hover {
  background-color: rgba(40, 42, 43, 0.25);
  bottom: 25px;
}

.vue-slider {
  margin: 0 auto;
}
.vue-slider .vue-slider-rail {
  background-color: var(--asphalt70);
  border-radius: 15px;
}
.vue-slider .vue-slider-rail .vue-slider-process {
  background-color: var(--volt);
  border-radius: 15px;
}
.vue-slider .vue-slider-rail .vue-slider-dot-handle {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--base00);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15), 0 15px 15px -10px rgba(71, 84, 97, 0.08);
}

.uf-notif-active:before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 2;
  background-color: var(--error40);
  border: solid 3px var(--base00);
  border-radius: 50%;
}

.profile-picture.uf-notif-active:before {
  border-color: var(--asphalt90);
}

@keyframes notifBlink {
  from {
    border-width: 2px;
    top: 0px;
    right: 0px;
    opacity: 1;
  }
  to {
    border-width: 12px;
    top: -6px;
    right: -6px;
    opacity: 0;
  }
}
.uf-content {
  width: 100%;
  background: var(--base00);
}

.uf-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 15px;
}

.uf-container-fluid {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.ufo--inline-loader {
  background: url(/dist/src/assets/images/loadinganim..gif) center center no-repeat;
  background-size: 80px 80px;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

@media (min-width: 768px) {
  .scroll-down {
    width: 48px;
    height: 48px;
  }
  .scroll-down:before {
    width: 48px;
    height: 48px;
    background-size: 20px 20px;
  }
  .scroll-to-top {
    width: 48px;
    height: 48px;
  }
  .scroll-to-top:before {
    width: 48px;
    height: 48px;
    background-size: 20px 20px;
  }
}
@media (min-width: 992px) {
  .scroll-down {
    width: 48px;
    height: 48px;
  }
  .scroll-down:before {
    width: 48px;
    height: 48px;
  }
  .scroll-to-top {
    width: 64px;
    height: 64px;
    bottom: -64px;
    margin: -124px 40px 0 0;
  }
  .scroll-to-top:before {
    width: 64px;
    height: 64px;
  }
  .scroll-to-top.visible {
    bottom: 40px;
    z-index: 10;
  }
  .scroll-to-top.visible:hover {
    bottom: 45px;
  }
}
#freshworks-container,
#freshworks-frame-wrapper,
#launcher-frame {
  transition-property: left !important;
  transition-duration: 250ms;
  transition-timing-function: ease-in;
}

#freshworks-container {
  --leftPos: 24px;
  --bottomBubPos: 16px;
  --bottomPopPos: 74px;
}

#freshworks-frame-wrapper,
#launcher-frame {
  left: var(--leftPos) !important;
}

#launcher-frame {
  bottom: var(--bottomBubPos) !important;
}

#freshworks-frame-wrapper {
  bottom: var(--bottomPopPos) !important;
}

:root {
  --section-padding-mult: 1;
  --text-size-mult: 1;
  --min-hl-size: 1px;
  --min-pg-size: 1px;
  --section-padding-top: 60px;
  --section-padding-bottom: 60px;
}
@media (max-width: 1024px) {
  :root {
    --section-padding-mult: .8;
    --text-size-mult: .6;
    --min-hl-size: 14px;
    --min-pg-size: 14px;
    --section-padding-top: 40px;
    --section-padding-bottom: 40px;
  }
}
@media (max-width: 768px) {
  :root {
    --section-padding-mult: .6;
    --text-size-mult: .4;
    --section-padding-top: 20px;
    --section-padding-bottom: 20px;
  }
}

.e-btn--password {
  width: 24px;
  height: 48px;
  background-color: transparent;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  cursor: pointer;
  display: block;
  outline: none;
  position: relative;
  margin-left: -36px;
}
.e-btn--password:focus {
  outline: none;
}
.e-btn--password:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.e-btn--show-password {
  background-image: url(/dist/src/assets/images/icon-password-show..svg);
}
.e-btn--hide-password {
  background-image: url(/dist/src/assets/images/icon-password-hide..svg);
}
.e-btn--font-increase {
  background-image: url(/dist/src/assets/images/icon-increase-light..svg);
}
.e-btn--font-decrease {
  background-image: url(/dist/src/assets/images/icon-decrease-light..svg);
}

.has-tooltip[tooltip] {
  position: relative;
}
.has-tooltip[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: var(--fabBackgroundColor);
  font-family: var(--primarySans);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  font-weight: normal;
  white-space: nowrap;
  color: #f0f6fb;
  border-radius: 3px;
  pointer-events: none;
  padding: 3px 16px;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.has-tooltip[tooltip]:hover::before, .has-tooltip[tooltip]:hover::after {
  opacity: 1;
}
.has-tooltip.tooltip-slim::after {
  font-size: 13px;
  padding: 8px;
}
.has-tooltip.large {
  cursor: pointer;
}
.has-tooltip.large::after {
  min-width: 140px;
  text-align: center;
}
.has-tooltip[tooltip-position=top]::before, .has-tooltip[tooltip-position=top]::after {
  left: 50%;
}
.has-tooltip[tooltip-position=right]::before, .has-tooltip[tooltip-position=right]::after {
  left: 100%;
  top: 50%;
}
.has-tooltip[tooltip-position=right]::before {
  margin-left: 1px;
  transform: translateY(-50%) rotate(90deg);
}
.has-tooltip[tooltip-position=right]::after {
  margin-left: 8px;
  transform: translateX(0%) translateY(-50%);
}
.has-tooltip[tooltip-position=bottom]::before, .has-tooltip[tooltip-position=bottom]::after {
  top: 100%;
  margin-top: 8px;
}
.has-tooltip[tooltip-position=bottom]::before {
  transform: translateX(-50%) translateY(-100%) rotate(-180deg);
}
.has-tooltip[tooltip-position=bottom]::after {
  transform: translateX(-50%) translateY(0%);
}
.has-tooltip[tooltip-position=left]::before, .has-tooltip[tooltip-position=left]::after {
  left: 0%;
  top: 50%;
}
.has-tooltip[tooltip-position=left]::before {
  margin-left: -12px;
  transform: translateY(-50%) rotate(-90deg);
}
.has-tooltip[tooltip-position=left]::after {
  margin-left: -8px;
  transform: translateX(-100%) translateY(-50%);
}

.modal-wrapper {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  transition: opacity 0.3s ease;
}
.modal-wrapper.thumbnail-generator {
  display: flex;
}

.modal-mask {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(88, 97, 101, 0.7);
}
.modal-mask--transparent {
  background-color: rgba(88, 97, 101, 0);
  transition: background-color 0.3s ease-out;
}

.modal-container {
  width: 750px;
  max-width: 100%;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--asphalt95);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}
.modal-container.light {
  background-color: var(--asphalt10);
}
.modal-container.light h1, .modal-container.light h2 {
  color: var(--asphalt100);
}
.modal-container.light h3, .modal-container.light h4 {
  color: var(--asphalt90);
}
.modal-container.light p {
  color: var(--asphalt90);
}
.modal-container.light p.small {
  color: var(--asphalt90);
}
.modal-container.light li {
  color: var(--asphalt70);
}
.modal-container--tiny {
  width: 420px;
}
.modal-container--small {
  width: 470px;
}
.modal-container--medium-small {
  width: 570px;
}
.modal-container--mid {
  width: 640px;
}
.modal-container--mid .dragandrop-upload .target-area {
  width: 100%;
}
.modal-container--mid-cancel-sub {
  width: 702px;
}
.modal-container--x-large {
  width: 920px !important;
}
.modal-container.t-and-c-modal {
  width: 500px;
}
.modal-container--domain-confirm-modal {
  width: 503px;
}
.modal-container.secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-container--add-section {
  width: 522px;
}
.modal-container--add-section .modal-body {
  padding: 0;
}
.modal-container--navigation-steps .modal-body {
  padding: 0;
}
.modal-container--gallery {
  width: 890px;
}
.modal-container--social-links {
  width: 700px;
}
.modal-container--social-links .social-service {
  display: flex;
  flex-direction: row;
}
.modal-container--social-links .social-service .service-select {
  margin-right: 30px;
  min-width: 160px;
}
.modal-container--background {
  width: 702px;
}
.modal-container--video .modal-body {
  display: block;
}
.modal-container--video .modal-body label {
  font-size: 14px;
}
.modal-container--add-about-page .modal-body p {
  margin-bottom: 0;
}
.modal-container .content-separator {
  width: 100%;
  position: relative;
  margin: 30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.modal-container .content-separator:before, .modal-container .content-separator:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 8px;
  border-top: solid 1px var(--asphalt70);
}
.modal-container .content-separator .or {
  font: var(--editor-ui-l-regular);
  text-align: center;
  color: var(--asphalt20);
  padding: 0 8px;
  text-transform: uppercase;
  margin: 0 auto;
  background: var(--asphalt90);
  position: relative;
  z-index: 1;
  display: inline-block;
}
.modal-container--set-thumbnail {
  width: 910px;
  transform: none;
  top: 0;
  bottom: 0;
  margin: auto;
}
.modal-container--set-thumbnail[class*=ts-medium] {
  width: 940px;
}
.modal-container--set-thumbnail[class*=ts-large] {
  width: 790px;
}
.modal-container--set-thumbnail p {
  font-size: 14px;
}
.modal-container--use-current-thumbnail {
  width: 600px;
  transform: none;
  top: 0;
  bottom: 0;
  margin: auto;
}
.modal-container--use-current-thumbnail[class*=large] {
  width: 483px;
}
.modal-container--use-current-thumbnail[class*=medium] {
  width: 483px;
}
.modal-container--use-current-thumbnail[class*=small] {
  width: 400px;
}
.modal-container--use-current-thumbnail p {
  font-size: 14px;
}
.modal-container .current-thumbnail-image {
  object-fit: cover;
  object-position: center;
}
.modal-container .vue-simple-line {
  border-color: var(--carbon60);
}
.modal-container .vue-circle-stencil__preview {
  border: solid 1px var(--carbon60);
}
.modal-container .vue-advanced-cropper__foreground,
.modal-container .vue-advanced-cropper__background {
  background: var(--asphalt95);
}
.modal-container .cropper-handler {
  display: block;
  position: relative;
  flex-shrink: 0;
  background: white;
  top: auto;
  left: auto;
  height: 4px;
  width: 4px;
  --borderWidth: 4px;
  --length: 24px;
  --handlerOffset: 10px;
}
.modal-container .cropper-handler--west-north, .modal-container .cropper-handler--east-south, .modal-container .cropper-handler--west-south, .modal-container .cropper-handler--east-north {
  display: block;
  height: var(--length);
  width: var(--length);
  background: none;
}
.modal-container .cropper-handler--west-north {
  border-left: solid var(--borderWidth) var(--volt);
  border-top: solid var(--borderWidth) var(--volt);
  top: var(--handlerOffset);
  left: var(--handlerOffset);
}
.modal-container .cropper-handler--east-south {
  border-right: solid var(--borderWidth) var(--volt);
  border-bottom: solid var(--borderWidth) var(--volt);
  top: calc(var(--handlerOffset) * -1);
  left: calc(var(--handlerOffset) * -1);
}
.modal-container .cropper-handler--west-south {
  border-left: solid var(--borderWidth) var(--volt);
  border-bottom: solid var(--borderWidth) var(--volt);
  top: calc(var(--handlerOffset) * -1);
  left: var(--handlerOffset);
}
.modal-container .cropper-handler--east-north {
  border-right: solid var(--borderWidth) var(--volt);
  border-top: solid var(--borderWidth) var(--volt);
  top: var(--handlerOffset);
  left: calc(var(--handlerOffset) * -1);
}
.modal-container--alert {
  max-width: 90%;
  width: 400px;
  padding: 32px;
}
.modal-container--alert .modal-header {
  margin-bottom: 16px;
  padding: 0;
}
.modal-container--alert .modal-header h1 {
  font: var(--editor-ui-h1);
  text-align: center;
  color: var(--asphalt10);
}
.modal-container--alert .modal-body {
  margin-bottom: 32px;
  padding: 0;
}
.modal-container--alert .modal-body p {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
.modal-container--alert .modal-footer {
  padding: 0;
}
.modal-container--alert .modal-footer .ufo-cta {
  width: 100%;
}
.modal-container--cancel-subscription .modal-body {
  overflow-y: scroll;
}
.modal-container--calendly {
  width: fit-content;
  height: fit-content;
  overscroll-behavior: none;
}

.modal-header {
  padding: 24px;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.modal-header h1 {
  font: var(--editor-ui-h1);
  color: var(--asphalt10);
  margin-bottom: 0;
}
.modal-header .btn-close {
  border: none;
  background: url(/dist/src/assets/images/icon-close-dark..svg) center center no-repeat;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
}
.modal-header .ufo-cta--icon {
  margin-left: auto;
}
.modal-header .back-button {
  width: 36px;
  height: 36px;
  background: url(/dist/src/assets/images/icon-left-dark..svg) center center no-repeat;
  margin-right: 20px;
  cursor: pointer;
  float: left;
}
.modal-header .ufo-cta--back {
  height: unset !important;
}

.modal-body {
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-body input[type=checkbox] + span {
  margin-left: 2px;
}
.modal-body.ps {
  position: relative;
}
.modal-body li {
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt20);
}
.modal-body p, .modal-body label {
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt20);
}
.modal-body p {
  margin-bottom: 16px;
}
.modal-body p b {
  font-weight: 600;
}
.modal-body p.hint {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.modal-body p.dz-default-message {
  color: var(--asphalt20);
}
.modal-body p small {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
  padding-top: 5px;
}
.modal-body p.s-m {
  margin-bottom: 12px;
}
.modal-body p.small {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
  margin-bottom: 0;
}
.modal-body p .link {
  cursor: pointer;
  color: var(--volt);
}
.modal-body p.darker {
  color: var(--asphalt40);
}
.modal-body .scrollable-container {
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
}
.modal-body .scrollable-container::-webkit-scrollbar {
  width: 6px;
  background: rgba(0, 0, 0, 0);
}
.modal-body .scrollable-container::-webkit-scrollbar-track {
  background: rgba(238, 238, 238, 0.9);
}
.modal-body .scrollable-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 0;
  border: 3px solid #cccccc;
}
.modal-body .scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  border-color: #b3b3b3;
}
.modal-body .domain-search {
  margin-bottom: 8px;
}
.modal-body .recommended-domains {
  margin-top: 40px;
  margin-bottom: 20px;
}
.modal-body .recommended-domains-list {
  max-height: 223px;
  position: relative;
}
.modal-body .recommended-domains-table {
  font-size: 16px;
}
.modal-body .recommended-domains-table td {
  height: 44px;
  padding: 0;
  vertical-align: middle;
}
.modal-body .recommended-domains-table .domain-name {
  width: 50%;
}
.modal-body .recommended-domains-table .domain-name--disabled {
  color: #d7dee1;
}
.modal-body .recommended-domains-table .domain-available {
  width: 20%;
}
.modal-body .recommended-domains-table .domain-available--disabled {
  color: #d7dee1;
}
.modal-body .recommended-domains-table .domain-price {
  width: 20%;
}
.modal-body .recommended-domains-table .domain-price--disabled {
  color: #d7dee1;
}
.modal-body .recommended-domains-table .domain-purchase {
  width: 10%;
  text-align: center;
}
.modal-body .recommended-domains-table .domain-set {
  width: 10%;
  text-align: center;
}
.modal-body .recommended-domains-table .btn--lite {
  padding: 0 8px;
}
.modal-body .recommended-domains-table .btn--lite .domain-purchase-button {
  font: var(--editor-ui-l-regular);
  color: var(--volt);
}
.modal-body .domain-settings-box {
  width: 100%;
  font: var(--editor-ui-b2-regular);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease-out;
  padding: 30px;
  border: solid 2px #d1d9dd;
}
.modal-body .domain-settings-box .domain-info {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal-body .domain-settings-box .domain-info .domain-name {
  font-size: 27px;
  margin-bottom: 10px;
}
.modal-body .domain-settings-box .domain-info p {
  margin: 0;
}
.modal-body .domain-settings-box .domain-disconnect {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  float: right;
  font: var(--editor-ui-l-regular);
  color: var(--volt);
}
.modal-body .domain-settings-box .domain-disconnect .spaced {
  letter-spacing: 0.86px;
}

.modal-footer {
  padding: 24px;
  border: none;
  clear: both;
  position: relative;
}
.modal-footer.t-and-c-footer {
  padding-bottom: 20px;
}
.modal-footer .domain-switch-cta {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt60);
  display: flex;
  align-items: center;
}
.modal-footer .domain-switch-cta button {
  margin-left: 4px;
}
.modal-footer .settings-link {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt60);
}
.modal-footer .settings-link a {
  color: var(--volt);
}
.modal-footer .capitalized {
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
}
.modal-footer .baseline {
  vertical-align: baseline;
}
.modal-footer .buttons {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.modal-footer .buttons.single-button {
  justify-content: flex-end;
}
.modal-footer .buttons button:focus {
  outline: none;
}
.modal-footer .buttons .btn--primary {
  position: relative;
}
.modal-footer .buttons .btn--primary .tooltip {
  width: 100%;
  top: -30px;
}
.modal-footer .buttons .btn--primary:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
.modal-footer .buttons .btn--primary:first-child {
  margin-left: auto;
}
.modal-footer .buttons .btn--secondary, .modal-footer .buttons .btn--lite {
  margin-right: 20px;
}
.modal-footer .buttons .btn--secondary {
  margin-left: auto;
}
.modal-footer .hint {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
  margin: 0 20px 0 0;
}
.modal-footer .hint a {
  color: var(--volt);
}
.modal-footer input[type=range] {
  height: 24px;
  width: 328px;
  -webkit-appearance: none;
}
.modal-footer input[type=range]:focus {
  outline: none;
}
.modal-footer input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0 0 0 #000000;
  background: #E3E4E6;
  border-radius: 2px;
  border: 0 solid #000000;
}
.modal-footer input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15), 0 15px 15px -10px rgba(71, 84, 97, 0.08);
  border: 0 solid #000000;
  height: 24px;
  width: 24px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--base00);
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.2s ease-out;
}
.modal-footer input[type=range]::-webkit-slider-thumb:hover {
  width: 26px;
  height: 26px;
}
.modal-footer input[type=range]:focus::-webkit-slider-runnable-track {
  background: #E3E4E6;
}
.modal-footer input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0 0 0 #000000;
  background: var(--error50);
  border-radius: 2px;
  border: 0 solid #000000;
}
.modal-footer input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15), 0 15px 15px -10px rgba(71, 84, 97, 0.08);
  border: 0 solid #000000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--base00);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.modal-footer input[type=range]::-moz-range-thumb:hover {
  width: 26px;
  height: 26px;
}
.modal-footer input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.modal-footer input[type=range]::-ms-fill-lower {
  background: var(--volt);
  border: 0 solid #000000;
  border-radius: 4px;
  box-shadow: 0 0 0 #000000;
}
.modal-footer input[type=range]::-ms-fill-upper {
  background: #D8D8D8;
  border: solid #000000;
  border-radius: 4px;
  box-shadow: 0 0 0 #000000;
}
.modal-footer input[type=range]::-ms-thumb {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15), 0 15px 15px -10px rgba(71, 84, 97, 0.08);
  margin-top: 1px;
  border: 0 solid #000000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--base00);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.modal-footer input[type=range]::-ms-thumb:hover {
  width: 26px;
  height: 26px;
}
.modal-footer input[type=range]:focus::-ms-fill-lower {
  background: var(--volt);
}
.modal-footer input[type=range]:focus::-ms-fill-upper {
  background: #D8D8D8;
}

.ufo-cta--container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ufo-cta--container.between {
  justify-content: space-between;
}
.ufo-cta--container.between .ufo-cta {
  width: 100%;
}

.modal-enter-active,
.modal-leave-active {
  transition-property: opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

.modal-enter-from,
.modal-leave-to {
  transform: scale(1.1);
}

.modal-tabs {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
}
.modal-tabs .tabs {
  height: 100%;
}
.modal-tabs .tab-selectors {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px var(--asphalt70);
  border-radius: 2px;
  margin-bottom: 20px;
}
.modal-tabs .tab-selectors .tab-btn {
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt30);
  flex: 1;
  text-align: center;
  padding: 12px;
  background: transparent;
  cursor: pointer;
  border-bottom: solid 2px transparent;
}
.modal-tabs .tab-selectors .tab-btn.selected, .modal-tabs .tab-selectors .tab-btn:hover {
  color: var(--asphalt10);
  transition: all 0.3s ease-out;
}
.modal-tabs .tab-selectors .tab-btn.selected {
  border-bottom: solid 2px var(--asphalt10);
  transition: border 0.3s ease-out;
}
.modal-tabs .tab-content {
  padding: 0 30px 0px 30px;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  position: relative;
}
.modal-tabs .tab-content.scrollable-tab-content {
  padding-right: 10px;
}
.modal-tabs .tab-content .drop-target-area {
  width: 100%;
  height: 150px;
  border: dashed 2px #d8d8d8;
  line-height: 150px;
  text-align: center;
}
.modal-tabs .tab-content .preview-image-container {
  background: var(--asphalt90);
  text-align: center;
  position: relative;
}
.modal-tabs .tab-content .preview-image-container .preview-small img {
  border: 1px solid black;
  width: 464px;
  height: 464px;
  object-fit: cover;
}
.modal-tabs .tab-content .preview-image-container .preview-medium img {
  border: 1px solid black;
  width: 536px;
  height: 464px;
  object-fit: cover;
}
.modal-tabs .tab-content .preview-image-container .preview-large img {
  border: 1px solid black;
  width: 832px;
  height: 464px;
  object-fit: cover;
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview {
  position: relative;
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview > img {
  width: 100%;
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview div {
  width: 642px;
  height: 309px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview div.overlay:before, .modal-tabs .tab-content .preview-image-container .hero-background-preview div.blur:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview div.overlay:before {
  background-color: var(--colorOverlay);
}
.modal-tabs .tab-content .preview-image-container .hero-background-preview div.blur:before {
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.modal-tabs .tab-content .update-media {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.modal-tabs .tab-content .update-media button {
  margin-bottom: 10px;
}
.modal-tabs .tab-content .update-media button:last-child {
  margin-bottom: 0;
}

.gallery-modal {
  padding: 0;
}
.gallery-modal .dragandrop-upload .target-area {
  width: 100%;
  min-height: 150px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
}
.gallery-modal .dz-default-message {
  display: flex;
  justify-content: flex-end;
}
.gallery-modal .gallery-upload-container {
  display: flex;
  border-top: solid 1px #F2F2F2;
  border-bottom: solid 1px #F2F2F2;
  max-height: 424px;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left {
  overflow-y: scroll;
  flex: 1;
  border-right: solid 1px #F2F2F2;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px 20px;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container p {
  font-size: 12px;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .error-message {
  flex: 1;
  display: flex;
  align-items: center;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .error-message p {
  color: var(--error50);
  margin: 0;
  padding-left: 5px;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .error-message .warning-icon {
  background: url(/dist/src/assets/images/icon-warning..svg) center center no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
  color: var(--error50);
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .icon-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .icon-container .add-icon {
  background: url(/dist/src/assets/images/icon-add-small..svg) center center no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
  color: var(--volt);
}
.gallery-modal .gallery-upload-container .gallery-upload-column-left .upload-container .icon-container .blue {
  flex: 1;
  color: var(--volt);
  font-weight: bold;
  cursor: pointer;
  margin: 0;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-right {
  overflow: auto;
  width: 424px;
  padding: 20px;
  background: #F0F6FB;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-right img {
  width: 100%;
  height: 280px;
  object-fit: scale-down;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-right p {
  margin: 10px 0 16px 0;
}
.gallery-modal .gallery-upload-container .gallery-upload-column-right .ufo-input {
  padding-bottom: 8px;
}
.gallery-modal .uploaded-images {
  display: grid;
  grid-template-columns: repeat(4, 94px);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  padding: 0 20px 20px 20px;
}
.gallery-modal .uploaded-images::-webkit-scrollbar {
  width: 6px;
  background: rgba(0, 0, 0, 0);
}
.gallery-modal .uploaded-images {
  /* Track */
}
.gallery-modal .uploaded-images::-webkit-scrollbar-track {
  background: #eee;
}
.gallery-modal .uploaded-images {
  /* Handle */
}
.gallery-modal .uploaded-images::-webkit-scrollbar-thumb {
  background: #999;
}
.gallery-modal .uploaded-images {
  /* Handle on hover */
}
.gallery-modal .uploaded-images::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.gallery-modal .uploaded-images .uploaded-image {
  position: relative;
  border-radius: 2px;
  background-color: #edf0f1;
  overflow: hidden;
  height: 94px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.gallery-modal .uploaded-images .uploaded-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-modal .uploaded-images .uploaded-image .dz-default {
  display: none;
}
.gallery-modal .uploaded-images .uploaded-image .image-edit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(71, 84, 97, 0.75);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.gallery-modal .uploaded-images .uploaded-image .image-edit-layer .drag-icon {
  background: url(/dist/src/assets/images/icon-drag-white..svg) center center no-repeat;
  background-size: cover;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #8B939B;
  position: absolute;
  left: 10px;
  top: 10px;
  cursor: -webkit-grabbing;
}
.gallery-modal .uploaded-images .uploaded-image .image-edit-layer .drag-icon:hover {
  background-color: var(--volt);
}
.gallery-modal .uploaded-images .uploaded-image .image-edit-layer .remove-button {
  background: url(/dist/src/assets/images/icon-remove-small..svg) center center no-repeat;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--asphalt60);
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.gallery-modal .uploaded-images .uploaded-image .image-edit-layer .remove-button:hover {
  background-color: var(--error50);
}
.gallery-modal .uploaded-images .uploaded-image:hover .image-edit-layer {
  opacity: 1;
}
.gallery-modal .uploaded-images .uploaded-image.sortable-ghost {
  opacity: 1;
  background-color: var(--asphalt60);
}
.gallery-modal .uploaded-images .uploaded-image.sortable-ghost img,
.gallery-modal .uploaded-images .uploaded-image.sortable-ghost .drag-icon,
.gallery-modal .uploaded-images .uploaded-image.sortable-ghost .remove-button {
  opacity: 0;
}
.gallery-modal .uploaded-images .uploaded-image.sortable-chosen {
  opacity: 0.9;
  border-color: var(--volt);
  cursor: -webkit-grabbing;
}
.gallery-modal .uploaded-images .uploaded-image:hover {
  border-color: var(--volt);
  transition: border 0.3s;
}

.uploaded-image.sortable-fallback {
  position: relative;
  border-radius: 2px;
  background-color: var(--asphalt20);
  width: 190px;
  height: 174px;
}
.uploaded-image.sortable-fallback img {
  width: 190px;
  height: 174px;
  object-fit: contain;
}
.uploaded-image.sortable-fallback .dz-default {
  display: none;
}

.selected-image {
  border: solid 2px var(--volt);
}

.tab-fade-enter-active,
.tab-fade-leave-active {
  transition: all 0.3s ease-out;
}

.tab-fade-enter-from,
.tab-fade-leave-to {
  opacity: 0;
  transition: none;
}

.project-reorder-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 450px;
  overflow: hidden;
  background: var(--base00);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.project-reorder-list.thumbnail-medium {
  grid-template-columns: 1fr;
}
.project-reorder-list.thumbnail-medium .project-draggable {
  width: 300px;
  margin: 0 auto;
}
.project-reorder-list.thumbnail-large {
  grid-template-columns: 1fr;
}
.project-reorder-list.thumbnail-large .project-draggable {
  width: 100%;
}

.project-draggable {
  list-style: none;
  float: left;
  cursor: -webkit-grab;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.project-draggable.wide {
  grid-column: span 2;
}
.project-draggable.sortable-chosen {
  opacity: 0.9;
  border-color: var(--volt);
  cursor: -webkit-grabbing;
  background: var(--base00);
}
.project-draggable.sortable-chosen.sortable-ghost {
  opacity: 1;
  background: #f0f6fb;
}
.project-draggable.sortable-chosen.sortable-ghost .picto,
.project-draggable.sortable-chosen.sortable-ghost .text {
  opacity: 0;
}
.project-draggable:hover {
  border-color: var(--volt);
  transition: border 0.3s;
}

.project-box {
  width: 100%;
  height: 210px;
  border: solid 1px #d7dee1;
  border-radius: 3px;
  overflow: hidden;
  transition: border 0.3s;
  cursor: pointer;
}
.project-box:hover {
  border: solid 1px var(--volt);
  transition: border 0.3s;
}
.project-box .picto {
  height: 150px;
  width: 100%;
  background-size: contain;
  position: relative;
  display: flex;
}
.project-box .picto img {
  object-fit: cover;
  width: 100%;
}
.project-box .picto:before {
  content: url(/dist/src/assets/images/icon-drag..svg);
  position: absolute;
  top: 9px;
  left: 9px;
}
.project-box .text {
  height: 60px;
  cursor: pointer;
}
.project-box .text span {
  width: 100%;
  font: var(--editor-ui-b1-regular);
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--primarySans);
  display: block;
}

.collection-name-input .matla {
  top: -16px;
  font-size: 12px;
}

.collection-create {
  height: 514px;
}
.collection-create .collection-guide {
  height: 168px;
  width: 400px;
  padding-top: 134px;
  margin: 0 auto 38px auto;
  background: url(/dist/src/assets/images/collections..svg) top center no-repeat;
}
.collection-create .collection-guide p {
  text-align: center;
}
.collection-create .collection-add-button {
  height: 65px;
  width: 100%;
  margin-bottom: 10px;
  border: solid 2px var(--asphalt100);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--secondarySans);
  font: var(--editor-ui-b2-semibold);
  color: var(-volt);
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}
.collection-create .collection-add-button:hover {
  background-color: #f0f6fb;
  transition: background-color 0.2s ease-out;
}
.collection-create .collection-list-scrollable {
  max-height: 225px;
  overflow: auto;
  position: relative;
}
.collection-create .collection-list {
  width: 100%;
}
.collection-create .collection-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.collection-create .collection-list .collection {
  width: 100%;
  height: 65px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  border: solid 1px var(--asphalt20);
  border-radius: 3px;
}
.collection-create .collection-list .collection .collection-name {
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt60);
  flex: 1;
  margin: 0 20px;
  height: 100%;
}
.collection-create .collection-list .collection .collection-name a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--asphalt70);
}
.collection-create .collection-list .collection .collection-name a:hover {
  text-decoration: none;
}
.collection-create .collection-list .collection .collection-edit-options {
  display: flex;
}
.collection-create .collection-list .collection .collection-edit-options div {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.collection-create .collection-list .collection .collection-edit-options .collection-share {
  margin: 0 5px;
}
.collection-create .collection-list .collection .collection-edit-options .collection-share .share-btn {
  background: url(/dist/src/assets/images/icon-share-smaller..svg) center center no-repeat;
  background-size: 20px auto;
}
.collection-create .collection-list .collection .collection-edit-options .collection-edit {
  margin: 0 5px;
}
.collection-create .collection-list .collection .collection-edit-options .collection-edit .edit-btn {
  background: url(/dist/src/assets/images/icon-edit-small..svg) center center no-repeat;
}
.collection-create .collection-list .collection .collection-edit-options .collection-delete {
  margin: 0 5px;
}
.collection-create .collection-list .collection .collection-edit-options .collection-delete .delete-btn {
  background: url(/dist/src/assets/images/ic-delete..svg) center center no-repeat;
}

.project-list-scrollable {
  max-height: 400px;
  overflow: auto;
  position: relative;
}

.projects-for-collection {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 690px;
  overflow: hidden;
  background: var(--base00);
}
.projects-for-collection .project-draggable {
  float: left;
  margin: 15px;
  cursor: -webkit-grab;
}
.projects-for-collection .project-draggable.sortable-chosen {
  opacity: 0.9;
  border-color: var(--meta60);
  cursor: -webkit-grabbing;
  background: var(--base00);
}
.projects-for-collection .project-draggable.sortable-chosen.sortable-ghost {
  opacity: 1;
  background: #f0f6fb;
}
.projects-for-collection .project-draggable.sortable-chosen.sortable-ghost .picto,
.projects-for-collection .project-draggable.sortable-chosen.sortable-ghost .text {
  opacity: 0;
}
.projects-for-collection .project-draggable:hover {
  border-color: var(--meta60);
  transition: border 0.3s;
}

.project-for-collection {
  width: 210px;
  height: 210px;
  border-radius: 3px;
  overflow: hidden;
  transition: border 0.3s;
  float: left;
  margin: 15px 30px 15px 0;
}
.project-for-collection:nth-child(3n) {
  margin-right: 0;
}
.project-for-collection:hover {
  transition: border 0.3s;
}
.project-for-collection .picto {
  height: 150px;
  width: 100%;
  position: relative;
}
.project-for-collection .picto:before {
  display: none;
}
.project-for-collection .picto .checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: solid 2px var(--base00);
  z-index: 1;
  cursor: pointer;
}
.project-for-collection .picto .checkbox label {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.project-for-collection .picto .checkbox span {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 50%;
  display: block;
  transition: all 0.5s;
  background: rgba(255, 255, 255, 0.3);
}
.project-for-collection .picto .checkbox span:after {
  content: url(/dist/src/assets/images/icon-upload-done..svg);
  position: relative;
  top: 35px;
  left: 6px;
  transition: all 0.5s;
}
.project-for-collection .picto .checkbox input {
  -webkit-appearance: none;
}
.project-for-collection .picto .checkbox input:checked + span {
  background: var(--meta60);
}
.project-for-collection .picto .checkbox input:checked + span:after {
  content: url(/dist/src/assets/images/icon-upload-done..svg);
  position: relative;
  top: 6px;
  left: 6px;
  transition: all 0.5s;
}
.project-for-collection .picto .checkbox input:checked + span {
  transition: all 0.3s;
}
.project-for-collection .text {
  height: 60px;
}
.project-for-collection .text label {
  width: 100%;
  font-size: 15px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--primarySans);
  font-weight: 300;
}

.modal-message {
  width: 690px;
  height: 150px;
  background: #f0f6fb;
  padding: 25px 20px;
  margin-bottom: 30px;
}
.modal-message .picto {
  width: 140px;
  height: 100px;
  float: left;
  margin-right: 10px;
  background: url(/dist/src/assets/images/picto-warning..svg) center center no-repeat;
  background-size: 100%;
}
.modal-message .message {
  height: 100px;
  position: relative;
}
.modal-message .message p {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 25px;
  display: inline-block;
}

.image-upload-dialog {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 480px;
}
.image-upload-dialog .composition-type {
  float: left;
  margin: 15px;
  cursor: pointer;
}

.composition-box {
  width: 210px;
  height: 210px;
  border: solid 1px #d7dee1;
  border-radius: 3px;
  background: var(--base00);
  overflow: hidden;
  transition: border 0.3s;
}
.composition-box:hover {
  border: solid 1px var(--meta60);
  transition: border 0.3s;
}
.composition-box .picto {
  height: 150px;
  width: 100%;
  background: #eff1f2;
  background: url(/dist/src/assets/images/picto-big-image..svg) center center no-repeat;
  position: relative;
}
.composition-box .picto.mobile {
  background: url(/dist/src/assets/images/picto-upload-mobile..svg) center center no-repeat;
}
.composition-box .picto.tablet {
  background: url(/dist/src/assets/images/picto-upload-tablet..svg) center center no-repeat;
}
.composition-box .picto.desktop {
  background: url(/dist/src/assets/images/picto-upload-desktop..svg) center center no-repeat;
}
.composition-box .text {
  height: 60px;
}
.composition-box .text label {
  width: 100%;
  font-size: 15px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--primarySans);
  font-weight: 300;
}

.dragandrop-upload {
  display: flex;
  flex-direction: column;
}
.dragandrop-upload .target-area {
  flex: 2;
  border: dashed 2px #d8d8d8;
  position: relative;
  margin-bottom: 30px;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragandrop-upload .target-area:hover {
  background: #f0f6fb;
  border-style: solid;
  border-color: var(--meta60);
  transition: all 0.3s;
}
.dragandrop-upload .target-area label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--primarySans);
  font-weight: 400;
  cursor: pointer;
}
.dragandrop-upload .upload-help {
  width: 690px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dragandrop-upload .upload-help .picto {
  width: 140px;
  height: 100px;
  float: left;
  margin-bottom: 20px;
}
.dragandrop-upload .upload-help .picto.no-mockup {
  background: url(/dist/src/assets/images/picto-big-image..svg) center center no-repeat;
  background-size: 100%;
}
.dragandrop-upload .upload-help .picto.mobile {
  background: url(/dist/src/assets/images/picto-upload-mobile..svg) center center no-repeat;
  background-size: 100%;
}
.dragandrop-upload .upload-help .picto.tablet {
  background: url(/dist/src/assets/images/picto-upload-tablet..svg) center center no-repeat;
  background-size: 100%;
}
.dragandrop-upload .upload-help .picto.desktop {
  background: url(/dist/src/assets/images/picto-upload-desktop..svg) center center no-repeat;
  background-size: 100%;
}
.dragandrop-upload .upload-help .picto.crop {
  background: url(/dist/src/assets/images/picto-crop..svg) center center no-repeat;
  background-size: 100%;
}
.dragandrop-upload .upload-help .picto.thumbnail {
  background: url(/dist/src/assets/images/icon-image-cut-thumbnail..svg) center center no-repeat;
}
.dragandrop-upload .upload-help .picto.profilepic {
  background: url(/dist/src/assets/images/icon-image-cut-profilepic..svg) center center no-repeat;
}
.dragandrop-upload .upload-help .help {
  position: relative;
}
.dragandrop-upload .upload-help .help label {
  font-family: var(--primarySans);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
.dragandrop-upload .dropzone.dz-clickable .dz-message, .dragandrop-upload .dropzone.dz-clickable .dz-message * {
  flex-direction: column;
}
.dragandrop-upload .dropzone .dz-message {
  font-size: 15px;
  font-family: var(--primarySans);
  color: #475461;
  font-weight: 700;
}
.dragandrop-upload .dropzone .dz-message i.cv-blue {
  color: var(--meta60);
  font-style: normal;
  display: contents;
}
.dragandrop-upload .dropzone .dz-message i.cv-small {
  font-size: 12px;
  color: #778390;
  font-weight: normal;
  font-style: normal;
  display: contents;
}
.dragandrop-upload .dropzone .dz-error-message {
  color: #e30551;
  font-weight: normal;
  font-size: 14px;
  display: block !important;
  padding-top: 6px;
}
.dragandrop-upload .dropzone .dz-error-message * {
  display: inline-block !important;
}
.dragandrop-upload .dropzone .dz-preview .dz-details {
  height: 100%;
  opacity: 1;
  background-color: rgba(25, 33, 37, 0.5);
}
.dragandrop-upload .dropzone .dz-preview .dz-details .dz-size,
.dragandrop-upload .dropzone .dz-preview .dz-details .dz-filename {
  opacity: 0;
}
.dragandrop-upload .dropzone .dz-preview .dz-details:hover .dz-size,
.dragandrop-upload .dropzone .dz-preview .dz-details:hover .dz-filename {
  opacity: 1;
}
.dragandrop-upload .dropzone .dz-preview .dz-success-mark {
  background-image: url(/dist/src/assets/images/icon-done..svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.dragandrop-upload .dropzone .dz-preview .dz-error-message {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e30551;
  padding: 0;
  background: transparent;
}
.dragandrop-upload .dropzone .dz-preview .dz-error-message:after {
  display: none;
  background: transparent;
}
.dragandrop-upload .dropzone .dz-preview .dz-error-mark {
  background-image: url(/dist/src/assets/images/icon-close-light..svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.dragandrop-upload .dropzone .dz-preview.dz-success .dz-success-mark {
  animation: sliding-up 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.dragandrop-upload .dropzone .dz-preview.dz-error .dz-success-mark {
  opacity: 0;
}
.dragandrop-upload .dropzone .dz-preview .dz-progress {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.dragandrop-upload .dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
}
@keyframes sliding-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.background-update {
  text-align: center;
  min-height: 390px;
}
.background-update .add-image,
.background-update .add-color {
  width: 210px;
  height: 210px;
  border: solid 1px #d7dee1;
  border-radius: 3px;
  background: var(--base00);
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  margin: 15px;
  transition: border 0.3s;
}
.background-update .add-image:hover,
.background-update .add-color:hover {
  border: solid 1px var(--meta60);
  transition: border 0.3s;
}
.background-update .add-image .picto,
.background-update .add-color .picto {
  height: 150px;
  width: 100%;
  background: #eff1f2;
  background: url(/dist/src/assets/images/picto-big-image..svg) center center no-repeat;
  position: relative;
}
.background-update .add-image .text,
.background-update .add-color .text {
  height: 60px;
}
.background-update .add-image .text label,
.background-update .add-color .text label {
  width: 100%;
  font-size: 15px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--primarySans);
  font-weight: 300;
}
.background-update .add-color .picto {
  background: url(/dist/src/assets/images/picto-color-fill..svg) center center no-repeat;
}

.add-background-color {
  width: 355px;
  margin: 0 auto;
  position: relative;
}
.add-background-color .color-preview {
  width: 46px;
  height: 46px;
  background: var(--meta60);
  outline: solid 1px #d7dee1;
  outline-offset: 1px;
  float: left;
  margin-right: 10px;
}
.add-background-color .hash {
  float: left;
  line-height: 32px;
  font-family: var(--primarySans);
  font-weight: 400;
  font-size: 16px;
}
.add-background-color .input-group {
  width: 300px;
}
.add-background-color .input-group .matla {
  top: 5px;
}
.add-background-color .input-group .matin {
  text-transform: uppercase;
}
.add-background-color .input-group .matin::placeholder {
  text-transform: uppercase;
  color: #a9b4bf;
}

.slide-enter-active {
  transition: all 0.3s ease-in-out;
  background: var(--base00);
}

.slide-leave-active {
  transition: transform 0.3s ease-in-out;
}

.slide-enter-from {
  transform: translateX(10px);
}

.slide-leave-to {
  transform: translateX(-10px);
  z-index: -1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--base00);
  width: 100%;
  height: 100%;
  padding: 30px;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-in-out;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.slide-fade-enter-from {
  transform: translateX(10px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(-10px);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--base00);
  width: 100%;
  height: 100%;
  padding: 30px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.subscription-cancellation-mask {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(88, 97, 101, 0.7);
  width: 100%;
  height: 100%;
}

.subscription-cancellation-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--base00);
  padding: 30px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.subscription-cancellation-dialog .subscription-cancellation-content {
  width: 480px;
}
.subscription-cancellation-dialog .subscription-cancellation-content h4 {
  margin-bottom: 24px;
  font-weight: 700;
}
.subscription-cancellation-dialog .subscription-cancellation-content p {
  margin-bottom: 30px;
}
.subscription-cancellation-dialog .buttons {
  float: right;
}

.subscription.response .subscription-plans {
  max-height: 315px;
}

.transactions-details {
  margin-bottom: 60px;
}
.transactions-details .next-plan {
  font-size: 15px;
  font-family: var(--primarySans);
  margin-bottom: 30px;
}
.transactions-details .next-plan .title {
  font-weight: 700;
}
.transactions-details table {
  font-size: 15px;
  font-family: var(--primarySans);
}
.transactions-details table thead th {
  font-weight: 700;
  padding: 5px 0;
  border: none;
}
.transactions-details table td {
  padding: 5px 0;
  border: none;
}

.cv-upload .multi-pictos {
  width: 300px;
  margin: 0 auto 30px auto;
}
.cv-upload .multi-pictos .picto {
  width: 50px;
  height: 60px;
  background: url(/dist/src/assets/images/icon-doc..svg) center center no-repeat;
  font-family: var(--primarySans);
  font-size: 15px;
  padding-top: 32px;
  margin: 0 5px;
  text-align: center;
  text-transform: uppercase;
}
.cv-upload .dropzone .dz-preview {
  width: auto;
}
.cv-upload .dropzone .dz-preview.dz-image-preview {
  background: url(/dist/src/assets/images/icon-doc..svg) center top no-repeat;
  padding-top: 65px;
}
.cv-upload .dropzone .dz-preview .dz-image {
  display: none;
}
.cv-upload .dropzone .dz-preview .dz-details {
  position: relative;
}
.cv-upload .dragandrop-upload .dropzone .dz-preview .dz-details .dz-filename {
  opacity: 1;
}
.cv-upload .dragandrop-upload .dropzone .dz-preview .dz-details .dz-filename span {
  background: none;
}
.cv-upload .dragandrop-upload .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  text-overflow: initial;
}
.cv-upload .dragandrop-upload .dropzone .dz-preview .dz-details .dz-size {
  display: none;
}
.cv-upload .dragandrop-upload .dropzone .dz-preview .dz-details {
  background: none;
}
.cv-upload .dropzone .dz-preview .dz-success-mark, .cv-upload .dropzone .dz-preview .dz-error-mark {
  top: 37px;
  border-radius: 50%;
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  background-color: var(--meta60);
  background-size: 80%;
}
.cv-upload .dropzone .dz-preview .dz-error-mark {
  background-color: rgb(227, 5, 81);
  background-size: 100%;
}
.cv-upload .dropzone .dz-preview .dz-error-message {
  opacity: 1;
  width: 200%;
  top: 45%;
}

.modal-container--background .modal-header,
.modal-container--background .tab-selectors,
.modal-container--background .dragandrop-upload,
.modal-container--background .modal-footer,
.modal-container--background .preview-image-container {
  transition: opacity 150ms ease;
}
.modal-container--background.overlay-setting {
  background-color: transparent;
  box-shadow: none;
}
.modal-container--background.overlay-setting .modal-header,
.modal-container--background.overlay-setting .tab-selectors,
.modal-container--background.overlay-setting .dragandrop-upload,
.modal-container--background.overlay-setting .modal-footer,
.modal-container--background.overlay-setting .blur-settings,
.modal-container--background.overlay-setting .preview-image-container {
  opacity: 0;
}
.modal-container--background.overlay-setting .dim-settings {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.modal-container--background.blur-setting {
  background-color: transparent;
  box-shadow: none;
}
.modal-container--background.blur-setting .modal-header,
.modal-container--background.blur-setting .tab-selectors,
.modal-container--background.blur-setting .dragandrop-upload,
.modal-container--background.blur-setting .modal-footer,
.modal-container--background.blur-setting .dim-settings,
.modal-container--background.blur-setting .preview-image-container {
  opacity: 0;
}
.modal-container--background.blur-setting .blur-settings {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.modal-container--background .modal-header {
  padding: 30px;
}
.modal-container--background .modal-body {
  overflow: inherit;
}
.modal-container--background .modal-tabs .tab-content {
  overflow: inherit;
}
.modal-container--background .dragandrop-upload .target-area {
  width: 100%;
  min-height: 40vh;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 20px;
}
.modal-container--background .dim-and-blur-settings {
  margin: 0 -20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.modal-container--background .dim-and-blur-settings .title {
  height: 30px;
}
.modal-container--background .dim-and-blur-settings .title label {
  font-family: var(--primarySans);
  font-size: 14px;
  color: #778390;
  margin: 0;
}
.modal-container--background .dim-and-blur-settings .setting {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.modal-container--background .dim-and-blur-settings .setting .slider {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modal-container--background .dim-and-blur-settings .setting .slider span {
  font-size: 14px;
  color: #778390;
  font-family: var(--primarySans);
}
.modal-container--background .dim-and-blur-settings .setting .slider .vue-slider {
  margin: 0 20px;
}
.modal-container--background .dim-and-blur-settings .dim-settings,
.modal-container--background .dim-and-blur-settings .blur-settings {
  padding: 20px;
  background-color: var(--base00);
  transition: background-color 150ms ease;
  width: 50%;
  border-radius: 3px;
}
.modal-container--background .dim-and-blur-settings .color-picker {
  border: solid 1px #d7dee1;
  margin-left: 10px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  --bgColor: #424242;
}
.modal-container--background .dim-and-blur-settings .color-picker .color-display {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid 1px var(--base00);
  background-color: var(--bgColor);
}
.modal-container--background .color-overlay-settings {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 20px;
  margin: 0 -20px;
  background-color: var(--base00);
  transition: background-color 150ms ease;
}
.modal-container--background .color-overlay-settings .checker {
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.modal-container--background .color-overlay-settings .checker label {
  font-family: var(--primarySans);
  font-size: 14px;
  color: #778390;
  margin: 0;
  cursor: pointer;
}
.modal-container--background .color-overlay-settings .checker input {
  margin-right: 5px;
}
.modal-container--background .color-overlay-settings .slider {
  width: 235px;
  margin-left: auto;
  margin-right: 15px;
}
.modal-container--background .color-overlay-settings .slider .range-input {
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modal-container--background .color-overlay-settings .slider .range-input input {
  width: 180px;
  margin: 0;
}
.modal-container--background .color-overlay-settings .slider .range-input span {
  font-size: 14px;
  color: #778390;
  font-family: var(--primarySans);
}
.modal-container--background .color-overlay-settings .color-picker {
  border: solid 1px #d7dee1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  --bgColor: #424242;
}
.modal-container--background .color-overlay-settings .color-picker .color-display {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid 1px var(--base00);
  background-color: var(--bgColor);
}

.modal-container--thumbnail .dragandrop-upload .upload-help {
  width: 100%;
  margin-bottom: 0;
}

.modal-container--rc-cancel .modal-footer .buttons .btn--secondary {
  margin-left: 0;
}

.rc-guide-body {
  height: 324px;
}

.rc-guide-content {
  text-align: center;
  position: relative;
}
.rc-guide-content .rc-guide-ill {
  width: 240px;
  height: 180px;
  margin: 0 auto 20px auto;
}
.rc-guide-content h3 {
  font: var(--editor-ui-h3);
  color: var(--asphalt10);
  margin-bottom: 8px;
  font-size: 22px;
}
.rc-guide-content p {
  color: var(--asphalt10);
  font: var(--editor-ui-b2-regular);
}
.rc-guide-content .steps {
  text-align: center;
  margin: 30px auto 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.rc-guide-content .steps .step {
  width: 6px;
  height: 6px;
  background-color: #d1d9dd;
  transition: border 0.2s ease-in-out;
  border-radius: 50%;
  border: 1px solid var(--base00);
  cursor: pointer;
  margin: 0 3px;
}
.rc-guide-content .steps .step.active {
  border: 0px solid transparent;
  cursor: default;
}
.rc-guide-content .steps .step:hover {
  border: 0px solid transparent;
}

.rc-report-form .checkbox {
  margin-bottom: 14px;
}
.rc-report-form .checkbox label {
  font-family: var(--primarySans);
  font-size: 14px;
  color: #778390;
  margin: 0;
}
.rc-report-form textarea {
  padding: 14px 16px;
  font-family: var(--primarySans);
  font-size: 16px;
  line-height: 1.25;
  color: #9fa6a9;
  border: solid 1px #edf0f1;
  border-radius: 1px;
  width: 100%;
}
.rc-report-form textarea::placeholder {
  color: #9fa6a9;
  font-style: italic;
}

.ufo-project-selector--list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.ufo-project-selector--list-item .list-item-content {
  width: 100%;
  cursor: pointer;
}
.ufo-project-selector--list-item .project-title {
  font-family: var(--primarySans);
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  color: #475461;
}
.ufo-project-selector--list-item .thumbnail {
  position: relative;
  padding-top: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}
.ufo-project-selector--list-item .thumbnail .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ufo-project-selector--list-item .thumbnail .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo-project-selector--list-item .checkbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  background-color: rgba(66, 66, 66, 0.25);
  transition: opacity 0.2s ease-in-out;
}
.ufo-project-selector--list-item .checkbox span {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 6px 0 rgba(157, 169, 177, 0.5);
  overflow: hidden;
  border: solid 2px var(--base00);
}
.ufo-project-selector--list-item .checkbox span:after {
  content: url(/dist/src/assets/images/checkbox-small-selected..svg);
  position: relative;
  top: 35px;
  left: -6px;
  transition: all 0.3s;
}
.ufo-project-selector--list-item .checkbox input {
  -webkit-appearance: none;
}
.ufo-project-selector--list-item .checkbox input:checked + span {
  background: #e30551;
}
.ufo-project-selector--list-item .checkbox input:checked + span:after {
  content: url(/dist/src/assets/images/checkbox-small-selected..svg);
  position: relative;
  top: -6px;
  left: -6px;
  transition: all 0.3s;
}
.ufo-project-selector--list-item .checkbox input:checked + span {
  transition: all 0.1s;
}
.ufo-project-selector--list-item .checkbox .bg-layer {
  position: absolute;
  top: -25px;
  left: -42px;
  width: 112px;
  height: 78px;
  background: rgba(71, 84, 97, 0.75);
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}
.ufo-project-selector--list-item .checkbox input:checked ~ .bg-layer {
  opacity: 1;
  transition: all 0.3s;
}
.ufo-project-selector--list-item.selected .project-title,
.ufo-project-selector--list-item.selected .thumbnail .image-container {
  opacity: 0.4;
}
.ufo-project-selector--list-item.selected .checkbox {
  opacity: 1;
  background: transparent;
}
.ufo-project-selector--list-item:hover .checkbox {
  opacity: 1;
}

.password-error {
  font-family: var(--primarySans);
  font-size: 14px;
  color: #e30551;
}
.password-error p {
  color: #e30551;
  font-size: 14px;
  margin-bottom: 0;
}

.password-container {
  display: flex;
}

.loading-circle {
  background: url(/dist/src/assets/images/saving-oval-blue..svg) center center no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  position: absolute;
  top: 48%;
  left: 50%;
  opacity: 1;
  animation: rotation 1.5s infinite linear;
  z-index: 9999;
}
.loading-circle--main-header {
  top: 43%;
}
.loading-circle--header {
  top: 40%;
}
.loading-circle--cv {
  top: 38%;
  left: 67.75%;
}
.loading-circle--showcase {
  top: 75px;
}
.loading-circle--crop {
  top: 46%;
}
.loading-circle--profile-image {
  top: 44%;
}
.loading-circle--suggestion {
  left: 68%;
}

.upload-and-crop-loading {
  position: absolute;
  top: 40%;
  left: 40%;
  text-align: center;
}
.upload-and-crop-loading .upload-and-crop-spinning-loader-container {
  padding: 30px;
  border: 1px solid #D0D2D5;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 auto 24px;
}
.upload-and-crop-loading .upload-and-crop-spinning-loader-container .upload-and-crop-spinning-loader {
  background: url(/dist/src/assets/images/saving-oval-blue..svg) center center no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  opacity: 1;
  animation: rotation 1.5s infinite linear;
  z-index: 9999;
}
.upload-and-crop-loading .upload-status-text {
  font-family: var(--primarySans);
  color: #475461;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 6px;
}
.upload-and-crop-loading .upload-status-subtext {
  font-family: var(--primarySans);
  color: #69747E;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}

.spinning-loader {
  background-color: rgba(255, 255, 255, 0.5);
  width: 52%;
  height: 68%;
  margin: 0 auto;
  position: absolute;
  top: 14%;
  left: 0;
  z-index: 8888;
}
.spinning-loader .icon {
  background: url(/dist/src/assets/images/saving-oval-blue-lg..png) center center no-repeat;
  background-color: rgb(255, 255, 255);
  animation: rotation 1.5s infinite linear;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 0 0 15px 5px rgba(12, 44, 76, 0.08);
}

@keyframes rotation {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(359deg);
  }
}
.writing-help-modal-content .ufo--text-editor .ProseMirror {
  padding: 5px;
  outline-color: var(--asphalt70);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror p {
  font-weight: 700;
}
.writing-help-modal-content .ufo--text-editor .ProseMirror h3 {
  margin-bottom: 20px;
}
.writing-help-modal-content .ufo--text-editor .ProseMirror h1, .writing-help-modal-content .ufo--text-editor .ProseMirror .h1 {
  font-family: var(--h1Font);
  font-size: var(--h1Size);
  font-weight: var(--h1Weight);
  font-style: var(--h1Style);
  line-height: var(--h1Height);
  color: var(--h1Color);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror h2, .writing-help-modal-content .ufo--text-editor .ProseMirror .h2 {
  font-family: var(--h2Font);
  font-size: var(--h2Size);
  font-weight: var(--h2Weight);
  font-style: var(--h2Style);
  line-height: var(--h2Height);
  color: var(--h2Color);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror h3, .writing-help-modal-content .ufo--text-editor .ProseMirror .h3 {
  font-family: var(--h3Font);
  font-size: var(--h3Size);
  font-weight: var(--h3Weight);
  font-style: var(--h3Style);
  line-height: var(--h3Height);
  color: var(--h3Color);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror h4, .writing-help-modal-content .ufo--text-editor .ProseMirror .h4 {
  font-family: var(--h4Font);
  font-size: var(--h4Size);
  font-weight: var(--h4Weight);
  font-style: var(--h4Style);
  line-height: var(--h4Height);
  color: var(--h4Color);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror p, .writing-help-modal-content .ufo--text-editor .ProseMirror .p, .writing-help-modal-content .ufo--text-editor .ProseMirror .p1, .writing-help-modal-content .ufo--text-editor .ProseMirror a, .writing-help-modal-content .ufo--text-editor .ProseMirror ul, .writing-help-modal-content .ufo--text-editor .ProseMirror ol, .writing-help-modal-content .ufo--text-editor .ProseMirror .text-container {
  font-family: var(--p1Font);
  font-size: var(--p1Size);
  font-weight: var(--p1Weight);
  font-style: var(--p1Style);
  line-height: var(--p1Height);
  color: var(--p1Color);
}
.writing-help-modal-content .ufo--text-editor .ProseMirror p.body-p2, .writing-help-modal-content .ufo--text-editor .ProseMirror .p2 {
  font-family: var(--p2Font);
  font-size: var(--p2Size);
  font-weight: var(--p2Weight);
  font-style: var(--p2Style);
  line-height: var(--p2Height);
  color: var(--p2Color);
}

.modal-container--share {
  transform: none;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all 0.1s;
}
.modal-container--share .social-share-card {
  border-radius: 2px;
  margin-bottom: 30px;
}
.modal-container--share .social-share-card .view-og-image {
  width: 580px;
  height: 250px;
  position: relative;
  padding: 7%;
  overflow: hidden;
}
.modal-container--share .social-share-card .view-og-image img.bi {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-container--share .social-share-card .view-og-image .og-image-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.modal-container--share .social-share-card .view-og-image .og-image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--base00);
  text-align: center;
  width: 80%;
}
.modal-container--share .social-share-card .view-og-image .og-image-text .title {
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 15px;
}
.modal-container--share .social-share-card .view-og-image .og-image-text .subtitle {
  font-family: var(--body-font);
  font-size: 0.75rem;
  line-height: 1;
}
.modal-container--share .social-share-card .view-og-image .social-image-update-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.1s ease-in-out;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-container--share .social-share-card .view-og-image .social-image-update-buttons input[type=file] {
  display: none;
}
.modal-container--share .social-share-card .view-og-image:not(.working):hover img {
  filter: blur(5px);
}
.modal-container--share .social-share-card .view-og-image:not(.working):hover .social-image-update-buttons {
  opacity: 1;
  transform: translateY(0);
}
.modal-container--share .social-share-card .view-og-image .saving-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal-container--share .social-share-card .view-og-image .saving-cover img {
  width: 50px;
  height: auto;
}
.modal-container--share .social-share-card .view-og-image .saving-cover .saving-text {
  font-family: var(--primarySans);
  font-size: 12px;
}
.modal-container--share .social-cover {
  width: 580px;
  height: 250px;
  position: relative;
  overflow: hidden;
}
.modal-container--share .social-cover img.bi {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-container--share .social-cover .generated-portfolio-cover {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 580px;
  height: 250px;
  position: relative;
  --grad: #4a3dff;
}
.modal-container--share .social-cover .generated-portfolio-cover .title {
  color: var(--base00);
  font-size: 28px;
  font-family: var(--title-font);
  text-align: center;
  font-weight: bold;
  line-height: 1.39;
  position: relative;
  z-index: 1;
}
.modal-container--share .social-cover .generated-portfolio-cover .cover-logo {
  width: 60px;
  height: 12px;
  z-index: 1;
  position: relative;
  margin-top: 22px;
}
.modal-container--share .social-cover .generated-portfolio-cover .cover-logo img {
  height: 12px;
  width: 49px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-container--share .social-cover .generated-portfolio-cover .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background-image: linear-gradient(117deg, rgba(255, 255, 255, 0), var(--base00)), linear-gradient(to bottom, var(--grad), var(--grad));
  z-index: 0;
}
.modal-container--share .social-cover .social-image-update-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.1s ease-in-out;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-container--share .social-cover .social-image-update-buttons input[type=file] {
  display: none;
}
.modal-container--share .social-cover:not(.working):hover img {
  filter: blur(5px);
}
.modal-container--share .social-cover:not(.working):hover .social-image-update-buttons {
  opacity: 1;
  transform: translateY(0);
}
.modal-container--share .social-cover .saving-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.modal-container--share .social-cover .saving-cover img {
  width: 50px;
  height: auto;
}
.modal-container--share .social-cover .saving-cover .saving-text {
  font-family: var(--primarySans);
  font-size: 12px;
}
.modal-container--share .social-og-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 12px 12px 0px;
}
.modal-container--share .social-og-text input {
  margin-bottom: 10px;
}
.modal-container--share .social-og-text .title {
  margin-bottom: 5px;
  font-weight: bold;
}
.modal-container--share .social-og-text .url {
  color: var(--asphalt40);
  margin-top: 6px;
  font: var(--editor-ui-b2-regular);
}
.modal-container--share .content-separator {
  margin: 20px 0;
}
.modal-container--share .url-copy {
  display: flex;
  flex-direction: row;
}
.modal-container--share .url-copy .ufo-cta {
  margin-left: 20px;
}

.social-share-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.edit-url {
  display: flex;
  flex-direction: row;
  margin-top: 32px;
}
.edit-url img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.edit-url p:not(.hint) {
  margin-bottom: 8px;
}

.social-share-buttons {
  width: 130px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-right: 18px;
}
.social-share-buttons .share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-block;
  color: var(--base00);
  font-family: var(--secondarySans);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: center;
}
.social-share-buttons .share-btn.facebook {
  background-color: #3b5998;
  border: solid 1px #3b5998;
}
.social-share-buttons .share-btn.twitter {
  background-color: #55acee;
  border: solid 1px #55acee;
}
.social-share-buttons .share-btn.linkedin {
  background-color: #0976b4;
  border: solid 1px #0976b4;
}
.social-share-buttons .share-btn {
  transition: background 0.2s;
}
.social-share-buttons .share-btn:hover {
  text-decoration: none;
  background: var(--base00);
  transition: background 0.2s;
}
.social-share-buttons .share-btn:hover.facebook {
  color: #3b5998;
}
.social-share-buttons .share-btn:hover.twitter {
  color: #55acee;
}
.social-share-buttons .share-btn:hover.linkedin {
  color: #0976b4;
}

.social-share-debug-tips {
  font: var(--editor-ui-l-regular);
  color: var(--asphalt60);
}

.input-group {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.input-group.collection-name-input {
  width: 325px;
}
.input-group .matin {
  font-family: Lato;
  font-size: 1rem;
  color: #475461;
  padding: 4px 0;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid #d7dee1;
}
.input-group .matin::placeholder {
  color: #475461;
}
.input-group .matin:focus {
  outline: none;
}
.input-group .matla {
  color: #778390;
  font-size: 15px;
  font-family: Lato;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  margin-bottom: 0;
  top: -16px;
  left: 10px;
  font-size: 15px;
}
.input-group:not(.placeholder) .matla {
  color: #a9b4bf;
  font-style: italic;
  left: 10px;
  top: 4px;
  transition: 0.2s ease all;
}
.input-group:not(.placeholder) .matin:focus ~ .matla,
.input-group:not(.placeholder) .matin:valid ~ .matla,
.input-group:not(.placeholder) .matin:disabled ~ .matla {
  top: -16px;
  font-size: 12px;
}
.input-group .bar {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
}
.input-group .bar:before, .input-group .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background: #2196f3;
  transition: 0.2s ease all;
}
.input-group .bar:before {
  left: 50%;
}
.input-group .bar:after {
  right: 50%;
}
.input-group .matin:focus ~ .bar:before, .input-group .matin:focus ~ .bar:after {
  width: 50%;
}
.input-group .matin:focus ~ .highlight {
  animation: highlighter 0.3s ease;
}

@keyframes highlighter {
  from {
    background: var(--base00);
  }
  to {
    width: 0;
    background: transparent;
  }
}
select {
  font-family: Lato;
  font-size: 15px;
  color: #475461;
  width: 150px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 0;
  border-bottom: solid 2px #d7dee1;
}

.ufo-form--group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ufo-form--group-multiline {
  flex-direction: column;
}
.ufo-form--label {
  font-family: var(--primarySans);
  font-size: 13px;
  color: #9fa6a9;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ufo-form--label label {
  margin: 0;
}
.ufo-form--label span {
  font-style: italic;
}
.ufo-form--handler {
  width: 100%;
  padding: 14px 16px;
  border: solid 1px var(--asphalt30);
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt60);
}
.ufo-form--handler::placeholder {
  font-style: italic;
  color: var(--asphalt50);
}
.ufo-form--handler:focus {
  outline: none;
  border-color: var(--asphalt100);
}
.ufo-form--handler:disabled {
  border: solid 1px #edf0f1;
  background-color: rgba(237, 240, 241, 0.5);
  color: #9fa6a9;
  cursor: not-allowed;
}
.ufo-form--search-handler {
  padding-left: 34px;
  background: url(/dist/src/assets/images/icon-search-small..svg) center left 8px;
  background-repeat: no-repeat;
}
.ufo-form--check {
  display: block;
}
.ufo-form--check-label {
  font: var(--editor-ui-l-regular);
  color: var(--asphalt60);
  margin: 0;
}
.ufo-form--check-input {
  margin-right: 5px;
}
.ufo-form--check-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
}

@media (min-width: 768px) {
  .carousel .gallery-item[class*=no-mockup].slider-mockup {
    height: 30vw;
    margin: auto;
  }
}
.carousel .gallery-item[class*=mobile].slider-mockup {
  max-width: 23%;
  margin: auto;
}
.carousel .gallery-item[class*=tablet].slider-mockup {
  max-width: 30%;
  margin: auto;
}
.carousel .gallery-item[class*=desktop] {
  padding: 0 40px;
}
.carousel .gallery-item[class*=desktop].slider-mockup {
  max-width: 80%;
  margin: auto;
}
.carousel .gallery-item[class*=monitor] {
  padding: 0 40px;
}
.carousel .gallery-item[class*=monitor].slider-mockup {
  max-width: 80%;
  margin: auto;
}

@media (max-width: 767px) {
  .image-gallery.slider .carousel__arrows {
    display: none;
  }
}
[class*=mockup--][class*="--rounded"][class*="--shadow"] .ufo-mockup--screen,
[class*=mockup--][class*="--squared"][class*="--shadow"] .ufo-mockup--screen {
  filter: drop-shadow(0px 19.5491px 43.9855px rgba(0, 0, 0, 0.2));
}

.ufo--user-projects .project {
  max-width: 100%;
  width: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.ufo--user-projects .project.add-project {
  overflow: inherit;
}
.ufo--user-projects .project:hover .image-container .project-thumbnail, .ufo--user-projects .project:hover .image-container .mockups-container {
  transform: scale(1.03);
  filter: blur(10px);
}
@media (max-width: 768px) {
  .ufo--user-projects .project:hover .image-container .project-thumbnail, .ufo--user-projects .project:hover .image-container .mockups-container {
    filter: none;
    transform: none;
  }
}
.ufo--user-projects .project:hover .image-container .mockups-container {
  transform: scale(1.03);
}
@media (max-width: 768px) {
  .ufo--user-projects .project:hover .image-container .mockups-container {
    transform: none;
  }
}
.ufo--user-projects .project:hover .project-name {
  opacity: 1;
  background: rgba(40, 42, 43, 0.75);
}
.ufo--user-projects .project .image-container {
  position: relative;
  padding-top: 100%;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ufo--user-projects .project .image-container.overlay:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--colorOverlay);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.ufo--user-projects .project img.project-thumbnail {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s ease;
  transition-property: transform, filter;
}
.ufo--user-projects .project .mockups-container {
  transition: 0.2s ease;
  transition-property: transform, filter;
}
@media (max-width: 768px) {
  .ufo--user-projects .project.title-is--on-thumbnail.thumbnail-is--large:not(.title-is--hover) .project-name {
    max-width: 100%;
    --min-hl-size: 14px;
    --min-pg-size: 12px;
  }
  .ufo--user-projects .project.title-justify--right .project-name {
    right: 0;
    left: unset;
  }
}
.ufo--user-projects .project .project-name {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--base00);
  text-align: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  text-decoration: none;
}
.ufo--user-projects .project .project-name .project-title {
  font-family: var(--thumbnail-title-font);
  font-size: var(--thumbnail-title-size);
  font-weight: var(--thumbnail-title-weight);
  font-style: var(--thumbnail-title-style);
  line-height: var(--thumbnail-title-height);
  color: var(--thumbnail-title-text-color);
  word-wrap: break-word;
}
@media (max-width: 1024px) {
  .ufo--user-projects .project .project-name .project-title {
    font-size: var(--thumbnail-title-size-tablet);
    line-height: var(--thumbnail-title-height-tablet);
  }
}
@media (max-width: 768px) {
  .ufo--user-projects .project .project-name .project-title {
    font-size: var(--thumbnail-title-size-mobile);
    line-height: var(--thumbnail-title-height-mobile);
  }
}
.ufo--user-projects .project .project-name .project-subtitle {
  font-family: var(--thumbnail-subtitle-font);
  font-size: var(--thumbnail-subtitle-size);
  font-weight: var(--thumbnail-subtitle-weight, 400);
  font-style: var(--thumbnail-subtitle-style);
  line-height: var(--thumbnail-subtitle-height);
  color: var(--thumbnail-subtitle-text-color);
  margin-bottom: 0;
  word-wrap: break-word;
}
@media (max-width: 1024px) {
  .ufo--user-projects .project .project-name .project-subtitle {
    font-size: var(--thumbnail-subtitle-size-tablet);
    line-height: var(--thumbnail-subtitle-height-tablet);
  }
}
@media (max-width: 768px) {
  .ufo--user-projects .project .project-name .project-subtitle {
    font-size: var(--thumbnail-subtitle-size-mobile);
    line-height: var(--thumbnail-subtitle-height-mobile);
  }
}
.ufo--user-projects .project.ghost {
  background: #edf0f1;
  height: 100%;
}
.ufo--user-projects .project.ghost .project-layer,
.ufo--user-projects .project.ghost .image-container,
.ufo--user-projects .project.ghost .project-title,
.ufo--user-projects .project.ghost .project-subtitle,
.ufo--user-projects .project.ghost .project-status-display {
  opacity: 0 !important;
}
.ufo--user-projects .project.dragon {
  cursor: move;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.ufo--user-projects .project.dragon .project-title,
.ufo--user-projects .project.dragon .project-subtitle {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ufo--user-projects .project.ufo--trickacity {
  z-index: 1;
}
.ufo--user-projects .project.ufo--trickacity .image-container img {
  z-index: -1;
}

.flip-list-move {
  transition: transform 0.5s;
}

@keyframes jiggle {
  0% {
    transform: rotate(-0.5deg);
  }
  50% {
    transform: rotate(0.5deg);
  }
}
.ufo--user-projects .project.layout-is--small-block-slided {
  grid-row: span 3;
}
.ufo--user-projects .project.layout-is--small-block-slided:nth-child(2) {
  grid-row: 2/span 3;
}
@media only screen and (max-width: 768px) {
  .ufo--user-projects .project.layout-is--large-block-mixed:first-child {
    grid-column: 1/span 12;
  }
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-column: 1/span 6;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .ufo--project-title-container {
  max-width: 100% !important;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .project-layer {
  padding-top: 100% !important;
}
@media only screen and (max-width: 768px) {
  .ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) {
    grid-column: 1/span 12;
  }
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--below .project-name {
  grid-row: 2;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--below .image-container,
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--below .project-layer {
  grid-row: 1;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--on-thumbnail .project-name {
  padding: var(--gridGap);
}
@media (max-width: 768px) {
  .ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--on-thumbnail .project-name {
    padding: 22px 0 0 0;
  }
  .ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--on-thumbnail .project-name .project-title {
    color: var(--section-h4-text-color);
  }
  .ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child).title-is--on-thumbnail .project-name .project-subtitle {
    color: var(--section-p1-text-color);
  }
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .image-container {
  padding-top: 100%;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .project-name,
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .image-container,
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child) .project-layer {
  grid-column: 1/span 12;
}
.ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child):nth-child(odd) {
  grid-column-start: 7;
}
@media only screen and (max-width: 768px) {
  .ufo--user-projects .project.layout-is--large-block-mixed:not(:first-child):nth-child(odd) {
    grid-column-start: 1;
  }
}
@media (max-width: 768px) {
  .ufo--user-projects .project.layout-is--large-block-mixed.title-is--on-thumbnail .project-name .project-title {
    color: var(--section-h4-text-color);
  }
  .ufo--user-projects .project.layout-is--large-block-mixed.title-is--on-thumbnail .project-name .project-subtitle {
    color: var(--section-p1-text-color);
  }
}
.ufo--user-projects .project.thumbnail-is--default, .ufo--user-projects .project.thumbnail-is--small {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--default, .ufo--user-projects .project.thumbnail-is--small {
    grid-column: 1/span 6;
  }
  .ufo--user-projects .project.thumbnail-is--default:nth-child(even), .ufo--user-projects .project.thumbnail-is--small:nth-child(even) {
    grid-column-start: 7;
  }
}
.ufo--user-projects .project.thumbnail-is--default .project-name,
.ufo--user-projects .project.thumbnail-is--default .image-container,
.ufo--user-projects .project.thumbnail-is--default .project-layer, .ufo--user-projects .project.thumbnail-is--small .project-name,
.ufo--user-projects .project.thumbnail-is--small .image-container,
.ufo--user-projects .project.thumbnail-is--small .project-layer {
  grid-column: 1/span 12;
}
.ufo--user-projects .project.thumbnail-is--default .project-name, .ufo--user-projects .project.thumbnail-is--small .project-name {
  gap: 12px;
}
.ufo--user-projects .project.thumbnail-is--default .project-name .ufo--project-title-container, .ufo--user-projects .project.thumbnail-is--small .project-name .ufo--project-title-container {
  width: 100%;
}
.ufo--user-projects .project.thumbnail-is--default.title-is--below .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--below .project-name {
  grid-row: 2;
}
.ufo--user-projects .project.thumbnail-is--default.title-is--below .image-container,
.ufo--user-projects .project.thumbnail-is--default.title-is--below .project-layer, .ufo--user-projects .project.thumbnail-is--small.title-is--below .image-container,
.ufo--user-projects .project.thumbnail-is--small.title-is--below .project-layer {
  grid-row: 1;
}
.ufo--user-projects .project.thumbnail-is--default.title-is--on-thumbnail .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--on-thumbnail .project-name {
  padding: var(--gridGap);
}
@media (max-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--default.title-is--on-thumbnail .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--on-thumbnail .project-name {
    padding: 22px 0 0 0;
  }
  .ufo--user-projects .project.thumbnail-is--default.title-is--on-thumbnail .project-name .project-title, .ufo--user-projects .project.thumbnail-is--small.title-is--on-thumbnail .project-name .project-title {
    color: var(--section-h4-text-color);
  }
  .ufo--user-projects .project.thumbnail-is--default.title-is--on-thumbnail .project-name .project-subtitle, .ufo--user-projects .project.thumbnail-is--small.title-is--on-thumbnail .project-name .project-subtitle {
    color: var(--section-p1-text-color);
  }
}
.ufo--user-projects .project.thumbnail-is--default.title-is--left, .ufo--user-projects .project.thumbnail-is--default.title-is--right, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating, .ufo--user-projects .project.thumbnail-is--small.title-is--left, .ufo--user-projects .project.thumbnail-is--small.title-is--right, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating {
  grid-gap: var(--gridGap);
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--default.title-is--left, .ufo--user-projects .project.thumbnail-is--default.title-is--right, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating, .ufo--user-projects .project.thumbnail-is--small.title-is--left, .ufo--user-projects .project.thumbnail-is--small.title-is--right, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating {
    grid-column: 1/span 12;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--default.title-is--left .project-name, .ufo--user-projects .project.thumbnail-is--default.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--right .project-layer, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(odd) .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(odd) .project-layer, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(even) .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--left .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--right .project-layer, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(odd) .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(odd) .project-layer, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(even) .project-name {
    grid-column: 1/span 6;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--default.title-is--right .project-name, .ufo--user-projects .project.thumbnail-is--default.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--left .project-layer, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(odd) .project-name, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(even) .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating:nth-child(even) .project-layer, .ufo--user-projects .project.thumbnail-is--small.title-is--right .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--left .project-layer, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(odd) .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(even) .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating:nth-child(even) .project-layer {
    grid-column: 7/span 6;
  }
}
.ufo--user-projects .project.thumbnail-is--default.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating .image-container {
  padding-top: 100%;
}
.ufo--user-projects .project.thumbnail-is--default.title-is--left.add-project, .ufo--user-projects .project.thumbnail-is--default.title-is--right.add-project, .ufo--user-projects .project.thumbnail-is--default.title-is--alternating.add-project, .ufo--user-projects .project.thumbnail-is--small.title-is--left.add-project, .ufo--user-projects .project.thumbnail-is--small.title-is--right.add-project, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating.add-project {
  padding-top: 50% !important;
}
.ufo--user-projects .project.thumbnail-is--medium {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: var(--gridGap);
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium {
    grid-column: 1/span 12;
  }
}
.ufo--user-projects .project.thumbnail-is--medium .project-name {
  grid-column: 1/-1;
  gap: 12px;
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium .project-name {
    grid-column: 8/span 5;
  }
}
.ufo--user-projects .project.thumbnail-is--medium .project-name .ufo--project-title-container {
  width: 100%;
}
.ufo--user-projects .project.thumbnail-is--medium .image-container,
.ufo--user-projects .project.thumbnail-is--medium .project-layer {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium .image-container,
  .ufo--user-projects .project.thumbnail-is--medium .project-layer {
    grid-column: 1/span 7;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium.title-is--left .project-name, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(even) .project-name {
    grid-column: 1/span 5;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium.title-is--right .project-name, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(odd) .project-name {
    grid-column: 8/span 5;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--left .project-layer, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(even) .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(even) .project-layer {
    grid-column: 6/span 7;
  }
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--medium.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--right .project-layer, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(odd) .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating:nth-child(odd) .project-layer {
    grid-column: 1/span 7;
  }
}
.ufo--user-projects .project.thumbnail-is--medium.add-project {
  padding-top: 50% !important;
  width: 57% !important;
}
.ufo--user-projects .project.thumbnail-is--large {
  grid-column: 1/span 12;
}
.ufo--user-projects .project.thumbnail-is--large .project-name {
  gap: 12px;
  padding: var(--gridGap);
}
.ufo--user-projects .project.thumbnail-is--large .project-name .ufo--project-title-container {
  width: 100%;
}
@media (min-width: 768px) {
  .ufo--user-projects .project.thumbnail-is--large .project-name .ufo--project-title-container {
    max-width: 60%;
  }
}
@media (min-width: 1280px) {
  .ufo--user-projects .project.thumbnail-is--large .project-name .ufo--project-title-container {
    max-width: 50%;
  }
}
.ufo--user-projects .project.thumbnail-is--large .image-container {
  padding-top: 50%;
}
.ufo--user-projects .project.thumbnail-is--large .project-layer {
  padding-top: 50% !important;
}
.ufo--user-projects .project.thumbnail-is--large.add-project {
  padding-top: 50% !important;
}
.ufo--user-projects .project.title-is--default:hover:not(.title-is--visible) .project-name {
  background-color: rgba(40, 42, 43, 0.75);
}
.ufo--user-projects .project.title-is--visible .project-name {
  opacity: 1;
  background-color: transparent;
}
.ufo--user-projects .project.title-is--visible:hover .image-container {
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}
.ufo--user-projects .project.title-is--visible:hover .image-container img, .ufo--user-projects .project.title-is--visible:hover .image-container .mockups-container {
  filter: none;
}
.ufo--user-projects .project.title-is--hidden .project-name {
  display: none;
  visibility: hidden;
}
.ufo--user-projects .project.title-is--hidden:hover .image-container {
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}
.ufo--user-projects .project.title-is--hidden:hover .image-container img, .ufo--user-projects .project.title-is--hidden:hover .image-container .mockups-container {
  filter: none;
}
.ufo--user-projects .project.title-is--below {
  grid-template-rows: max-content;
  justify-content: flex-end;
  flex-flow: column-reverse;
}
.ufo--user-projects .project.title-is--below .project-name {
  padding: 22px 0 0 0;
  margin-bottom: 22px;
}
.ufo--user-projects .project.title-is--below .image-container {
  height: 50%;
}
.ufo--user-projects .project.title-is--above {
  grid-template-rows: 1fr auto;
}
.ufo--user-projects .project.title-is--above .project-name {
  justify-content: flex-end;
  padding: 22px 0;
  flex: 1;
}
.ufo--user-projects .project.title-is--above .image-container {
  height: 50%;
}
.ufo--user-projects .project.title-is--above.add-project {
  align-self: flex-end;
}
.ufo--user-projects .project.title-is--above .project-layer {
  bottom: 0;
  top: inherit;
}
.ufo--user-projects .project.title-is--below, .ufo--user-projects .project.title-is--above {
  overflow: inherit;
}
.ufo--user-projects .project.title-is--below .project-name, .ufo--user-projects .project.title-is--above .project-name {
  justify-content: flex-start;
  position: relative;
  height: auto;
  width: auto;
}
.ufo--user-projects .project.title-is--below .image-container, .ufo--user-projects .project.title-is--above .image-container {
  transition: box-shadow 0.2s ease-out;
}
.ufo--user-projects .project.title-is--below:hover .image-container, .ufo--user-projects .project.title-is--above:hover .image-container {
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}
.ufo--user-projects .project.title-is--below:hover .image-container .mockups-container, .ufo--user-projects .project.title-is--above:hover .image-container .mockups-container {
  transform: scale(1.03);
  filter: none;
}
.ufo--user-projects .project.title-is--below .project-layer, .ufo--user-projects .project.title-is--above .project-layer {
  height: 50%;
  padding-top: 100%;
}
.ufo--user-projects .project.title-is--below.add-project, .ufo--user-projects .project.title-is--above.add-project {
  height: 50%;
  padding-top: 100%;
}
.ufo--user-projects .project.title-is--below.add-project .add-project-content, .ufo--user-projects .project.title-is--above.add-project .add-project-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.ufo--user-projects .project.title-is--left:hover .project-name, .ufo--user-projects .project.title-is--right:hover .project-name, .ufo--user-projects .project.title-is--alternating:hover .project-name {
  background: transparent;
}
.ufo--user-projects .project.title-is--left.thumbnail-is--large .project-name, .ufo--user-projects .project.title-is--right.thumbnail-is--large .project-name, .ufo--user-projects .project.title-is--alternating.thumbnail-is--large .project-name {
  padding: 80px;
}
.ufo--user-projects .project.title-is--left .project-name {
  left: 0;
  padding-left: 0;
}
.ufo--user-projects .project.title-is--left .image-container {
  align-self: flex-end;
}
.ufo--user-projects .project.title-is--left .project-layer {
  right: 0;
  left: auto;
}
.ufo--user-projects .project.title-is--right .project-name {
  right: 0;
  left: auto;
  padding-right: 0;
}
.ufo--user-projects .project.title-is--right .image-container {
  align-self: flex-start;
}
.ufo--user-projects .project.title-is--alternating:nth-child(odd) .image-container {
  align-self: flex-start;
}
.ufo--user-projects .project.title-is--alternating:nth-child(even) .image-container {
  align-self: flex-end;
}
.ufo--user-projects .project.title-is--dark.title-is--hover .project-name {
  background-color: rgba(255, 255, 255, 0.75);
}
.ufo--user-projects .project.title-is--dark:not(.title-is--visible) .project-name {
  background-color: rgba(255, 255, 255, 0.75);
}
.ufo--user-projects .project.title-is--light.title-is--hover .project-name {
  background-color: rgba(40, 42, 43, 0.75);
}
.ufo--user-projects .project.title-align--top .project-name {
  justify-content: flex-start;
}
.ufo--user-projects .project.title-align--top.title-is--left .project-name, .ufo--user-projects .project.title-align--top.title-is--right .project-name, .ufo--user-projects .project.title-align--top.title-is--alternating .project-name, .ufo--user-projects .project.title-align--top.thumbnail-is--medium .project-name {
  padding-top: 0;
}
.ufo--user-projects .project.title-align--top.thumbnail-is--large .project-name {
  padding: var(--gridGap);
}
.ufo--user-projects .project.title-align--bottom .project-name {
  justify-content: flex-end;
}
.ufo--user-projects .project.title-align--bottom.title-is--left .project-name, .ufo--user-projects .project.title-align--bottom.title-is--right .project-name, .ufo--user-projects .project.title-align--bottom.title-is--alternating .project-name, .ufo--user-projects .project.title-align--bottom.thumbnail-is--medium .project-name {
  padding-bottom: 0;
}
.ufo--user-projects .project.title-align--bottom.thumbnail-is--large .project-name {
  padding: var(--gridGap);
}
.ufo--user-projects .project.title-justify--left .project-name {
  text-align: left;
  align-items: flex-start;
}
.ufo--user-projects .project.title-justify--right .project-name {
  text-align: right;
  align-items: flex-end;
}

.default-template .ufo--user-projects .project.add-project .add-project-content {
  padding: 0 45px;
}

@media (max-width: 991px), (max-width: 1024px) and (orientation: landscape), (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .ufo--user-projects .project .image-container {
    height: auto;
  }
  .ufo--user-projects .project.title-is--hover .project-name {
    position: relative;
    height: auto;
    width: auto;
    padding: 22px 0 0 0;
    margin-bottom: 20px;
    opacity: 1;
    background-color: transparent !important;
    order: 2;
  }
  .ufo--user-projects .project.title-is--hover .project-name .project-title {
    max-width: 100%;
    color: var(--section-h4-text-color);
  }
  .ufo--user-projects .project.title-is--hover .project-name .project-subtitle {
    max-width: 100%;
    color: var(--section-p1-text-color);
  }
}
@media (max-width: 768px), (max-width: 768px) and (orientation: landscape), (min-device-width: 768px) and (max-device-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2), (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .ufo--user-projects .project .image-container {
    height: auto;
  }
  .ufo--user-projects .project.title-is--hover .project-name, .ufo--user-projects .project.title-is--right .project-name, .ufo--user-projects .project.title-is--left .project-name, .ufo--user-projects .project.title-is--alternating .project-name, .ufo--user-projects .project.title-is--on-thumbnail .project-name {
    position: relative;
    height: auto;
    width: auto;
    padding: 22px 0 0 0;
    margin-bottom: 20px;
    opacity: 1;
    background-color: transparent !important;
    order: 2;
  }
  .ufo--user-projects .project.title-is--hover .project-name .project-title, .ufo--user-projects .project.title-is--right .project-name .project-title, .ufo--user-projects .project.title-is--left .project-name .project-title, .ufo--user-projects .project.title-is--alternating .project-name .project-title, .ufo--user-projects .project.title-is--on-thumbnail .project-name .project-title {
    max-width: 100%;
    color: var(--section-h4-text-color);
  }
  .ufo--user-projects .project.title-is--hover .project-name .project-subtitle, .ufo--user-projects .project.title-is--right .project-name .project-subtitle, .ufo--user-projects .project.title-is--left .project-name .project-subtitle, .ufo--user-projects .project.title-is--alternating .project-name .project-subtitle, .ufo--user-projects .project.title-is--on-thumbnail .project-name .project-subtitle {
    max-width: 100%;
    color: var(--section-p1-text-color);
  }
  .ufo--user-projects .project.title-is--below .project-name, .ufo--user-projects .project.title-is--above .project-name {
    order: initial;
  }
  .ufo--user-projects .project.title-is--below, .ufo--user-projects .project.title-is--above {
    margin-bottom: 0;
  }
  .ufo--user-projects .project.title-is--right .project-name .project-title, .ufo--user-projects .project.title-is--left .project-name .project-title, .ufo--user-projects .project.title-is--alternating .project-name .project-title {
    color: var(--thumbnail-title-text-color);
  }
  .ufo--user-projects .project.title-is--right .project-name .project-subtitle, .ufo--user-projects .project.title-is--left .project-name .project-subtitle, .ufo--user-projects .project.title-is--alternating .project-name .project-subtitle {
    color: var(--thumbnail-subtitle-text-color);
  }
  .ufo--user-projects .project.title-is--alternating .project-name {
    padding-top: 0;
  }
  .ufo--user-projects .project.title-is--alternating .image-container {
    width: 100%;
    padding-top: 86%;
  }
  .ufo--user-projects .project.title-is--left .image-container, .ufo--user-projects .project.title-is--right .image-container, .ufo--user-projects .project.title-is--alternating .image-container {
    width: 100%;
    padding-top: 100%;
  }
  .ufo--user-projects .project.title-is--left .project-name, .ufo--user-projects .project.title-is--right .project-name, .ufo--user-projects .project.title-is--alternating .project-name {
    width: 100%;
  }
  .profile_theme_nine .ufo--user-projects .project:not(.title-is--below):not(.title-is--above) .project-name .project-title {
    --projectTitleColor: #282a2b;
  }
  .profile_theme_nine .ufo--user-projects .project:not(.title-is--below):not(.title-is--above) .project-name .project-subtitle {
    --projectSubTitleColor: #282a2b;
  }
}
@media (min-width: 1025px) {
  .profile-page .profile_theme_one.ufo--user-projects {
    padding-top: 0;
  }
  .ufo--user-projects .project.title-is--below .project-name {
    margin-bottom: 20px;
  }
  .ufo--user-projects .project.thumbnail-is--medium.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating .image-container {
    padding-top: 100%;
  }
  .ufo--user-projects .project.thumbnail-is--medium.title-is--left .project-name, .ufo--user-projects .project.thumbnail-is--medium.title-is--right .project-name, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--left .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--right .project-name, .ufo--user-projects .project.thumbnail-is--small.title-is--alternating .project-name {
    position: absolute;
    height: 100%;
  }
  .ufo--user-projects .project.thumbnail-is--medium.title-is--left .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--right .image-container, .ufo--user-projects .project.thumbnail-is--medium.title-is--alternating .image-container {
    padding-top: 87.5%;
  }
}
@media (max-width: 768px) {
  .ufo--user-projects .project .project-name, .ufo--user-projects .project.thumbnail-is--large .project-name {
    gap: 12px;
  }
  .thumbnail-is--large .mockups-container.align-text-right, .thumbnail-is--large .mockups-container.align-text-left {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.ufo--portfolio-page {
  background-color: var(--background-fill-color, #FFFFFF);
}

.settings-panel {
  background: var(--base00);
}
.settings-panel .profile_theme_default,
.settings-panel .profile_theme_default_old {
  background: var(--base00);
}
.settings-panel .profile-editor.profile-page.profile_theme_two,
.settings-panel .profile-editor.profile-page.profile_theme_three,
.settings-panel .profile-editor.profile-page.profile_theme_four {
  padding-top: 78px;
}

.profile-page {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}
.profile-page.profile_theme_default, .profile-page.profile_theme_default_old {
  padding-top: 24px;
}
.profile-page.profile_theme_default .profile_theme_default .ufo--page-hero-content.has-picture, .profile-page.profile_theme_default_old .profile_theme_default .ufo--page-hero-content.has-picture {
  margin-top: 39px;
}
.profile-page.profile--profile_theme_one.profile--hp {
  padding-top: 0;
}
.ufo--page-hero .ufo--page-hero-text ul, .ufo--page-hero .ufo--page-hero-text ol {
  display: flex;
  flex-direction: column;
}
.ufo--page-hero .ufo--page-hero-text.align-text-left * {
  text-align: left !important;
}
.ufo--page-hero .ufo--page-hero-text.align-text-left ul, .ufo--page-hero .ufo--page-hero-text.align-text-left ol {
  align-items: flex-start;
}
.ufo--page-hero .ufo--page-hero-text.align-text-center * {
  text-align: center !important;
}
.ufo--page-hero .ufo--page-hero-text.align-text-center ul, .ufo--page-hero .ufo--page-hero-text.align-text-center ol {
  align-items: center;
}
.ufo--page-hero .ufo--page-hero-text.align-text-right * {
  text-align: right !important;
}
.ufo--page-hero .ufo--page-hero-text.align-text-right ul, .ufo--page-hero .ufo--page-hero-text.align-text-right ol {
  align-items: flex-end;
}
.ufo--page-hero .ufo--page-hero-text a {
  color: var(--link-color);
}
.ufo--page-hero .ufo--page-hero-text a:hover, .ufo--page-hero .ufo--page-hero-text a:active, .ufo--page-hero .ufo--page-hero-text a:focus {
  color: var(--link-color-hover);
}
.ufo--page-hero .profile-links {
  position: relative;
}
.ufo--page-hero .profile-button {
  line-height: initial;
}

.profile-name,
.navbar-id,
.navbar-id a,
.ufo--site-nav-owner,
.ufo--site-nav-owner-id .name,
.ufo--site-nav-button .btn,
.social-links a,
.social-links::after,
.ufo--site-nav-sidebar-toggle,
.navbar-item .btn,
.footer-link {
  font-family: var(--hero-nav-button-font);
  font-size: var(--hero-nav-button-size);
  font-weight: var(--hero-nav-button-weight);
  font-style: var(--hero-nav-button-style);
  line-height: var(--hero-nav-button-height);
  color: var(--hero-nav-button-text-color);
}
@media (max-width: 1024px) {
  .profile-name,
  .navbar-id,
  .navbar-id a,
  .ufo--site-nav-owner,
  .ufo--site-nav-owner-id .name,
  .ufo--site-nav-button .btn,
  .social-links a,
  .social-links::after,
  .ufo--site-nav-sidebar-toggle,
  .navbar-item .btn,
  .footer-link {
    font-size: var(--hero-nav-button-size-tablet);
    line-height: var(--hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile-name,
  .navbar-id,
  .navbar-id a,
  .ufo--site-nav-owner,
  .ufo--site-nav-owner-id .name,
  .ufo--site-nav-button .btn,
  .social-links a,
  .social-links::after,
  .ufo--site-nav-sidebar-toggle,
  .navbar-item .btn,
  .footer-link {
    font-size: var(--hero-nav-button-size-mobile);
    line-height: var(--hero-nav-button-height-mobile);
  }
}

.ufo--site-nav {
  position: relative;
  width: 100%;
  max-width: 1288px;
  z-index: 3;
  margin: 0 auto;
  padding-top: 15px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: unset;
}
@media (min-width: 1024px) {
  .ufo--site-nav {
    justify-content: space-between;
  }
}
.ufo--site-nav.nav-is-on {
  justify-content: flex-end;
  padding-top: var(--gridGap);
}
.ufo--site-nav .ufo--site-nav-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.ufo--site-nav .ufo--site-nav-sidebar-toggle {
  display: none;
}
@media (min-width: 768px) {
  .ufo--site-nav .ufo--site-nav-sidebar-toggle {
    display: flex;
    align-items: center;
    background: transparent;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle:focus {
    outline: none;
    border: none;
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin-right: 16px;
    background-color: var(--hero-nav-button-text-color);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle span:before, .ufo--site-nav .ufo--site-nav-sidebar-toggle span:after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--hero-nav-button-text-color);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle span:before {
    transform: translateY(-6px);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle span:after {
    transform: translateY(4px);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle:hover, .ufo--site-nav .ufo--site-nav-sidebar-toggle:active {
    color: var(--hero-nav-button-text-color-hover);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle:hover span, .ufo--site-nav .ufo--site-nav-sidebar-toggle:active span {
    background-color: var(--hero-nav-button-text-color-hover);
  }
  .ufo--site-nav .ufo--site-nav-sidebar-toggle:hover span:before, .ufo--site-nav .ufo--site-nav-sidebar-toggle:hover span:after, .ufo--site-nav .ufo--site-nav-sidebar-toggle:active span:before, .ufo--site-nav .ufo--site-nav-sidebar-toggle:active span:after {
    background-color: var(--hero-nav-button-text-color-hover);
  }
}
.ufo--site-nav .ufo-site-nav-sidebar-close {
  display: none;
}
@media (min-width: 768px) {
  .ufo--site-nav .ufo-site-nav-sidebar-close {
    display: block;
    width: 15px;
    height: 15px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
  }
  .ufo--site-nav .ufo-site-nav-sidebar-close:focus {
    outline: none;
    border: none;
  }
  .ufo--site-nav .ufo-site-nav-sidebar-close:before, .ufo--site-nav .ufo-site-nav-sidebar-close:after {
    content: "";
    display: block;
    width: 15px;
    height: 1px;
    background-color: var(--hero-nav-button-text-color);
    transform-origin: center;
  }
  .ufo--site-nav .ufo-site-nav-sidebar-close:before {
    transform: rotate(-45deg) translate(-2px, -1px);
  }
  .ufo--site-nav .ufo-site-nav-sidebar-close:after {
    transform: rotate(45deg) translate(-2px, 2px);
  }
}
.ufo--site-nav .social-links {
  display: flex;
}
.ufo--site-nav .social-links a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-property: color, border-color, background-color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  color: var(--hero-nav-button-text-color);
}
.ufo--site-nav .social-links a:hover, .ufo--site-nav .social-links a:active {
  --hero-nav-button-text-color: var(--hero-nav-button-text-color-hover);
  --border-color: var(--hero-nav-button-text-color-hover);
  background-color: var(--background-fill-color);
}
@media (min-width: 768px) {
  .ufo--site-nav.profile_theme_four .ufo--site-nav-container, .ufo--site-nav.profile_theme_six .ufo--site-nav-container, .ufo--site-nav.theme_six .ufo--site-nav-container, .ufo--site-nav.profile_theme_nine .ufo--site-nav-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    transition-property: left;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
  }
  .ufo--site-nav.profile_theme_four .ufo--site-nav-container.visible, .ufo--site-nav.profile_theme_six .ufo--site-nav-container.visible, .ufo--site-nav.theme_six .ufo--site-nav-container.visible, .ufo--site-nav.profile_theme_nine .ufo--site-nav-container.visible {
    left: 0;
  }
}
.ufo--site-nav.theme_five .social-links a, .ufo--site-nav.theme_ten .social-links a {
  background-color: transparent;
  border: none;
}

.ufo--site-owner {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-right: auto;
  padding-top: 24px;
}
.ufo--site-owner .info {
  color: var(--hero-nav-button-text-color, #FFFFFF);
}
.ufo--site-owner .info.dark {
  --hero-nav-button-text-color: #353738;
}
.ufo--site-owner .picture {
  min-width: 30px;
  width: 30px;
  height: 30px;
  background: #edf1f1;
  margin-right: 10px;
  border-radius: 50%;
  float: left;
  overflow: hidden;
}
.ufo--site-owner .picture img {
  height: 30px;
  width: 100%;
  object-fit: cover;
}
.ufo--site-owner .name {
  font-size: 0.75rem;
  line-height: 1;
  font-family: var(--secondarySans);
}
.ufo--site-owner .company {
  font-size: 0.625rem;
  font-family: var(--secondarySans);
  font-style: italic;
}
@media (min-width: 768px) {
  .ufo--site-owner .picture {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .ufo--site-owner .picture img {
    height: 50px;
  }
  .ufo--site-owner .name {
    font-size: 1rem;
  }
  .ufo--site-owner .company {
    font-size: 0.75rem;
  }
}

.ufo--branding {
  --hero-nav-button-text-color: var(--base00);
  font-size: 0.65rem;
  color: var(--hero-nav-button-text-color);
  font-family: var(--secondarySans);
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-indent: -99999px;
  width: 60px;
  position: relative;
}
.ufo--branding .uxfolio-logo {
  width: 52px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 0;
}
.ufo--branding.dark {
  --hero-nav-button-text-color: #353738;
}
.ufo--branding:hover, .ufo--branding:active {
  color: var(--hero-nav-button-text-color);
  text-decoration: none;
}
.ufo--branding.floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 32px;
  padding: 8px 14px;
  border-radius: 4px;
  box-shadow: 3px 3px 10px 0 rgba(196, 196, 196, 0.5);
  background-color: var(--base00, #FFFFFF);
  font-family: var(--primarySans);
  color: #c3c3c3;
  text-indent: unset;
  flex-direction: row;
  width: unset;
  z-index: 2;
  --hero-nav-button-text-color: #868484 !important;
}
.ufo--branding.floating .uxfolio-logo {
  float: right;
  position: relative;
  top: unset;
  left: unset;
}
@media (min-width: 768px) {
  .ufo--branding.floating {
    bottom: 30px;
    right: 30px;
  }
}
@media (min-width: 400px) {
  .ufo--branding {
    flex-direction: row;
    height: 20px;
    text-indent: 0;
    width: auto;
  }
  .ufo--branding .uxfolio-logo {
    float: right;
    position: relative;
    top: auto;
    left: auto;
  }
}
@media (min-width: 768px) {
  .ufo--branding {
    font-size: 0.75rem;
  }
  .ufo--branding .uxfolio-logo {
    margin-left: 5px;
  }
}

.profile_theme_default .navbar {
  padding: 0 24px 30px 24px !important;
}
@media (min-width: 768px) {
  .profile_theme_default .navbar {
    padding: 0 0 30px 0 !important;
  }
}
.profile_theme_default .navbar {
  overflow: hidden;
}
.profile_theme_default .navbar .navbar-container {
  gap: 28px !important;
}
.profile_theme_default .navbar .btn {
  margin: 0 !important;
}
.profile_theme_default .navbar .btn:not(.active) {
  font-weight: 400;
}
.profile_theme_default .navbar .ufo--page-nav-controls {
  width: 100%;
  left: unset;
  right: unset;
  margin: 0;
}
.profile_theme_default .social-links {
  gap: 8px !important;
  flex-direction: row;
  justify-content: center;
}
.profile_theme_default .social-links.align-left {
  justify-content: flex-start;
}
.profile_theme_default .social-links.align-right {
  justify-content: flex-end;
}
.profile_theme_default .social-links a {
  flex: 0 1 0;
  min-width: 22px !important;
  min-height: 22px !important;
  aspect-ratio: 1/1;
  font-size: var(--hero-nav-button-size);
  padding: var(--hero-nav-button-size) !important;
  line-height: 1;
  overflow: hidden;
  --textColor: var(--base00);
  --background-color: transparent;
}
@media (max-width: 1024px) {
  .profile_theme_default .social-links a {
    font-size: var(--hero-nav-button-size-tablet);
    padding: var(--hero-nav-button-size-tablet) !important;
  }
}
@media (max-width: 768px) {
  .profile_theme_default .social-links a {
    font-size: var(--hero-nav-button-size-mobile);
    padding: var(--hero-nav-button-size-mobile) !important;
  }
}
.profile_theme_default .social-links a:hover, .profile_theme_default .social-links a:active {
  color: var(--hero-nav-button-text-color-hover);
  --border-color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_default.ufo--site-nav .navbar {
  padding-top: 24px;
  padding-bottom: 24px;
  overflow: unset;
}
.profile_theme_default.ufo--site-nav .navbar-container {
  width: 100%;
}
.profile_theme_default.ufo--site-nav .navbar-container .social-links {
  flex-direction: row !important;
}
@media (min-width: 768px) {
  .profile_theme_default.ufo--site-nav .navbar-container .social-links {
    margin-left: auto;
  }
}

.profile_theme_one .navbar {
  padding: 0 !important;
}
.profile_theme_one .navbar-container {
  gap: 20px !important;
  flex-wrap: wrap;
}
.profile_theme_one .navbar-item {
  margin: 20px 0 0 0;
}
.profile_theme_one .navbar-item .btn {
  padding: 6px 18px;
  min-height: 32px;
  border-radius: 0;
  letter-spacing: 0.5px;
  outline: solid 1px var(--border-color);
  transition-property: color, background-color;
  transition-duration: 0.2s;
}
.profile_theme_one .navbar-item .btn:not(.editable):hover, .profile_theme_one .navbar-item .btn:not(.editable):focus {
  --background-color: #42424233;
}
@media (min-width: 768px) {
  .profile_theme_one .social-links {
    order: -1;
    margin-right: 16px;
  }
}
.profile_theme_one .social-links {
  margin-right: 40px;
  margin-left: 0;
}
.profile_theme_one .social-links a {
  min-width: 32px !important;
  min-height: 32px !important;
  height: initial;
  margin-top: 20px;
  padding: 8px;
  font-size: var(--buttonSize);
  overflow: hidden;
  --textColor: #42424299;
  --background-color: transparent;
}
.profile_theme_one .social-links a:hover, .profile_theme_one .social-links a:focus {
  --background-color: #42424233;
}
@media (min-width: 768px) {
  .profile_theme_one.ufo--site-nav .navbar-container {
    width: 100%;
  }
}
.profile_theme_one.ufo--site-nav .social-links {
  order: 2;
  text-align: center;
  margin-right: 0;
}
@media (min-width: 768px) {
  .profile_theme_one.ufo--site-nav .social-links {
    margin-left: auto;
  }
}
.profile_theme_one.ufo--site-nav .social-links {
  flex-direction: row !important;
  justify-content: center !important;
}
.profile_theme_one.profile-editor .navbar:hover .ufo--page-nav-controls .ufo-fab--container {
  visibility: visible;
  opacity: 1;
}
.profile_theme_one.profile-editor .ufo--page-nav-controls {
  width: 100% !important;
  left: unset !important;
  right: unset !important;
  margin-left: unset !important;
  margin-right: unset !important;
}
.profile_theme_one.profile-editor .ufo--page-nav-controls .ufo-fab--container {
  pointer-events: auto;
  z-index: 1;
  transform: translate(0, -50%) !important;
  visibility: hidden;
  opacity: 0;
}

.profile_theme_two .navbar-container {
  flex-wrap: wrap;
  gap: 10px !important;
}
.profile_theme_two .navbar-item .btn {
  padding: 4px 18px;
  min-height: 36px;
  border-radius: 18px;
  letter-spacing: 0.5px;
  outline: solid 1px var(--border-color);
}
.profile_theme_two .navbar-item .btn:hover, .profile_theme_two .navbar-item .btn:focus {
  color: var(--hero-nav-button-text-color-hover);
  outline-color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_two .social-links {
  justify-content: flex-start !important;
  order: 4;
  margin-top: 20px;
  gap: 10px !important;
}
.profile_theme_two .social-links:not(.editor) {
  width: 100%;
}
@media (min-width: 768px) {
  .profile_theme_two.ufo--site-nav {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .profile_theme_two.ufo--site-nav .navbar-container {
    width: 100%;
  }
}
.profile_theme_two.ufo--site-nav .navbar-item {
  margin-bottom: 0;
}
.profile_theme_two.ufo--site-nav .social-links {
  width: auto;
  flex-direction: row !important;
  justify-content: center !important;
}
@media (min-width: 768px) {
  .profile_theme_two.ufo--site-nav .social-links {
    margin-left: auto;
    margin-top: 0;
  }
}

.profile-editor .profile_theme_two .navbar:hover .ufo--page-nav-controls .ufo-fab--container {
  visibility: visible;
  opacity: 1;
}
.profile-editor .profile_theme_two .ufo--page-nav-controls {
  width: 100% !important;
  left: unset !important;
  right: unset !important;
  margin-left: unset !important;
  margin-right: unset !important;
}
.profile-editor .profile_theme_two .ufo--page-nav-controls .ufo-fab--container {
  pointer-events: auto;
  z-index: 1;
  transform: translate(0, -50%) !important;
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 768px) {
  .profile_theme_three .navbar-item {
    margin: 18px 0;
  }
}
.profile_theme_three .navbar-item:nth-child(3) {
  margin-left: 0;
}
.profile_theme_three .navbar-item .btn {
  letter-spacing: 2.6px;
  background-color: transparent;
}
.profile_theme_three .navbar-item .btn:active, .profile_theme_three .navbar-item .btn.active {
  font-weight: 900;
}
.profile_theme_three .navbar-item .btn:not(.editable):hover, .profile_theme_three .navbar-item .btn:not(.editable):focus {
  font-weight: 900;
}
.profile_theme_three .profile-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.profile_theme_three .social-links {
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row;
}
.profile_theme_three .navbar {
  padding: 0 !important;
}
.profile_theme_three .navbar-container {
  margin: 24px auto 8px 0;
  gap: 28px !important;
}
@media (min-width: 768px) {
  .profile_theme_three .navbar-container {
    position: relative;
    width: 100%;
    height: auto;
    flex-direction: row;
    background: transparent;
    justify-content: flex-start;
    margin: 62px 0;
  }
  .profile_theme_three .navbar-container .navbar-item {
    margin: 0;
  }
  .profile_theme_three .navbar-container .navbar-item:first-child:nth-last-child(3) + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three .navbar-container .navbar-item:first-child:nth-last-child(4) + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three .navbar-container .navbar-item:first-child:nth-last-child(5) + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three .navbar-container .navbar-item:first-child:nth-last-child(6) + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three .navbar-container .navbar-item:first-child:nth-last-child(7) + .navbar-item + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three .navbar-container .navbar-item .btn {
    letter-spacing: 0.5px;
  }
}
.profile_theme_three .navbar-toggle {
  position: absolute;
  top: 24px;
  right: 0;
}
.profile_theme_three.ufo--site-nav .navbar {
  padding: 0;
}
.profile_theme_three.ufo--site-nav .navbar-container {
  margin: 0;
}
.profile_theme_three.ufo--site-nav .ufo--page-hero-image {
  display: none;
}
.profile_theme_three.ufo--site-nav .ufo--site-nav-items {
  width: 100%;
}
.profile_theme_three.ufo--site-nav .ufo--site-nav-owner-id {
  display: none;
}
@media (min-width: 768px) {
  .profile_theme_three.ufo--site-nav .ufo--site-nav-owner-id {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .profile_theme_three.ufo--site-nav .ufo--site-nav-owner-id img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
}

.profile_theme_four .navbar {
  flex-wrap: wrap;
  width: 100%;
  margin-top: auto;
}
@media (min-width: 640px) {
  .profile_theme_four .navbar-container {
    height: 100%;
  }
}
.profile_theme_four .navbar-item {
  display: inline-flex;
}
.profile_theme_four .navbar-item .btn {
  letter-spacing: 0.5px;
  --background-color: transparent;
}
.profile_theme_four .navbar-item .btn:active:hover, .profile_theme_four .navbar-item .btn:active:focus, .profile_theme_four .navbar-item .btn.active:hover, .profile_theme_four .navbar-item .btn.active:focus, .profile_theme_four .navbar-item .btn:not(.editable):hover, .profile_theme_four .navbar-item .btn:not(.editable):focus {
  font-weight: 600;
}
.profile_theme_four .ufo--page-nav-controls {
  width: 100% !important;
  left: unset !important;
  right: unset !important;
  margin-left: unset !important;
  margin-right: unset !important;
}
.profile_theme_four .social-links {
  gap: 18px !important;
  width: 100%;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
.profile_theme_four .social-links a {
  width: 24px;
  height: 24px;
  min-width: 24px !important;
  min-height: 24px !important;
  font-size: 12px;
  margin: 0;
}
.profile_theme_four .social-links a:hover {
  --background-color: #60676d33;
}
@media (min-width: 640px) {
  .profile_theme_four .navbar {
    padding: 0 !important;
  }
}
@media (min-width: 768px) {
  .profile_theme_four .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (min-width: 640px) {
  .profile_theme_four .navbar-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
}
@media (max-width: 768px) {
  .profile_theme_four .navbar-container:not(.no-mob) {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    background-color: var(--background-fill-color, #FFFFFF);
    transition: top 200ms ease-in-out;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .profile_theme_four .profile-picture {
    margin-top: 32px;
  }
}
@media (max-width: 768px) {
  .profile_theme_four:not(.ufo--site-nav) .navbar-toggle {
    margin-top: 0 !important;
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 48px;
  }
}
.profile_theme_four:not(.ufo--site-nav) .navbar-toggle.on .close {
  display: block;
}
.profile_theme_four:not(.ufo--site-nav) .navbar-toggle.on .open {
  display: none;
}
.profile_theme_four.ufo--site-nav.nav-is-on {
  justify-content: flex-start;
}
.profile_theme_four.ufo--site-nav.nav-is-on .ufo--site-nav-sidebar-toggle {
  padding: 0;
}
.profile_theme_four.ufo--site-nav .ufo-site-nav-sidebar-close:before, .profile_theme_four.ufo--site-nav .ufo-site-nav-sidebar-close:after {
  background-color: var(--portfolio-hero-nav-button-color);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id {
  display: none;
}
@media (min-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 50px;
  }
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id .image {
    margin-right: 16px;
  }
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id .image img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id .name {
    margin-right: 16px;
    font-family: var(--portfolio-hero-nav-button-font);
    font-size: var(--portfolio-hero-nav-button-size);
    font-weight: var(--portfolio-hero-nav-button-weight);
    font-style: var(--portfolio-hero-nav-button-style);
    line-height: var(--portfolio-hero-nav-button-height);
    color: var(--portfolio-hero-nav-button-text-color);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id .name {
    font-size: var(--portfolio-hero-nav-button-size-tablet);
    line-height: var(--portfolio-hero-nav-button-height-tablet);
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-owner-id .name {
    font-size: var(--portfolio-hero-nav-button-size-mobile);
    line-height: var(--portfolio-hero-nav-button-height-mobile);
  }
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container h1 {
  font-family: var(--portfolio-hero-h1-font);
  font-size: var(--portfolio-hero-h1-size);
  font-weight: var(--portfolio-hero-h1-weight);
  font-style: var(--portfolio-hero-h1-style);
  line-height: var(--portfolio-hero-h1-height);
  color: var(--portfolio-hero-h1-text-color);
  --bottom-margin: calc(0.2 * (var(--hero-h1-size) * var(--hero-h1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
@media (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container h1 {
    font-size: var(--portfolio-hero-h1-size-tablet);
    line-height: var(-portfolio-hero-h1-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h1-size-tablet) * var(-portfolio-hero-h1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container h1 {
    font-size: var(--portfolio-hero-h1-size-mobile);
    line-height: var(-portfolio-hero-h1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h1-size-mobile) * var(-portfolio-hero-h1-height-mobile)) + 12.8px);
  }
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container h2, .profile_theme_four.ufo--site-nav .ufo--site-nav-container h3 {
  font-family: var(--portfolio-hero-h2-font);
  font-size: var(--portfolio-hero-h2-size);
  font-weight: var(--portfolio-hero-h2-weight);
  font-style: var(--portfolio-hero-h2-style);
  line-height: var(--portfolio-hero-h2-height);
  color: var(--portfolio-hero-h2-text-color);
  --bottom-margin: calc(0.2 * calc(var(--portfolio-hero-h2-size) * var(--portfolio-hero-h2-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container h2 + h1, .profile_theme_four.ufo--site-nav .ufo--site-nav-container h3 + h1 {
  padding-top: calc((0.2 * var(--portfolio-hero-h1-size) * var(--portfolio-hero-h1-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container h2, .profile_theme_four.ufo--site-nav .ufo--site-nav-container h3 {
    font-size: var(--portfolio-hero-h2-size-tablet);
    line-height: var(--portfolio-hero-h2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h2-size-tablet) * var(--portfolio-hero-h2-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container h2, .profile_theme_four.ufo--site-nav .ufo--site-nav-container h3 {
    font-size: var(--portfolio-hero-h2-size-mobile);
    line-height: var(--portfolio-hero-h2-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h2-size-mobile) * var(--portfolio-hero-h2-height-mobile)) + 12.8px);
  }
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container p, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ul, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ol {
  font-family: var(--portfolio-hero-p1-font);
  font-size: var(--portfolio-hero-p1-size);
  font-weight: var(--portfolio-hero-p1-weight);
  font-style: var(--portfolio-hero-p1-style);
  line-height: var(--portfolio-hero-p1-height);
  color: var(--portfolio-hero-p1-text-color);
  --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size) * var(--portfolio-hero-p1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container p + h1, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ul + h1, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ol + h1 {
  padding-top: calc((0.2 * var(--portfolio-hero-h1-size) * var(--portfolio-hero-h1-height) + 12.8px) * 0.5);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container p + h2, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ul + h2, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ol + h2 {
  padding-top: calc((0.2 * var(--portfolio-hero-h2-size) * var(--portfolio-hero-h2-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container p, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ul, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ol {
    font-size: var(--portfolio-hero-p1-size-tablet);
    line-height: var(--portfolio-hero-p2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size-tablet) * var(--portfolio-hero-p1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container p, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ul, .profile_theme_four.ufo--site-nav .ufo--site-nav-container ol {
    font-size: var(--portfolio-hero-p1-size-mobile);
    line-height: var(--portfolio-hero-p1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size-mobile) * var(--portfolio-hero-p1-height-mobile)) + 12.8px);
  }
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container a {
  color: var(--portfolio-link-color);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container a:hover, .profile_theme_four.ufo--site-nav .ufo--site-nav-container a:active, .profile_theme_four.ufo--site-nav .ufo--site-nav-container a:focus {
  color: var(--portfolio-link-color-hover);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .btn {
  font-family: var(--portfolio-hero-nav-button-font);
  font-size: var(--portfolio-hero-nav-button-size);
  font-weight: var(--portfolio-hero-nav-button-weight);
  font-style: var(--portfolio-hero-nav-button-style);
  line-height: var(--portfolio-hero-nav-button-height);
  color: var(--portfolio-hero-nav-button-text-color);
}
@media (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container .btn {
    font-size: var(--portfolio-hero-nav-button-size-tablet);
    line-height: var(--portfolio-hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container .btn {
    font-size: var(--portfolio-hero-nav-button-size-mobile);
    line-height: var(--portfolio-hero-nav-button-height-mobile);
  }
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .btn:hover, .profile_theme_four.ufo--site-nav .ufo--site-nav-container .btn:active {
  color: var(--portfolio-hero-nav-button-text-color-hover);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a {
  color: var(--portfolio-social-icon-text-color);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a:hover, .profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a:active {
  color: var(--portfolio-social-icon-text-color-hover);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a.icon {
  color: var(--portfolio-social-icon-text-color);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a.icon:hover:not(.active), .profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a.icon:hover:not(:active) {
  color: var(--portfolio-social-icon-text-color-hover);
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a[class*=box-] {
  outline: solid 1px var(--portfolio-social-icon-outline-color, var(--border-color));
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container .social-links a[class*=box-]:hover {
  outline-color: var(--portfolio-social-icon-outline-color-hover, var(--portfolio-hero-nav-button-text-color-hover));
}
.profile_theme_four.ufo--site-nav .ufo--site-nav-container {
  background-color: var(--portfolio-background-fill-color);
}
@media (min-width: 768px) {
  .profile_theme_four.ufo--site-nav .ufo--site-nav-container {
    justify-content: flex-start;
    width: 321px !important;
    padding: 34px !important;
  }
}
.profile_theme_four.ufo--site-nav .navbar-container {
  gap: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .profile_theme_four.ufo--site-nav .navbar-container {
    height: max-content;
  }
}
.profile_theme_four.ufo--site-nav .navbar-container .navbar-item {
  margin: 0;
  font-family: var(--portfolio-hero-nav-button-font);
  font-size: var(--portfolio-hero-nav-button-size);
  font-weight: var(--portfolio-hero-nav-button-weight);
  font-style: var(--portfolio-hero-nav-button-style);
  line-height: var(--portfolio-hero-nav-button-height);
}
@media (max-width: 1024px) {
  .profile_theme_four.ufo--site-nav .navbar-container .navbar-item {
    font-size: var(--portfolio-hero-nav-button-size-tablet);
    line-height: var(--portfolio-hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile_theme_four.ufo--site-nav .navbar-container .navbar-item {
    font-size: var(--portfolio-hero-nav-button-size-mobile);
    line-height: var(--portfolio-hero-nav-button-height-mobile);
  }
}
.profile_theme_four.ufo--site-nav .navbar-container .navbar-item .btn:hover {
  color: var(--portfolio-hero-nav-button-color-hover);
}
@media (min-width: 768px) {
  .profile_theme_four.ufo--site-nav .navbar-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
.profile_theme_four.ufo--site-nav .social-links {
  justify-content: center !important;
  flex-direction: row !important;
  margin-top: 40px;
  order: 2;
}
@media (min-width: 768px) {
  .profile_theme_four.ufo--site-nav .social-links {
    margin-top: 30px;
    margin-bottom: 0;
    justify-content: flex-start !important;
  }
}
.profile_theme_four.ufo--site-nav .ufo--page-hero-image {
  display: none;
}

.profile-editor .profile_theme_four .navbar:hover .ufo--page-nav-controls .ufo-fab--container {
  visibility: visible;
  opacity: 1;
}
.profile-editor .profile_theme_four .ufo--page-nav-controls {
  width: 100% !important;
  bottom: 0 !important;
  top: unset !important;
  left: unset !important;
  right: unset !important;
  margin-left: unset !important;
  margin-right: unset !important;
}
.profile-editor .profile_theme_four .ufo--page-nav-controls .ufo-fab--container {
  pointer-events: auto;
  z-index: 1;
  transform: translate(0, -50%) !important;
  visibility: hidden;
  opacity: 0;
}

.profile_theme_five .navbar {
  padding: 0 !important;
}
.profile_theme_five .navbar-item .btn {
  --background-color: transparent;
}
.profile_theme_five .navbar-item .btn:not(.editable):hover, .profile_theme_five .navbar-item .btn:not(.editable):focus {
  font-weight: 900;
}
.profile_theme_five .navbar-item .btn:active, .profile_theme_five .navbar-item .btn.active {
  font-weight: 900;
}
.profile_theme_five .navbar-toggle {
  top: 18px;
}
.profile_theme_five .social-links a:hover, .profile_theme_five .social-links a:focus {
  font-weight: 900;
}
@media (min-width: 768.5px) {
  .profile_theme_five .navbar-container {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    margin: 64px auto 0;
    flex-direction: row;
    background-color: transparent;
  }
}
.profile_theme_five.ufo--site-nav .navbar {
  padding: 0;
}
.profile_theme_five.ufo--site-nav .navbar-toggle {
  top: 0;
}
.profile_theme_five.ufo--site-nav .navbar-logo {
  margin-right: 36px;
  position: relative;
  z-index: 9;
}
.profile_theme_five.ufo--site-nav .navbar-container {
  margin: 0 auto;
}

.profile_theme_five.profile-editor .social-content {
  margin: 0 auto;
}
.profile_theme_five.profile-editor .ufo--page-hero-content.about-view .navbar-container {
  margin-bottom: 32px;
}
.profile_theme_five.profile-editor .ufo--page-hero-content.about-view .navbar-container button,
.profile_theme_five.profile-editor .ufo--page-hero-content.about-view .social-links a {
  --textColor: #424242 !important;
}
.profile_theme_five.profile-editor .ufo--page-nav-controls {
  margin-top: 32px;
}

.profile_theme_six .navbar {
  padding: 0 !important;
}
@media (max-width: 768px) {
  .profile_theme_six .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.profile_theme_six .navbar-item:nth-child(3), .profile_theme_six .navbar-item.contact-button {
  margin-left: 0;
}
.profile_theme_six .navbar-item .btn {
  text-transform: none;
  background-color: transparent;
}
.profile_theme_six .navbar-item .btn:active, .profile_theme_six .navbar-item .btn.active {
  font-weight: 900;
}
.profile_theme_six .navbar-item .btn:not(.editable):hover, .profile_theme_six .navbar-item .btn:not(.editable):focus {
  font-weight: 900;
}
.profile_theme_six .navbar-toggle {
  position: absolute;
  top: 24px;
  right: 0;
}
@media (min-width: 768.5px) {
  .profile_theme_six .navbar-container {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    margin: 0 auto 110px;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 15px;
    background-color: transparent;
    padding-right: 24px;
  }
  .profile_theme_six .navbar-container .navbar-item {
    margin: 0;
    padding-bottom: 16px;
    position: relative;
  }
  .profile_theme_six .navbar-container .navbar-item:nth-last-child(1) {
    grid-column-start: 6;
  }
  .profile_theme_six .navbar-container .navbar-item:nth-last-child(2) {
    grid-column-start: 5;
  }
  .profile_theme_six .navbar-container .navbar-item:nth-last-child(3) {
    grid-column-start: 4;
  }
  .profile_theme_six .navbar-container .navbar-item:nth-last-child(4) {
    grid-column-start: 3;
  }
  .profile_theme_six .navbar-container .navbar-item:nth-last-child(5) {
    grid-column-start: 2;
  }
  .profile_theme_six .navbar-container .navbar-item .btn {
    letter-spacing: 0.5px;
    min-height: 26px;
    width: 100%;
    text-align: left;
  }
}
.profile_theme_six .profile-links {
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .profile_theme_six .profile-links {
    flex-direction: column !important;
    left: initial;
    right: 24px;
    top: 50%;
    bottom: initial;
    transform: translateY(-50%);
    width: 32px;
  }
}
@media (min-width: 1270px) {
  .profile_theme_six .profile-links {
    right: -72px;
  }
}
@media (min-width: 768px) {
  .profile_theme_six .social-links {
    flex-direction: column !important;
  }
}
.profile_theme_six .social-links {
  gap: 20px;
}
.profile_theme_six .social-links a {
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  font-size: 14px;
  justify-content: center;
  --background-color: transparent;
}
.profile_theme_six .social-links a:hover, .profile_theme_six .social-links a:focus {
  color: var(--hero-nav-button-text-color-hover);
  border-color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_six .social-links a:after {
  content: "";
}
@media (min-width: 768px) {
  .profile_theme_six .social-links {
    flex-direction: column;
    gap: 20px;
  }
  .profile_theme_six .social-links a {
    padding: 0;
  }
  .profile_theme_six .social-links a:nth-last-child(1) {
    margin-bottom: 0;
  }
}
.profile_theme_six .no-profile-picture .profile-links {
  left: 0;
  right: initial;
  transform: none;
}
.profile_theme_six .no-profile-picture .profile-links .social-links a {
  margin-left: 0;
  border-color: var(--hero-nav-button-text-color);
}
@media (min-width: 768px) {
  .profile_theme_six .no-profile-picture .profile-links {
    left: initial;
    right: -72px;
    transform: translate(-50%, -50%);
  }
  .profile_theme_six .no-profile-picture .social-links a {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .profile_theme_six .social-content {
    width: 32px;
  }
}
.profile_theme_six.ufo--site-nav {
  z-index: 4;
}
@media (min-width: 768px) {
  .profile_theme_six.ufo--site-nav .ufo--site-nav-sidebar-toggle {
    margin-left: auto;
    flex-direction: column;
    text-transform: none;
  }
  .profile_theme_six.ufo--site-nav .ufo--site-nav-sidebar-toggle span {
    width: 100%;
    height: 4px;
    transform: translateY(38px);
    margin-right: 0;
  }
  .profile_theme_six.ufo--site-nav .ufo--site-nav-sidebar-toggle span:before, .profile_theme_six.ufo--site-nav .ufo--site-nav-sidebar-toggle span:after {
    content: none;
  }
}
.profile_theme_six.ufo--site-nav .ufo--site-nav-owner-id {
  align-self: flex-end;
}
.profile_theme_six.ufo--site-nav .ufo--site-nav-container {
  background-color: var(--background-fill-color);
}
@media (min-width: 768px) {
  .profile_theme_six.ufo--site-nav .ufo--site-nav-container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 321px !important;
    padding: 34px 50px !important;
    left: initial;
    right: -100%;
    transition-property: right;
  }
  .profile_theme_six.ufo--site-nav .ufo--site-nav-container.visible {
    right: 0;
    left: initial;
  }
  .profile_theme_six.ufo--site-nav .ufo--site-nav-container .navbar-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
  }
}
.profile_theme_six.ufo--site-nav .social-links {
  flex-direction: row !important;
  justify-content: center;
  margin-top: 40px !important;
}
@media (min-width: 768px) {
  .profile_theme_six.ufo--site-nav .social-links {
    margin: 0;
    flex-direction: row;
    justify-content: flex-start;
  }
}

.profile_theme_six.profile-editor .ufo--page-nav-controls .ufo-fab--container {
  top: 10%;
}

.profile_theme_seven .navbar {
  padding: 0 !important;
}
@media (max-width: 768px) {
  .profile_theme_seven .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .profile_theme_seven .navbar {
    position: absolute !important;
    top: 68px;
    left: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    background: transparent;
  }
  .profile_theme_seven .navbar .navbar-item .btn {
    letter-spacing: 0.5px;
  }
}
.profile_theme_seven .navbar .ufo--site-nav-items {
  width: 100%;
}
.profile_theme_seven .navbar-item:nth-child(3), .profile_theme_seven .navbar-item.contact-button {
  margin-left: 0;
}
.profile_theme_seven .navbar-item .btn {
  --background-color: transparent;
  letter-spacing: 2.6px;
}
.profile_theme_seven .navbar-item .btn:active, .profile_theme_seven .navbar-item .btn.active {
  font-weight: 700;
}
.profile_theme_seven .navbar-item .btn:not(.editable):hover, .profile_theme_seven .navbar-item .btn:not(.editable):focus {
  font-weight: 700;
}
.profile_theme_seven .social-links {
  margin-bottom: 20px;
}
.profile_theme_seven .navbar-toggle {
  position: absolute;
  top: 24px;
  right: 0;
}
.profile_theme_seven .no-profile-picture .social-links {
  margin-left: auto;
  margin-right: auto;
}
.profile_theme_seven.ufo--site-nav .navbar {
  padding: 0;
}
.profile_theme_seven.ufo--site-nav .navbar-container {
  gap: 36px;
}
.profile_theme_seven.ufo--site-nav .ufo--site-nav-container {
  position: relative;
  top: initial;
}

@media (min-width: 768px) {
  .profile_theme_eight .navbar-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    top: auto;
    height: auto;
  }
  .profile_theme_eight .navbar-container .ufo--site-nav-owner {
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .profile_theme_eight .navbar .ufo--site-nav-owner {
    position: absolute;
    top: 40px;
    left: 24px;
  }
}
.profile_theme_eight.ufo--site-nav .navbar {
  padding: 0;
}
.profile_theme_eight.ufo--site-nav .navbar-logo {
  position: relative;
  z-index: 9;
}
.profile_theme_eight.ufo--site-nav .navbar-id {
  display: block;
  width: 100%;
}

.casestudy-editor .profile_theme_eight .navbar-id {
  display: block;
  width: max-content;
}

.profile_theme_nine .ufo--site-nav-container {
  gap: 32px;
}
.profile_theme_nine .ufo--site-nav-container h1 {
  font-family: var(--portfolio-hero-h1-font);
  font-size: var(--portfolio-hero-h1-size);
  font-weight: var(--portfolio-hero-h1-weight);
  font-style: var(--portfolio-hero-h1-style);
  line-height: var(--portfolio-hero-h1-height);
  color: var(--portfolio-hero-h1-text-color);
  --bottom-margin: calc(0.2 * (var(--hero-h1-size) * var(--hero-h1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
@media (max-width: 1024px) {
  .profile_theme_nine .ufo--site-nav-container h1 {
    font-size: var(--portfolio-hero-h1-size-tablet);
    line-height: var(-portfolio-hero-h1-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h1-size-tablet) * var(-portfolio-hero-h1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container h1 {
    font-size: var(--portfolio-hero-h1-size-mobile);
    line-height: var(-portfolio-hero-h1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h1-size-mobile) * var(-portfolio-hero-h1-height-mobile)) + 12.8px);
  }
}
.profile_theme_nine .ufo--site-nav-container h2, .profile_theme_nine .ufo--site-nav-container h3 {
  font-family: var(--portfolio-hero-h2-font);
  font-size: var(--portfolio-hero-h2-size);
  font-weight: var(--portfolio-hero-h2-weight);
  font-style: var(--portfolio-hero-h2-style);
  line-height: var(--portfolio-hero-h2-height);
  color: var(--portfolio-hero-h2-text-color);
  --bottom-margin: calc(0.2 * calc(var(--portfolio-hero-h2-size) * var(--portfolio-hero-h2-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_nine .ufo--site-nav-container h2 + h1, .profile_theme_nine .ufo--site-nav-container h3 + h1 {
  padding-top: calc((0.2 * var(--portfolio-hero-h1-size) * var(--portfolio-hero-h1-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_nine .ufo--site-nav-container h2, .profile_theme_nine .ufo--site-nav-container h3 {
    font-size: var(--portfolio-hero-h2-size-tablet);
    line-height: var(--portfolio-hero-h2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h2-size-tablet) * var(--portfolio-hero-h2-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container h2, .profile_theme_nine .ufo--site-nav-container h3 {
    font-size: var(--portfolio-hero-h2-size-mobile);
    line-height: var(--portfolio-hero-h2-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-h2-size-mobile) * var(--portfolio-hero-h2-height-mobile)) + 12.8px);
  }
}
.profile_theme_nine .ufo--site-nav-container p, .profile_theme_nine .ufo--site-nav-container ul, .profile_theme_nine .ufo--site-nav-container ol {
  font-family: var(--portfolio-hero-p1-font);
  font-size: var(--portfolio-hero-p1-size);
  font-weight: var(--portfolio-hero-p1-weight);
  font-style: var(--portfolio-hero-p1-style);
  line-height: var(--portfolio-hero-p1-height);
  color: var(--portfolio-hero-p1-text-color);
  --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size) * var(--portfolio-hero-p1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_nine .ufo--site-nav-container p + h1, .profile_theme_nine .ufo--site-nav-container ul + h1, .profile_theme_nine .ufo--site-nav-container ol + h1 {
  padding-top: calc((0.2 * var(--portfolio-hero-h1-size) * var(--portfolio-hero-h1-height) + 12.8px) * 0.5);
}
.profile_theme_nine .ufo--site-nav-container p + h2, .profile_theme_nine .ufo--site-nav-container ul + h2, .profile_theme_nine .ufo--site-nav-container ol + h2 {
  padding-top: calc((0.2 * var(--portfolio-hero-h2-size) * var(--portfolio-hero-h2-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_nine .ufo--site-nav-container p, .profile_theme_nine .ufo--site-nav-container ul, .profile_theme_nine .ufo--site-nav-container ol {
    font-size: var(--portfolio-hero-p1-size-tablet);
    line-height: var(--portfolio-hero-p2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size-tablet) * var(--portfolio-hero-p1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container p, .profile_theme_nine .ufo--site-nav-container ul, .profile_theme_nine .ufo--site-nav-container ol {
    font-size: var(--portfolio-hero-p1-size-mobile);
    line-height: var(--portfolio-hero-p1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--portfolio-hero-p1-size-mobile) * var(--portfolio-hero-p1-height-mobile)) + 12.8px);
  }
}
.profile_theme_nine .ufo--site-nav-container a {
  color: var(--portfolio-hero-link-text-color);
}
.profile_theme_nine .ufo--site-nav-container a:hover, .profile_theme_nine .ufo--site-nav-container a:active, .profile_theme_nine .ufo--site-nav-container a:focus {
  color: var(--portfolio-link-color-hover);
}
.profile_theme_nine .ufo--site-nav-container .btn {
  font-family: var(--portfolio-hero-nav-button-font);
  font-size: var(--portfolio-hero-nav-button-size);
  font-weight: var(--portfolio-hero-nav-button-weight);
  font-style: var(--portfolio-hero-nav-button-style);
  line-height: var(--portfolio-hero-nav-button-height);
  color: var(--portfolio-hero-nav-button-text-color);
}
@media (max-width: 1024px) {
  .profile_theme_nine .ufo--site-nav-container .btn {
    font-size: var(--portfolio-hero-nav-button-size-tablet);
    line-height: var(--portfolio-hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container .btn {
    font-size: var(--portfolio-hero-nav-button-size-mobile);
    line-height: var(--portfolio-hero-nav-button-height-mobile);
  }
}
.profile_theme_nine .ufo--site-nav-container .btn:hover, .profile_theme_nine .ufo--site-nav-container .btn:active {
  color: var(--portfolio-hero-nav-button-text-color-hover);
}
.profile_theme_nine .ufo--site-nav-container .social-links a {
  color: var(--portfolio-social-icon-text-color);
}
.profile_theme_nine .ufo--site-nav-container .social-links a:hover, .profile_theme_nine .ufo--site-nav-container .social-links a:active {
  color: var(--portfolio-social-icon-text-color-hover);
}
.profile_theme_nine .ufo--site-nav-container .social-links a.icon {
  color: var(--portfolio-social-icon-text-color);
}
.profile_theme_nine .ufo--site-nav-container .social-links a.icon:hover:not(.active), .profile_theme_nine .ufo--site-nav-container .social-links a.icon:hover:not(:active) {
  color: var(--portfolio-social-icon-text-color-hover);
}
.profile_theme_nine .ufo--site-nav-container .social-links a[class*=box-] {
  outline: solid 1px var(--portfolio-social-icon-outline-color, var(--border-color));
}
.profile_theme_nine .ufo--site-nav-container .social-links a[class*=box-]:hover {
  outline-color: var(--portfolio-social-icon-outline-color-hover, var(--portfolio-hero-nav-button-text-color-hover));
}
.profile_theme_nine .ufo--site-nav-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: auto;
}
.profile_theme_nine .ufo--site-nav-container .navbar-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: var(--portfolio-hero-nav-button-font);
  font-size: var(--portfolio-hero-nav-button-size);
  font-weight: var(--portfolio-hero-nav-button-weight);
  font-style: var(--portfolio-hero-nav-button-style);
}
@media (max-width: 1024px) {
  .profile_theme_nine .ufo--site-nav-container .navbar-item {
    font-size: var(--portfolio-hero-nav-button-size-tablet);
    line-height: var(--portfolio-hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container .navbar-item {
    font-size: var(--portfolio-hero-nav-button-size-mobile);
    line-height: var(--portfolio-hero-nav-button-height-mobile);
  }
}
.profile_theme_nine .ufo--site-nav-container .navbar-item:after {
  content: attr(data-text);
  content: attr(data-text)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
  color: transparent;
}
@media speech {
  .profile_theme_nine .ufo--site-nav-container .navbar-item:after {
    display: none;
  }
}
.profile_theme_nine .ufo--site-nav-container .navbar-item .btn {
  background-color: transparent;
  border: none;
  text-transform: none;
}
.profile_theme_nine .ufo--site-nav-container .navbar-item .btn:hover, .profile_theme_nine .ufo--site-nav-container .navbar-item .btn.active {
  font-weight: 700;
  background-color: transparent !important;
  color: var(--portfolio-hero-nav-button-color-hover);
}
@media (min-width: 768px) {
  .profile_theme_nine .ufo--site-nav-container {
    position: relative;
    top: auto;
    height: auto;
    flex-direction: row;
  }
  .profile_theme_nine .ufo--site-nav-container .navbar-item .btn {
    background-color: transparent;
    border: none;
    text-transform: none;
  }
  .profile_theme_nine .ufo--site-nav-container .navbar-item .btn.active, .profile_theme_nine .ufo--site-nav-container .navbar-item .btn:not(.editable):hover {
    font-weight: 700;
    background-color: transparent !important;
  }
}
.profile_theme_nine .social-links {
  padding-top: 1px;
  gap: 10px !important;
  margin-bottom: 24px;
  --border-color: var(--portfolio-border-color);
}
.profile_theme_nine .social-links a {
  width: 36px;
  height: 36px;
}
.profile_theme_nine .navbar-toggle {
  top: 0;
}
.profile_theme_nine .navbar {
  margin-top: auto;
  padding: 0 !important;
}
.profile_theme_nine .navbar:hover .ufo--page-nav-controls .ufo-fab--container {
  visibility: visible;
  opacity: 1;
}
.profile_theme_nine .navbar-container {
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
@media (min-width: 768px) {
  .profile_theme_nine .navbar-container {
    gap: 32px !important;
  }
}
@media (max-width: 768px) {
  .profile_theme_nine .navbar-container:not(.no-mob) {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    background-color: var(--portfolio-sidebar-background-color);
    transition: top 200ms ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .profile_theme_nine .navbar-container:not(.no-mob).on {
    top: 0;
  }
}
@media (max-width: 768px) {
  .profile_theme_nine:not(.ufo--site-nav) .navbar-toggle {
    margin-top: 0 !important;
    position: absolute;
    top: -14px;
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 48px;
  }
}
.profile_theme_nine:not(.ufo--site-nav) .navbar-toggle.on .close {
  display: block;
}
.profile_theme_nine:not(.ufo--site-nav) .navbar-toggle.on .open {
  display: none;
}
.profile_theme_nine.ufo--site-nav .ufo--page-hero-image {
  display: none;
}
.profile_theme_nine.ufo--site-nav .navbar {
  padding: 40px !important;
}
.profile_theme_nine.ufo--site-nav .ufo-site-nav-sidebar-close:before, .profile_theme_nine.ufo--site-nav .ufo-site-nav-sidebar-close:after {
  background-color: var(--portfolio-hero-nav-button-color);
}
@media (min-width: 768px) {
  .profile_theme_nine.ufo--site-nav .ufo-site-nav-sidebar-close {
    position: absolute;
    top: 40px;
    right: 40px;
  }
}
.profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id {
  display: none;
}
@media (min-width: 768px) {
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 60px);
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id.align-content-to-top {
    justify-content: flex-start;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .image {
    margin-bottom: 50px;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .image img {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    object-fit: cover;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .ufo--page-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio {
    overflow: hidden;
    position: relative;
    padding-bottom: 60px;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text {
    height: 100%;
    margin-bottom: 0;
    overflow-y: scroll;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text::-webkit-scrollbar {
    display: none;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text ul, .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text ol {
    display: flex;
    flex-direction: column;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-left * {
    text-align: left !important;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-left ul, .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-left ol {
    align-items: flex-start;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-center * {
    text-align: center !important;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-center ul, .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-center ol {
    align-items: center;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-right * {
    text-align: right !important;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-right ul, .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.align-text-right ol {
    align-items: flex-end;
  }
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .profile-bio .ufo--page-hero-text.scrollable::after {
    content: "";
    background-image: linear-gradient(to bottom, transparent 0%, var(--portfolio-sidebar-background-color));
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 30%;
    display: block;
    pointer-events: none;
  }
}
.profile_theme_nine.ufo--site-nav .ufo--site-nav-owner-id .description {
  text-align: center;
}
.profile_theme_nine.ufo--site-nav .ufo--site-nav-container {
  flex-wrap: unset;
  background-color: var(--portfolio-sidebar-background-color);
  gap: 32px;
}
@media (min-width: 768px) {
  .profile_theme_nine.ufo--site-nav .ufo--site-nav-container {
    justify-content: center !important;
    align-items: center;
    width: 35% !important;
    padding: 40px;
  }
}
.profile_theme_nine.ufo--site-nav .navbar-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: auto;
}
@media (min-width: 768px) {
  .profile_theme_nine.ufo--site-nav .navbar-container {
    flex-direction: row;
  }
}
.profile_theme_nine.ufo--site-nav .social-links a {
  background-color: transparent;
}
.profile_theme_nine.profile-editor .navbar:hover .ufo--page-nav-controls .ufo-fab--container {
  visibility: visible;
  opacity: 1;
}
.profile_theme_nine.profile-editor .ufo--page-nav-controls {
  width: 100% !important;
  left: unset !important;
  right: -30px !important;
  margin-left: unset !important;
  margin-right: unset !important;
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.profile_theme_nine.profile-editor .ufo--page-nav-controls .ufo-fab--container {
  pointer-events: auto;
  z-index: 1;
  transform: translate(0, -50%) !important;
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 768px) {
  .theme_thirteen .ufo--site-nav-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    top: auto;
    height: auto;
  }
  .theme_thirteen .ufo--site-nav-container .ufo--site-nav-owner {
    margin-right: auto;
  }
  .theme_thirteen .ufo--site-nav-container .navbar-item .btn {
    height: max-content;
    text-transform: none;
    --background-color: transparent;
  }
  .theme_thirteen .ufo--site-nav-container .navbar-item .btn.active, .theme_thirteen .ufo--site-nav-container .navbar-item .btn:not(.editable):hover {
    font-weight: bold;
  }
}
@media (max-width: 768px) {
  .theme_thirteen .ufo--site-nav-container .ufo--site-nav-owner {
    position: absolute;
    top: 40px;
    left: 24px;
  }
}
.theme_thirteen.ufo--page-hero .navbar-item .btn {
  --background-color: transparent;
}

@media (min-width: 768px) {
  .theme_fourteen .ufo--site-nav-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    top: auto;
    height: auto;
  }
  .theme_fourteen .ufo--site-nav-container .ufo--site-nav-owner {
    margin-right: auto;
  }
  .theme_fourteen .ufo--site-nav-container .navbar-item .btn {
    height: max-content;
    text-transform: none;
    --background-color: transparent;
  }
  .theme_fourteen .ufo--site-nav-container .navbar-item .btn.active, .theme_fourteen .ufo--site-nav-container .navbar-item .btn:not(.editable):hover {
    font-weight: bold;
  }
}
@media (max-width: 768px) {
  .theme_fourteen .ufo--site-nav-container .ufo--site-nav-owner {
    position: absolute;
    top: 40px;
    left: 24px;
  }
}
.theme_fourteen.ufo--page-hero .navbar-item .btn {
  --background-color: transparent;
}

@media (min-width: 768px) {
  .theme_fifteen .ufo--site-nav-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    top: auto;
    height: auto;
  }
  .theme_fifteen .ufo--site-nav-container .ufo--site-nav-owner {
    margin-right: auto;
  }
  .theme_fifteen .ufo--site-nav-container .navbar-item .btn {
    height: max-content;
    text-transform: none;
    --background-color: transparent;
  }
  .theme_fifteen .ufo--site-nav-container .navbar-item .btn.active, .theme_fifteen .ufo--site-nav-container .navbar-item .btn:not(.editable):hover {
    font-weight: bold;
  }
}
@media (max-width: 768px) {
  .theme_fifteen .ufo--site-nav-container .ufo--site-nav-owner {
    position: absolute;
    top: 40px;
    left: 24px;
  }
}
.theme_fifteen.ufo--page-hero .navbar-item .btn {
  --background-color: transparent;
}

.ufo--site-nav-container {
  display: flex;
  align-items: center;
  width: 100%;
}
@media (max-width: 768.5px) {
  .ufo--site-nav-container {
    position: fixed !important;
    top: -200% !important;
    left: 0 !important;
    height: 100vh !important;
    flex-direction: column !important;
    justify-content: center !important;
    --background-fill-color: rgba(255, 255, 255, 0.95);
    background-color: var(--background-fill-color) !important;
    transition: top 250ms ease-in-out !important;
    z-index: 5 !important;
  }
  .ufo--site-nav-container.visible {
    top: 0 !important;
  }
  .ufo--site-nav-container .social-links {
    margin-top: 30px;
  }
}

@media (min-width: 768px) {
  .casestudy-editor .ufo--site-nav.profile_theme_four .ufo--site-nav-container, .casestudy-editor .ufo--site-nav.profile_theme_six .ufo--site-nav-container, .casestudy-editor .ufo--site-nav.theme_six .ufo--site-nav-container, .casestudy-editor .ufo--site-nav.profile_theme_nine .ufo--site-nav-container {
    height: calc(100vh - 56px);
    top: 56px;
  }
}

.transparent .ufo--page-hero-background {
  grid-row: 1;
}
.transparent .ufo--page-hero-content {
  position: unset !important;
}
.transparent .ufo--page-hero-background {
  top: 0;
  background-attachment: unset !important;
}
.transparent .ufo--page-hero-background .ufo-fab--container {
  top: 40px !important;
}
.transparent .ufo--page-hero-controls .ufo-fab--container {
  top: 40px !important;
}

@media (min-width: 1024px) {
  .profile_theme_default .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0;
  }
}
.profile_theme_default .toggle-grid {
  position: absolute !important;
}
@media (min-width: 1024px) {
  .profile_theme_default .toggle-grid {
    padding: 0 !important;
  }
}
.profile_theme_default.ufo--portfolio-page {
  min-width: unset;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1182px;
  width: 100%;
  margin: 0 auto;
  overflow: unset;
}
@media (min-width: 768.5px) {
  .profile_theme_default.ufo--portfolio-page {
    grid-template-columns: repeat(12, minmax(10px, 1fr));
    grid-column-gap: 30px;
    padding: 24px;
    padding-top: 78px;
  }
}
.profile_theme_default .ufo--page-content {
  grid-column: 1/span 12;
  padding-bottom: 48px;
}
@media (min-width: 768.5px) {
  .profile_theme_default .ufo--page-content {
    grid-column: 4/span 9;
    padding-bottom: 96px;
    padding-left: 0;
    padding-right: 0;
  }
}
.profile_theme_default .ufo--page-hero {
  display: unset;
  margin: 0;
  grid-column: 1/span 12;
}
@media (min-width: 768.5px) {
  .profile_theme_default .ufo--page-hero {
    grid-column: 1/span 3;
  }
}
.profile_theme_default .ufo--page-hero-content {
  display: block;
  padding: 24px;
  background-color: var(--sidebar-background-fill-color, #FFFFFF);
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(71, 84, 97, 0.2);
  margin-bottom: 40px;
  z-index: 3;
}
@media (min-width: 992px) {
  .profile_theme_default .ufo--page-hero-content {
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
  }
}
.profile_theme_default .ufo--page-hero-content.has-picture {
  margin-top: 72px;
}
@media (min-width: 768.5px) {
  .profile_theme_default .ufo--page-hero-content.has-picture {
    margin-top: 0;
  }
}
.profile_theme_default .ufo--page-hero-content.has-picture .fake-cut {
  content: "";
  width: 106px;
  height: 56px;
  background-color: var(--background-fill-color);
  box-shadow: inset 0 0 2px 0 rgba(71, 84, 97, 0.2);
  border-bottom-left-radius: 106px;
  border-bottom-right-radius: 106px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.profile_theme_default .ufo--page-hero-content.has-picture .fake-cut-line {
  content: "";
  width: 104px;
  height: 3px;
  background: var(--background-fill-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
}
.profile_theme_default .ufo--page-hero-content.no-profile-picture {
  padding: 25px 25px 29px 25px;
}
.profile_theme_default .ufo--page-hero-content .profile-picture {
  width: max-content;
  margin-bottom: 16px;
  padding: 0;
}
.profile_theme_default .ufo--page-hero-content .profile-picture.display-overflow {
  position: relative;
  margin-top: -73px;
  margin-bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  border: solid 10px transparent;
  z-index: 1;
}
.profile_theme_default .ufo--page-hero-content .profile-picture img {
  object-fit: cover;
  width: 106px;
  height: 106px;
  border-radius: 50%;
}
.profile_theme_default .ufo--page-hero-content .profile-picture img.empty-state {
  object-fit: contain;
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text {
  font-family: var(--hero-p1-font);
  font-size: var(--hero-p1-size);
  font-weight: var(--hero-p1-weight);
  font-style: var(--hero-p1-style);
  line-height: var(--hero-p1-height);
  color: var(--hero-p1-text-color);
  clear: both;
  margin-bottom: 30px;
  word-wrap: break-word;
  white-space: break-spaces;
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h1 {
  --bottom-margin: calc(0.2 * (var(--hero-h1-size) * var(--hero-h1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
@media (max-width: 1024px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h1 {
    font-size: var(--hero-h1-size-tablet);
    line-height: var(--hero-h1-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-h1-size-tablet) * var(--hero-h1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h1 {
    font-size: var(--hero-h1-size-mobile);
    line-height: var(--hero-h1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-h1-size-mobile) * var(--hero-h1-height-mobile)) + 12.8px);
  }
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h2, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h3 {
  --bottom-margin: calc(0.2 * calc(var(--hero-h2-size) * var(--hero-h2-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h2 + h1, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h3 + h1 {
  padding-top: calc((0.2 * var(--hero-h1-size) * var(--hero-h1-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h2, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h3 {
    font-size: var(--hero-h2-size-tablet);
    line-height: var(--hero-h2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-h2-size-tablet) * var(--hero-h2-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h2, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h3 {
    font-size: var(--hero-h2-size-mobile);
    line-height: var(--hero-h2-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-h2-size-mobile) * var(--hero-h2-height-mobile)) + 12.8px);
  }
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ul, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ol {
  --bottom-margin: calc(0.2 * (var(--hero-p1-size) * var(--hero-p1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p + h1, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ul + h1, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ol + h1 {
  padding-top: calc((0.2 * var(--hero-h1-size) * var(--hero-h1-height) + 12.8px) * 0.5);
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p + h2, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ul + h2, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ol + h2 {
  padding-top: calc((0.2 * var(--hero-h2-size) * var(--hero-h2-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ul, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ol {
    font-size: var(--hero-p1-size-tablet);
    line-height: var(--hero-p2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-p1-size-tablet) * var(--hero-p1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ul, .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text ol {
    font-size: var(--hero-p1-size-mobile);
    line-height: var(--hero-p1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-p1-size-mobile) * var(--hero-p1-height-mobile)) + 12.8px);
  }
}
.profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h1:nth-last-child(1), .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h2:nth-last-child(1), .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h3:nth-last-child(1), .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text h4:nth-last-child(1), .profile_theme_default .ufo--page-hero-content .ufo--page-hero-text p:nth-last-child(1) {
  margin-bottom: 0;
}
.profile_theme_default .ufo--page-content .ufo--page-sections {
  background: transparent;
  box-shadow: none;
}
.profile_theme_default .home-editor.ufo--page-sections {
  background: transparent;
  box-shadow: none;
}
.profile_theme_default .ufo-sec--projectgrid .grid {
  --gridGap: 48px;
}
.profile_theme_default .ufo-sec .ufo-fab--container.left, .profile_theme_default .ufo-sec .ufo-fab--container.right {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(0) !important;
}
@media (min-width: 1280px) {
  .profile_theme_default .ufo-sec .ufo-fab--container.right {
    pointer-events: initial;
    transform: translateX(66px) !important;
  }
}
.profile_theme_default .ufo-sec:hover .ufo-fab--container.left, .profile_theme_default .ufo-sec:hover .ufo-fab--container.right {
  opacity: 1;
  visibility: visible;
}
.profile_theme_default .ufo-sec--gallery .carousel .carousel__arrows {
  width: 100%;
  margin: 0;
  left: unset;
  right: unset;
}
.profile_theme_default.profile-editor .ufo-sec--gallery {
  overflow: unset;
}
.profile_theme_default.profile-editor .ufo-sec--gallery .image-gallery > .carousel, .profile_theme_default.profile-editor .ufo-sec--gallery .image-gallery.tilted {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .profile_theme_default .ufo-sec--text .text-container,
  .profile_theme_default .ufo-sec--text .text-container.align-left,
  .profile_theme_default .ufo-sec--text .ufo--cta-btn-wr {
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .profile_theme_default .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-small {
    --grid-column-start: 1;
    --grid-column-span: 7;
  }
  .profile_theme_default .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-medium {
    --grid-column-start: 1;
    --grid-column-span: 6;
  }
  .profile_theme_default .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-large {
    --grid-column-start: 1;
    --grid-column-span: 5;
  }
  .profile_theme_default .ufo-sec--textandmedia .col-text.col.media-small {
    --grid-column-start: 6;
    --grid-column-span: 7;
  }
  .profile_theme_default .ufo-sec--textandmedia .col-text.col.media-medium {
    --grid-column-start: 7;
    --grid-column-span: 6;
  }
  .profile_theme_default .ufo-sec--textandmedia .col-text.col.media-large {
    --grid-column-start: 8;
    --grid-column-span: 5;
  }
}
.profile_theme_default .ufo-sec--media .media-container.display-mode--default, .profile_theme_default .ufo-sec--media .media-container.display-mode--full, .profile_theme_default .ufo-sec--media .media-container.display-mode--cover {
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
}
.profile_theme_default .ufo-sec--media .media-container.display-mode--large {
  grid-column: 2/span 10;
}
@media (min-width: 1024px) {
  .profile_theme_default .ufo-sec--contactform .ufo--contact-form {
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .profile_theme_default .ufo-sec--contactform .col-media {
    grid-column: 1/span 6;
  }
  .profile_theme_default .ufo-sec--contactform .col-media.col-order-2 {
    grid-column: 7/span 6;
  }
}

.footer-section .grid .footer-links.profile_theme_default .link-container .portfolio-pages .navbar-item .btn {
  text-transform: uppercase;
  font-weight: normal;
}
.footer-section .grid .footer-links.profile_theme_default .link-container .social-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
}
.footer-section .grid .footer-links.profile_theme_default .link-container .social-links .footer-link {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  justify-content: center;
  flex: 0 1 0;
}
.footer-section .grid .footer-links.profile_theme_default .link-container .social-links a {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1/1;
  margin: 0;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  overflow: hidden;
  border: solid 1px var(--border-color);
  padding: var(--hero-nav-button-size);
  line-height: 1;
}
@media (max-width: 1024px) {
  .footer-section .grid .footer-links.profile_theme_default .link-container .social-links a {
    padding: var(--hero-nav-button-size-tablet);
  }
}
@media (max-width: 768px) {
  .footer-section .grid .footer-links.profile_theme_default .link-container .social-links a {
    padding: var(--hero-nav-button-size-mobile);
  }
}

.profile-editor.profile_theme_default .ufo--page-hero {
  grid-row: 1;
  z-index: 4;
}
@media (min-width: 768px) {
  .profile-editor.profile_theme_default .ufo--page-hero {
    grid-row: 1/span 2;
  }
}
.profile-editor.profile_theme_default .ufo--page {
  grid-row: 3;
}
@media (min-width: 768px) {
  .profile-editor.profile_theme_default .ufo--page {
    grid-row: 2/span 2;
  }
}
@media (min-width: 992px) {
  .profile-editor.profile_theme_default .ufo--page-hero-content {
    top: 104px;
  }
}

.profile_theme_one:not(.ufo--site-nav) {
  --border-color: #42424233;
}
.profile_theme_one .ufo--page-hero-content {
  padding-top: 24px;
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .profile_theme_one .ufo--page-hero-content {
    flex-direction: row;
    margin-bottom: 130px;
  }
}
@media (min-width: 1024px) {
  .profile_theme_one .ufo--page-hero-content {
    padding-top: 180px;
  }
  .profile_theme_one .ufo--page-hero-content.has-picture {
    padding-top: 0;
  }
}
.profile_theme_one .ufo--page-hero-content.has-picture {
  display: flex;
}
.profile_theme_one .ufo--page-hero-content.has-picture .profile-picture {
  max-width: 100%;
  padding: 100% 15px 0 15px;
  margin-bottom: 24px;
}
.profile_theme_one .ufo--page-hero-content.has-picture .profile-short-cv {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .profile_theme_one .ufo--page-hero-content.has-picture .profile-picture {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    margin-right: 24px;
    margin-bottom: 0;
    padding: 0;
    height: 460px;
  }
  .profile_theme_one .ufo--page-hero-content.has-picture .profile-picture img {
    position: relative;
    top: auto;
    left: auto;
  }
  .profile_theme_one .ufo--page-hero-content.has-picture .profile-short-cv {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 0;
  }
}
.profile_theme_one .ufo--page-hero-content .profile-picture {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.profile_theme_one .ufo--page-hero-content .profile-picture.empty {
  background-color: #e6eaeb;
}
.profile_theme_one .ufo--page-hero-content .profile-picture [class*=cts-module-] {
  width: 100%;
  height: 100%;
}
.profile_theme_one .ufo--page-hero-content .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: absolute;
  top: 0;
  left: 0;
}
.profile_theme_one .ufo--page-hero-content .profile-picture img.empty-state {
  object-position: center;
}
.profile_theme_one .ufo--page-hero-content .ufo--page-hero-text {
  margin-bottom: 50px;
  font-family: var(--section-p1-font);
  max-width: 725px;
}
@media (min-width: 768px) {
  .profile_theme_one .ufo--page-hero-content .ufo--page-hero-text {
    font-size: 1.25rem;
  }
}
.profile_theme_one .ufo--page-hero-content .profile-name {
  font-size: 3rem;
  text-align: left;
  color: #282a2b;
  font-family: var(--hero-h1-font);
  font-weight: bold;
  max-width: 725px;
  display: contents;
}
.profile_theme_one .ufo--page-hero-content .profile-name input,
.profile_theme_one .ufo--page-hero-content .profile-name textarea {
  font-size: 3rem;
  text-align: left;
  color: #282a2b;
  padding: 0;
  font-family: var(--hero-h1-font);
  font-weight: bold;
}
@media (min-width: 768px) {
  .profile_theme_one .ufo--page-hero-content .profile-name {
    font-size: 5rem;
    display: contents;
  }
  .profile_theme_one .ufo--page-hero-content .profile-name textarea {
    font-size: 5rem;
  }
}
.profile_theme_one .ufo--page-hero-content .profile-position {
  font-size: 1.35rem;
  text-align: left;
  color: #778390;
  margin: 20px 0 30px 0;
  font-style: normal;
  font-family: var(--hero-h2-font);
  max-width: 725px;
}
.profile_theme_one .ufo--page-hero-content .profile-position input {
  font-size: 1.35rem;
  text-align: left;
  color: #778390;
  font-style: normal;
  padding: 0;
  font-family: var(--hero-h2-font);
  background: transparent;
}
@media (min-width: 768px) {
  .profile_theme_one .ufo--page-hero-content .profile-position {
    font-size: 2.25rem;
  }
  .profile_theme_one .ufo--page-hero-content .profile-position input {
    font-size: 2.25rem;
  }
}

.profile_theme_two:not(.ufo--site-nav) {
  --border-color: #8d98a133;
}
.profile_theme_two .ufo--page-hero-content {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content {
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .profile_theme_two .ufo--page-hero-content {
    padding-top: 100px;
  }
}
.profile_theme_two .ufo--page-hero-content.no-profile-picture {
  margin-top: 76px;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content.no-profile-picture {
    overflow: inherit;
  }
  .profile_theme_two .ufo--page-hero-content.no-profile-picture .profile-picture {
    margin: 0;
    width: 0;
    height: 0;
  }
  .profile_theme_two .ufo--page-hero-content.no-profile-picture .profile-short-cv {
    padding-left: 0;
  }
}
.profile_theme_two .ufo--page-hero-content .profile-picture {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  float: left;
  margin-bottom: 20px;
}
.profile_theme_two .ufo--page-hero-content .profile-picture.empty {
  background-color: #e6eaeb;
}
.profile_theme_two .ufo--page-hero-content .profile-picture [class*=cts-module-] {
  width: 100%;
  height: 100%;
}
.profile_theme_two .ufo--page-hero-content .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_two .ufo--page-hero-content .profile-picture img.emtpty-state {
  object-fit: none;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content .profile-picture {
    max-width: 41.6666666667%;
    width: 100%;
    height: 660px;
    max-height: 660px;
    margin-bottom: 0;
  }
}
.profile_theme_two .ufo--page-hero-content .profile-short-cv {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content .profile-short-cv {
    max-width: 58.3333333333%;
    padding-left: 100px;
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
.profile_theme_two .ufo--page-hero-content .ufo--page-hero-text {
  display: inline-block;
  font-family: var(--section-p1-font);
  font-size: 1rem;
  margin-bottom: 20px;
  width: 100%;
  color: #8d98a1;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content .ufo--page-hero-text {
    position: relative;
    font-size: 1.5rem;
    margin-bottom: 35px;
  }
  .profile_theme_two .ufo--page-hero-content .ufo--page-hero-text:before {
    content: "";
    width: 175px;
    height: 4px;
    position: absolute;
    background: var(--hero-h1-text-color);
    left: -185px;
    top: calc(var(--hero-h1-size) * var(--hero-h1-height) / 2);
  }
}
.profile_theme_two .ufo--page-hero-content .profile-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.profile_theme_two .ufo--page-hero-content .profile-name {
  font-family: var(--hero-h1-font);
  font-size: 2.25rem;
  font-weight: inherit;
  text-align: left;
  width: 100%;
  color: #282a2b;
  display: block;
  position: relative;
}
.profile_theme_two .ufo--page-hero-content .profile-name textarea {
  font-family: var(--hero-h1-font);
  font-size: 2.4rem;
  font-weight: inherit;
  text-align: left;
  width: 100%;
  color: #282a2b;
  padding: 0;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content .profile-name {
    font-size: 3rem;
  }
  .profile_theme_two .ufo--page-hero-content .profile-name .name-line {
    width: 175px;
    height: 4px;
    background: var(--hero-h1-text-color);
    position: absolute;
    left: -185px;
    top: 28px;
  }
  .profile_theme_two .ufo--page-hero-content .profile-name textarea {
    font-size: 3rem;
  }
}
.profile_theme_two .ufo--page-hero-content .profile-position {
  display: inline-block;
  font-family: var(--hero-h2-font);
  font-size: 1.5rem;
  text-align: left;
  font-style: normal;
  margin: 16px 0 24px 0;
  width: 100%;
  color: #778390;
}
.profile_theme_two .ufo--page-hero-content .profile-position input {
  font-family: var(--hero-h2-font);
  font-size: 1.8rem;
  text-align: left;
  width: 100%;
  font-style: normal;
  color: #778390;
  padding: 0;
  background: transparent;
}
@media (min-width: 768px) {
  .profile_theme_two .ufo--page-hero-content .profile-position {
    font-size: 2.25rem;
    margin: 20px 0 40px 0;
  }
  .profile_theme_two .ufo--page-hero-content .profile-position input {
    font-size: 2.25rem;
    line-height: 1;
  }
}
.profile_theme_two .ufo--page-hero-content .account-settings {
  text-align: left;
}
.profile_theme_two .project-list-type.public {
  margin-top: 0;
}
.profile_theme_two .profile-footer a {
  border: none;
  border-radius: 0;
}
.profile_theme_two .footer-section .navbar-item {
  width: max-content;
}
.profile_theme_two .footer-section .social-links {
  margin: 0;
  width: auto !important;
}

@media (min-width: 768px) {
  .works_line_profile_theme_two {
    grid-column: 1/span 6;
    position: relative;
    margin: 50px 0;
  }
  .works_line_profile_theme_two:before {
    content: "";
    display: block;
    width: 100%;
    background: #d8d8d8;
    height: 1px;
  }
  .works_line_profile_theme_two:after {
    content: "WORK";
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    color: #c8c8c8;
    padding-left: 14px;
    position: absolute;
    right: -50px;
    top: -11px;
  }
}
.profile_theme_three:not(.ufo--site-nav) {
  padding-top: 0;
  --border-color: #282a2b33;
}
.profile_theme_three .ufo--page-hero {
  position: relative;
}
.profile_theme_three .ufo--page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile_theme_three .ufo--page-hero-content.no-profile-picture .profile-short-cv {
  margin-top: 0;
  padding-top: 84px;
}
@media (min-width: 768.5px) {
  .profile_theme_three .ufo--page-hero-content.no-profile-picture .profile-picture {
    margin: 0;
    width: 0;
    height: 0;
  }
  .profile_theme_three .ufo--page-hero-content.no-profile-picture .profile-short-cv {
    padding-top: 162px;
  }
}
.profile_theme_three .ufo--page-hero-content .profile-picture {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto 0 0;
  z-index: 6;
}
@media (max-width: 768px) {
  .profile_theme_three .ufo--page-hero-content .profile-picture {
    margin-top: 24px;
  }
}
.profile_theme_three .ufo--page-hero-content .profile-picture.empty {
  background-color: #e6eaeb;
  border-radius: 50%;
}
.profile_theme_three .ufo--page-hero-content .profile-picture img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_three .ufo--page-hero-content .profile-picture img.empty-state {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
}
@media (min-width: 768.5px) {
  .profile_theme_three .ufo--page-hero-content .profile-picture {
    position: absolute !important;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}
.profile_theme_three .ufo--page-hero-content .profile-short-cv {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}
.profile_theme_three .ufo--page-hero-content .profile-short-cv.no-picture {
  padding-top: 24px;
  margin-top: 0;
}
@media (min-width: 768.5px) {
  .profile_theme_three .ufo--page-hero-content .profile-short-cv {
    margin-top: 0;
    align-items: center;
  }
  .profile_theme_three .ufo--page-hero-content .profile-short-cv.no-picture {
    padding-top: 48px;
  }
}
.profile_theme_three .ufo--page-hero-content .ufo--page-hero-text {
  display: inline-block;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 56px;
}
@media (min-width: 768.5px) {
  .profile_theme_three .ufo--page-hero-content .ufo--page-hero-text {
    font-size: 24px;
    max-width: 725px;
  }
}
.profile_theme_three .ufo--page-hero-content .ufo--page-hero-text h1 {
  margin-bottom: 6px;
}
.profile_theme_three .ufo--page-hero-content .ufo--page-hero-text h2, .profile_theme_three .ufo--page-hero-content .ufo--page-hero-text h3 {
  margin-bottom: 12px;
}
.profile_theme_three .ufo--page-hero-content .account-settings {
  text-align: left;
}
.profile_theme_three .project-list-type.public {
  margin-top: 0;
}
.profile_theme_three .profile-short-cv .has-tooltip[tooltip-position=bottom]::before,
.profile_theme_three .profile-short-cv .has-tooltip[tooltip-position=bottom]::after {
  top: 70px;
}
.profile_theme_three .footer-section .social-links {
  margin: 0;
}

body.nav-on {
  overflow: hidden;
}

.profile_theme_four:not(.ufo--site-nav) {
  --border-color: #60676d33;
}
.profile_theme_four .project-wrapper .section-position-0 .ufo--space-helper--top {
  display: none !important;
}
.profile_theme_four .ufo--page-sections .section-container:first-child .ufo-sec {
  padding-top: 0 !important;
}
.profile_theme_four .grid {
  padding: 0;
}
.profile_theme_four .toggle-grid {
  padding: 0 !important;
}
.profile_theme_four.ufo--portfolio-page {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr);
  grid-gap: 24px;
  padding: 48px 24px;
}
@media (min-width: 640px) {
  .profile_theme_four.ufo--portfolio-page {
    grid-template-columns: minmax(10px, 250px) minmax(10px, 1fr);
    padding: 24px;
  }
}
@media (min-width: 992px) {
  .profile_theme_four.ufo--portfolio-page {
    grid-template-columns: minmax(10px, 310px) minmax(10px, 1fr);
    padding: 48px;
    grid-gap: var(--gridGap, 48px);
  }
}
.profile_theme_four .ufo--page-content,
.profile_theme_four .ufo--page-hero {
  grid-column: 1/span 2;
}
.profile_theme_four .ufo--page-content {
  max-width: 1344px;
}
@media (min-width: 640px) {
  .profile_theme_four .ufo--page-content {
    grid-column: 2;
  }
}
.profile_theme_four .ufo--page-hero {
  position: relative;
}
@media (min-width: 640px) {
  .profile_theme_four .ufo--page-hero {
    grid-column: 1;
  }
}
.profile_theme_four .ufo--page-hero-content {
  padding: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .profile_theme_four .ufo--page-hero-content {
    height: calc(100vh - 80px);
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
  }
}
@media (min-width: 992px) {
  .profile_theme_four .ufo--page-hero-content {
    top: var(--gridGap, 48px);
  }
}
.profile_theme_four .ufo--page-hero {
  width: 100%;
  margin: 0 0 36px 0;
}
@media (min-width: 640px) {
  .profile_theme_four .ufo--page-hero {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile_theme_four .ufo--page-hero {
    display: flex;
    flex-direction: column;
  }
}
.profile_theme_four .ufo--page-hero .profile-short-cv {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
.profile_theme_four .ufo--page-hero .profile-picture {
  width: 100%;
  padding-top: 100%;
  margin-bottom: 24px;
  position: relative;
}
.profile_theme_four .ufo--page-hero .profile-picture [class*=cts-module-] {
  box-sizing: content-box;
}
.profile_theme_four .ufo--page-hero .profile-picture [class*=cts-module-] img {
  width: calc(100% - var(--frameOffset) * 2);
  height: calc(100% - var(--frameOffset) * 2);
  top: var(--frameOffset);
  left: var(--frameOffset);
}
.profile_theme_four .ufo--page-hero .profile-picture [class*=cts-module-],
.profile_theme_four .ufo--page-hero .profile-picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile_theme_four .ufo--page-hero .no-profile-picture .profile-picture {
  margin: 0;
  width: 0;
  height: 0;
  padding-top: 0;
}
@media (max-width: 768px) {
  .profile_theme_four .ufo--page-hero .no-profile-picture .ufo--page-hero-text {
    margin-top: 36px;
  }
}
.profile_theme_four .ufo--page-hero .ufo--page-hero-text {
  font-size: 14px;
  color: #60676d;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .profile_theme_four .ufo--page-hero .ufo--page-hero-text {
    height: auto;
    overflow-y: scroll;
  }
  .profile_theme_four .ufo--page-hero .ufo--page-hero-text::-webkit-scrollbar {
    display: none;
  }
  .profile_theme_four .ufo--page-hero .ufo--page-hero-text {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .profile_theme_four .ufo--page-hero .ufo--page-hero-text.scrollable::after {
    content: "";
    background-image: linear-gradient(to bottom, transparent 0%, var(--background-fill-color));
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 30%;
    display: block;
    pointer-events: none;
  }
}
.profile_theme_four .ufo--page-hero .profile-name,
.profile_theme_four .ufo--page-hero .profile-name textarea {
  font-weight: 700;
  font-size: 26px;
  color: #282a2b;
  text-align: left;
}
.profile_theme_four .ufo--page-hero .profile-name {
  margin-bottom: 16px;
  z-index: 6;
}
.profile_theme_four .ufo--page-hero .profile-position,
.profile_theme_four .ufo--page-hero .profile-position input {
  font-size: 14px;
  color: #60676d;
  background: transparent;
  text-align: left;
  font-style: normal;
}
.profile_theme_four .ufo--page-hero .profile-position {
  margin-bottom: 16px;
  margin-top: 0;
  z-index: 6;
}
.profile_theme_four .ufo--page-hero .profile-position input {
  padding: 0;
}
.profile_theme_four .ufo-sec--projectgrid .grid {
  --gridGap: 24px;
}
@media (min-width: 1024px) {
  .profile_theme_four .ufo-sec--projectgrid .grid {
    --gridGap: 48px;
  }
}
.profile_theme_four .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.left, .profile_theme_four .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.right {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(0) !important;
}
.profile_theme_four .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.right {
  transform: translateX(48px) !important;
}
@media (min-width: 1870px) {
  .profile_theme_four .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.right {
    pointer-events: initial;
    transform: translateX(66px) !important;
  }
}
.profile_theme_four .ufo-sec:not(.ufo-sec--gallery):hover .ufo-fab--container.left, .profile_theme_four .ufo-sec:not(.ufo-sec--gallery):hover .ufo-fab--container.right {
  opacity: 1;
  visibility: visible;
}
.profile_theme_four .ufo-sec--gallery {
  overflow: hidden;
}
.profile_theme_four .ufo-sec--gallery .ufo-fab--container.gallery-edit-toolbar {
  right: 66px;
}
.profile_theme_four .ufo-sec--gallery .image-gallery > .carousel {
  overflow: hidden;
}
.profile_theme_four .ufo-sec--gallery .carousel .carousel__arrows {
  width: 100%;
  margin: 0;
  left: unset;
  right: unset;
}
@media (min-width: 1024px) {
  .profile_theme_four .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-small {
    --grid-column-start: 1;
    --grid-column-span: 7;
  }
  .profile_theme_four .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-medium {
    --grid-column-start: 1;
    --grid-column-span: 6;
  }
  .profile_theme_four .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-large {
    --grid-column-start: 1;
    --grid-column-span: 5;
  }
  .profile_theme_four .ufo-sec--textandmedia .col-text.col.media-small {
    --grid-column-start: 6;
    --grid-column-span: 7;
  }
  .profile_theme_four .ufo-sec--textandmedia .col-text.col.media-medium {
    --grid-column-start: 7;
    --grid-column-span: 6;
  }
  .profile_theme_four .ufo-sec--textandmedia .col-text.col.media-large {
    --grid-column-start: 8;
    --grid-column-span: 5;
  }
}
@media (min-width: 1024px) {
  .profile_theme_four .ufo-sec--media .media-container.display-mode--offgrid, .profile_theme_four .ufo-sec--media .media-container.display-mode--medium, .profile_theme_four .ufo-sec--media .media-container.display-mode--large {
    grid-column: 2/span 10;
  }
}
.profile_theme_four .ufo-sec--media .media-container.display-mode--default, .profile_theme_four .ufo-sec--media .media-container.display-mode--full, .profile_theme_four .ufo-sec--media .media-container.display-mode--large, .profile_theme_four .ufo-sec--media .media-container.display-mode--cover {
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
}
@media (min-width: 1024px) {
  .profile_theme_four .ufo-sec--contactform .col-media {
    grid-column: 1/span 6;
  }
  .profile_theme_four .ufo-sec--contactform .col-media.col-order-2 {
    grid-column: 7/span 6;
  }
}

@media (min-width: 640px) {
  .profile_theme_four.profile-editor .ufo--page-hero {
    position: relative;
    min-height: auto;
    top: 0;
  }
}
.profile_theme_four.profile-editor .ufo--page-hero .ufo--page-hero-content {
  height: calc(100vh - 104px);
  z-index: 4;
  top: 104px;
}
.profile_theme_four.profile-editor .ufo--page-hero .ufo--page-hero-text {
  overflow-y: visible;
}
.profile_theme_four.profile-editor .ufo--page-hero .ufo--page-hero-text .ufo--text-editor-toolbar {
  transform: translateX(0);
  margin-left: -5px;
  margin-right: 0;
}

.profile_theme_five:not(.ufo--site-nav) {
  padding-top: 0;
  --border-color: transparent;
}
.profile_theme_five .ufo--container {
  width: 100%;
  padding: 0;
}
.profile_theme_five .ufo--page-hero:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: var(--background-fill-color);
  z-index: 1;
}
@media (min-width: 768.5px) {
  .profile_theme_five .ufo--page-hero:before {
    content: none;
    display: none;
  }
}
.profile_theme_five .ufo--page-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.profile_theme_five .ufo--page-hero-content.no-profile-picture .profile-bio {
  margin-top: 0;
  padding-top: 24px;
}
.profile_theme_five .ufo--page-hero-content.no-profile-picture .profile-name,
.profile_theme_five .ufo--page-hero-content.no-profile-picture .profile-position {
  margin-left: 0;
}
.profile_theme_five .ufo--page-hero-content.about-view {
  min-height: initial;
}
.profile_theme_five .ufo--page-hero-content.collection-view .ufo--page-hero-text {
  pointer-events: all !important;
}
.profile_theme_five .ufo--page-hero-content .profile-hero {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  --background-color: #e6eaeb;
}
.profile_theme_five .ufo--page-hero-content .profile-cover {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.profile_theme_five .ufo--page-hero-content .profile-cover.empty {
  background-color: var(--background-fill-color);
}
.profile_theme_five .ufo--page-hero-content .profile-cover [class*=cts-module-] {
  width: 100%;
  height: 100%;
}
.profile_theme_five .ufo--page-hero-content .profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_five .ufo--page-hero-content .profile-cover img.empty-state {
  object-fit: none !important;
  object-position: center;
  transform: translate(275px, 37px);
}
.profile_theme_five .ufo--page-hero-content .profile-bio {
  width: 100%;
  margin: 100px auto 0;
  padding-bottom: 150px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.profile_theme_five .ufo--page-hero-content .profile-name {
  font-family: var(--hero-h1-font);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  color: var(--hero-nav-button-text-color);
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 6;
}
.profile_theme_five .ufo--page-hero-content .ufo--page-hero-text {
  margin: 120px 0;
  display: inline-block;
  font-size: 24px;
  width: 100%;
  max-width: 100%;
  text-align: left;
}
.profile_theme_five .ufo--page-hero-content .ufo--page-hero-text a:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_five .ufo--page-hero-content .account-settings {
  text-align: left;
}
.profile_theme_five .project-list-type.public {
  margin-top: 0;
}
.profile_theme_five .ufo--user-projects.empty {
  background-color: var(--base00);
}
.profile_theme_five .ufo--page-content {
  background-color: var(--background-fill-color);
  position: relative;
}
.profile_theme_five .ufo--user-projects {
  margin: 0 auto;
}
.profile_theme_five .profile-footer {
  background-color: var(--background-fill-color);
  position: relative;
  z-index: 1;
}
.profile_theme_five.profile-editor .profile-cover .ufo-fab--container {
  top: 270px;
  right: 10px;
}
.profile_theme_five.profile-editor .ufo--user-projects {
  margin-bottom: 0;
}
.profile_theme_five.profile-editor .ufo--page-hero,
.profile_theme_five.profile-editor .ufo--page-content {
  position: relative;
  z-index: 1;
}
.profile_theme_five .about-title .title, .profile_theme_five .about-text h3, .profile_theme_five .about-text p,
.profile_theme_five .about-text ul {
  --hero-h1-text-color: #282a2b;
  --section-h1-text-color: #282a2b;
  --section-h3-text-color: #282a2b;
  --textColor: #282a2b;
}
.profile_theme_five .ufo--page-content {
  padding: 100px 0;
}
.profile_theme_five .ufo--home-page-content {
  padding-top: 0;
  padding-bottom: 0;
}
.profile_theme_five .ufo--home-page-content .ufo--page-sections {
  top: -150px;
  position: relative;
}
.profile_theme_five .ufo--home-page-content .ufo--page-sections .project-wrapper .ufo--add-section-row:first-child {
  display: none;
}

body.nav-on {
  overflow: hidden;
}

@media (min-width: 768.5px) {
  .profile_theme_five .ufo--page-content {
    padding: 100px 0;
  }
  .profile_theme_five .ufo--page-content.ufo--home-page-content {
    padding-top: 0;
    padding-bottom: 0;
  }
  .profile_theme_five.profile-subpage .ufo--page-hero-content {
    min-height: auto;
  }
  .profile_theme_five .ufo--page-hero-content {
    min-height: 800px;
  }
  .profile_theme_five .ufo--page-hero-content.no-profile-picture .profile-bio {
    padding-top: 0;
  }
  .profile_theme_five .ufo--page-hero-content .profile-hero {
    top: 0;
  }
  .profile_theme_five .ufo--page-hero-content .profile-picture {
    margin: 0 36px 0 0;
  }
  .profile_theme_five .ufo--page-hero-content .profile-bio {
    margin-top: 0;
    align-items: center;
  }
  .profile_theme_five .ufo--page-hero-content .profile-bio.no-picture {
    padding-top: 48px;
  }
  .profile_theme_five .ufo--page-hero-content .profile-name {
    display: none;
  }
  .profile_theme_five .ufo--page-hero-content .ufo--page-hero-text {
    margin: 100px 0;
    font-size: 24px;
    max-width: 630px;
  }
}
@media (min-width: 1024px) {
  .profile_theme_five .ufo--page-hero-content {
    min-height: 100vh;
  }
}
.profile_theme_six:not(.ufo--site-nav) {
  --border-color: #000000;
  padding-top: 0;
}
.profile_theme_six.profile-page {
  padding-top: 0;
}
@media (min-width: 768.5px) {
  .profile_theme_six.profile-page {
    padding-top: 50px;
  }
}
.profile_theme_six .ufo--container {
  padding: 0;
}
.profile_theme_six .ufo--page-hero-content {
  display: unset;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 48px;
  margin-bottom: 70px;
}
@media (min-width: 768.5px) {
  .profile_theme_six .ufo--page-hero-content {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
.profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-bio {
  margin-top: 0;
  padding-top: 24px;
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  min-height: auto;
}
.profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-bio .ufo--page-hero-text {
  padding-left: 0;
  padding-right: 0;
}
.profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-name,
.profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-position {
  margin-left: 0;
}
@media (min-width: 768.5px) {
  .profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-hero {
    min-height: auto;
    max-height: initial;
    position: absolute;
    left: 0;
    bottom: 0;
    height: calc(100% - 60px);
  }
  .profile_theme_six .ufo--page-hero-content.no-profile-picture .profile-bio {
    padding-top: 0;
    margin-bottom: 110px;
  }
}
.profile_theme_six .ufo--page-hero-content.collection-view .ufo--page-hero-text {
  padding: 17px 24px 24px 24px !important;
}
.profile_theme_six .ufo--page-hero-content .profile-hero.empty-state {
  display: flex;
  flex-direction: column;
}
.profile_theme_six .ufo--page-hero-content .profile-hero.empty-state .profile-cover {
  flex: 1;
}
.profile_theme_six .ufo--page-hero-content .profile-cover {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.profile_theme_six .ufo--page-hero-content .profile-cover.empty {
  min-height: 500px;
}
.profile_theme_six .ufo--page-hero-content .profile-cover [class*=cts-module-] {
  width: 100%;
  height: 100%;
}
.profile_theme_six .ufo--page-hero-content .profile-cover img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_six .ufo--page-hero-content .profile-cover img.empty-state {
  width: 200px !important;
  height: 200px !important;
  min-width: 200px;
  min-height: 200px;
  object-fit: contain !important;
  object-position: center;
  transform: translateY(-87px);
}
@media (min-width: 768.5px) {
  .profile_theme_six .ufo--page-hero-content .profile-cover img {
    min-height: 300px;
    max-height: 600px;
  }
}
.profile_theme_six .ufo--page-hero-content .profile-bio {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 24px;
  margin-top: -80px;
  z-index: 3;
}
.profile_theme_six .ufo--page-hero-content .profile-name {
  height: 100px;
  width: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  z-index: 6;
  position: relative;
  font-family: var(--hero-h1-font);
  color: var(--hero-nav-button-text-color);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: 1;
}
.profile_theme_six .ufo--page-hero-content .ufo--page-hero-text {
  display: inline-block;
  line-height: normal;
  width: 100%;
  max-width: 100%;
  text-align: left;
  background-color: var(--background-fill-color, #FFFFFF);
  margin: 0;
  padding: 17px 24px 24px 24px;
}
.profile_theme_six .ufo--page-hero-content .ufo--page-hero-text a:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_six .ufo--page-hero-content .account-settings {
  text-align: left;
}
.profile_theme_six .project-list-type.public {
  margin-top: 0;
}
.profile_theme_six .ufo--user-projects.empty {
  background-color: var(--base00);
}
.profile_theme_six .profile-footer {
  position: relative;
  z-index: 1;
}
.profile_theme_six.profile-subpage .profile_theme_six .ufo--page-hero-content {
  margin-bottom: 0;
  padding-bottom: 0;
}
.profile_theme_six .footer-section .footer-links .social-links {
  flex-direction: row !important;
}

body.nav-on {
  overflow: hidden;
}

@media (min-width: 768.5px) {
  .profile_theme_six .ufo--page-hero-content.collection-view .ufo--page-hero-text {
    padding: 30px 50px !important;
    pointer-events: all !important;
  }
  .profile_theme_six .ufo--page-hero-content .profile-hero {
    position: relative;
    min-height: 300px;
    max-height: 600px;
  }
  .profile_theme_six .ufo--page-hero-content .profile-picture {
    margin: 0 36px 0 0;
  }
  .profile_theme_six .ufo--page-hero-content .profile-bio {
    margin-bottom: 70px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 15px;
    margin-top: -180px;
    min-height: 210px;
    padding: 0;
  }
  .profile_theme_six .ufo--page-hero-content .profile-bio.no-picture {
    top: 0;
  }
  .profile_theme_six .ufo--page-hero-content .profile-name {
    display: none;
  }
  .profile_theme_six .ufo--page-hero-content .ufo--page-hero-text {
    padding: 30px 50px;
    grid-column: 2/span 4;
  }
}
@media (min-width: 1158px) {
  .profile_theme_six .ufo--page-hero-content .ufo--site-nav-container {
    padding-right: 0;
  }
}
/* Based on `_template-three.scss` */
.profile_theme_seven:not(.ufo--site-nav) {
  padding-top: 0;
  --border-color: #121212;
}
.profile_theme_seven .ufo--page-hero {
  position: relative;
}
.profile_theme_seven .ufo--page-hero .toggle-grid {
  padding: 0 !important;
}
.profile_theme_seven .profile-picture, .profile_theme_seven .about-picture {
  --frameOffset: 11px;
  box-shadow: var(--frameOffset) var(--frameOffset) 0 -1px var(--background-fill-color, white), var(--frameOffset) var(--frameOffset) var(--border-color);
  margin-right: var(--frameOffset);
  margin-bottom: var(--frameOffset);
}
.profile_theme_seven .ufo--page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile_theme_seven .ufo--page-hero-content .profile-short-cv {
  flex-direction: column;
}
.profile_theme_seven .ufo--page-hero-content .profile-name {
  height: 94px;
  width: max-content;
  display: flex;
  align-items: center;
  font-size: 18px;
  z-index: 6;
  font-family: var(--hero-h1-font);
  color: var(--hero-nav-button-text-color);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: 1;
}
.profile_theme_seven .ufo--page-hero-content .profile-picture {
  width: 100%;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.profile_theme_seven .ufo--page-hero-content .profile-picture.empty {
  background-color: #e6eaeb;
}
.profile_theme_seven .ufo--page-hero-content .profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_seven .ufo--page-hero-content .profile-picture img.empty-state {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile_theme_seven .ufo--page-hero-content .profile-short-cv {
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}
.profile_theme_seven .ufo--page-hero-content .profile-short-cv.no-picture .profile-picture {
  display: none;
}
.profile_theme_seven .ufo--page-hero-content .ufo--page-hero-text {
  display: inline-block;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 36px;
}
.profile_theme_seven .ufo--page-hero-content .ufo--page-hero-text h1 {
  margin-bottom: 6px;
}
.profile_theme_seven .ufo--page-hero-content .ufo--page-hero-text h2, .profile_theme_seven .ufo--page-hero-content .ufo--page-hero-text h3 {
  margin-bottom: 12px;
}
.profile_theme_seven .ufo--page-hero-content.has-picture .ufo--page-hero-text {
  text-align: left;
}
.profile_theme_seven .ufo--page-hero-content .profile-picture {
  margin-bottom: 60px;
}
.profile_theme_seven .ufo--page-hero-content .account-settings {
  text-align: left;
}
.profile_theme_seven .project-list-type.public {
  margin-top: 0;
}
.profile_theme_seven .profile-short-cv .has-tooltip[tooltip-position=bottom]::before,
.profile_theme_seven .profile-short-cv .has-tooltip[tooltip-position=bottom]::after {
  top: 43px;
}
.profile_theme_seven .ufo--page-sections .media-container.display-mode--fit-margin {
  width: auto;
  overflow: initial;
  --frameOffset: 11px;
  box-shadow: var(--frameOffset) var(--frameOffset) 0 -1px var(--background-fill-color, white), var(--frameOffset) var(--frameOffset) var(--border-color);
  margin-right: var(--frameOffset);
  margin-bottom: var(--frameOffset);
}
.profile_theme_seven .ufo--page-sections .media-container.display-mode--fit-margin img {
  width: auto;
}
@media (min-width: 768px) {
  .profile_theme_seven .ufo--page-sections .media-container.display-mode--fit-margin {
    --frameOffset: 20px;
  }
}
@media (min-width: 992px) {
  .profile_theme_seven .ufo--page-sections .media-container.display-mode--fit-margin img {
    width: 100%;
  }
}
.profile_theme_seven .footer-section .social-links {
  margin: 0;
}

body.nav-on {
  overflow: hidden;
}

@media (min-width: 768px) {
  .profile_theme_seven .profile-picture, .profile_theme_seven .about-picture {
    --frameOffset: 20px;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-name {
    display: none;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-short-cv {
    padding-top: 150px;
    flex-direction: row;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-short-cv > :last-child {
    margin-left: 50px;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-picture {
    height: 455px;
    max-width: 52%;
    margin-top: 11px;
  }
  .profile_theme_seven .ufo--page-hero-content.no-profile-picture .profile-picture {
    margin: 0;
    width: 0;
    height: 0;
  }
  .profile_theme_seven .ufo--page-hero-content.no-profile-picture .profile-short-cv > :last-child {
    margin-left: 0;
  }
  .profile_theme_seven .ufo--page-hero-content.no-profile-picture .ufo--page-hero-text {
    padding-top: 66px;
  }
  .profile_theme_seven .ufo--page-hero-content .social-links, .profile_theme_seven .ufo--page-hero-content .profile-picture {
    margin-bottom: 100px;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-short-cv {
    margin-top: 0;
    align-items: flex-end;
  }
  .profile_theme_seven .ufo--page-hero-content .profile-short-cv.no-picture .profile-picture {
    display: none;
  }
  .profile_theme_seven .ufo--page-hero-content .ufo--page-hero-text {
    font-size: 24px;
    max-width: 725px;
  }
}
.profile_theme_eight:not(.ufo--site-nav) {
  --border-color: #3d3d3d33;
  padding-top: 0;
}
.profile_theme_eight .ufo--container {
  width: 1054px;
}
.profile_theme_eight .ufo--page-hero-content {
  display: unset;
}
.profile_theme_eight .ufo--page-hero .navbar {
  margin-bottom: 60px !important;
  padding: 36px 0 0 0 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.profile_theme_eight .ufo--page-hero .navbar-logo {
  margin-right: auto;
  position: relative;
  z-index: 9;
}
.profile_theme_eight .ufo--page-hero .profile-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 15px;
}
.profile_theme_eight .ufo--page-hero .profile-hero .ufo--page-hero-image {
  align-self: start;
  grid-column: 1/span 12;
  margin: 0 auto;
  background-color: transparent;
}
.profile_theme_eight .ufo--page-hero .profile-hero .ufo--page-hero-image img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_eight .ufo--page-hero .profile-hero .ufo--page-hero-text {
  margin-bottom: 0;
}
.profile_theme_eight .ufo--page-hero .profile-hero .profile-bio {
  grid-column: 1/span 12;
  margin: 40px 0 70px 0;
}
.profile_theme_eight .ufo--page-hero .profile-navigation .profile-button .btn {
  --hero-nav-button-text-color-hover: #3d3d3d;
}
.profile_theme_eight .ufo--page-hero .profile-links .social-platforms a {
  --hero-nav-button-text-color-hover: #3d3d3d;
}
.profile_theme_eight .ufo--page-hero .no-profile-picture .profile-hero .ufo--page-hero-image {
  grid-column: unset;
  width: 0;
  height: 0;
}
.profile_theme_eight .ufo--page-hero .no-profile-picture .profile-hero .profile-bio {
  margin-top: 0;
  text-align: center;
}
.profile_theme_eight .ufo--user-projects {
  grid-gap: 30px;
  margin-bottom: 0;
  padding-bottom: 30px;
}
.profile_theme_eight .ufo--user-projects .project .image-container {
  border-radius: 12px;
}
.profile_theme_eight .ufo--user-projects .project .project-name {
  border-radius: 12px;
}
.profile_theme_eight .profile-footer-content .footer-icon {
  color: var(--hero-nav-button-text-color);
  margin: 0 20px;
  font-size: 16px !important;
}
.profile_theme_eight .profile-footer-content .footer-icon:nth-last-child(1) {
  margin-right: 20px;
}
.profile_theme_eight .profile-footer-content .footer-icon:hover {
  color: var(--hero-nav-button-text-color-hover);
}

@media (min-width: 768px) {
  .profile_theme_eight .ufo--page-hero .navbar {
    padding: 80px 0 0 0 !important;
    margin-bottom: 80px !important;
  }
  .profile_theme_eight .ufo--page-hero .profile-hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    margin: 140px 0;
  }
  .profile_theme_eight .ufo--page-hero .profile-hero .ufo--page-hero-image {
    grid-column: 1/span 2;
  }
  .profile_theme_eight .ufo--page-hero .profile-hero .profile-bio {
    grid-column: 3/span 8;
    margin: 0;
  }
  .profile_theme_eight .ufo--page-hero .no-profile-picture .profile-hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .profile_theme_eight .ufo--page-hero .no-profile-picture .profile-hero .profile-bio {
    grid-column: 3/span 8;
  }
}
.profile_theme_eight.profile-editor .ufo--user-projects .add-project-button {
  border-radius: 12px;
}

.profile_theme_nine .grid.ufo--columns {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .profile_theme_nine .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .profile_theme_nine .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.profile_theme_nine .toggle-grid {
  position: absolute !important;
}
.profile_theme_nine:not(.ufo--page-hero) {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.profile_theme_nine:not(.ufo--page-hero) .ufo--site-owner {
  margin-top: 15px;
}
.profile_theme_nine .ufo--page-hero {
  display: unset;
  margin: 0;
  padding: 24px 24px 90px 24px;
  background-color: var(--sidebar-background-fill-color);
}
@media (max-width: 768.5px) {
  .profile_theme_nine .ufo--page-hero {
    padding-top: 38px;
  }
}
.profile_theme_nine .ufo--page-hero .ufo--page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
.profile_theme_nine .ufo--page-hero .profile-bio {
  display: flex;
  flex-direction: column;
}
.profile_theme_nine .ufo--page-hero .profile-name {
  font-size: 18px;
  margin-bottom: 60px;
  font-family: var(--hero-h1-font);
  color: var(--hero-nav-button-text-color);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: 1;
  position: relative;
  z-index: 9;
}
.profile_theme_nine .ufo--page-hero .profile-hero {
  text-align: center;
  margin-top: auto;
}
.profile_theme_nine .ufo--page-hero .ufo--page-hero-content:not(.no-profile-picture) .profile-picture {
  width: max-content;
  height: max-content;
  margin: 0 auto 40px auto;
  background-color: transparent;
}
.profile_theme_nine .ufo--page-hero .ufo--page-hero-content:not(.no-profile-picture) .profile-picture img,
.profile_theme_nine .ufo--page-hero .ufo--page-hero-content:not(.no-profile-picture) .profile-picture img.empty-state {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.profile_theme_nine .ufo--page-hero .ufo--page-hero-text {
  text-align: center;
}
.profile_theme_nine .ufo-sec--gallery {
  overflow: hidden;
}
.profile_theme_nine .ufo-sec--gallery .ufo-fab--container.gallery-edit-toolbar {
  right: 18px;
}
.profile_theme_nine .ufo-sec--gallery .carousel .carousel__arrows {
  width: 100%;
  margin: 0;
  left: unset;
  right: unset;
}
@media (min-width: 1024px) {
  .profile_theme_nine .ufo-sec--text .text-container,
  .profile_theme_nine .ufo-sec--text .text-container.align-left,
  .profile_theme_nine .ufo-sec--text .ufo--cta-btn-wr {
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-small {
    --grid-column-start: 1;
    --grid-column-span: 7;
  }
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-medium {
    --grid-column-start: 1;
    --grid-column-span: 6;
  }
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-large {
    --grid-column-start: 1;
    --grid-column-span: 5;
  }
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col.media-small {
    --grid-column-start: 6;
    --grid-column-span: 7;
  }
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col.media-medium {
    --grid-column-start: 7;
    --grid-column-span: 6;
  }
  .profile_theme_nine .ufo-sec--textandmedia .col-text.col.media-large {
    --grid-column-start: 8;
    --grid-column-span: 5;
  }
}
.profile_theme_nine .ufo-sec--media .media-container.display-mode--default, .profile_theme_nine .ufo-sec--media .media-container.display-mode--full, .profile_theme_nine .ufo-sec--media .media-container.display-mode--large, .profile_theme_nine .ufo-sec--media .media-container.display-mode--cover {
  width: calc(100% + 2 * var(--gridGap));
  margin: 0 calc(var(--gridGap) * -1);
  left: 0;
  right: 0;
}
@media (min-width: 1024px) {
  .profile_theme_nine .ufo-sec--contactform .col-media {
    grid-column: 1/span 6;
  }
  .profile_theme_nine .ufo-sec--contactform .col-media.col-order-2 {
    grid-column: 7/span 6;
  }
}
.profile_theme_nine .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.left, .profile_theme_nine .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.right {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(0) !important;
}
@media (min-width: 2048px) {
  .profile_theme_nine .ufo-sec:not(.ufo-sec--gallery) .ufo-fab--container.right {
    pointer-events: initial;
    transform: translateX(66px) !important;
  }
}
.profile_theme_nine .ufo-sec:not(.ufo-sec--gallery):hover .ufo-fab--container.left, .profile_theme_nine .ufo-sec:not(.ufo-sec--gallery):hover .ufo-fab--container.right {
  opacity: 1;
  visibility: visible;
}

body.nav-on {
  overflow: hidden;
}
body.thumbnail-generator-visible .profile-editor {
  background-color: var(--background-fill-color);
}

@media (min-width: 768.5px) {
  .profile_theme_nine.profile-page {
    min-height: 100vh;
    padding-bottom: 0;
  }
  .profile_theme_nine:not(.ufo--page-hero) {
    flex-direction: row;
  }
  .profile_theme_nine .ufo--page-hero {
    width: 35%;
    padding: 40px;
    height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
  }
  .profile_theme_nine .ufo--page-hero .profile-name {
    display: none;
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-content {
    height: 100%;
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-content.align-content-to-top .profile-hero {
    margin-top: 0;
  }
  .profile_theme_nine .ufo--page-hero .profile-picture {
    margin-top: 0;
  }
  .profile_theme_nine .ufo--page-hero .profile-bio {
    overflow: hidden;
    position: relative;
    padding-bottom: 60px;
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-text {
    height: 100%;
    margin-bottom: 0;
    overflow-y: scroll;
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-text::-webkit-scrollbar {
    display: none;
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-text {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .profile_theme_nine .ufo--page-hero .ufo--page-hero-text.scrollable::after {
    content: "";
    background-image: linear-gradient(to bottom, transparent 0%, var(--sidebar-background-fill-color));
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    height: 30%;
    display: block;
    pointer-events: none;
  }
  .profile_theme_nine .ufo--page-content {
    width: 65%;
    padding-bottom: 48px;
    padding-top: 48px;
    max-width: 1248px;
  }
}
.profile_theme_nine.profile-editor {
  min-height: calc(100vh - 56px);
}
.profile_theme_nine.profile-editor .ufo--page-hero {
  max-height: calc(100vh - 56px);
  top: 56px;
  z-index: 4;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio {
  overflow: unset;
  position: initial;
  margin-left: -6px;
  margin-right: -6px;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio .ufo--page-hero-text {
  margin: 0;
  overflow: unset;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio .ufo--page-hero-text .ufo--text-editor-toolbar {
  transform: none;
  margin-left: 0;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio .ufo--page-hero-text.scrollable::after {
  display: none;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio .ufo--page-hero-text.scrollable .ufo--text-area::after {
  content: "";
  background-image: linear-gradient(to bottom, transparent 0%, var(--sidebar-background-fill-color));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  display: block;
  pointer-events: none;
}
.profile_theme_nine.profile-editor .ufo--page-hero .profile-bio .ufo--text-editor .ufo--text-area {
  position: relative;
}

@media (min-width: 1024px) {
  .profile_theme_default_old .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0;
  }
}
.profile_theme_default_old {
  --border-color: #60676d33;
  --hero-h1-text-color: #282a2b;
  --hero-h2-text-color: #60676d;
  --hero-p1-text-color: #60676d;
  --hero-nav-button-text-color: #60676d;
  --hero-h1-size: 34px;
  --hero-h2-size: 20px;
  --hero-p1-size: 22px;
  --thumbnail-title-size: 37px;
  --thumbnail-subtitle-size: 22px;
  --hero-nav-button-size: 17px;
  --hero-h1-height: 37px;
  --hero-h2-height: 23px;
  --hero-p1-height: 25px;
  --thumbnail-title-height: 40px;
  --thumbnail-subtitle-height: 25px;
  --hero-nav-button-height: 20px;
  --hero-h1-weight: bold;
  --hero-h2-weight: normal;
  --hero-p1-weight: normal;
  --thumbnail-title-weight: bold;
  --thumbnail-subtitle-weight: normal;
  --hero-nav-button-weight: bold;
  --hero-h1-style: normal;
  --hero-h2-style: normal;
  --hero-p1-style: normal;
  --thumbnail-title-style: bold;
  --thumbnail-subtitle-style: normal;
  --hero-nav-button-style: normal;
}
@media (min-width: 768px) {
  .profile_theme_default_old {
    --hero-h1-size: 24px;
    --hero-h2-size: 14px;
    --hero-p1-size: 16px;
    --thumbnail-title-size: 26px;
    --thumbnail-subtitle-size: 16px;
    --hero-nav-button-size: 14px;
    --hero-h1-height: 24px;
    --hero-h2-height: 21px;
    --hero-p1-Height: 23px;
    --thumbnail-title-height: 29px;
    --thumbnail-subtitle-height: 19px;
    --hero-nav-button-height: 15px;
  }
}
.profile_theme_default_old .navbar {
  padding: 0 24px 30px 24px !important;
}
@media (min-width: 768px) {
  .profile_theme_default_old .navbar {
    padding: 0 0 30px 0 !important;
  }
}
.profile_theme_default_old .navbar {
  overflow: hidden;
}
.profile_theme_default_old .navbar-container {
  gap: 28px !important;
}
.profile_theme_default_old .social-links {
  gap: 8px !important;
}
.profile_theme_default_old.ufo--portfolio-page {
  overflow: unset;
  min-width: unset;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1182px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .profile_theme_default_old.ufo--portfolio-page {
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 30px;
    padding-top: 78px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
.profile_theme_default_old .ufo--page-content {
  grid-column: 1/span 12;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .profile_theme_default_old .ufo--page-content {
    grid-column: 4/span 9;
    padding-bottom: 96px;
  }
}
.profile_theme_default_old .ufo--page-hero {
  grid-column: 1/span 12;
  display: unset;
  margin: 0;
}
.profile_theme_default_old .ufo--page-hero.grid {
  padding-top: 72px;
}
@media (min-width: 768px) {
  .profile_theme_default_old .ufo--page-hero {
    grid-column: 1/span 3;
  }
  .profile_theme_default_old .ufo--page-hero.grid {
    padding: 0;
  }
}
.profile_theme_default_old .ufo--page-hero-content {
  display: block;
  padding: 24px;
  background-color: var(--base00);
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(71, 84, 97, 0.2);
  margin-bottom: 40px;
  z-index: 3;
}
@media (min-width: 992px) {
  .profile_theme_default_old .ufo--page-hero-content {
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
  }
}
.profile_theme_default_old .ufo--page-hero-content h3 {
  font-style: italic;
}
.profile_theme_default_old .ufo--page-hero-content.has-picture {
  padding-top: 78px;
}
@media (min-width: 768px) {
  .profile_theme_default_old .ufo--page-hero-content.has-picture {
    margin-top: 0;
  }
}
.profile_theme_default_old .ufo--page-hero-content.has-picture .fake-cut {
  content: "";
  width: 106px;
  height: 56px;
  background: var(--background-fill-color);
  box-shadow: inset 0 0 2px 0 rgba(71, 84, 97, 0.2);
  border-bottom-left-radius: 106px;
  border-bottom-right-radius: 106px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -78px;
}
.profile_theme_default_old .ufo--page-hero-content.has-picture .fake-cut-line {
  content: "";
  width: 104px;
  height: 3px;
  background: var(--background-fill-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -78px;
}
.profile_theme_default_old .ufo--page-hero-content.no-profile-picture {
  padding: 25px 25px 29px 25px;
}
.profile_theme_default_old .ufo--page-hero-content .profile-picture {
  width: 106px;
  height: 106px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  position: absolute !important;
  top: -128px;
  left: 50%;
  transform: translateX(-50%);
  border: solid 10px transparent;
  z-index: 1;
  background-color: transparent !important;
}
.profile_theme_default_old .ufo--page-hero-content .profile-picture > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.profile_theme_default_old .ufo--page-hero-content .profile-picture > img.empty-state {
  object-fit: contain;
}
.profile_theme_default_old .ufo--page-hero-content .profile-name {
  font-family: var(--hero-h1-font);
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: var(--hero-h1-height);
  color: var(--hero-h1-text-color);
  text-align: center;
}
.profile_theme_default_old .ufo--page-hero-content .profile-position {
  font-family: var(--hero-h2-font);
  font-size: var(--hero-h2-size);
  font-weight: var(--hero-h2-weight);
  font-style: var(--hero-h2-style);
  line-height: var(--hero-h2-height);
  color: var(--hero-h2-text-color);
  clear: both;
  margin: 10px 0 24px 0;
  background: transparent;
  text-align: center;
}
.profile_theme_default_old .ufo--page-hero-content .ufo--page-hero-text {
  font-family: var(--hero-p1-font);
  font-size: var(--hero-p1-size);
  font-weight: var(--hero-p1-weight);
  font-style: var(--hero-p1-style);
  line-height: var(--hero-p1-height);
  color: var(--hero-p1-text-color);
  clear: both;
  margin-bottom: 30px;
}
.profile_theme_default_old .ufo--page-hero-content .profile-links {
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: center;
}
.profile_theme_default_old .ufo--page-hero-content .profile-button {
  width: 97px;
  margin-bottom: 20px;
}
.profile_theme_default_old .ufo--page-hero-content .profile-button .btn {
  min-width: auto;
  height: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin: 0;
  --textColor: #9a9fa5;
  border: solid 1px var(--hero-nav-button-text-color);
  --background-color: transparent;
  transition-property: color, background-color;
  transition-duration: 0.2s;
}
.profile_theme_default_old .ufo--page-hero-content .profile-button .btn:hover, .profile_theme_default_old .ufo--page-hero-content .profile-button .btn:active {
  color: var(--hero-nav-button-text-color-hover);
  border-color: var(--hero-nav-button-text-color-hover);
}
.profile_theme_default_old .ufo--page-hero-content .profile-button:nth-of-type(1) {
  margin-right: 5px;
}
.profile_theme_default_old .ufo--page-hero-content .profile-button:nth-of-type(2) {
  margin-left: 5px;
}
.profile_theme_default_old .profile-navigation {
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: flex-start;
  margin: 0 0 30px 0;
  width: 100%;
}
.profile_theme_default_old .profile-navigation .profile-button {
  margin-right: 28px;
  position: relative;
  --background-color: transparent;
}
.profile_theme_default_old .profile-navigation .profile-button .btn {
  font-size: 14px;
  color: #60676d;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-weight: normal;
  background-color: transparent;
  height: auto;
}
.profile_theme_default_old .profile-navigation .profile-button .btn.active {
  font-weight: bold;
}
.profile_theme_default_old .ufo--site-nav-container {
  --background-color: transparent;
}
.profile_theme_default_old .ufo--page-content .ufo--page-sections {
  background: transparent;
  box-shadow: none;
}
.profile_theme_default_old .ufo-sec--projectgrid .grid {
  --gridGap: 24px;
}
.profile_theme_default_old .ufo-sec .ufo-fab--container.left, .profile_theme_default_old .ufo-sec .ufo-fab--container.right {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(0) !important;
}
@media (min-width: 1280px) {
  .profile_theme_default_old .ufo-sec .ufo-fab--container.right {
    pointer-events: initial;
    transform: translateX(66px) !important;
  }
}
.profile_theme_default_old .ufo-sec:hover .ufo-fab--container.left, .profile_theme_default_old .ufo-sec:hover .ufo-fab--container.right {
  opacity: 1;
  visibility: visible;
}
.profile_theme_default_old .ufo-sec--gallery .carousel .carousel__arrows {
  width: 100%;
  margin: 0;
  left: unset;
  right: unset;
}
.profile_theme_default_old.profile-editor .ufo-sec--gallery {
  overflow: unset;
}
.profile_theme_default_old.profile-editor .ufo-sec--gallery .image-gallery > .carousel, .profile_theme_default_old.profile-editor .ufo-sec--gallery .image-gallery.tilted {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .profile_theme_default_old .ufo-sec--text .text-container,
  .profile_theme_default_old .ufo-sec--text .text-container.align-left,
  .profile_theme_default_old .ufo-sec--text .ufo--cta-btn-wr {
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-small {
    --grid-column-start: 1;
    --grid-column-span: 7;
  }
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-medium {
    --grid-column-start: 1;
    --grid-column-span: 6;
  }
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col:nth-of-type(1).media-large {
    --grid-column-start: 1;
    --grid-column-span: 5;
  }
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col.media-small {
    --grid-column-start: 6;
    --grid-column-span: 7;
  }
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col.media-medium {
    --grid-column-start: 7;
    --grid-column-span: 6;
  }
  .profile_theme_default_old .ufo-sec--textandmedia .col-text.col.media-large {
    --grid-column-start: 8;
    --grid-column-span: 5;
  }
}
.profile_theme_default_old .ufo-sec--media .media-container.display-mode--default, .profile_theme_default_old .ufo-sec--media .media-container.display-mode--full, .profile_theme_default_old .ufo-sec--media .media-container.display-mode--large {
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
}
@media (min-width: 1024px) {
  .profile_theme_default_old .ufo-sec--contactform .ufo--contact-form {
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .profile_theme_default_old .ufo-sec--contactform .col-media {
    grid-column: 1/span 6;
  }
  .profile_theme_default_old .ufo-sec--contactform .col-media.col-order-2 {
    grid-column: 7/span 6;
  }
}

@media (min-width: 992px) {
  .profile-editor.profile_theme_default_old .ufo--page-hero-content {
    top: 104px;
  }
}
.profile-editor.profile_theme_default_old .ufo--page-hero-content .profile-button:nth-last-of-type(2) {
  margin-right: 5px;
  margin-left: 0;
}
.profile-editor.profile_theme_default_old .ufo--page-hero-content .profile-button:nth-last-of-type(1) {
  margin-left: 5px;
  margin-right: 0;
}
.profile-editor.profile_theme_default_old .ufo--page-hero {
  grid-row: 1/span 2;
}
.profile-editor.profile_theme_default_old .profile-navigation {
  grid-row: 1;
  grid-column: 4/span 9;
  margin-left: 0;
  margin-right: 0;
}
.profile-editor.profile_theme_default_old .ufo--page-content {
  grid-row: 1/span 2;
}
.profile-editor.profile_theme_default_old .footer-links .btn {
  text-transform: uppercase;
}

.profile_theme_three_old {
  padding-top: 0;
  --border-color: #282a2b33;
  --hero-nav-button-text-color-hover: #282a2b;
}
.profile_theme_three_old .ufo--page-hero {
  position: relative;
}
@media (max-width: 768px) {
  .profile_theme_three_old .navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.profile_theme_three_old .ufo--page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile_theme_three_old .ufo--page-hero-content.no-profile-picture .profile-short-cv {
  margin-top: 0;
  padding-top: 24px;
}
.profile_theme_three_old .ufo--page-hero-content.no-profile-picture .profile-name,
.profile_theme_three_old .ufo--page-hero-content.no-profile-picture .profile-position {
  margin-left: 0;
}
.profile_theme_three_old .ufo--page-hero-content .profile-picture {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 24px auto 8px 0;
  z-index: 6;
}
.profile_theme_three_old .ufo--page-hero-content .profile-picture.empty {
  background-color: #e6eaeb;
}
.profile_theme_three_old .ufo--page-hero-content .profile-picture > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
.profile_theme_three_old .ufo--page-hero-content .profile-picture > img.empty-state {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile_theme_three_old .ufo--page-hero-content .profile-short-cv {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: -56px;
}
.profile_theme_three_old .ufo--page-hero-content .profile-short-cv.no-picture {
  padding-top: 24px;
  margin-top: 0;
}
.profile_theme_three_old .ufo--page-hero-content .profile-short-cv.no-picture .profile-name,
.profile_theme_three_old .ufo--page-hero-content .profile-short-cv.no-picture .profile-position {
  margin-left: 0;
}
.profile_theme_three_old .ufo--page-hero-content .profile-name,
.profile_theme_three_old .ufo--page-hero-content .profile-name textarea {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  display: block;
  position: relative;
}
.profile_theme_three_old .ufo--page-hero-content .profile-name {
  margin-left: 64px;
  z-index: 6;
  font-family: var(--hero-h1-font);
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: var(--hero-h1-height);
  color: var(--hero-h1-text-color);
}
.profile_theme_three_old .ufo--page-hero-content .profile-name textarea {
  width: 100%;
  padding: 0;
}
.profile_theme_three_old .ufo--page-hero-content .profile-position,
.profile_theme_three_old .ufo--page-hero-content .profile-position input {
  display: inline-block;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  width: auto;
}
.profile_theme_three_old .ufo--page-hero-content .profile-position {
  margin: 8px 0 60px 64px;
  z-index: 6;
  font-family: var(--hero-h2-font);
  font-size: var(--hero-h2-size);
  font-weight: var(--hero-h2-weight);
  font-style: var(--hero-h2-style);
  line-height: var(--hero-h2-height);
  color: var(--hero-h2-text-color);
}
.profile_theme_three_old .ufo--page-hero-content .profile-position input {
  max-width: 420px;
  width: 100%;
  padding: 0;
}
.profile_theme_three_old .ufo--page-hero-content .ufo--page-hero-text {
  display: inline-block;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.profile_theme_three_old .ufo--page-hero-content .profile-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.profile_theme_three_old .ufo--page-hero-content .social-links {
  margin-bottom: 60px;
  width: 100%;
}
.profile_theme_three_old .profile-short-cv .has-tooltip[tooltip-position=bottom]::before,
.profile_theme_three_old .profile-short-cv .has-tooltip[tooltip-position=bottom]::after {
  top: 70px;
}

body.nav-on {
  overflow: hidden;
}

@media (min-width: 768px) {
  .profile_theme_three_old .ufo--page-hero-content.no-profile-picture .profile-picture {
    margin: 0;
    width: 0;
    height: 0;
  }
  .profile_theme_three_old .ufo--page-hero-content.no-profile-picture .profile-short-cv {
    padding-top: 48px;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar {
    position: absolute !important;
    top: 68px;
    left: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    background: transparent;
    justify-content: flex-start;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-container {
    width: 100%;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-item:first-child:nth-last-child(3) + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-item:first-child:nth-last-child(4) + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-item:first-child:nth-last-child(5) + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-item:first-child:nth-last-child(6) + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .navbar.middle .navbar-item:first-child:nth-last-child(7) + .navbar-item + .navbar-item + .navbar-item + .navbar-item {
    margin-left: auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-picture {
    margin: 24px auto 8px auto;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-short-cv {
    margin-top: 0;
    align-items: center;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-short-cv.no-picture {
    padding-top: 48px;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-name,
  .profile_theme_three_old .ufo--page-hero-content .profile-name textarea {
    font-size: 34px;
    margin-left: 0;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-position,
  .profile_theme_three_old .ufo--page-hero-content .profile-position input {
    width: 100%;
    font-size: 18px;
  }
  .profile_theme_three_old .ufo--page-hero-content .profile-position {
    margin: 8px 0 60px 0;
  }
  .profile_theme_three_old .ufo--page-hero-content .ufo--page-hero-text {
    font-size: 24px;
    max-width: 725px;
  }
}
.profile-footer {
  min-height: 100px;
  width: 100%;
  background-color: var(--background-fill-color);
}

.profile-footer-content {
  --border-color: rgba(136,136,136,0.3);
  border-top: solid 1px var(--border-color);
  grid-column: 1/-1;
  padding: var(--gridGap) 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .profile-footer-content {
    grid-column: 1/span 12;
  }
}
.profile-footer-content .footer-url {
  font-size: 14px;
  color: var(--hero-nav-button-text-color);
  font-family: var(--hero-nav-button-font);
  line-height: 1;
  margin: 0 10px;
  text-transform: uppercase;
  transition: color 0.2s ease-out;
  cursor: pointer;
}
.profile-footer-content .footer-url:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.profile-footer-content .footer-icon {
  font-size: 14px;
  border-radius: 50%;
  overflow: hidden;
}
.profile-footer-content .footer-icon:nth-last-child(1) {
  margin-right: 0;
}

@media (min-width: 576px) {
  .profile_theme_two.ufo--page-hero-content .profile-picture {
    max-height: initial;
  }
}
@media (min-width: 768.5px) {
  .profile-page .ufo--page-hero-content {
    margin-right: 0;
    margin-left: 0;
  }
  .profile-page .ufo--site-nav-container {
    --background-color: transparent;
  }
  .profile-page.profile_theme_default .profile_theme_default .ufo--page-hero-content.has-picture, .profile-page.profile_theme_default_old .profile_theme_default .ufo--page-hero-content.has-picture {
    margin-top: 0;
  }
}
.profile-editor .profile_theme_two.ufo--page-hero-content .profile-name:before {
  top: 30px;
}
.profile-editor .ufo--page-hero .profile-picture {
  position: relative;
  cursor: pointer;
}
.profile-editor .ufo--page-hero .profile-picture > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.profile-editor .ufo--page-hero .profile-picture > img.empty-state {
  object-fit: fill;
  width: 100%;
  height: 100%;
}
.profile-editor .ufo--page-hero .ufo--page-hero-text p br {
  display: none;
}
.profile-editor .ufo--page-hero .ufo--page-hero-text p br:nth-of-type(1) {
  display: inline;
}
.profile_theme_six.profile-editor .ufo--page-hero .social-links, .profile_theme_six.profile-editor .ufo--page-hero .profile-button {
  justify-content: flex-start;
}

.profile-editor .project-list-type {
  width: 100%;
  color: #475461;
  font-family: var(--primarySans);
  font-weight: 700;
  line-height: 1.2;
  padding: 0 0 8px 0;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.profile-editor .project-list-type span {
  margin-right: auto;
}

.project-edit-trigger.menu-is-open span::before, .project-edit-trigger.menu-is-open span::after {
  background: #e84a64;
}

.project-edit-trigger.menu-is-open span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.project-edit-trigger.menu-is-open span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.project-edit-nav.is-visible li:nth-child(1) {
  /* list items animation */
  animation: nav-slide-in 0.2s;
}

.project-edit-nav.is-visible li:nth-child(2) {
  animation: nav-slide-in 0.3s;
}

.project-edit-nav.is-visible li:nth-child(3) {
  animation: nav-slide-in 0.4s;
}

.project-edit-nav.is-visible li:nth-child(4) {
  animation: nav-slide-in 0.5s;
}

@keyframes nav-slide-in {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateY(0);
  }
}
.ufo--portfolio-page {
  background-color: var(--background-fill-color, #FFFFFF);
  overflow-x: clip;
}

.ufo--container {
  width: 1134px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.ufo--page-hero {
  position: relative;
}
.ufo--page-hero.grid {
  grid-row-gap: 0;
}

.ufo--page-hero-content h1 {
  font-family: var(--hero-h1-font);
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: var(--hero-h1-height);
  color: var(--hero-h1-text-color);
  --bottom-margin: calc(0.2 * (var(--hero-h1-size) * var(--hero-h1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
@media (max-width: 1024px) {
  .ufo--page-hero-content h1 {
    font-size: var(--hero-h1-size-tablet);
    line-height: var(--hero-h1-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-h1-size-tablet) * var(--hero-h1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .ufo--page-hero-content h1 {
    font-size: var(--hero-h1-size-mobile);
    line-height: var(--hero-h1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-h1-size-mobile) * var(--hero-h1-height-mobile)) + 12.8px);
  }
}
.ufo--page-hero-content h2, .ufo--page-hero-content h3 {
  font-family: var(--hero-h2-font);
  font-size: var(--hero-h2-size);
  font-weight: var(--hero-h2-weight);
  font-style: var(--hero-h2-style);
  line-height: var(--hero-h2-height);
  color: var(--hero-h2-text-color);
  --bottom-margin: calc(0.2 * calc(var(--hero-h2-size) * var(--hero-h2-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.ufo--page-hero-content h2 + h1, .ufo--page-hero-content h3 + h1 {
  padding-top: calc((0.2 * var(--hero-h1-size) * var(--hero-h1-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .ufo--page-hero-content h2, .ufo--page-hero-content h3 {
    font-size: var(--hero-h2-size-tablet);
    line-height: var(--hero-h2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-h2-size-tablet) * var(--hero-h2-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .ufo--page-hero-content h2, .ufo--page-hero-content h3 {
    font-size: var(--hero-h2-size-mobile);
    line-height: var(--hero-h2-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-h2-size-mobile) * var(--hero-h2-height-mobile)) + 12.8px);
  }
}
.ufo--page-hero-content p, .ufo--page-hero-content ul, .ufo--page-hero-content ol {
  font-family: var(--hero-p1-font);
  font-size: var(--hero-p1-size);
  font-weight: var(--hero-p1-weight);
  font-style: var(--hero-p1-style);
  line-height: var(--hero-p1-height);
  color: var(--hero-p1-text-color);
  --bottom-margin: calc(0.2 * (var(--hero-p1-size) * var(--hero-p1-height)) + 12.8px);
  margin-bottom: var(--bottom-margin);
}
.ufo--page-hero-content p + h1, .ufo--page-hero-content ul + h1, .ufo--page-hero-content ol + h1 {
  padding-top: calc((0.2 * var(--hero-h1-size) * var(--hero-h1-height) + 12.8px) * 0.5);
}
.ufo--page-hero-content p + h2, .ufo--page-hero-content ul + h2, .ufo--page-hero-content ol + h2 {
  padding-top: calc((0.2 * var(--hero-h2-size) * var(--hero-h2-height) + 12.8px) * 0.5);
}
@media (max-width: 1024px) {
  .ufo--page-hero-content p, .ufo--page-hero-content ul, .ufo--page-hero-content ol {
    font-size: var(--hero-p1-size-tablet);
    line-height: var(--hero-p2-height-tablet);
    --bottom-margin: calc(0.2 * (var(--hero-p1-size-tablet) * var(--hero-p1-height-tablet)) + 12.8px);
  }
}
@media (max-width: 768px) {
  .ufo--page-hero-content p, .ufo--page-hero-content ul, .ufo--page-hero-content ol {
    font-size: var(--hero-p1-size-mobile);
    line-height: var(--hero-p1-height-mobile);
    --bottom-margin: calc(0.2 * (var(--hero-p1-size-mobile) * var(--hero-p1-height-mobile)) + 12.8px);
  }
}
.ufo--page-hero-content p:empty::after {
  content: " ";
}
.ufo--page-hero-content h1:nth-last-child(1), .ufo--page-hero-content h2:nth-last-child(1), .ufo--page-hero-content h3:nth-last-child(1), .ufo--page-hero-content h4:nth-last-child(1), .ufo--page-hero-content p:nth-last-child(1) {
  margin-bottom: 0;
}
.ufo--page-hero-content a {
  color: var(--hero-nav-button-text-color-hover);
}
.ufo--page-hero-content a:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.ufo--page-hero-content .ufo--page-hero-text ul, .ufo--page-hero-content .ufo--page-hero-text ol {
  display: flex;
  flex-direction: column;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-left * {
  text-align: left !important;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-left ul, .ufo--page-hero-content .ufo--page-hero-text.align-text-left ol {
  align-items: flex-start;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-center * {
  text-align: center !important;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-center ul, .ufo--page-hero-content .ufo--page-hero-text.align-text-center ol {
  align-items: center;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-right * {
  text-align: right !important;
}
.ufo--page-hero-content .ufo--page-hero-text.align-text-right ul, .ufo--page-hero-content .ufo--page-hero-text.align-text-right ol {
  align-items: flex-end;
}

.navbar-id,
.navbar-id a,
.ufo--site-nav-owner,
.ufo--site-nav-owner-id .name,
.navbar-item a,
.navbar-item .btn,
.navbar-item::after,
.social-links a,
.social-links::after,
.profile-button .btn,
.footer-link {
  font-family: var(--hero-nav-button-font);
  font-size: var(--hero-nav-button-size);
  font-weight: var(--hero-nav-button-weight);
  font-style: var(--hero-nav-button-style);
  line-height: var(--hero-nav-button-height);
  color: var(--hero-nav-button-text-color);
}
@media (max-width: 1024px) {
  .navbar-id,
  .navbar-id a,
  .ufo--site-nav-owner,
  .ufo--site-nav-owner-id .name,
  .navbar-item a,
  .navbar-item .btn,
  .navbar-item::after,
  .social-links a,
  .social-links::after,
  .profile-button .btn,
  .footer-link {
    font-size: var(--hero-nav-button-size-tablet);
    line-height: var(--hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .navbar-id,
  .navbar-id a,
  .ufo--site-nav-owner,
  .ufo--site-nav-owner-id .name,
  .navbar-item a,
  .navbar-item .btn,
  .navbar-item::after,
  .social-links a,
  .social-links::after,
  .profile-button .btn,
  .footer-link {
    font-size: var(--hero-nav-button-size-mobile);
    line-height: var(--hero-nav-button-height-mobile);
  }
}

@media (max-width: 768px) {
  .navbar-id {
    z-index: 2;
  }
}

.ufo--page-hero-content,
.ufo--page-hero-columns {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--page-hero-content,
  .ufo--page-hero-columns {
    grid-column: 1/span 12;
  }
}
.ufo--page-hero-content,
.ufo--page-hero-columns {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-column-gap: 0;
  position: relative;
}
@media (min-width: 640px) {
  .ufo--page-hero-content,
  .ufo--page-hero-columns {
    grid-column-gap: var(--gridGap);
    grid-template-columns: repeat(12, minmax(10px, 1fr));
  }
}
@media (min-width: 768px) {
  .ufo--page-hero-content.has-picture,
  .ufo--page-hero-columns.has-picture {
    grid-template-rows: 100%;
  }
}
@media (max-width: 768px) {
  .ufo--page-hero-content,
  .ufo--page-hero-columns {
    height: unset !important;
  }
}

.navbar-logo {
  height: max-content;
  align-self: center;
  z-index: 1;
}
@media (max-width: 768px) {
  .navbar-logo {
    position: relative;
    z-index: 11;
  }
}
.navbar-logo img {
  max-width: 256px;
  object-fit: contain;
}

a.navbar-logo {
  cursor: pointer;
}

.ufo--page-hero .col-media:has(div) {
  height: max-content;
  grid-row: 2;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .ufo--page-hero .col-media:has(div) {
    max-height: var(--rowSize);
    grid-column: 1/span 5;
    grid-row: 1;
  }
  .ufo--page-hero .col-media:has(div):nth-of-type(2) {
    grid-column: 8/span 5;
  }
}
.ufo--page-hero .col-media:has(.theme-default) {
  padding: 48px 0;
}
.ufo--page-hero .col-media.top {
  align-self: flex-start;
}
.ufo--page-hero .col-media.middle {
  align-self: center;
}
.ufo--page-hero .col-media.bottom {
  align-self: flex-end;
}
.ufo--page-hero .col-media:has(.cover) {
  height: 100%;
  padding: 0;
}
.ufo--page-hero .col-text {
  height: max-content;
  grid-row: 1;
  grid-column: 1/span 12;
  padding: 48px 0;
}
@media (min-width: 768.5px) {
  .ufo--page-hero .col-text {
    grid-row: 1;
    max-height: var(--rowSize);
  }
  .ufo--page-hero .col-text:nth-of-type(1) {
    --text-column-start: 1;
  }
  .ufo--page-hero .col-text {
    grid-column: var(--text-column-start, 1)/span var(--text-column-span, 8);
  }
}
.ufo--page-hero .col-text.full-w {
  grid-column: 1/span var(--text-column-span, 12);
}
.ufo--page-hero .col-text.top {
  align-self: flex-start;
}
.ufo--page-hero .col-text.middle {
  align-self: center;
}
.ufo--page-hero .col-text.bottom {
  align-self: flex-end;
}

.ufo--page-hero-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding-bottom: 48px;
}
.ufo--page-hero-image img.hero-image {
  max-height: calc(var(--rowSize) - var(--gridGap));
}
.ufo--page-hero-image.cover img.hero-image {
  max-height: calc(var(--rowSize));
}
.ufo--page-hero-image.fit-margin img.hero-image {
  max-height: calc(var(--rowSize) - var(--gridGap) * 2);
}
.ufo--page-hero-image.fit, .ufo--page-hero-image.cover, .ufo--page-hero-image.fit-margin {
  padding-bottom: 0;
}
.ufo--page-hero-image.fit img.hero-image, .ufo--page-hero-image.cover img.hero-image, .ufo--page-hero-image.fit-margin img.hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.ufo--page-hero-image.fit-margin {
  margin-bottom: 48px;
}
.ufo--page-hero-image.cover {
  width: 100vw;
  margin-left: -24px;
  margin-right: -24px;
}
.ufo--page-hero-image.cover img.hero-image {
  object-fit: contain;
}
.ufo--page-hero-image.fit, .ufo--page-hero-image.fit-margin {
  justify-self: center;
}
@media (min-width: 768px) {
  .ufo--page-hero-image {
    padding-bottom: 0;
  }
  .ufo--page-hero-image.fit img.hero-image {
    object-fit: contain;
  }
  .ufo--page-hero-image.fit-margin {
    margin: 48px;
  }
  .ufo--page-hero-image.fit-margin img.hero-image {
    object-fit: contain;
  }
  .ufo--page-hero-image.cover {
    width: unset;
    position: relative;
    overflow: unset;
    height: 100%;
    margin: 0;
  }
  .ufo--page-hero-image.cover img.hero-image,
  .ufo--page-hero-image.cover [class*=cts-module-] {
    width: 50vw !important;
    max-width: 50vw !important;
    position: absolute;
    object-fit: cover;
    right: 0;
  }
  .ufo--page-hero-image.cover.flipped img.hero-image,
  .ufo--page-hero-image.cover.flipped [class*=cts-module-] {
    left: 0;
  }
}

.ufo--page-hero-bio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ufo--page-hero-bio.view {
  word-wrap: break-word;
}

.ufo--page-hero-background {
  grid-row: 1;
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
@media (min-width: 768.5px) {
  .ufo--page-hero-background {
    grid-row: 1;
  }
}
.ufo--page-hero-background.overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--colorOverlay);
}
.ufo--page-hero-background.blur:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.profile-footer {
  min-height: 100px;
  width: 100%;
  background-color: var(--background-fill-color);
}

.profile-footer-content {
  --border-color: rgba(136,136,136,0.3);
  border-top: solid 1px var(--border-color);
  grid-column: 1/-1;
  padding: var(--gridGap) 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .profile-footer-content {
    grid-column: 1/span 12;
  }
}
.profile-footer-content .footer-url {
  font-family: var(--hero-nav-button-font);
  font-size: var(--hero-nav-button-size);
  color: var(--hero-nav-button-text-color);
  line-height: 1.2;
  margin: 0 10px;
  text-transform: uppercase;
  transition: color 0.2s ease-out;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .profile-footer-content .footer-url {
    font-size: var(--hero-nav-button-size-tablet);
    line-height: var(--hero-nav-button-height-tablet);
  }
}
@media (max-width: 768px) {
  .profile-footer-content .footer-url {
    font-size: var(--hero-nav-button-size-mobile);
    line-height: var(--hero-nav-button-height-mobile);
  }
}
.profile-footer-content .footer-url:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.profile-footer-content .footer-icon {
  font-size: 14px;
  border-radius: 50%;
  overflow: hidden;
}
.profile-footer-content .footer-icon:nth-last-child(1) {
  margin-right: 0;
}

.profile-editor .ufo--page-hero-image img.hero-image {
  max-height: calc(var(--rowSize) - 8px - var(--gridGap));
}
.profile-editor .ufo--page-hero-image.theme-default img.hero-image {
  max-height: calc(var(--rowSize) - 8px - var(--gridGap) * 2);
}
.profile-editor .ufo--page-hero-image.cover img.hero-image {
  max-height: calc(var(--rowSize) - 8px);
}
.profile-editor .ufo--page-hero-image.fit-margin img.hero-image {
  max-height: calc(var(--rowSize) - 8px - var(--gridGap) * 2);
}

.ufo--about-legacy-wrapper {
  grid-column: 1/span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: var(--gridGap);
  padding: 24px;
}
.ufo--about-legacy-wrapper .about-text.no-pic {
  padding-bottom: 0;
}
.ufo--about-header {
  grid-column: 1/span 12;
}
.ufo--about-header .grid {
  grid-row-gap: 0;
}
.ufo--about-header .about-title {
  width: 100%;
  margin-bottom: 20px;
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-header .about-title {
    grid-column: 1/span 12;
  }
}
.ufo--about-header .about-title .title {
  color: var(--section-h1-text-color);
  font-family: var(--section-h1-font);
  font-size: var(--section-h1-size);
  font-weight: var(--section-h1-weight);
  font-style: var(--section-h1-size);
  line-height: var(--section-h1-height);
  width: 100%;
  background: transparent;
}
.ufo--about-header .back {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-header .back {
    grid-column: 1/span 12;
  }
}
.ufo--about-header .back {
  font-size: 20px;
  font-weight: normal;
  line-height: 1.35;
  color: var(--section-h1-text-color);
  font-family: var(--section-h1-font);
  font-style: var(--section-h1-size);
  cursor: pointer;
}
.ufo--about-header .back:hover {
  color: var(--hero-nav-button-text-color-hover);
}
.ufo--about-content {
  grid-column: 1/span 12 !important;
}
.ufo--about-content .about-picture {
  position: relative;
}
.ufo--about-content .about-picture.editor {
  background-color: #edf0f1;
  cursor: pointer;
}
.ufo--about-content .about-picture .empty {
  object-fit: none;
}
.ufo--about-content .about-picture .upload-button {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(71, 84, 97, 0.8);
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ufo--about-content .about-picture .upload-button img {
  width: 16px;
  height: 14px;
  position: relative;
  top: unset;
  left: unset;
}
.ufo--about-content .about-picture .upload-button .file-upload__input {
  display: none;
}
.ufo--about-content .about-picture .upload-button {
  z-index: 1;
}
.ufo--about-content .about-picture .delete-image {
  background-color: var(--base00);
  border: solid 2px var(--meta60);
  width: 26px;
  height: 26px;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}
.ufo--about-content .about-picture .delete-image img {
  width: 22px;
  height: 22px;
}
.ufo--about-content .about-picture:hover .upload-button,
.ufo--about-content .about-picture:hover .delete-image {
  opacity: 1;
  background-position: center center;
}
.ufo--about-content .about-text {
  color: var(--hero-p1-text-color);
  font-family: var(--section-p1-font);
}
.ufo--about-content .about-text h1 {
  font-family: var(--hero-h1-font);
  font-weight: var(--hero-h1-weight);
  font-style: var(--hero-h1-style);
  line-height: var(--hero-h1-height);
  color: var(--hero-h1-text-color);
}
.ufo--about-content .about-text h2, .ufo--about-content .about-text h3 {
  font-family: var(--hero-h2-font);
  font-weight: var(--hero-h2-weight);
  font-style: var(--hero-h2-style);
  line-height: var(--hero-h2-height);
  color: var(--hero-h2-text-color);
}
.ufo--about-content .about-text p, .ufo--about-content .about-text ul, .ufo--about-content .about-text ol {
  font-family: var(--section-p1-font);
  font-weight: var(--hero-p1-weight);
  font-style: var(--hero-p1-style);
  color: var(--hero-p1-text-color);
}
.ufo--about-content .about-text p:nth-last-child(1), .ufo--about-content .about-text ul:nth-last-child(1), .ufo--about-content .about-text ol:nth-last-child(1) {
  margin-bottom: 0;
}
.ufo--about-content .about-text a {
  color: var(--hero-nav-button-text-color-hover);
  font-family: var(--section-p1-font);
}
.ufo--about-content .about-text h1, .ufo--about-content .about-text h2, .ufo--about-content .about-text h3 {
  font-size: 24px;
}
.ufo--about-content .about-text p, .ufo--about-content .about-text ul, .ufo--about-content .about-text ol {
  font-size: 16px;
  line-height: 1.63;
}
.ufo--about-content .about-text p:empty::after {
  content: " ";
}
.ufo--about-content .about-text span[style], .ufo--about-content .about-text b[style], .ufo--about-content .about-text i[style] {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
}
.ufo--about-page-default-template, .ufo--about-page-profile_theme_default, .ufo--about-page-profile_theme_default_old {
  background: var(--base00);
}
@media (max-width: 768px) {
  .ufo--about-page-default-template, .ufo--about-page-profile_theme_default, .ufo--about-page-profile_theme_default_old {
    margin: 0 24px;
  }
}
.ufo--about-page-default-template, .ufo--about-page-profile_theme_default, .ufo--about-page-profile_theme_default_old {
  box-shadow: 0 1px 2px 0 rgba(71, 84, 97, 0.2);
  --hero-h1-text-color: #353738;
  --hero-p1-text-color: #252525;
  --hero-h1-Size: 26px;
  --hero-h2-Size: 26px;
  --section-h3-size: 26px;
  --hero-p1-Size: 18px;
}
.ufo--about-page-default-template .about-picture,
.ufo--about-page-default-template .about-text, .ufo--about-page-profile_theme_default .about-picture,
.ufo--about-page-profile_theme_default .about-text, .ufo--about-page-profile_theme_default_old .about-picture,
.ufo--about-page-profile_theme_default_old .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-default-template .about-picture,
  .ufo--about-page-default-template .about-text, .ufo--about-page-profile_theme_default .about-picture,
  .ufo--about-page-profile_theme_default .about-text, .ufo--about-page-profile_theme_default_old .about-picture,
  .ufo--about-page-profile_theme_default_old .about-text {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-default-template .about-picture, .ufo--about-page-profile_theme_default .about-picture, .ufo--about-page-profile_theme_default_old .about-picture {
  width: 100%;
  padding-top: 50%;
  position: relative;
}
.ufo--about-page-default-template .about-picture img, .ufo--about-page-profile_theme_default .about-picture img, .ufo--about-page-profile_theme_default_old .about-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-default-template .about-text, .ufo--about-page-profile_theme_default .about-text, .ufo--about-page-profile_theme_default_old .about-text {
  color: #252525;
  padding-bottom: var(--gridGap);
}
.ufo--about-page-default-template .about-text h1, .ufo--about-page-default-template .about-text h2, .ufo--about-page-default-template .about-text h3, .ufo--about-page-profile_theme_default .about-text h1, .ufo--about-page-profile_theme_default .about-text h2, .ufo--about-page-profile_theme_default .about-text h3, .ufo--about-page-profile_theme_default_old .about-text h1, .ufo--about-page-profile_theme_default_old .about-text h2, .ufo--about-page-profile_theme_default_old .about-text h3 {
  font-size: 26px;
}
.ufo--about-page-default-template .about-text p, .ufo--about-page-default-template .about-text ul, .ufo--about-page-default-template .about-text ol, .ufo--about-page-profile_theme_default .about-text p, .ufo--about-page-profile_theme_default .about-text ul, .ufo--about-page-profile_theme_default .about-text ol, .ufo--about-page-profile_theme_default_old .about-text p, .ufo--about-page-profile_theme_default_old .about-text ul, .ufo--about-page-profile_theme_default_old .about-text ol {
  font-size: 18px;
  line-height: 1.56;
}
.ufo--about-page-default-template .about-text p:nth-last-child(1), .ufo--about-page-default-template .about-text ul:nth-last-child(1), .ufo--about-page-default-template .about-text ol:nth-last-child(1), .ufo--about-page-profile_theme_default .about-text p:nth-last-child(1), .ufo--about-page-profile_theme_default .about-text ul:nth-last-child(1), .ufo--about-page-profile_theme_default .about-text ol:nth-last-child(1), .ufo--about-page-profile_theme_default_old .about-text p:nth-last-child(1), .ufo--about-page-profile_theme_default_old .about-text ul:nth-last-child(1), .ufo--about-page-profile_theme_default_old .about-text ol:nth-last-child(1) {
  margin-bottom: 0;
}
.ufo--about-page-profile_theme_one:not(.legacy) {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.ufo--about-page-profile_theme_one .ufo--about-header {
  margin-bottom: 100px;
}
.ufo--about-page-profile_theme_one .about-picture {
  width: 100%;
  height: 100%;
  padding-top: 100%;
}
.ufo--about-page-profile_theme_one .about-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_one .about-title {
  padding-top: 52px;
}
.ufo--about-page-profile_theme_one .about-picture {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_one .about-picture {
    grid-column: 1/span 5;
  }
}
.ufo--about-page-profile_theme_one .about-picture {
  width: 100%;
}
.ufo--about-page-profile_theme_one .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_one .about-text {
    grid-column: 6/span 7;
  }
  .ufo--about-page-profile_theme_one .about-text.no-pic {
    grid-column: 3/span 8;
  }
}
.ufo--about-page-profile_theme_one .about-text {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .ufo--about-page-profile_theme_one .about-title {
    padding-top: 72px;
  }
  .ufo--about-page-profile_theme_one .about-picture {
    padding-top: 0;
    max-height: 1024px;
  }
  .ufo--about-page-profile_theme_one .about-picture img {
    position: relative;
  }
  .ufo--about-page-profile_theme_one .about-text {
    margin-top: 0;
  }
}
.ufo--about-page-profile_theme_two .ufo--about-header, .ufo--about-page-theme_two .ufo--about-header {
  margin-bottom: 80px;
}
.ufo--about-page-profile_theme_two .about-title, .ufo--about-page-theme_two .about-title {
  padding-top: 100px;
  position: relative;
}
.ufo--about-page-profile_theme_two .about-picture,
.ufo--about-page-profile_theme_two .about-text, .ufo--about-page-theme_two .about-picture,
.ufo--about-page-theme_two .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_two .about-picture,
  .ufo--about-page-profile_theme_two .about-text, .ufo--about-page-theme_two .about-picture,
  .ufo--about-page-theme_two .about-text {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-profile_theme_two .about-picture, .ufo--about-page-theme_two .about-picture {
  width: 100%;
  padding-top: 50%;
}
.ufo--about-page-profile_theme_two .about-picture img, .ufo--about-page-theme_two .about-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_two .about-text, .ufo--about-page-theme_two .about-text {
  margin-bottom: var(--gridGap);
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_two .about-title .about-title-container, .ufo--about-page-theme_two .about-title .about-title-container {
    position: relative;
  }
  .ufo--about-page-profile_theme_two .about-title .about-title-container:before, .ufo--about-page-theme_two .about-title .about-title-container:before {
    content: "";
    width: 50%;
    height: 4px;
    background: var(--hero-h1-text-color);
    position: absolute;
    left: -51%;
    top: 50%;
    transform: translateY(-50%);
  }
}
.ufo--about-page-profile_theme_three .about-picture, .ufo--about-page-profile_theme_three_old .about-picture {
  background: transparent;
  margin-bottom: 36px;
}
.ufo--about-page-profile_theme_three .about-picture img, .ufo--about-page-profile_theme_three_old .about-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_three .about-picture, .ufo--about-page-profile_theme_three_old .about-picture {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_three .about-picture, .ufo--about-page-profile_theme_three_old .about-picture {
    grid-column: 2/span 4;
  }
}
.ufo--about-page-profile_theme_three .about-picture, .ufo--about-page-profile_theme_three_old .about-picture {
  width: 100%;
}
.ufo--about-page-profile_theme_three .about-text, .ufo--about-page-profile_theme_three_old .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_three .about-text, .ufo--about-page-profile_theme_three_old .about-text {
    grid-column: 6/span 6;
  }
  .ufo--about-page-profile_theme_three .about-text.no-pic, .ufo--about-page-profile_theme_three_old .about-text.no-pic {
    grid-column: 1/span 12;
  }
}
@media (min-width: 768px) {
  .ufo--about-page-profile_theme_three .ufo--about-content, .ufo--about-page-profile_theme_three_old .ufo--about-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .ufo--about-page-profile_theme_three .about-picture, .ufo--about-page-profile_theme_three_old .about-picture {
    margin-bottom: 0;
  }
  .ufo--about-page-profile_theme_three .about-picture img, .ufo--about-page-profile_theme_three_old .about-picture img {
    height: 550px;
  }
  .ufo--about-page-profile_theme_three .about-text, .ufo--about-page-profile_theme_three_old .about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.ufo--about-page-profile_theme_four .about-picture {
  background: transparent;
}
.ufo--about-page-profile_theme_four .about-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_four.legacy .ufo--about-header .about-title {
    grid-column: 3/span 8;
  }
}
.ufo--about-page-profile_theme_four .ufo--about-header .about-title {
  margin-bottom: var(--gridGap);
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_four .ufo--about-header .about-title {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-profile_theme_four .about-picture,
.ufo--about-page-profile_theme_four .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_four .about-picture,
  .ufo--about-page-profile_theme_four .about-text {
    grid-column: 3/span 8;
  }
}
.ufo--about-page-profile_theme_four .about-picture {
  grid-row: 2;
  width: 100%;
}
.ufo--about-page-profile_theme_four .about-text {
  grid-row: 1;
  margin-bottom: var(--gridGap);
}
.ufo--about-page-profile_theme_five .about-picture {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_five .about-picture {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-profile_theme_five .about-picture {
  background: transparent;
  height: 350px;
  width: 100%;
}
.ufo--about-page-profile_theme_five .about-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_five .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_five .about-text {
    grid-column: 3/span 8;
    margin-top: -100px;
  }
}
.ufo--about-page-profile_theme_five .about-text {
  padding: var(--gridGap);
  background-color: var(--background-fill-color);
  position: relative;
  z-index: 1;
}
.ufo--about-page-profile_theme_six {
  margin: 0 auto;
}
.ufo--about-page-profile_theme_six .about-picture {
  background: transparent;
  height: 350px;
  grid-column: 1/-1;
  width: 100%;
}
.ufo--about-page-profile_theme_six .about-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_six .ufo--about-content {
  padding-bottom: 100px;
  position: relative;
}
.ufo--about-page-profile_theme_six .about-text {
  grid-column: 1/-1;
  padding: var(--gridGap) 0;
  background-color: var(--background-fill-color);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .ufo--about-page-profile_theme_six .ufo--about-content {
    padding-top: 200px;
  }
  .ufo--about-page-profile_theme_six .about-text {
    padding: var(--gridGap);
    grid-column: 5/span 8;
  }
  .ufo--about-page-profile_theme_six .about-picture {
    position: absolute;
    grid-column: 1/span 7;
    height: 100%;
    min-height: 350px;
    max-height: 700px;
  }
}
.ufo--about-page-profile_theme_seven .about-picture {
  grid-column: 1/-1;
}
@media (min-width: 496px) {
  .ufo--about-page-profile_theme_seven .about-picture {
    grid-column: 1/span 6;
  }
}
.ufo--about-page-profile_theme_seven .about-picture {
  margin-bottom: 36px;
  padding-top: 133%;
  position: relative;
  align-self: start;
}
.ufo--about-page-profile_theme_seven .about-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_seven .about-text {
  grid-column: 1/-1;
}
.ufo--about-page-profile_theme_seven .user-contact-form {
  width: 43.75em;
  max-width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .ufo--about-page-profile_theme_seven .ufo--about-content {
    padding-top: var(--gridGap);
    padding-bottom: var(--gridGap);
  }
  .ufo--about-page-profile_theme_seven .about-picture {
    grid-column: 1/span 5;
    margin-bottom: 0;
  }
  .ufo--about-page-profile_theme_seven .about-picture img {
    height: 600px;
    max-height: 100%;
  }
  .ufo--about-page-profile_theme_seven .about-text {
    grid-column: 6/span 7;
    align-self: center;
  }
  .ufo--about-page-profile_theme_seven .about-text.no-pic {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-profile_theme_eight {
  margin-top: 125px;
  padding: 0;
}
.ufo--about-page-profile_theme_eight .about-picture {
  align-self: start;
  grid-column: 1/-1;
  position: relative;
  padding-top: 100%;
  margin-bottom: 60px;
}
.ufo--about-page-profile_theme_eight .about-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
}
.ufo--about-page-profile_theme_eight .about-picture .upload-button {
  border-radius: 12px;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_eight .about-picture {
    grid-column: 1/span 6;
    margin-bottom: 0;
  }
  .ufo--about-page-profile_theme_eight .about-picture.editor {
    border-radius: 12px;
  }
}
.ufo--about-page-profile_theme_eight .about-text {
  grid-column: 1/span -1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_eight .about-text {
    grid-column: 7/span 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ufo--about-page-profile_theme_eight .about-text.no-pic {
    grid-column: 3/span 8;
  }
}
.ufo--about-page-profile_theme_nine {
  max-width: 100%;
  padding: 0;
  --hero-h1-text-color: #282a2b;
  --hero-h2-text-color: #282a2b;
}
.ufo--about-page-profile_theme_nine .ufo--about-header .about-title {
  margin-top: 48px;
  margin-bottom: 48px;
}
.ufo--about-page-profile_theme_nine .ufo--about-header .about-title .title {
  text-align: center;
  margin: 0;
}
.ufo--about-page-profile_theme_nine .ufo--about-content .about-picture,
.ufo--about-page-profile_theme_nine .ufo--about-content .about-text {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .ufo--about-page-profile_theme_nine .ufo--about-content .about-picture,
  .ufo--about-page-profile_theme_nine .ufo--about-content .about-text {
    grid-column: 1/span 12;
  }
}
.ufo--about-page-profile_theme_nine .ufo--about-content .about-picture {
  width: 100%;
}
.ufo--about-page-profile_theme_nine .ufo--about-content .about-picture img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
}
.ufo--about-page-profile_theme_nine .ufo--about-content .about-text {
  --hero-h1-text-color: #2a2c2e;
  --hero-h2-text-color: #282a2b;
  --section-h3-text-color: #282a2b;
  --hero-p1-text-color: #586165;
}
.ufo--about-sections-list {
  display: initial !important;
}

.ufo--about-page-editor .title {
  border: solid 1px transparent;
  line-height: 1;
}
.ufo--about-page-editor .title:not(div):hover {
  border-color: #d1d9dd;
}
.ufo--about-page-editor .title:focus {
  border-color: var(--meta60);
  outline: none;
}
.ufo--about-page-editor .user-contact-form textarea::placeholder, .ufo--about-page-editor .user-contact-form input::placeholder {
  color: rgba(159, 166, 169, 0.8) !important;
}
.ufo--about-page-editor.ufo--about-page-profile_theme_nine .ufo--text-editor {
  position: initial;
}

.ufo--contact-form {
  --borderColor: #E2E3E8;
}
.ufo--contact-form .title,
.ufo--contact-form .subtitle {
  font-size: 20px;
  font-weight: bold;
  color: var(--section-h4-text-color);
  font-family: var(--section-h4-font);
  margin-bottom: 30px;
}
.ufo--contact-form textarea {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: var(--section-p1-text-color);
  font-family: var(--section-p1-font);
}
.ufo--contact-form textarea::placeholder {
  font-style: italic;
  color: var(--section-p1-text-color);
}
.ufo--contact-form input {
  color: var(--section-p1-text-color);
  font-family: var(--section-p1-font);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
  border: solid 1px var(--borderColor);
}
.ufo--contact-form input::placeholder {
  font-style: normal;
  color: var(--section-p1-text-color);
}

.ufo-sepa {
  border-right: 1px solid var(--asphalt80);
}
.ufo-sepa--container {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 352px;
  color: var(--asphalt10);
  background-color: var(--asphalt95);
  box-shadow: 0px 15px 15px -10px rgba(71, 84, 97, 0.16), 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  padding: 60px 0 0 0;
  z-index: 100;
  overflow: hidden;
}
.ufo-sepa--container.prompt-shown {
  z-index: 105;
}
.ufo-sepa--container .ufo-sepa {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.ufo-sepa--head {
  border-bottom: 1px solid var(--asphalt80);
}
.ufo-sepa--head .head-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
.ufo-sepa--head .upgrade {
  padding: 10px 30px;
  font: var(--editor-ui-b3-regular);
  color: var(--volt);
  background-color: color-mix(in srgb, var(--volt) 10%, transparent);
  letter-spacing: 0.12px;
}
.ufo-sepa--head .upgrade .ufo-cta {
  font-size: 12px;
  color: var(--volt);
}
.ufo-sepa--title {
  font: var(--editor-ui-h3);
  color: var(--asphalt10);
  margin-right: auto;
  user-select: none;
}
.ufo-sepa--title:first-letter {
  text-transform: capitalize;
}
.ufo-sepa--cops {
  position: relative;
  flex: 2;
}
.ufo-sepa--cop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid var(--asphalt80);
}
.ufo-sepa--cop:not(.switch) {
  cursor: pointer;
}
.ufo-sepa--cop.f-custom {
  padding: 0 0 30px 0;
}
.ufo-sepa--cop.main-cop, .ufo-sepa--cop:nth-last-child(1) {
  border-bottom: none;
}
.ufo-sepa--cop.main-cop:hover .template_image {
  filter: blur(5px);
  opacity: 0.7;
}
.ufo-sepa--cop .template-option {
  margin-bottom: 30px;
}
.ufo-sepa--cop .template-option:last-of-type {
  margin-bottom: 0px;
}
.ufo-sepa--cop .template-option .template-title {
  margin-bottom: 12px;
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt40);
}
.ufo-sepa--cop .template-option.selected .template-title {
  color: var(--asphalt10);
}
.ufo-sepa--cop .template-option.selected .template-thumbnail {
  background-color: var(--asphalt60);
}
.ufo-sepa--cop .template-thumbnail {
  clear: both;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  border-radius: 4px;
  background-color: var(--asphalt90);
  width: 100%;
  aspect-ratio: 1.64;
  position: relative;
  padding: 15px 15px 0 15px;
  overflow: hidden;
}
.ufo-sepa--cop .template-thumbnail:hover {
  background-color: var(--asphalt80);
}
.ufo-sepa--cop .template-thumbnail.single {
  margin-bottom: 0;
}
.ufo-sepa--cop .template-thumbnail.single:hover {
  background-color: var(--asphalt80);
}
.ufo-sepa--cop .template-thumbnail .template-image {
  border-radius: 4px;
  width: 100%;
}
.ufo-sepa--cop .template-thumbnail .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ufo-sepa--cop-list {
  height: 100%;
}
.ufo-sepa--cop-list.design-main-panel .ufo-sepa--cop-info {
  gap: 24px;
}
.ufo-sepa--cop-list.design-main-panel .font-pair-preview > .heading-style {
  color: var(--asphalt20);
}
.ufo-sepa--cop-list.settings-main-panel .ufo-sepa--cop-info {
  gap: 16px;
}
.ufo-sepa--cop-list .ufo-sepa--cop {
  align-items: flex-start;
}
.ufo-sepa--cop-list .ufo-sepa--cop.disabled {
  position: relative;
}
.ufo-sepa--cop-list .ufo-sepa--cop.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(74, 74, 74, 0.5);
  border-radius: inherit;
  z-index: 1;
}
.ufo-sepa--cop-list .ufo-sepa--cop.disabled:hover {
  cursor: default;
  background-color: unset;
}
.ufo-sepa--cop-list .ufo-sepa--cop:hover {
  background-color: var(--asphalt90);
}
.ufo-sepa--cop-list .ufo-sepa--cop:hover .label {
  color: var(--asphalt10);
}
.ufo-sepa--cop-list .ufo-sepa--cop:hover .template-thumbnail,
.ufo-sepa--cop-list .ufo-sepa--cop:hover .font-pair-preview,
.ufo-sepa--cop-list .ufo-sepa--cop:hover .button-preview,
.ufo-sepa--cop-list .ufo-sepa--cop:hover .layout-icon {
  background-color: var(--asphalt80);
  color: var(--asphalt10);
}
.ufo-sepa--cop-list .ufo-sepa--cop:hover .tag.dark {
  background-color: var(--asphalt80);
}
.ufo-sepa--cop-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.ufo-sepa--cop-info .label {
  font-style: normal;
  text-align: center;
  font: var(--editor-ui-h3);
  color: var(--asphalt40);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}
.ufo-sepa--cop-info .label.no-m {
  margin-bottom: 0;
}
.ufo-sepa--cop-info .label.color-label {
  justify-content: flex-start;
}
.ufo-sepa--cop-info .label.color-label span {
  margin-right: 5px;
  font-weight: 900;
}
.ufo-sepa--cop-info .params,
.ufo-sepa--cop-info .info {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
  letter-spacing: 0.14px;
}
.ufo-sepa--cop-info .ufo-sepa--undo-reset {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ufo-sepa--cop-info .ufo-sepa--undo-reset .reset-saved {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 100%;
}
.ufo-sepa--cop-info .ufo-sepa--undo-reset .reset-saved svg {
  width: 16px;
  height: 16px;
}
.ufo-sepa--cop-info .animations {
  padding: 30px 30px 24px 30px;
  border-radius: 4px;
  background-color: var(--asphalt70);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ufo-sepa--cop-info .animations .icon {
  width: 91px;
  height: 42px;
  background-image: url(/dist/src/assets/images/animations-menu..svg);
}
.ufo-sepa--cop-info .selected-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.ufo-sepa--cop-info .selected-layout .layout-icon {
  width: 84px;
  height: 84px;
  margin-right: 12px;
  padding: 0;
  border-radius: 4px;
  background-color: var(--asphalt90);
}
.ufo-sepa--cop-info .selected-layout .layout-info {
  font: var(--editor-ui-b3-regular);
  letter-spacing: 0.12px;
  color: var(--asphalt40);
}
.ufo-sepa--cop-info .selected-layout .layout-info p:first-child {
  margin-bottom: 8px;
}
.ufo-sepa--cop-info .selected-layout .layout-info p {
  margin: 0;
}
.ufo-sepa--more {
  width: 24px;
  height: 24px;
}
.ufo-sepa--cop-det .ufo-sepa--cop {
  cursor: default;
}
.ufo-sepa--cop-det .ufo-sepa--cop-info .label {
  margin-bottom: 16px;
}
.ufo-sepa--cop-det.ufo-sepa--cop-colors .ufo-sepa--cop-info .label {
  margin-bottom: 0;
}
.ufo-sepa--cop-det.ufo-sepa--cop-thumbnails .ufo-sepa--cop-info .label {
  margin-bottom: 0;
  font: var(--editor-ui-h3);
  color: var(--asphalt40);
}
.ufo-sepa--cop-det.ufo-sepa--cop-share .group-container .label {
  font: var(--editor-ui-h3);
  color: var(--asphalt40);
}
.ufo-sepa--cop-param {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.ufo-sepa--cop-param.profile-name {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ufo-sepa--cop-param .color-picker .color {
  text-align: center;
}
.ufo-sepa--cop-param .color-picker .color .preview {
  width: 48px;
  height: 48px;
  background: #282a2b;
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}
.ufo-sepa--cop-param .color-picker .color .preview.dark {
  background-color: #282a2b;
}
.ufo-sepa--cop-param .color-picker .color .preview.light {
  background-color: var(--base00);
}
.ufo-sepa--cop-param .color-picker .color .preview.accent {
  background-color: var(--blue100);
}
.ufo-sepa--cop-param .color-picker .color .preview.empty {
  background-color: #edf0f1;
}
.ufo-sepa--cop-param .color-picker .color .preview.empty:after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  font-size: 16px;
  color: #d7dee1;
  line-height: 22px;
  font-family: var(--primarySans);
}
.ufo-sepa--cop-param .color-picker .color .preview:before {
  content: "";
  position: absolute;
  border: 1px solid #d7dee1;
  border-radius: 4px;
  width: 52px;
  height: 52px;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 100ms ease-out;
}
.ufo-sepa--cop-param .color-picker .color .preview.selected:before {
  border: 2px solid var(--meta60);
  width: 54px;
  height: 54px;
}
.ufo-sepa--cop-param .color-picker .color .label {
  font-family: var(--primarySans);
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  color: #9fa6a9;
  text-align: center;
  text-transform: uppercase;
}
.ufo-sepa--cop-param .color-picker.square {
  float: left;
  margin: 0 6px;
}
.ufo-sepa--cop-param .color-picker.square:nth-last-child(1) {
  margin-right: 0;
}
.ufo-sepa--cop-param .color-picker.square .color .preview {
  width: 26px;
  height: 26px;
  border-radius: 2px;
}
.ufo-sepa--cop-param .color-picker.square .color .preview:before {
  width: 32px;
  height: 32px;
  border-radius: 2px;
}
.ufo-sepa--cop-param .color-picker.square .color .preview.selected {
  width: 24px;
  height: 24px;
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.title {
  background-color: #282a2b;
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.position {
  background-color: #778390;
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.text {
  background-color: #424242;
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.project-title {
  background-color: #282a2b;
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.background {
  background-color: var(--base00);
}
.ufo-sepa--cop-param .color-picker.profile .color .preview.accent {
  background-color: #282a2b;
}
.ufo-sepa--cop-param .color-switch {
  float: right;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 68px;
}
.ufo-sepa--cop-param .color-switch .color {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  float: left;
  position: relative;
  transition: all 0.15s ease-out;
}
.ufo-sepa--cop-param .color-switch .color::before {
  content: "";
  width: 30px;
  height: 30px;
  border: solid 1px #d7dee1;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ufo-sepa--cop-param .color-switch .color.light {
  background-color: var(--base00);
}
.ufo-sepa--cop-param .color-switch .color.dark {
  background-color: #282a2b;
}
.ufo-sepa--cop-param .color-switch .color.selected {
  width: 24px;
  height: 24px;
}
.ufo-sepa--cop-param .color-switch .color.selected::before {
  border: solid 2px var(--meta60);
  width: 32px;
  height: 32px;
}
.ufo-sepa--tabs {
  width: 100%;
  position: relative;
}
.ufo-sepa--tabs .tab-head {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-bottom: solid 1px var(--asphalt60);
  background-color: var(--asphalt90);
  z-index: 2;
}
.ufo-sepa--tabs .tab-head .tab-pill {
  font: var(--editor-ui-b1-regular);
  text-align: center;
  width: 100%;
  color: var(--asphalt40);
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
}
.ufo-sepa--tabs .tab-head .tab-pill:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--asphalt10);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: width 0.2s ease-in-out;
}
.ufo-sepa--tabs .tab-head .tab-pill:hover {
  color: var(--asphalt10);
}
.ufo-sepa--tabs .tab-head .tab-pill.selected {
  color: var(--asphalt10);
}
.ufo-sepa--tabs .tab-head .tab-pill.selected:after {
  width: 100%;
}
.ufo-sepa--tab {
  padding-bottom: 0;
}
.ufo-sepa .button-preview {
  width: 100%;
  padding: 32px;
  background-color: var(--asphalt90);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ufo-sepa .t-alignment-combos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 32px;
}
.ufo-sepa .t-alignment {
  width: 100%;
  padding-top: calc(100% - 4px);
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
}
.ufo-sepa .t-alignment.selected {
  background-color: var(--asphalt80);
}
.ufo-sepa .t-alignment.small-hover:before, .ufo-sepa .t-alignment.large-hover-left:before, .ufo-sepa .t-alignment.large-hover-center:before {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background-color: #f0f6fb;
  position: absolute;
  top: 26px;
  left: 22px;
  animation: blink-animation 2s steps(5, start) infinite;
}
.ufo-sepa .t-alignment.large-hover-left:before {
  top: 28px;
  left: 24px;
}
.ufo-sepa .t-alignment.large-hover-center:before {
  top: 26px;
  left: 34px;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.ufo-sepa .thumbnail-tab {
  padding: 0;
}
.ufo-sepa .p-title--color {
  padding: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.ufo-sepa .p-title--color .p-title--param-title {
  font-family: var(--primarySans);
  font-size: 1rem;
  font-weight: normal;
  line-height: 30px;
  color: #778390;
  float: left;
  margin-bottom: 0;
}
.ufo-sepa .p-title--color .p-title--param-title .label {
  font-size: 14px;
  text-transform: none;
}
.ufo-sepa .p-title--color .color-switch {
  float: right;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 68px;
}
.ufo-sepa .p-title--color .color-switch.disabled {
  cursor: not-allowed;
}
.ufo-sepa .p-title--color .color-switch.disabled .color {
  pointer-events: none;
  opacity: 0.3;
}
.ufo-sepa .p-title--color .color-switch .color {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  float: left;
  position: relative;
  transition: all 0.15s ease-out;
}
.ufo-sepa .p-title--color .color-switch .color::before {
  content: "";
  width: 30px;
  height: 30px;
  border: solid 1px #d7dee1;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ufo-sepa .p-title--color .color-switch .color.light {
  background-color: var(--base00);
}
.ufo-sepa .p-title--color .color-switch .color.dark {
  background-color: #282a2b;
}
.ufo-sepa .p-title--color .color-switch .color.selected {
  width: 24px;
  height: 24px;
}
.ufo-sepa .p-title--color .color-switch .color.selected::before {
  border: solid 2px var(--meta60);
  width: 32px;
  height: 32px;
}
.ufo-sepa .p-title--param-title {
  font-family: var(--primarySans);
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  color: #778390;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.ufo-sepa .p-title--thumbnail-size, .ufo-sepa .p-title--visibility, .ufo-sepa .p-title--position {
  width: 100%;
}
.ufo-sepa .p-title--thumbnail-size .p-title--params, .ufo-sepa .p-title--visibility .p-title--params, .ufo-sepa .p-title--position .p-title--params {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ufo-sepa .p-title--thumbnail-size .p-title--params.disabled, .ufo-sepa .p-title--visibility .p-title--params.disabled, .ufo-sepa .p-title--position .p-title--params.disabled {
  cursor: not-allowed;
}
.ufo-sepa .p-title--thumbnail-size .p-title--params.disabled .p-title--button, .ufo-sepa .p-title--visibility .p-title--params.disabled .p-title--button, .ufo-sepa .p-title--position .p-title--params.disabled .p-title--button {
  pointer-events: none;
  opacity: 0.3;
  cursor: not-allowed;
}
.ufo-sepa .p-title--thumbnail-size .p-title--button, .ufo-sepa .p-title--visibility .p-title--button, .ufo-sepa .p-title--position .p-title--button {
  width: 84px;
}
.ufo-sepa .p-title--thumbnail-size .p-title--button.disabled, .ufo-sepa .p-title--visibility .p-title--button.disabled, .ufo-sepa .p-title--position .p-title--button.disabled {
  pointer-events: none;
  opacity: 0.3;
  cursor: not-allowed;
}
.ufo-sepa .p-title--thumbnail-size .p-title--button.disabled .picto, .ufo-sepa .p-title--visibility .p-title--button.disabled .picto, .ufo-sepa .p-title--position .p-title--button.disabled .picto {
  cursor: not-allowed;
}
.ufo-sepa .p-title--thumbnail-size .p-title--button .picto, .ufo-sepa .p-title--visibility .p-title--button .picto, .ufo-sepa .p-title--position .p-title--button .picto {
  width: 84px;
  height: 84px;
  border-radius: 2px;
  background-color: #f0f6fb;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}
.ufo-sepa .p-title--thumbnail-size .p-title--button .picto.selected::before, .ufo-sepa .p-title--visibility .p-title--button .picto.selected::before, .ufo-sepa .p-title--position .p-title--button .picto.selected::before {
  content: "";
  width: 84px;
  height: 84px;
  border: solid 2px var(--meta60);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ufo-sepa .p-title--thumbnail-size .p-title--button .title, .ufo-sepa .p-title--visibility .p-title--button .title, .ufo-sepa .p-title--position .p-title--button .title {
  font-family: var(--primarySans);
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  color: #9fa6a9;
  text-align: center;
  text-transform: uppercase;
  display: block;
}
.ufo-sepa .project-thumbnail-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail {
  width: 100%;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail.empty {
  aspect-ratio: 1/1;
  background-color: rgba(0, 0, 0, 0.6);
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail {
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.1s ease-in-out;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail .thumbnail-blur {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.1s ease-in-out;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail .social-image-update-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.1s ease-in-out;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail .social-image-update-buttons input[type=file] {
  display: none;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail:hover .thumbnail-blur {
  opacity: 1;
}
.ufo-sepa .project-thumbnail-preview .selected-thumbnail:hover .social-image-update-buttons {
  transform: translateY(0);
  opacity: 1;
}
.ufo-sepa .project-thumbnail-preview .view-og-image {
  width: 100%;
  height: 150px;
  position: relative;
  padding: 7%;
  overflow: hidden;
  margin-bottom: 30px;
}
.ufo-sepa .project-thumbnail-preview .view-og-image img.ogi {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ufo-sepa .project-thumbnail-preview .view-og-image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ufo-sepa .project-thumbnail-preview .view-og-image .og-image-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.ufo-sepa .project-thumbnail-preview .view-og-image .og-image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--base00);
  text-align: center;
  width: 100%;
  max-width: 66%;
}
.ufo-sepa .project-thumbnail-preview .view-og-image .og-image-text .title {
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
  margin-bottom: 8px;
}
.ufo-sepa .project-thumbnail-preview .view-og-image .og-image-text .subtitle {
  font-family: var(--body-font);
  font-size: 0.15rem;
  line-height: 1;
}
.ufo-sepa .project-thumbnail-preview .view-og-image .social-image-update-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.1s ease-in-out;
  background-color: rgba(0, 0, 0, 0.6);
}
.ufo-sepa .project-thumbnail-preview .view-og-image .social-image-update-buttons input[type=file] {
  display: none;
}
.ufo-sepa .project-thumbnail-preview .view-og-image:hover .social-image-update-buttons {
  opacity: 1;
  transform: translateY(0);
}
.ufo-sepa .project-thumbnail-preview .saving-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ufo-sepa .project-thumbnail-preview .saving-cover img {
  width: 50px;
  height: auto;
}
.ufo-sepa .project-thumbnail-preview .saving-cover .saving-text {
  font-family: var(--primarySans);
  font-size: 12px;
}
.ufo-sepa .project-thumbnail-preview .ufo-form--group {
  margin-bottom: 30px;
}
.ufo-sepa .project-thumbnail-preview .ufo-form--group:nth-child(3) {
  margin-bottom: 0;
}
.ufo-sepa .project-thumbnail-preview .social-preview {
  margin-top: 30px;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-share-card {
  width: 100%;
  border: solid 1px #e1e8ed;
  border-radius: 2px;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-share-card .view-og-image {
  margin-bottom: 0;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-cover {
  width: 290px;
  height: 150px;
  border-bottom: solid 1px #e1e8ed;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-og-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 8px;
  color: #000000;
  line-height: 1;
  padding: 6px;
}
.ufo-sepa .project-thumbnail-preview .social-preview .social-og-text .title {
  margin-bottom: 4px;
  font-weight: bold;
}
.ufo-sepa--archive-list {
  width: 100%;
}
.ufo-sepa--input {
  padding: 30px 30px 0;
}
.ufo-sepa--input .pw {
  display: flex;
}
.ufo-sepa--button {
  padding: 0 30px;
}
.ufo-sepa .btn--lite {
  text-align: left;
}

.ufo-sepa--container .modal-body p {
  margin: 0;
}

.sidebar-content-slide-first-enter-active,
.sidebar-content-slide-first-leave-active {
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sidebar-content-slide-first-leave-active {
  transition-duration: 100ms;
}

.sidebar-content-slide-first-enter-from {
  transform: translateX(100%);
}

.sidebar-content-slide-first-leave-to {
  transform: translateX(-100%);
}

.sidebar-content-slide-enter-active,
.sidebar-content-slide-leave-active {
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sidebar-content-slide-leave-active {
  transition-duration: 100ms;
}

.sidebar-content-slide-enter-from {
  transform: translateX(-100%);
}

.sidebar-content-slide-leave-to {
  transform: translateX(100%);
}

@keyframes fadeBgColor {
  0% {
    background-color: #f0f6fb;
  }
  80% {
    background-color: #f0f6fb;
  }
  100% {
    background-color: var(--base00);
  }
}
.thumbnail-upload .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.thumbnail-upload .empty-state p {
  font-size: 16px;
  font-style: italic;
  color: #9fa6a9;
  line-height: 1.25;
  margin-top: 20px;
  margin-bottom: 0;
  max-width: 360px;
  text-align: center;
}

.thumbnail-options {
  width: max-content;
  height: 180px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 180px);
  justify-items: center;
  margin: auto 0;
}
.thumbnail-options .thumbnail-frame {
  overflow: hidden;
  height: 180px;
  width: 180px;
  position: relative;
}
.thumbnail-options .thumbnail-frame:hover, .thumbnail-options .thumbnail-frame.selected {
  outline: solid 2px var(--meta60);
  outline-offset: 2px;
}
.thumbnail-options .thumbnail-frame.saved:before {
  content: "";
  width: 38px;
  height: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(/dist/src/assets/images/thumbnail-saved..svg) center center no-repeat;
  z-index: 2;
}
.thumbnail-options--saved .thumbnail-frame:not(.saved) {
  opacity: 0.2;
}
.thumbnail-options--saved .thumbnail-frame:not(.saved):hover {
  opacity: 1;
}
.thumbnail-options--medium {
  margin: 10px 0;
  height: 370px;
  grid-template-columns: repeat(2, 212px);
}
.thumbnail-options--medium .thumbnail-frame {
  width: 212px;
}
.thumbnail-options--large {
  margin: 10px 0;
  height: 370px;
  grid-template-columns: repeat(2, 360px);
}
.thumbnail-options--large .thumbnail-frame {
  width: 360px;
}
.thumbnail-options .thumbnail {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  background: #D2DCDF;
  transition: border 0.1s ease-in;
}
.thumbnail-options .thumbnail .thumbnail-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thumbnail-options .thumbnail .thumbnail-background img {
  height: 100%;
  width: auto;
}
.thumbnail-options .thumbnail .thumbnail-mockup {
  position: absolute;
}
.thumbnail-options .thumbnail .thumbnail-mockup .screen {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 1;
}
.thumbnail-options .thumbnail .thumbnail-mockup .screen img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.thumbnail-options .thumbnail .thumbnail-mockup .mockup-frame {
  z-index: 2;
  position: relative;
}
.thumbnail-options .thumbnail .thumbnail-mockup--mobile .screen, .thumbnail-options .thumbnail .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail .thumbnail-mockup--desktop .screen {
  z-index: 2;
}
.thumbnail-options .thumbnail .thumbnail-mockup--desktop .screen img {
  border-radius: 0;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--] {
  width: 88px;
  height: 158px;
  top: 50px;
  left: 70px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--mobile .mockup-frame, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--] .mockup-frame {
  max-width: 100%;
  height: auto;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--mobile .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--] .screen {
  width: 68px;
  height: 120px;
  bottom: 21px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--traditional] {
  width: 82px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--traditional] .screen {
  width: 72px;
  bottom: 23px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 158px;
  height: 84px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 129px;
  height: 73px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline] {
  width: 77px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline] .screen {
  width: 71px;
  top: 3px;
  left: 3px;
  height: 135px;
  border-radius: 9px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--dark"] {
  width: 77px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--dark"] .screen {
  width: 73px;
  top: 2px;
  left: 2px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 158px;
  height: 77px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 152px;
  height: 70px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 154px;
  height: 72px;
  left: 2px;
  top: 2px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--rounded"] .screen {
  width: 69px;
  top: 4px;
  left: 4px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 149px;
  top: 4px;
  left: 4px;
  height: 69px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--semi-realistic] {
  width: 77px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--semi-realistic] .screen {
  width: 73px;
  top: 2px;
  left: 2px;
  height: 135px;
  border-radius: 9px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  left: 2px;
  top: 2px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"][class*="--rounded"] .screen {
  height: 71px;
  top: 4px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--realistic] {
  width: 77px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--realistic] .screen {
  width: 71px;
  top: 3px;
  left: 3px;
  height: 135px;
  border-radius: 6px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  left: 2px;
  top: 3px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--simple] .screen {
  width: 83px;
  height: 137px;
  bottom: 19px;
  border-radius: 11px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] {
  width: 158px;
  height: 77px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  left: 2px;
  top: 2px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--simple][class*="--landscape"][class*="--rounded"] .screen {
  height: 74px;
  top: 3px;
  left: 50%;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--browser] .screen {
  width: 87px;
  height: 128px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] {
  width: 158px;
  height: 84px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] .screen {
  width: 158px;
  height: 62px;
  bottom: 15px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--] {
  top: 45px;
  left: 63px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--tablet .mockup-frame, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--] .mockup-frame {
  width: 173px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--] .screen {
  width: 142px;
  height: 188px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--traditional] .screen {
  width: 158px;
  height: 188px;
  bottom: 37px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] {
  left: -46px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] .screen {
  width: 151px;
  height: 111px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 152px;
  height: 196px;
  bottom: 37px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--dark"] .screen {
  width: 154px;
  height: 198px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] {
  left: -46px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] .screen {
  width: 157px;
  height: 108px;
  bottom: 8px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 162px;
  height: 112px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 146px;
  height: 196px;
  bottom: 41px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 157px;
  height: 102px;
  bottom: 9px;
  border-radius: 5px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--semi-realistic] .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--realistic] .screen {
  width: 158px;
  height: 199px;
  bottom: 37px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*="--landscape"], .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--realistic][class*="--landscape"] {
  left: -46px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--realistic][class*="--landscape"] .screen {
  width: 162px;
  height: 111px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded] .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--realistic][class*=rounded] .screen {
  width: 158px;
  height: 188px;
  bottom: 64px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--realistic][class*=rounded][class*="--landscape"] .screen {
  width: 166px;
  height: 108px;
  bottom: 4px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--simple] .screen {
  width: 158px;
  height: 188px;
  bottom: 64px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--simple][class*="--landscape"] .screen {
  width: 163px;
  height: 107px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--browser] .screen {
  width: 173px;
  bottom: 43px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] {
  width: 173px;
  height: 84px;
  left: 11px;
  top: 86px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  width: 172px;
  height: 86px;
  bottom: -11px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--] {
  top: 10px;
  left: 15px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 290px;
  height: 165px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--] .screen {
  width: 215px;
  height: 121px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--] .screen img {
  border-radius: 0;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 224px;
  height: 131px;
  bottom: 20px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--outline] .screen {
  width: 215px;
  height: 139px;
  bottom: 17px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--outline][class*="--light"] .screen {
  height: 140px;
  border: solid 1px #EAEAEA;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 228px;
  height: 142px;
  bottom: 18px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--semi-realistic] .screen {
  width: 217px;
  height: 141px;
  bottom: 17px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 231px;
  height: 149px;
  bottom: 11px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--realistic] .screen {
  width: 223px;
  height: 141px;
  bottom: 16px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 289px;
  height: 154px;
  bottom: 0px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--browser][class*="--rounded"] .screen {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.thumbnail-options .thumbnail.layout-one .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 231px;
  height: 149px;
  bottom: 11px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--] {
  width: 112px;
  height: 201px;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--mobile .mockup-frame, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--] .mockup-frame {
  max-width: 100%;
  height: auto;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--mobile .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--] .screen {
  width: 86px;
  height: 152px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--] {
  width: 104px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--] .screen {
  width: 91px;
  bottom: 30px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 211px;
  height: 101px;
  top: 57px;
  left: 13px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 174px;
  height: 97px;
  top: 7px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline] .screen {
  width: 95px;
  bottom: 44px;
  border-radius: 11px;
  transform: none;
  left: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--dark"] .screen {
  width: 98px;
  top: 3px;
  left: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 211px;
  height: 101px;
  top: 67px;
  left: 13px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 209px;
  height: 93px;
  left: 4px;
  top: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 205px;
  height: 94px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--rounded"] {
  width: 100px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--rounded"] .screen {
  width: 89.5px;
  bottom: 42px;
  top: 6px;
  left: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] {
  width: 211px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 205px;
  height: 93px;
  top: 5px;
  left: 6px;
  transform: none;
  border-radius: 12px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--semi-realistic] .screen {
  width: 98px;
  bottom: 46px;
  border-radius: 11px;
  transform: none;
  left: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 211px;
  height: 101px;
  top: 67px;
  left: 13px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 205px;
  height: 94px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] .screen {
  border-radius: 14px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  height: 96px;
  top: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--realistic] .screen {
  width: 94px;
  bottom: 45px;
  border-radius: 8px;
  transform: none;
  left: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 211px;
  height: 101px;
  top: 67px;
  left: 13px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 205px;
  height: 94px;
  left: 3px;
  top: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--simple] .screen {
  width: 97px;
  bottom: 46px;
  border-radius: 14px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] {
  width: 211px;
  height: 101px;
  top: 67px;
  left: 13px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] .screen {
  width: 205px;
  height: 98px;
  top: 4px;
  left: 3px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--browser] .screen {
  width: 104px;
  height: 160px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--browser][class*="--rounded"] .screen {
  border-radius: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] {
  width: 211px;
  height: auto;
  top: 67px;
  left: 96px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] .screen {
  width: 211px;
  height: 91px;
  bottom: 9px;
  margin-top: 5px;
  top: -3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--] {
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--tablet .mockup-frame, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--] .mockup-frame {
  width: 140px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--] .screen {
  width: 115px;
  height: 152px;
  bottom: 22px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--traditional] .screen {
  width: 127px;
  height: 152px;
  bottom: 31px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] {
  top: 115px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] .screen {
  height: 92px;
  width: 122px;
  bottom: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 124px;
  height: 157px;
  bottom: 31px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--dark"] .screen {
  width: 126px;
  height: 159px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] {
  top: 110px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] .screen {
  width: 125px;
  height: 86px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 131px;
  height: 91px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 118px;
  height: 162px;
  bottom: 30px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 126px;
  height: 89px;
  bottom: 0.5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--semi-realistic] .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--realistic] .screen {
  width: 126px;
  height: 168px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--semi-realistic][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--realistic][class*="--landscape"] .screen {
  height: 92px;
  width: 134px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded] .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--realistic][class*=rounded] .screen {
  width: 130px;
  height: 141px;
  bottom: 64px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--realistic][class*=rounded][class*="--landscape"] .screen {
  width: 133px;
  height: 89px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--simple] .screen {
  width: 130px;
  height: 141px;
  bottom: 64px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--simple][class*="--landscape"] .screen {
  width: 133px;
  height: 87px;
  bottom: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--browser] .screen {
  width: 140.5px;
  height: 166px;
  bottom: 22px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--browser][class*=rounded] .screen {
  border-radius: 4px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] {
  width: 211px;
  height: auto;
  top: 67px;
  left: 96px;
  transform: none;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  width: 211px;
  height: 97px;
  bottom: 9px;
  margin-top: 5px;
  top: -3px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--] {
  top: 47px;
  left: 8px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 290px;
  height: 165px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--] .screen {
  width: 215px;
  height: 121px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--] .screen img {
  border-radius: 0;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 224px;
  height: 124px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--outline] .screen {
  width: 215px;
  height: 125px;
  bottom: 31px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--outline][class*="--light"] .screen {
  height: 126px;
  border: solid 1px #EAEAEA;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 230px;
  height: 142px;
  bottom: 19px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--semi-realistic] .screen {
  width: 217px;
  height: 131px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 232px;
  height: 142px;
  bottom: 19px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--realistic] .screen {
  width: 217px;
  height: 131px;
  bottom: 27px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 291px;
  height: 122px;
  bottom: 32px;
}
.thumbnail-options .thumbnail.layout-two .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 232px;
  height: 142px;
  bottom: 19px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-background .skew-element {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: -45px;
  transform: skewY(-10deg);
}
.thumbnail-options .thumbnail.layout-three .thumbnail-background .helper-element {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -10px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--] {
  width: 88px;
  height: 156px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--mobile .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--] .screen {
  width: 68px;
  height: 122px;
  top: 50%;
  bottom: 50%;
  margin: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--mobile .mockup-frame, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--] .mockup-frame {
  max-width: 100%;
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--] {
  position: relative;
  width: 82px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--] .screen {
  width: 72px;
  height: 127px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 130px;
  height: 74px;
  top: 58%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline] .screen {
  width: 70px;
  height: 151px;
  border-radius: 9px;
  top: 51%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--dark"] {
  width: 74px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--dark"] .screen {
  width: 70px;
  height: 151px;
  top: 49%;
  left: 50%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 152px;
  height: 70px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 154px;
  height: 72px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--light"] .screen {
  width: 67.5px;
  top: 3.5px;
  bottom: 5.5px;
  height: 145px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--dark"] .screen {
  width: 66.5px;
  top: 3.5px;
  bottom: 9.5px;
  height: 142px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] {
  width: 158px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  top: 50%;
  bottom: 50%;
  height: 89%;
  width: 94%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic] .screen {
  width: 72px;
  height: 157px;
  border-radius: 9px;
  top: 52%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  top: 50%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] {
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] .screen {
  height: 96%;
  width: 91%;
  top: 49%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] {
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  width: 96%;
  height: 90%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--realistic] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--realistic] .screen {
  width: 69px;
  height: 149px;
  border-radius: 7px;
  top: 49%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  top: 51%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--simple] .screen {
  width: 77px;
  height: 158px;
  bottom: -7px;
  top: 0;
  border-radius: 12px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] {
  width: 158px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] .screen {
  width: 97%;
  height: 93%;
  top: 50%;
  bottom: 50%;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--browser] .screen {
  width: 83px;
  height: 163px;
  top: 89px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--browser][class*="--rounded"] .screen {
  border-radius: 4px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] {
  width: 158px;
  height: auto;
  right: 11px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] .screen {
  top: 0;
  bottom: 0;
  width: 157px;
  height: 65px;
  margin-top: 5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--tablet .mockup-frame, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--] .mockup-frame {
  width: 114px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--] .screen {
  width: 94px;
  height: 124px;
  bottom: 18px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--traditional] .screen {
  width: 104px;
  height: 138px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] .screen {
  width: 100px;
  height: 75px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 101px;
  height: 150px;
  bottom: 3px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--dark"] .screen {
  width: 103px;
  height: 152px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] .screen {
  width: 104px;
  height: 71px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 107px;
  height: 74px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97px;
  height: 148px;
  bottom: 8.4px;
  border-radius: 3.5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 102.5px;
  top: 6.3px;
  bottom: 0;
  height: 66px;
  border-radius: 1px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--semi-realistic] .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--realistic] .screen {
  width: 104px;
  height: 150px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--semi-realistic][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--realistic][class*="--landscape"] .screen {
  width: 108px;
  height: 75px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded] .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--realistic][class*=rounded] .screen {
  width: 106px;
  height: 162px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--realistic][class*=rounded][class*="--landscape"] .screen {
  width: 109px;
  height: 72px;
  bottom: 2px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--simple] .screen {
  width: 106px;
  height: 162px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--simple][class*="--landscape"] .screen {
  width: 109px;
  height: 71px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--browser] .screen {
  width: 113.5px;
  height: 153px;
  bottom: 0px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--browser][class*=rounded] {
  border-radius: 6px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] {
  width: 158px;
  height: auto;
  right: 11px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  top: 0;
  bottom: 0;
  width: 113px;
  height: 75px;
  margin-top: 5px;
  left: 57px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--] {
  top: 65px;
  bottom: inherit;
  transform: translate(-50%, 0);
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 160px;
  height: 92px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--] .screen {
  width: 119px;
  height: 68px;
  bottom: 15px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--] .screen img {
  border-radius: 0;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 124px;
  height: 73px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--outline] .screen {
  width: 119px;
  height: 78px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--outline][class*="--light"] .screen {
  border: solid 1px #EAEAEA;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 127px;
  height: 79px;
  bottom: 11px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--semi-realistic] .screen {
  width: 120px;
  height: 79px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 128px;
  height: 83px;
  bottom: 7px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--realistic] .screen {
  width: 120px;
  height: 79px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 160px;
  height: 86px;
  bottom: 0px;
}
.thumbnail-options .thumbnail.layout-three .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 128px;
  height: 83px;
  bottom: 7px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-background .rectangle {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--base00);
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--] {
  width: 88px;
  height: 156px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--mobile .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--] .screen {
  width: 68px;
  height: 122px;
  top: 50%;
  bottom: 50%;
  margin: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--mobile .mockup-frame, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--] .mockup-frame {
  max-width: 100%;
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--] {
  width: 82px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--] .screen {
  width: 72px;
  height: 127px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 130px;
  height: 74px;
  top: 58%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline] .screen {
  width: 70px;
  height: 151px;
  border-radius: 9px;
  top: 51%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--dark"] {
  width: 74px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--dark"] .screen {
  width: 70px;
  height: 151px;
  top: 49%;
  left: 50%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 152px;
  height: 70px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 154px;
  height: 72px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--light"] .screen {
  width: 67.5px;
  top: 3.5px;
  bottom: 5.5px;
  height: 145px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--dark"] .screen {
  width: 65.5px;
  top: 3.5px;
  bottom: 9.5px;
  height: 142px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] {
  width: 158px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  top: 50%;
  bottom: 50%;
  height: 89%;
  width: 94%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic] .screen {
  width: 72px;
  height: 156px;
  border-radius: 9px;
  top: 52%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  top: 50%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] {
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] .screen {
  height: 97%;
  width: 91%;
  top: 49%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] {
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  width: 96%;
  height: 90%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--realistic] {
  width: 76px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--realistic] .screen {
  width: 69px;
  height: 149px;
  border-radius: 7px;
  top: 49%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 158px;
  height: 77px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 154px;
  height: 72px;
  top: 51%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple] {
  height: 156px;
  width: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple] .screen {
  width: 77px;
  height: 158px;
  bottom: -7px;
  top: 0;
  border-radius: 12px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] {
  width: 82px;
  height: 156px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] .screen {
  width: 77px;
  height: 158px;
  bottom: -7px;
  top: 0;
  border-radius: 12px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] {
  width: 158px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--landscape"] .screen {
  width: 97%;
  height: 93%;
  top: 50%;
  bottom: 50%;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--browser] .screen {
  width: 81px;
  height: 166px;
  top: 90px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--browser][class*="--rounded"] .screen {
  border-radius: 4px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] {
  width: 157px;
  height: auto;
  right: 11px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] .screen {
  top: 0;
  bottom: 0;
  width: 157px;
  height: 64px;
  margin-top: 5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--tablet .mockup-frame, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--] .mockup-frame {
  width: 114px;
  height: auto;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--] .screen {
  width: 94px;
  height: 124px;
  bottom: 18px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--traditional] .screen {
  width: 104px;
  height: 138px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--traditional][class*="--landscape"] .screen {
  width: 100px;
  height: 75px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 101px;
  height: 150px;
  bottom: 3px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--dark"] .screen {
  width: 103px;
  height: 152px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--landscape"] .screen {
  width: 104px;
  height: 71px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 107px;
  height: 74px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97.5px;
  height: 149px;
  bottom: 8px;
  border-radius: 3.5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 103.5px;
  top: 6.3px;
  bottom: 0;
  height: 66px;
  border-radius: 1px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--semi-realistic] .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--realistic] .screen {
  width: 104px;
  height: 150px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--semi-realistic][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--realistic][class*="--landscape"] .screen {
  width: 108px;
  height: 75px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded] .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--realistic][class*=rounded] .screen {
  width: 106px;
  height: 162px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--realistic][class*=rounded][class*="--landscape"] .screen {
  width: 107px;
  height: 72px;
  bottom: 2px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--simple] .screen {
  width: 106px;
  height: 162px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--simple][class*="--landscape"] .screen {
  width: 107px;
  height: 71px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--browser] .screen {
  width: 114.5px;
  height: 153px;
  bottom: 0px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--browser][class*=rounded] {
  border-radius: 6px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] {
  width: 157px;
  height: auto;
  right: 11px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  top: 0;
  bottom: 0;
  width: 115px;
  height: 75px;
  margin-top: 5px;
  left: 57px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--] {
  top: 88px;
  bottom: inherit;
  transform: translate(-50%, 0);
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--desktop .screen img, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--] .screen img {
  border-radius: 0;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 160px;
  height: 92px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--] .screen {
  width: 119px;
  height: 68px;
  bottom: 15px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 124px;
  height: 73px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--outline] .screen {
  width: 119px;
  height: 78px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--outline][class*="--light"] .screen {
  border: solid 1px #EAEAEA;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 127px;
  height: 79px;
  bottom: 10.5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--semi-realistic] .screen {
  width: 120px;
  height: 79px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 128px;
  height: 84px;
  bottom: 6px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--realistic] .screen {
  width: 120px;
  height: 79px;
  bottom: 9px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 160px;
  height: 86px;
  bottom: 0px;
}
.thumbnail-options .thumbnail.layout-four .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 128px;
  height: 84px;
  bottom: 6px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=mobile--] {
  left: 84px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup--mobile[class*="--landscape"], .thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=mobile--][class*="--landscape"] {
  left: 27px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--]:not([class*="--landscape"]) {
  left: 94px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup--tablet .screen, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--]:not([class*="--landscape"]) .screen {
  width: 158px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 158px;
  left: 92px;
  top: 12px;
  border-radius: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] {
  width: 173px;
  height: 122px;
  left: 19px;
  top: 45px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 12px;
  top: unset;
  left: 50%;
  width: 155px;
  height: 101px;
  border-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  width: 140px;
  top: 14px;
  left: 70px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] {
  width: 173px;
  height: 122px;
  left: 19px;
  top: 45px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  bottom: 0;
  top: unset;
  left: 50%;
  width: 100%;
  height: 122px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--simple][class*="--rounded"] .screen {
  top: 7px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 163px;
  height: 107px;
  bottom: 5px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-one .thumbnail-mockup[class*=desktop--] {
  left: 28px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--]:not([class*="--landscape"]) .screen {
  width: 127px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--]:not([class*="--landscape"])[class*="--rounded"] {
  width: 130px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  left: 70px;
  width: 119px;
  border-radius: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 0;
  width: 126px;
  height: 89px;
  border-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  width: 141px;
  top: 11px;
  left: 70px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  bottom: 0;
  top: unset;
  left: 50%;
  width: 100%;
  height: 92px;
  border-top-left-radius: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--simple][class*="--rounded"] .screen {
  left: 70px;
  width: 129px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-two .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  left: 70px;
  width: 133px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-background img {
  float: right;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-background .skew-element {
  width: 82px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  transform: none;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-background .helper-element {
  width: 0;
  height: 0;
  display: none;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup {
  top: 50%;
  left: 45px;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--tablet[class*="--landscape"], .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=mobile--][class*="--landscape"] {
  left: 27px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class=mobile--browser] .screen {
  top: 84px;
  height: 223px;
  bottom: 0;
  width: 82px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class=mobile--browser][class="--rounded"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] {
  height: 164px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] .screen {
  height: 159px;
  bottom: 2px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] .screen {
  top: unset;
  bottom: 3px;
  width: 157px;
  height: 74px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--] {
  left: 34px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--tablet[class*="--rounded"] .screen, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--][class*="--rounded"] .screen {
  bottom: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 104px;
  height: 148px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--dark"]:not([class*="--landscape"]):not([class*="--rounded"]) .screen {
  width: 104px;
  height: 149px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--light"] .screen {
  width: 104px;
  height: 71px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97px;
  height: 148px;
  bottom: 0;
  top: 8px;
  left: 57px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 6px;
  width: 103px;
  height: 67px;
  border-radius: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--dark"] {
  width: 97px;
  border-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  top: 8px;
  height: 152px;
  border-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--rounded"][class="--rounded"] .screen {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  top: unset;
  bottom: 0;
  width: 115px;
  height: 74px;
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--simple][class*="--rounded"] .screen {
  top: 4px;
  height: 162px;
  border-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 3px;
  width: 108px;
  height: 71px;
  border-radius: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen {
  bottom: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--] {
  left: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 180px;
  height: 102px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--] .screen {
  width: 133px;
  height: 75px;
  bottom: 16px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--] .screen {
  width: 138px;
  height: 87px;
  bottom: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 139px;
  height: 81px;
  bottom: 12px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 179px;
  height: 95px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--browser][class="--rounded"] {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 145px;
  height: 93px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 143px;
  height: 88px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-three .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 145px;
  height: 92px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-background .rectangle {
  width: 72px;
  height: 100%;
  position: absolute;
  right: 0;
  left: auto;
  bottom: 0;
  background: var(--base00);
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup {
  top: 50%;
  left: 89px;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--][class*="--landscape"] {
  left: 27px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--browser] .screen {
  top: 84px;
  height: 223px;
  bottom: 0;
  width: 82px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--browser][class*="--landscape"] .screen {
  top: 0;
  bottom: 0;
  width: 157px;
  height: 64px;
  margin-top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--browser][class="--rounded"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] .screen {
  width: 117px;
  height: 188px;
  bottom: 0;
  top: 41px;
  border-radius: 12px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] .screen {
  top: unset;
  bottom: 3px;
  width: 157px;
  height: 74px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--] {
  left: 76px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup--tablet[class*="--rounded"] .screen, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--][class*="--rounded"] .screen {
  bottom: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 104px;
  height: 148px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--dark"]:not([class*="--landscape"]):not([class*="--rounded"]) .screen {
  width: 104px;
  height: 149px;
  bottom: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--light"] .screen {
  width: 104px;
  height: 71px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97px;
  height: 148px;
  bottom: 8px;
  left: 57px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--dark"] {
  width: 97px;
  border-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 6px;
  width: 103px;
  height: 67px;
  border-radius: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  top: 8px;
  height: 152px;
  border-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--rounded"][class="--rounded"] .screen {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  top: unset;
  bottom: 0;
  width: 115px;
  height: 74px;
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--simple][class*="--rounded"] .screen {
  bottom: 0;
  top: 4px;
  height: 162px;
  border-radius: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  bottom: 3px;
  width: 108px;
  height: 71px;
  border-radius: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=tablet--semi-realistic][class*=rounded][class*="--landscape"] .screen {
  bottom: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup--desktop, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--] {
  left: 32px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup--desktop .mockup-frame, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 180px;
  height: 102px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup--desktop .screen, .thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--] .screen {
  width: 133px;
  height: 75px;
  bottom: 16px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--] .screen {
  width: 138px;
  height: 87px;
  bottom: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 139px;
  height: 81px;
  bottom: 12px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--browser] .screen {
  width: 179px;
  height: 95px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--browser][class="--rounded"] {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--simple][class*="--rounded"] .screen {
  width: 145px;
  height: 92px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--outline][class*="--rounded"] .screen {
  width: 143px;
  height: 89px;
  top: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--medium.layout-four .thumbnail-mockup[class*=desktop--semi-realistic][class*="--rounded"] .screen {
  width: 144px;
  height: 92px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-background .skew-element {
  width: 250px;
  height: 100%;
  position: absolute;
  left: 126px;
  top: 0;
  transform: skewX(-10deg);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-background .helper-element {
  height: 100%;
  width: 100px;
  position: absolute;
  right: 0;
  top: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup {
  top: 50%;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--] {
  left: 81px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--] .screen {
  height: 149px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--traditional] .screen {
  height: 126px;
  bottom: 17px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 236px;
  height: 124px;
  left: 59px;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 196px;
  height: 111px;
  top: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--outline] .screen {
  height: 148px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 236px;
  height: 113px;
  left: 59px;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 226px;
  height: 103px;
  left: 5px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 224px;
  height: 105px;
  left: 6px;
  top: 5px;
  border-radius: 16px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--browser] .screen {
  height: 163px;
  bottom: -14px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--browser][class*=landscape] {
  height: 70px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--browser][class*=landscape] .screen {
  bottom: 0;
  top: unset;
  height: 63px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--browser][class*=landscape][class*="--rounded"] {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] {
  width: 236px;
  height: 118px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] .screen {
  width: 228px;
  height: 111px;
  bottom: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--semi-realistic] .screen {
  height: 156px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 236px;
  height: 113px;
  left: 59px;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"] .screen {
  height: 150px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  height: 109px;
  border-radius: 21px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 236px;
  height: 113px;
  left: 59px;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--tablet {
  left: 68px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--tablet .mockup-frame {
  width: 114px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--tablet .screen {
  width: 94px;
  height: 124px;
  bottom: 18px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--] {
  left: 68px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--] .mockup-frame {
  width: 114px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--] .screen {
  width: 103px;
  height: 149px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--][class*="--landscape"] {
  width: 171px;
  height: 122px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--][class*="--landscape"] .mockup-frame {
  width: 100%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--][class*="--landscape"] .screen {
  width: 161px;
  height: 112px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--traditional] .screen {
  width: 103px;
  height: 136px;
  bottom: 12px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 104px;
  height: 148px;
  bottom: 5px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--dark"]:not([class*="--landscape"]) .screen {
  width: 104px;
  height: 150px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--light"] .screen {
  width: 155px;
  height: 107px;
  top: 7px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97px;
  height: 148px;
  bottom: 8px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 155px;
  height: 100px;
  border-radius: 2px;
  top: 9px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--browser] .screen {
  width: 114px;
  height: 153px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  width: 171px;
  height: 112px;
  top: 9px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*="--rounded"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--simple][class*="--rounded"] .screen {
  width: 106px;
  height: 162px;
  bottom: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--semi-realistic][class*="--rounded"][class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 164px;
  height: 106px;
  top: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--desktop {
  left: 42px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--desktop .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup--desktop .screen {
  width: 156px;
  height: 90px;
  bottom: 18px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--] {
  left: 42px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--] .screen {
  width: 162px;
  height: 103px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"] .screen {
  width: 87px;
  height: 128px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--semi-realistic"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--simple"] .screen {
  width: 168px;
  height: 109px;
  bottom: 8px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--outline"] .screen {
  width: 166px;
  height: 104px;
  bottom: 13px;
  border: none;
  border-top-left-radius: 2px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"] .screen {
  width: 210px;
  height: 113px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-one .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 162px;
  height: 95px;
  bottom: 14px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--] {
  top: 32px;
  left: 211px;
  transform: none;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  width: 236px;
  height: 124px;
  left: 180px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 196px;
  height: 110px;
  top: 7px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 226px;
  height: 103px;
  left: 5px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 230px;
  height: 104px;
  left: 6px;
  top: 6px;
  border-radius: 13px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  width: 230px;
  height: 108px;
  left: 3px;
  top: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--simple] [class*="--landscape"] .screen {
  height: 99px;
  top: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 3px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--] {
  left: 197px;
  transform: none;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--tablet[class*="--landscape"], .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--][class*="--landscape"] {
  width: 171px;
  height: 122px;
  top: 50%;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--tablet[class*="--landscape"] .mockup-frame, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--][class*="--landscape"] .mockup-frame {
  width: 100%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--tablet[class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--][class*="--landscape"] .screen {
  width: 161px;
  height: 112px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  left: 85px;
  width: 170px;
  height: 112px;
  top: 4px;
  border-radius: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--browser][class*="--landscape"][class*="--rounded"] .screen {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 104px;
  height: 148px;
  bottom: 5px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--dark"]:not([class*="--landscape"]) .screen {
  width: 104px;
  height: 150px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--light"] .screen {
  width: 155px;
  height: 107px;
  top: 7px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 118px;
  height: 184px;
  bottom: 8px;
  border-radius: 2px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 155px;
  height: 100px;
  border-radius: 2px;
  top: 9px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--semi-realistic][class*="--rounded"][class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 161px;
  height: 106px;
  top: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--desktop {
  top: 50%;
  left: 162px;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--desktop .mockup-frame {
  height: 158px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup--desktop .screen {
  width: 215px;
  height: 116px;
  bottom: 25px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--] {
  top: 50%;
  left: 162px;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--] .mockup-frame {
  height: 158px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--] .screen {
  width: 217px;
  height: 134px;
  bottom: 16px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--rounded"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--squared"] .screen {
  width: 232px;
  height: 143px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--outline"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--squared"][class*="--outline"] .screen {
  width: 230px;
  height: 137px;
  bottom: 17px;
  border: none;
  border-top-left-radius: 2px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--squared"][class*="--browser"] .screen {
  width: 289px;
  height: 147px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"][class*="--rounded"], .thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--][class*="--squared"][class*="--browser"][class*="--rounded"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-two .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 223px;
  height: 125px;
  bottom: 19px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-background img {
  display: none;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-background .skew-element,
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-background .helper-element {
  width: 0;
  height: 0;
  display: none;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup {
  top: 50%;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--] {
  left: 214px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  left: 94px;
  width: 236px;
  height: 124px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 196px;
  height: 110px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  left: 96px;
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 226px;
  height: 103px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 230px;
  height: 106px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 223px;
  height: 103px;
  top: 58px;
  border-radius: 14px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  left: 96px;
  width: 235px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  top: 58px;
  border-radius: 20px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  left: 96px;
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 50%;
  top: 54%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"] .screen {
  width: 136px;
  height: 158px;
  bottom: -13px;
  top: 0;
  border-radius: 16px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] {
  width: 236px;
  height: 118px;
  left: 100px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 228px;
  height: 111px;
  bottom: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--browser][class*=landscape] .screen {
  height: 64px;
  width: 158px;
  bottom: 0;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=mobile--browser][class*=landscape][class*="--rounded"] {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--] {
  left: 203px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--tablet[class*="--landscape"], .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--][class*="--landscape"] {
  width: 171px;
  height: 122px;
  left: 156px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--tablet[class*="--landscape"] .mockup-frame, .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--][class*="--landscape"] .mockup-frame {
  width: 100%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--tablet[class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--][class*="--landscape"] .screen {
  width: 161px;
  height: 112px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 155px;
  height: 100px;
  top: 9px;
  border-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  left: 50%;
  width: 171px;
  height: 111px;
  top: 4px;
  border-radius: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--browser][class*="--landscape"][class*="--rounded"] .screen {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--semi-realistic][class*="--rounded"][class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 164px;
  height: 106px;
  top: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--desktop {
  left: 134px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--desktop .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup--desktop .screen {
  width: 156px;
  height: 90px;
  bottom: 18px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--] {
  left: 134px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--] .screen {
  width: 162px;
  height: 103px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--][class*="--rounded"] .screen {
  width: 168px;
  height: 109px;
  bottom: 8px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--outline"] .screen {
  width: 166px;
  height: 104px;
  bottom: 13px;
  border: none;
  border-top-left-radius: 2px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"] .screen {
  width: 210px;
  height: 112px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"][class*="--rounded"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-three .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 162px;
  height: 94px;
  bottom: 15px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-background img {
  display: none;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-background .rectangle {
  width: 95px;
  height: 100%;
  position: absolute;
  right: 0;
  left: auto;
  bottom: 0;
  background: var(--base00);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup {
  top: 50%;
  transform: translateY(-50%);
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--mobile, .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--] {
  left: 220px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] {
  left: 100px;
  width: 236px;
  height: 124px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--traditional][class*="--landscape"] .screen {
  width: 196px;
  height: 110px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] {
  left: 100px;
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"] .screen {
  width: 226px;
  height: 103px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--landscape"][class*="--dark"] .screen {
  width: 230px;
  height: 106px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 223px;
  height: 103px;
  top: 58px;
  border-radius: 14px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] {
  left: 100px;
  width: 235px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 50%;
  top: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--semi-realistic][class*="--rounded"][class*="--landscape"] .screen {
  top: 58px;
  border-radius: 20px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] {
  left: 100px;
  width: 236px;
  height: 113px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--realistic][class*="--landscape"] .screen {
  width: 230px;
  height: 106px;
  left: 50%;
  top: 54%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--simple] {
  width: 82px;
  height: 164px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--simple] .screen {
  height: 161px;
  bottom: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] {
  width: 236px;
  height: 118px;
  left: 100px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=mobile--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 228px;
  height: 111px;
  bottom: 3px;
  top: unset;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--tablet, .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--] {
  left: 207px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--tablet[class*="--landscape"], .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--][class*="--landscape"] {
  width: 171px;
  height: 122px;
  left: 156px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--tablet[class*="--landscape"] .mockup-frame, .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--][class*="--landscape"] .mockup-frame {
  width: 100%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--tablet[class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--][class*="--landscape"] .screen {
  width: 161px;
  height: 112px;
  top: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--outline] .screen {
  width: 104px;
  height: 148px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--dark"]:not([class*="--landscape"]) .screen {
  width: 104px;
  height: 150px;
  bottom: 5px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--landscape"][class*="--light"] .screen {
  width: 157px;
  height: 110px;
  top: 6px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"] .screen {
  width: 97px;
  height: 148px;
  bottom: 8px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--outline][class*="--rounded"][class*="--landscape"] .screen {
  width: 155px;
  height: 100px;
  top: 9px;
  border-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--rounded"] .screen {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--browser][class*="--landscape"] .screen {
  width: 171px;
  height: 111px;
  top: 4px;
  left: 50%;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--semi-realistic][class*="--rounded"][class*="--landscape"] .screen, .thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=tablet--simple][class*="--rounded"][class*="--landscape"] .screen {
  width: 164px;
  height: 106px;
  top: 4px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--desktop {
  left: 139px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--desktop .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup--desktop .screen {
  width: 156px;
  height: 88px;
  bottom: 19px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--] {
  left: 139px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--] .mockup-frame {
  width: 210px;
  height: 120px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--] .screen {
  width: 162px;
  height: 103px;
  bottom: 11px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--][class*="--rounded"] .screen {
  width: 168px;
  height: 109px;
  bottom: 8px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--outline"] .screen {
  width: 166px;
  height: 104px;
  bottom: 13px;
  border: none;
  border-top-left-radius: 2px;
  border-top-right-radius: 3px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"] .screen {
  width: 210px;
  height: 112px;
  bottom: 0;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--][class*="--rounded"][class*="--browser"][class*="--rounded"] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.thumbnail-options .thumbnail.thumbnail-size--large.layout-four .thumbnail-mockup[class*=desktop--traditional] .screen {
  width: 162px;
  height: 95px;
  bottom: 14px;
}

.change-mockup-on-thumbnail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: var(--primarySans);
  font-size: 1rem;
  color: #778390;
}
.change-mockup-on-thumbnail .navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
}
.change-mockup-on-thumbnail .display {
  color: #9fa6a9;
}
.change-mockup-on-thumbnail .display span {
  color: #778390;
}
.change-mockup-on-thumbnail .arrow {
  width: 20px;
  height: 20px;
  transform-origin: center center;
  cursor: pointer;
}
.change-mockup-on-thumbnail .arrow.next {
  background: url(/dist/src/assets/images/icon-arrow..svg) center center no-repeat;
  background-size: 12px;
  transform: rotate(90deg);
}
.change-mockup-on-thumbnail .arrow.prev {
  background: url(/dist/src/assets/images/icon-arrow..svg) center center no-repeat;
  background-size: 12px;
  transform: rotate(-90deg);
}

.saving-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 246, 251, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.saving-thumbnail img {
  width: 50px;
  height: auto;
}
.saving-thumbnail .saving-text {
  font-family: var(--primarySans);
  font-size: 12px;
}

/*!
 * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
:host, :root {
  --fa-style-family-brands:"Font Awesome 6 Brands";
  --fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands" ;
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.ttf") format("truetype");
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 "Font Awesome 6 Brands";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-twitter:before, .fa-x-twitter:before {
  content: "\e61b";
}

.fa-facebook:before {
  content: "\f39e";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-medium-m:before, .fa-medium:before {
  content: "\f23a";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-github:before {
  content: "\f09b";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-slack-hash:before, .fa-slack:before {
  content: "\f198";
}

.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  position: relative;
}
.dropzone button,
.dropzone button:active,
.dropzone button:focus {
  outline: none;
}
.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  margin: 0.5em;
}
.dropzone .dz-preview .dz-progress {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}
.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}
.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
  opacity: 1;
}
.dropzone .dz-preview.dz-success .dz-progress {
  opacity: 0;
}
.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
}
.dropzone.dz-max-files-reached {
  flex-direction: column;
}
.dropzone.dz-max-files-reached .dz-default.dz-message {
  display: initial;
}
.dropzone.dz-max-files-reached .dz-default.dz-message .dz-default-message {
  display: none !important;
}

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone.dz-clickable {
  cursor: pointer;
}
.dropzone.dz-clickable .dz-button {
  border: none;
  background: transparent;
}
.dropzone.dz-clickable * {
  cursor: default;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message > * {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.dropzone {
  min-height: 150px;
}
.dropzone--large {
  min-height: 50vh;
}
.dropzone {
  border: 2px solid var(--asphalt100);
  background: white;
  padding: 20px 20px;
}
.dropzone.dz-started .dz-message {
  display: none;
}
.dropzone.dz-drag-hover {
  background: var(--asphalt20);
  border-style: solid;
  transition: all 0.3s;
}
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}
.dropzone .dz-message {
  text-align: center;
  height: 100%;
  position: relative;
  display: flex;
  color: var(--asphalt20);
}
.dropzone .dz-message p {
  font: var(--editor-ui-b1-semibold);
  color: var(--asphalt20);
  display: block !important;
  margin: 0;
}
.dropzone .dz-message p.link {
  font-weight: 600;
}
.dropzone .dz-message .blue {
  display: inline-block;
  color: var(--volt);
}
.dropzone .dz-message small {
  font-weight: normal;
  font-size: 12px;
  color: var(--asphalt60);
}
.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}
.dropzone .dz-preview:hover {
  z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone .dz-preview.dz-file-preview .font-file {
  font-size: 12px;
  padding: 5px;
}
.dropzone .dz-preview.dz-file-preview .font-file .dz-size {
  font-weight: bold;
}
.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
  background: white;
  max-width: 200px;
  height: auto;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}
.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview .dz-details {
  font-family: var(--primarySans);
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}
.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}
.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
  overflow: hidden;
  position: relative;
  display: block;
  z-index: 10;
}
.dropzone .dz-preview .dz-image img {
  width: 100%;
  display: block;
}
.dropzone .dz-preview.dz-complete .dz-image img {
  display: block;
  transition: all 0.3s;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 6px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: var(--base00);
  transform: scale(1);
  border-radius: 3px;
  overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
  background: var(--meta60);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-success.dz-complete .dz-progress {
  opacity: 0;
  transition-delay: 0.4s;
}
.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 260px;
  left: -10px;
  width: 270px;
  background: rgb(190, 38, 38);
  background: linear-gradient(to bottom, rgb(190, 38, 38), rgb(168.75, 33.75, 33.75));
  padding: 0.5em 1.2em;
  color: white;
}
.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 129px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgb(190, 38, 38);
}

.ps {
  touch-action: auto;
  overflow: hidden !important;
  -ms-overflow-style: none;
}

@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.ps.ps--active-x > .ps__rail-x,
.ps.ps--active-y > .ps__rail-y {
  display: block;
  background-color: var(--asphalt80);
}

.ps.ps--in-scrolling.ps--x > .ps__rail-x {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps.ps--in-scrolling.ps--x > .ps__rail-x > .ps__thumb-x {
  background-color: var(--asphalt50);
  height: 6px;
}

.ps.ps--in-scrolling.ps--y > .ps__rail-y {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps.ps--in-scrolling.ps--y > .ps__rail-y > .ps__thumb-y {
  background-color: var(--asphalt50);
  width: 6px;
}

.ps > .ps__rail-x {
  display: none !important;
  position: absolute;
  /* please don't change 'position' */
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  bottom: 0px;
  /* there must be 'bottom' for ps__rail-x */
  height: 15px;
}

.ps > .ps__rail-x > .ps__thumb-x,
.ps__rail-x {
  position: absolute;
  /* please don't change 'position' */
  background-color: var(--asphalt50);
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  bottom: 2px;
  /* there must be 'bottom' for ps__thumb-x */
  height: 6px;
}

.ps > .ps__rail-x:hover > .ps__thumb-x, .ps > .ps__rail-x:active > .ps__thumb-x {
  height: 6px;
}

.ps > .ps__rail-y,
.ps__rail-y {
  display: none;
  position: absolute;
  /* please don't change 'position' */
  opacity: 1;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  right: 0;
  /* there must be 'right' for ps__rail-y */
  width: 6px;
}

.ps > .ps__rail-y > .ps__thumb-y {
  position: absolute;
  /* please don't change 'position' */
  background-color: var(--asphalt50);
  transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  right: 0;
  /* there must be 'right' for ps__thumb-y */
  width: 6px;
}

.ps > .ps__rail-y:hover > .ps__thumb-y, .ps > .ps__rail-y:active > .ps__thumb-y {
  width: 6px;
}

.ps:hover.ps--in-scrolling.ps--x > .ps__rail-x {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps:hover.ps--in-scrolling.ps--x > .ps__rail-x > .ps__thumb-x {
  background-color: var(--asphalt50);
  height: 6px;
}

.ps:hover.ps--in-scrolling.ps--y > .ps__rail-y {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps:hover.ps--in-scrolling.ps--y > .ps__rail-y > .ps__thumb-y {
  background-color: var(--asphalt50);
  width: 6px;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y {
  opacity: 0.6;
}

.ps:hover > .ps__rail-x:hover {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps:hover > .ps__rail-x:hover > .ps__thumb-x {
  background-color: var(--asphalt50);
}

.ps:hover > .ps__rail-y:hover {
  background-color: var(--asphalt80);
  opacity: 0.9;
}

.ps:hover > .ps__rail-y:hover > .ps__thumb-y {
  background-color: var(--asphalt50);
}

.dd-select-items .ps__rail-y {
  background-color: transparent !important;
}
.dd-select-items .ps__thumb-y {
  background-color: var(--asphalt50) !important;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/CtaButton.vue?vue&type=style&index=0&id=6913f75d&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-cta[data-v-6913f75d] {
  --color-btn-primary-text: var(--asphalt10);
  --color-btn-primary-bg: var(--asphalt100);
  --color-btn-primary-bg-hover: var(--asphalt90);
  --color-btn-primary-bg-active: var(--asphalt80);
  --color-btn-primary-text-disabled: var(--asphalt40);
  --color-btn-primary-bg-disabled: var(--asphalt20);
  --color-btn-primary-loader: var(--asphalt10);
  --color-btn-progress-text: var(--asphalt20);
  --color-btn-progress-bg: var(--asphalt80);
  --color-btn-progress-bg-hover: var(--asphalt70);
  --color-btn-progress-bg-active: var(--asphalt80);
  --color-btn-progress-text-disabled: var(--asphalt40);
  --color-btn-progress-bg-disabled: var(--asphalt90);
  --color-btn-secondary-text: var(--asphalt80);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--asphalt30);
  --color-btn-secondary-border-hover: var(--asphalt50);
  --color-btn-secondary-text-disabled: var(--asphalt30);
  --color-btn-secondary-loader: var(--asphalt80);
  --color-btn-tertiary-bg: var(--asphalt80);
  --color-btn-tertiary-text: var(--asphalt10);
  --color-btn-tertiary-bg-hover: var(--asphalt100);
  --color-btn-link-text: var(--asphalt80);
  --color-btn-link-bg: transparent;
  --color-btn-link-text-hover: var(--statis100);
  --color-btn-link-text-disabled: var(--asphalt50);
  --color-btn-alert-text: var(--asphalt10);
  --color-btn-alert-bg: var(--error50);
  --color-btn-alert-bg-hover: var(--error40);
  --color-btn-icon-text: var(--asphalt100);
  --color-btn-icon-bg-hover: var(--asphalt20);
  --color-btn-subtle-text: var(--asphalt90);
  --color-btn-subtle-bg: var(--asphalt20);
  --color-btn-subtle-text-hover: var(--asphalt100);
  --color-btn-subtle-bg-hover: var(--asphalt30);
  --color-btn-subtle-text-disabled: var(--asphalt40);
  --color-btn-subtle-bg-disabled: var(--asphalt20);
  --color-btn-upgrade-text: var(--asphalt90);
  --color-btn-upgrade-bg: var(--volt);
  --color-btn-upgrade-bg-hover: var(--asphalt10);
  --color-btn-upgrade-bg-active: var(--asphalt10);
  --color-btn-upgrade-text-disabled: var(--asphalt40);
  --color-btn-upgrade-bg-disabled: var(--asphalt10);
}
.ufo-cta.dark[data-v-6913f75d] {
  --color-btn-primary-text: var(--asphalt90);
  --color-btn-primary-bg: var(--asphalt10);
  --color-btn-primary-bg-hover: var(--volt);
  --color-btn-primary-bg-active: var(--volt);
  --color-btn-primary-text-disabled: var(--asphalt60);
  --color-btn-primary-bg-disabled: var(--asphalt90);
  --color-btn-primary-loader: var(--asphalt90);
  --color-btn-progress-text: var(--asphalt20);
  --color-btn-progress-bg: var(--asphalt80);
  --color-btn-progress-bg-hover: var(--asphalt70);
  --color-btn-progress-bg-active: var(--asphalt80);
  --color-btn-progress-text-disabled: var(--asphalt40);
  --color-btn-progress-bg-disabled: var(--asphalt90);
  --color-btn-secondary-text: var(--asphalt20);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--asphalt50);
  --color-btn-secondary-border-hover: var(--asphalt30);
  --color-btn-secondary-text-disabled: var(--asphalt50);
  --color-btn-secondary-loader: var(--asphalt20);
  --color-btn-tertiary-bg: var(--asphalt10);
  --color-btn-tertiary-text: var(--asphalt100);
  --color-btn-tertiary-bg-hover: var(--asphalt30);
  --color-btn-link-text: var(--asphalt20);
  --color-btn-link-bg: transparent;
  --color-btn-link-text-hover: var(--volt);
  --color-btn-link-text-disabled: var(--asphalt60);
  --color-btn-alert-text: var(--asphalt10);
  --color-btn-alert-bg: var(--error50);
  --color-btn-alert-bg-hover: var(--error40);
  --color-btn-icon-text: var(--asphalt10);
  --color-btn-icon-bg-hover: var(--asphalt70);
  --color-btn-subtle-text: var(--asphalt20);
  --color-btn-subtle-bg: var(--asphalt90);
  --color-btn-subtle-text-hover: var(--asphalt10);
  --color-btn-subtle-bg-hover: var(--asphalt80);
  --color-btn-subtle-text-disabled: var(--asphalt60);
  --color-btn-subtle-bg-disabled: var(--asphalt90);
}
.ufo-cta[data-v-6913f75d] {
  font: var(--editor-ui-btn-l-default);
  letter-spacing: 0.00875rem;
  padding: 0 1.25rem;
  height: 48px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  border: none;
  position: relative;
  white-space: nowrap;
  user-select: none;
}
.ufo-cta[data-v-6913f75d]:focus {
  outline: none;
}
.ufo-cta[data-v-6913f75d]:disabled {
  cursor: not-allowed;
}
.ufo-cta.tiny[data-v-6913f75d] {
  height: 28px;
  width: 28px;
  padding: 0.25rem;
  font: var(--editor-ui-btn-l-small);
  letter-spacing: 0.0075rem;
}
.ufo-cta.small[data-v-6913f75d] {
  height: 36px;
  padding: 0.625rem 1rem;
  font: var(--editor-ui-btn-l-small);
  letter-spacing: 0.0075rem;
}
.ufo-cta.large[data-v-6913f75d] {
  height: 54px;
  padding: 0.625rem 1.5rem;
  font: var(--editor-ui-btn-l-large);
  letter-spacing: 0.01rem;
}
.ufo-cta--primary[data-v-6913f75d] {
  color: var(--color-btn-primary-text);
  background-color: var(--color-btn-primary-bg);
}
.ufo-cta--primary[data-v-6913f75d]:hover {
  background-color: var(--color-btn-primary-bg-hover);
}
.ufo-cta--primary[data-v-6913f75d]:active {
  background-color: var(--color-btn-primary-bg-active);
}
.ufo-cta--primary[data-v-6913f75d]:disabled {
  color: var(--color-btn-primary-text-disabled);
  background-color: var(--color-btn-primary-bg-disabled);
}
.ufo-cta--primary.subtle[data-v-6913f75d] {
  color: var(--color-btn-subtle-text);
  background-color: var(--color-btn-subtle-bg);
}
.ufo-cta--primary.subtle.no-bg[data-v-6913f75d] {
  background-color: transparent;
}
.ufo-cta--primary.subtle[data-v-6913f75d]:hover {
  color: var(--color-btn-subtle-text-hover);
  background-color: var(--color-btn-subtle-bg-hover);
}
.ufo-cta--primary.subtle[data-v-6913f75d]:disabled {
  color: var(--color-btn-primary-text-disabled);
}
.ufo-cta--progress[data-v-6913f75d] {
  color: var(--color-btn-progress-text);
  background-color: var(--color-btn-progress-bg);
}
.ufo-cta--progress[data-v-6913f75d]:hover {
  background-color: var(--color-btn-progress-bg-hover);
}
.ufo-cta--progress[data-v-6913f75d]:active {
  background-color: var(--color-btn-progress-bg-active);
}
.ufo-cta--progress[data-v-6913f75d]:disabled {
  color: var(--color-btn-progress-text-disabled);
  background-color: var(--color-btn-progress-bg-disabled);
}
.ufo-cta--alert[data-v-6913f75d] {
  color: var(--color-btn-alert-text);
  background-color: var(--color-btn-alert-bg);
}
.ufo-cta--alert[data-v-6913f75d]:hover, .ufo-cta--alert[data-v-6913f75d]:active, .ufo-cta--alert[data-v-6913f75d]:focus {
  background-color: var(--color-btn-alert-bg-hover);
}
.ufo-cta--alert[data-v-6913f75d]:disabled {
  color: var(--color-btn-primary-text-disabled);
  background-color: var(--color-btn-primary-bg-disabled);
}
.ufo-cta--secondary[data-v-6913f75d], .ufo-cta--tertiary[data-v-6913f75d], .ufo-cta--link[data-v-6913f75d] {
  background-color: var(--color-btn-secondary-bg);
}
.ufo-cta--secondary[data-v-6913f75d] {
  color: var(--color-btn-secondary-text);
  outline: 1px solid var(--color-btn-secondary-border);
}
.ufo-cta--secondary[data-v-6913f75d]:hover, .ufo-cta--secondary[data-v-6913f75d]:active, .ufo-cta--secondary[data-v-6913f75d]:focus {
  outline: 1px solid var(--color-btn-secondary-border-hover);
}
.ufo-cta--secondary[data-v-6913f75d]:disabled, .ufo-cta--secondary[data-v-6913f75d]:disabled:hover {
  color: var(--color-btn-secondary-text-disabled);
  outline: 1px solid var(--color-btn-secondary-border);
}
.ufo-cta--secondary.loading .loading-state svg[data-v-6913f75d] {
  color: var(--color-btn-secondary-loader) !important;
}
.ufo-cta--tertiary[data-v-6913f75d], .ufo-cta--link[data-v-6913f75d] {
  color: var(--color-btn-link-text);
  padding: 0.125rem 0rem;
}
.ufo-cta--tertiary[data-v-6913f75d]:hover, .ufo-cta--tertiary[data-v-6913f75d]:active, .ufo-cta--tertiary[data-v-6913f75d]:focus, .ufo-cta--link[data-v-6913f75d]:hover, .ufo-cta--link[data-v-6913f75d]:active, .ufo-cta--link[data-v-6913f75d]:focus {
  color: var(--color-btn-link-text-hover);
}
.ufo-cta--tertiary[data-v-6913f75d]:disabled, .ufo-cta--link[data-v-6913f75d]:disabled {
  color: var(--color-btn-link-text-disabled);
}
.ufo-cta--tertiary img[data-v-6913f75d] {
  margin-right: 4px;
}
.ufo-cta--link[data-v-6913f75d], .ufo-cta--link-tiny[data-v-6913f75d], .ufo-cta--link.small[data-v-6913f75d], .ufo-cta--link.large[data-v-6913f75d] {
  height: unset;
  padding: 0;
}
.ufo-cta.loading .button-icon[data-v-6913f75d] {
  opacity: 0;
}
.ufo-cta.loading .loading-state[data-v-6913f75d] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.ufo-cta.loading .loading-state svg[data-v-6913f75d] {
  color: var(--color-btn-primary-loader);
}
@keyframes loaderRotation-6913f75d {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(359deg);
}
}
.ufo-cta--loader[data-v-6913f75d] {
  position: relative;
  animation: loaderRotation-6913f75d 1.5s infinite linear;
}
.ufo-cta--floating[data-v-6913f75d] {
  color: var(--carbon70);
  text-transform: none;
  font-weight: normal;
  background: var(--base00);
  border: 1px solid var(--carbon30);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 20px 20px -15px rgba(71, 84, 97, 0.16);
  position: absolute;
  top: -10px;
  right: 0;
  transform: translateY(-100%);
  white-space: nowrap;
}
.ufo-cta--upgrade[data-v-6913f75d] {
  color: var(--color-btn-upgrade-text);
  background-color: var(--color-btn-upgrade-bg);
}
.ufo-cta--upgrade[data-v-6913f75d]:hover {
  background-color: var(--color-btn-upgrade-bg-hover);
  outline: 1px solid var(--asphalt20);
}
.ufo-cta--upgrade[data-v-6913f75d]:active {
  background-color: var(--color-btn-upgrade-bg-active);
  outline: 1px solid var(--asphalt20);
}
.ufo-cta--upgrade[data-v-6913f75d]:disabled {
  outline: 1px solid var(--asphalt20);
  color: var(--color-btn-upgrade-text-disabled);
}
.ufo-cta--icon[data-v-6913f75d] {
  height: 24px;
  width: 24px;
  border-radius: 4px;
  padding: 0;
  background-color: transparent;
  color: var(--color-btn-icon-text);
}
.ufo-cta--icon.xl[data-v-6913f75d] {
  width: 36px;
  height: 36px;
}
.ufo-cta--icon[data-v-6913f75d]:hover {
  background-color: var(--color-btn-icon-bg-hover);
}
.ufo-cta--icon.small[data-v-6913f75d] {
  min-height: 20px;
  min-width: 20px;
  color: var(--asphalt90);
}
.ufo-cta--icon.back[data-v-6913f75d] {
  margin-right: 6px;
}
.ufo-cta--icon.back svg[data-v-6913f75d] {
  width: 24px;
  height: 24px;
}
.ufo-cta--icon.close[data-v-6913f75d], .ufo-cta--icon.add[data-v-6913f75d] {
  margin-left: 6px;
}
.ufo-cta--icon.close svg[data-v-6913f75d], .ufo-cta--icon.add svg[data-v-6913f75d] {
  width: 24px;
  height: 24px;
}
.ufo-cta--icon.subtle[data-v-6913f75d] {
  color: var(--color-btn-subtle-text);
  background-color: var(--color-btn-subtle-bg);
}
.ufo-cta--icon.subtle.no-bg[data-v-6913f75d] {
  background-color: transparent;
}
.ufo-cta--icon.subtle[data-v-6913f75d]:hover {
  color: var(--color-btn-subtle-text-hover);
  background-color: var(--color-btn-subtle-bg-hover);
}
.ufo-cta .button-icon[data-v-6913f75d] {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 100%;
}
.ufo-cta .button-icon .icon-container[data-v-6913f75d] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.ufo-cta .button-icon .icon-container svg[data-v-6913f75d] {
  width: 24px;
  height: 24px;
}
.ufo-cta svg[data-v-6913f75d] {
  width: 24px;
  height: 24px;
}
.ufo-cta.tiny .icon-container svg[data-v-6913f75d] {
  width: 20px;
  height: 20px;
}
.ufo-cta.extension[data-v-6913f75d] {
  padding-right: 0;
}
.ufo-cta--dd-extension[data-v-6913f75d] {
  width: 38px;
  border-left: solid 1px var(--asphalt10);
  display: inline-block;
  margin: 12px 0 12px 4px;
  text-align: center;
}
.ufo-cta.tooltip-on[tooltip][data-v-6913f75d] {
  position: relative;
}
.ufo-cta.tooltip-on[tooltip][data-v-6913f75d]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 6px 0 6px;
  border-style: solid;
  border-color: var(--color-btn-icon-bg-hover) transparent transparent transparent;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.ufo-cta.tooltip-on[tooltip][data-v-6913f75d]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-btn-icon-bg-hover);
  font: var(--editor-ui-l-regular);
  color: var(--color-btn-icon-text);
  text-align: center;
  text-transform: none;
  font-weight: normal;
  border-radius: 3px;
  pointer-events: none;
  padding: 3px 16px;
  z-index: 99;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.ufo-cta.tooltip-on[tooltip][data-v-6913f75d]:hover::before, .ufo-cta.tooltip-on[tooltip][data-v-6913f75d]:hover::after {
  opacity: 1;
}
.ufo-cta.tooltip-on.tooltip-slim[data-v-6913f75d]::after {
  font-size: 13px;
  padding: 8px;
}
.ufo-cta.tooltip-on.large[data-v-6913f75d] {
  cursor: pointer;
}
.ufo-cta.tooltip-on.large[data-v-6913f75d]::after {
  min-width: 140px;
  text-align: center;
}
.ufo-cta.tooltip-on[tooltip-position=top][data-v-6913f75d]::before, .ufo-cta.tooltip-on[tooltip-position=top][data-v-6913f75d]::after {
  left: 50%;
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-6913f75d]::before, .ufo-cta.tooltip-on[tooltip-position=right][data-v-6913f75d]::after {
  left: 100%;
  top: 50%;
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-6913f75d]::before {
  margin-left: 1px;
  transform: translateY(-50%) rotate(90deg);
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-6913f75d]::after {
  margin-left: 8px;
  transform: translateX(0%) translateY(-50%);
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-6913f75d]::before, .ufo-cta.tooltip-on[tooltip-position=bottom][data-v-6913f75d]::after {
  top: 100%;
  margin-top: 8px;
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-6913f75d]::before {
  transform: translateX(-50%) translateY(-100%) rotate(-180deg);
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-6913f75d]::after {
  transform: translateX(-50%) translateY(0%);
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-6913f75d]::before, .ufo-cta.tooltip-on[tooltip-position=left][data-v-6913f75d]::after {
  left: 0%;
  top: 47%;
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-6913f75d]::before {
  position: absolute;
  margin-left: -12px;
  transform: translateY(-50%) rotate(-90deg);
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-6913f75d]::after {
  margin-left: -8px;
  transform: translateX(-100%) translateY(-50%);
}
@keyframes rotation-6913f75d {
from {
    transform: translate(-50%, -50%) rotate(0deg);
}
to {
    transform: translate(-50%, -50%) rotate(359deg);
}
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/TabItem.vue?vue&type=style&index=0&id=68cbe403&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tab-pill[data-v-68cbe403] {
  --tab-text: var(--asphalt60);
  --tab-text-hover: var(--asphalt100);
}
.tab-pill.dark[data-v-68cbe403] {
  --tab-text: var(--asphalt40);
  --tab-text-hover: var(--asphalt10);
}
.tab-pill[data-v-68cbe403] {
  cursor: pointer;
  font: var(--editor-ui-b2-regular);
  color: var(--tab-text);
  letter-spacing: 0.14px;
}
.tab-pill .tab-pill-content[data-v-68cbe403] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}
.tab-pill .tab-pill-content .picto[data-v-68cbe403] {
  display: flex;
}
.tab-pill .tab-pill-content.icon-top[data-v-68cbe403] {
  flex-direction: column;
}
.tab-pill .tab-pill-content.icon-top .picto[data-v-68cbe403] {
  padding: 12px 0 0;
}
.tab-pill.active[data-v-68cbe403] {
  color: var(--tab-text-hover);
  font: var(--editor-ui-b2-semibold);
}
.tab-pill.active[data-v-68cbe403]:after {
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  border-radius: 2px 2px 0 0;
  background: var(--tab-text-hover);
}
.tab-pill[data-v-68cbe403]:hover {
  color: var(--tab-text-hover);
}
.tab-pill svg[data-v-68cbe403] {
  width: 20px;
  height: 20px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/TabBar.vue?vue&type=style&index=0&id=5743cb5a&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tab-bar[data-v-5743cb5a] {
  --tab-bar-border: var(--asphalt30);
}
.tab-bar.dark[data-v-5743cb5a] {
  --tab-bar-border: var(--asphalt80);
}
.tab-bar[data-v-5743cb5a] {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 1px solid var(--tab-bar-border);
}
.tab-bar.hide-border[data-v-5743cb5a] {
  border-bottom: none;
}
.tab-bar.full-width[data-v-5743cb5a] {
  justify-content: space-around;
  gap: 0;
}
.tab-bar.full-width[data-v-5743cb5a] .tab-pill {
  width: 100%;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/SmallTooltip.vue?vue&type=style&index=0&id=8d06735e&scoped=true&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.small-tooltip-container[data-v-8d06735e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  background: var(--asphalt20);
  height: 28px;
  padding: 0 8px;
  white-space: nowrap;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.small-tooltip-container .text-wrapper[data-v-8d06735e] {
  display: flex;
  align-items: center;
  height: 100%;
}
.small-tooltip-container .text-wrapper .tooltip-text[data-v-8d06735e] {
  color: var(--asphalt100);
  font: var(--editor-ui-b3-semibold);
  line-height: 1;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/sideBars/components/PanelHeader.vue?vue&type=style&index=0&id=fad41468&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.button-icon svg[data-v-fad41468] {
  width: 24px;
  height: 24px;
}
.head-tabs[data-v-fad41468] {
  margin-top: -16px;
  padding: 0 30px;
}
.head-control-actions[data-v-fad41468] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-toggle-btn[data-v-fad41468] {
  position: relative;
}
.color-toggle-btn .button-icon svg[data-v-fad41468] {
  width: 24px;
  height: 24px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/sideBars/components/PanelFooter.vue?vue&type=style&index=0&id=616391da&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-sepa--buttons[data-v-616391da] {
  --bgColor: var(--asphalt10);
  border-top: 1px solid var(--asphalt80);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}
.info-above-cta[data-v-616391da] {
  width: 100%;
  grid-column: 1/span 2;
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--asphalt90);
  position: relative;
}
.info-above-cta p[data-v-616391da] {
  color: var(--asphalt40);
}
.info-above-cta[data-v-616391da]:before {
  content: "";
  width: 4px;
  height: 72px;
  border-radius: 4px 0 0 4px;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--asphalt40);
}
.large-tooltip-container[data-v-616391da] {
  position: fixed;
  left: 377px;
  right: unset;
  bottom: 82px;
  top: unset;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/sideBars/components/ScrollableContainer.vue?vue&type=style&index=0&id=4584eb35&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.scrollable-container[data-v-4584eb35] {
  position: relative;
  flex: 2;
  overflow-y: auto;
  overscroll-behavior: none;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/sideBars/components/CascadingSidebar.vue?vue&type=style&index=0&id=130d46c0&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.sidebar-overlay[data-v-130d46c0] {
  position: fixed;
  top: 76px;
  left: 16px;
  z-index: 1;
  width: 352px;
  height: calc(100vh - 76px - 16px);
  display: flex;
  flex-direction: column;
  background-color: var(--asphalt95);
  border-radius: 8px;
  border: 1px solid var(--asphalt80);
  box-shadow: 0 30px 8px 0 rgba(0, 0, 0, 0), 0 19px 8px 0 rgba(0, 0, 0, 0.01), 0 11px 6px 0 rgba(0, 0, 0, 0.05), 0 5px 5px 0 rgba(0, 0, 0, 0.09), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.ufo-sepa--cop-det[data-v-130d46c0] {
  position: relative;
  flex: 2;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/Input.vue?vue&type=style&index=0&id=43aabb45&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-input[data-v-43aabb45] {
  --bgColor: var(--asphalt10);
  --disabledBgColor: var(--asphalt10);
  --outlineColor: var(--asphalt30);
  --hoverOutlineColor: var(--asphalt50);
  --focusOutlineColor: var(--asphalt100);
  --disabledOutlineColor: var(--asphalt20);
  --labelColor: var(--asphalt50);
  --disabledLabelColor: var(--asphalt40);
  --textColor: var(--asphalt100);
  --warningcolor: var(--error50);
  --successColor: var(--success60);
}
.ufo-input.dark[data-v-43aabb45] {
  --bgColor: var(--asphalt95);
  --disabledBgColor: var(--asphalt90);
  --outlineColor: var(--asphalt70);
  --hoverOutlineColor: var(--asphalt50);
  --focusOutlineColor: var(--asphalt10);
  --disabledOutlineColor: var(--asphalt80);
  --labelColor: var(--asphalt40);
  --disabledLabelColor: var(--asphalt50);
  --textColor: var(--asphalt10);
  --warningcolor: var(--error50);
  --successColor: var(--success60);
}
.ufo-input[data-v-43aabb45] {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4px;
  font: var(--editor-ui-b2-regular);
}
.inside-label[data-v-43aabb45] {
  line-height: 1;
  display: none;
  color: var(--labelColor);
  margin-bottom: 0;
}
.inside-label.focus[data-v-43aabb45] {
  font: var(--editor-ui-b3-regular);
  position: absolute;
  display: block;
  left: 12px;
  top: -10px;
  padding: 0 4px;
  background: var(--bgColor);
}
input[data-v-43aabb45] {
  line-height: 24px;
  margin: 0;
  height: 48px;
  padding: 14px 16px;
  background-color: var(--bgColor);
  border: none;
  outline: 1px solid var(--outlineColor);
  border-radius: 4px;
  color: var(--textColor);
}
input[data-v-43aabb45]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--labelColor);
  opacity: 1; /* Firefox */
}
input[data-v-43aabb45]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--labelColor);
}
input[data-v-43aabb45]::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--labelColor);
}
input[data-v-43aabb45]:hover {
  outline-color: var(--hoverOutlineColor);
}
input[data-v-43aabb45]:focus {
  outline-color: var(--focusOutlineColor);
}
input[readonly][data-v-43aabb45] {
  background-color: var(--disabledBgColor);
  outline-color: var(--disabledBgColor);
  color: var(--labelColor);
  cursor: pointer;
}
input[readonly][data-v-43aabb45]:focus {
  outline-color: var(--focusOutlineColor);
}
input[disabled][data-v-43aabb45], input[disabled][data-v-43aabb45]:hover {
  color: var(--disabledLabelColor);
  background-color: var(--disabledBgColor);
  outline-color: var(--disabledOutlineColor);
}
input[disabled][data-v-43aabb45] {
  color: var(--disabledLabelColor);
  background-color: var(--disabledBgColor);
  cursor: not-allowed;
}
input[disabled][data-v-43aabb45]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--disabledLabelColor);
  opacity: 1; /* Firefox */
}
input[disabled][data-v-43aabb45]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--disabledLabelColor);
}
input[disabled][data-v-43aabb45]::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--disabledLabelColor);
}
input.alert[data-v-43aabb45] {
  outline-color: var(--redBright);
}
input[type=number][data-v-43aabb45] {
  padding: 0 28px 0 12px;
  /* Chrome, Safari, Edge, Opera */
}
input[type=number][data-v-43aabb45]::-webkit-outer-spin-button, input[type=number][data-v-43aabb45]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number][data-v-43aabb45] {
  /* Firefox */
  -moz-appearance: textfield;
}
.assist[data-v-43aabb45] {
  font: var(--editor-ui-b3-regular);
  margin-top: 8px;
}
.alert-message[data-v-43aabb45] {
  font: var(--editor-ui-b3-regular);
  margin-top: 8px;
  color: var(--redBright);
}
.feedback[data-v-43aabb45] {
  font: var(--editor-ui-b3-regular);
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
.feedback .success[data-v-43aabb45] {
  color: var(--success60);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/sideBars/pages/EditMailtoLink.vue?vue&type=style&index=0&id=063ed535&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-input[data-v-063ed535] {
  margin-bottom: 20px;
}
.cb-l[data-v-063ed535] {
  font-family: var(--primarySans);
  font-size: 16px;
  line-height: 1;
  color: var(--carbon70);
  cursor: pointer;
}
.cb-l .ml-2[data-v-063ed535] {
  padding-left: 6px;
}
.cb-l input[data-v-063ed535] {
  cursor: pointer;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/ToggleGrid.vue?vue&type=style&index=0&id=58b77362&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.toggle-grid[data-v-58b77362] {
  min-height: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
  opacity: 0.3;
  z-index: 102;
  left: 50%;
  right: 50%;
  transform: translate(-50%);
  display: grid;
  margin-top: calc(var(--section-padding-top) * -1);
  --gridGap: 24px;
}
@media (min-width: 1024px) {
.toggle-grid[data-v-58b77362] {
    --gridGap: 48px;
    padding-left: 126px;
    padding-right: 126px;
}
}
.toggle-grid[data-v-58b77362] {
  grid-gap: var(--gridGap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 640px) {
.toggle-grid[data-v-58b77362] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.toggle-grid[data-v-58b77362] {
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1440px) {
.toggle-grid[data-v-58b77362] {
    max-width: 1440px;
}
}
.toggle-grid .toggle-grid-col[data-v-58b77362] {
  background-color: pink;
}
.toggle-grid .toggle-grid-col-12[data-v-58b77362] {
  display: none;
}
@media (min-width: 640px) {
.toggle-grid .toggle-grid-col-12[data-v-58b77362] {
    display: block;
}
}
.ufo--page-hero .toggle-grid[data-v-58b77362],
.ufo-sec--header-main .toggle-grid[data-v-58b77362] {
  margin-top: 0;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/common/SectionBackgroundImage.vue?vue&type=style&index=0&id=a0c7746a&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-sec .ufo-sec--bg[data-v-a0c7746a] {
  overflow: hidden;
}
.background-wrapper[data-v-a0c7746a] {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.background-wrapper .background-svg[data-v-a0c7746a] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ufo-fab--container[data-v-a0c7746a] {
  top: 0;
  transform: translate(0, 100%);
  right: 72px;
  padding: 0 10px;
  visibility: hidden;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 4;
}
.ufo-sec--bg:hover .ufo-fab--container[data-v-a0c7746a] {
  transform: translate(0, 100%);
  visibility: visible;
  opacity: 1;
}
.ufo-sec--header-main .ufo-sec--bg .ufo-fab--container[data-v-a0c7746a] {
  transform: none;
  bottom: 0;
  top: unset;
  padding-top: 10px;
  pointer-events: none;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/common/ADPListProfile.vue?vue&type=style&index=0&id=3d478a3e&scoped=true&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes pulse-3d478a3e {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
}
@media (max-width: 1000px) {
.adp-list-profile-container .statistic-container[data-v-3d478a3e] {
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
}
}
@media (max-width: 850px) {
.adp-list-profile-container .statistic-container .stats-wrapper[data-v-3d478a3e] {
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 24px;
}
}
@media (max-width: 500px) {
.adp-list-profile-container .statistic-container .stats-wrapper[data-v-3d478a3e] {
    align-items: flex-start;
    align-content: flex-start;
    gap: 24px 40px;
}
}
.adp-list-profile-container[data-v-3d478a3e] {
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
  border-radius: 12px;
  border: 1px solid var(--asphalt30);
  background: #FFF;
  width: 100%;
}
.adp-list-profile-container p[data-v-3d478a3e] {
  margin: 0;
}
.adp-list-profile-container .adp-list-primary-button[data-v-3d478a3e] {
  display: flex;
  padding: 12px 14px 12px 20px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #05051B;
  color: #FFF;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  outline: none;
  border: none;
  /* Add transition for background change */
  transition: background 150ms ease-in-out;
}
.adp-list-profile-container .adp-list-primary-button[data-v-3d478a3e]:hover {
  cursor: pointer;
  background: #087F7F;
}
.adp-list-profile-container .adp-list-primary-button[data-v-3d478a3e]:active {
  background: #087F7F;
}
.adp-list-profile-container .header-wrapper[data-v-3d478a3e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  row-gap: 20px;
  align-self: stretch;
  flex-wrap: wrap;
}
.adp-list-profile-container .divider[data-v-3d478a3e] {
  height: 1px;
  background: var(--asphalt20);
  width: 100%;
}
.adp-list-profile-container .statistic-container[data-v-3d478a3e] {
  display: flex;
  gap: 30px 40px;
  align-self: stretch;
  flex-wrap: wrap;
  align-items: center;
}
.adp-list-profile-container .statistic-container .base-text[data-v-3d478a3e] {
  flex: 1 0 0;
  color: var(--asphalt100);
  font-variant-numeric: lining-nums proportional-nums;
  font-family: "DM Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 36px */
  text-align: left;
}
.adp-list-profile-container .statistic-container .stats-wrapper[data-v-3d478a3e] {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat[data-v-3d478a3e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat .details-wrapper[data-v-3d478a3e] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat .details-wrapper .skeleton-state-wrapper[data-v-3d478a3e] {
  width: 80px;
  height: 26px;
  padding: 3px;
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat .details-wrapper .skeleton-state-wrapper .skeleton-state[data-v-3d478a3e] {
  height: 20px;
  border-radius: 4px;
  background: var(--asphalt20);
  animation: pulse-3d478a3e 1s infinite ease-in-out;
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat .details-wrapper .stat-name[data-v-3d478a3e] {
  color: var(--asphalt50);
  font-variant-numeric: lining-nums proportional-nums;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.adp-list-profile-container .statistic-container .stats-wrapper .stat .details-wrapper .stat-value[data-v-3d478a3e] {
  color: var(--asphalt90);
  font-variant-numeric: lining-nums proportional-nums;
  font-family: "DM Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/Mockup.vue?vue&type=style&index=0&id=44df7c3a&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.mockup-screen {
  pointer-events: all;
  overflow: hidden;
  padding: 2px;
}
.wrapper {
  border-radius: inherit;
  height: 100%;
}
.container-mockup {
  height: 100%;
  pointer-events: all !important;
}
.scrollable-container-mockup::-webkit-scrollbar {
  display: none;
}
.scrollable-container-mockup {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  overflow-y: auto;
  pointer-events: all !important;
}
.mockup-svg-container {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.mockup-svg-container:not(.safari).shadow {
  filter: drop-shadow(0px 20px 44px rgba(0, 0, 0, 0.2));
}
.mockup-svg-container img {
  border-radius: inherit;
  max-height: unset;
  height: unset;
}
.mockup-svg-container svg {
  width: 100%;
  height: 100%;
  max-height: 715px;
  transition: transform 0.3s ease-in-out;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/MockupContainer.vue?vue&type=style&index=0&id=fd6419d2&scoped=true&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.img-overlay-wrap[data-v-fd6419d2] {
  position: relative;
  display: inline-block;
  transition: transform 150ms ease-in-out;
}
.img-overlay-wrap .img-scroll[data-v-fd6419d2] {
  display: block;
  width: auto;
  aspect-ratio: 744/1133;
}
.img-overlay-wrap .img-scroll img[data-v-fd6419d2] {
  aspect-ratio: 744/1133;
}
.img-overlay-wrap svg[data-v-fd6419d2] {
  height: 100%;
  position: absolute;
  width: 111%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mockup[data-v-fd6419d2] {
  height: 100%;
  width: auto;
}
.mockup .ufo-mockup--display[data-v-fd6419d2] {
  height: 100%;
}
.mockup .ufo-mockup--display .ufo-mockup--frame[data-v-fd6419d2] {
  height: 100%;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/hero/GetHeroNavigationItem.vue?vue&type=style&index=0&id=0c963195&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar-item[data-v-0c963195] {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  pointer-events: all;
}
.navbar-item a[data-v-0c963195]:not(.active) {
  cursor: pointer;
}
.btn[data-v-0c963195] {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: none;
  background-color: transparent;
  text-transform: none;
  white-space: initial;
  outline: none;
  text-decoration: none;
  font-weight: 400;
  padding: 8px var(--verticalPadding, 0px);
  color: var(--hero-nav-button-text-color);
}
.btn[data-v-0c963195]:not(.active) {
  cursor: pointer;
}
.btn[data-v-0c963195]:before {
  content: attr(data-text);
  content: attr(data-text)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
  color: transparent;
}
@media speech {
.btn[data-v-0c963195]:before {
    display: none;
}
}
.btn[data-v-0c963195]:hover:not(.active) {
  font-weight: 700;
  color: var(--hero-nav-button-text-color-hover);
}
.btn.active[data-v-0c963195] {
  font-weight: 700;
}
.btn.regular[data-v-0c963195]:hover, .btn.regular[data-v-0c963195]:active, .btn.regular.active[data-v-0c963195] {
  font-weight: 400;
}
.btn.underline-regular[data-v-0c963195]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--hero-nav-button-text-color);
  transition-property: width;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn.underline-regular[data-v-0c963195]:hover:not(.active):after {
  background-color: var(--hero-nav-button-text-color);
}
.btn.underline-regular[data-v-0c963195]:hover:after, .btn.underline-regular.active[data-v-0c963195]:after {
  width: 100%;
}
.btn.underline-small[data-v-0c963195] {
  position: relative;
}
.btn.underline-small[data-v-0c963195]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--hero-nav-button-text-color);
  transition-property: width;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn.underline-small[data-v-0c963195]:hover:after, .btn.underline-small.active[data-v-0c963195]:after {
  width: 16px;
}
.btn.underline-small[data-v-0c963195]:hover:not(.active):after {
  background-color: var(--hero-nav-button-text-color-hover);
}
.btn.underline-large[data-v-0c963195] {
  position: relative;
  justify-content: flex-start;
}
@media (min-width: 768.5px) {
.btn.underline-large[data-v-0c963195]:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    display: inline-block;
    height: 4px;
    width: 100%;
    visibility: visible;
    background-color: var(--hero-nav-button-text-color);
    transition-property: height;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn.underline-large[data-v-0c963195]:hover:not(.active):after {
    height: 8px;
    background-color: var(--hero-nav-button-text-color-hover);
}
.btn.underline-large.active[data-v-0c963195]:after {
    height: 8px;
}
}
.btn[class*=box-][data-v-0c963195] {
  --verticalPadding: 16px;
  min-width: 40px;
  min-height: 40px;
  outline: solid 1px var(--hero-nav-button-outline-color);
}
.btn[class*=box-][data-v-0c963195]:hover:not(.active) {
  outline: solid 1px var(--hero-nav-button-outline-color-hover, var(--hero-nav-button-text-color-hover));
}
.btn[class*=box-].active[data-v-0c963195] {
  outline: solid 1px var(--hero-nav-button-text-color);
}
.btn.box-rounded[data-v-0c963195] {
  border-radius: 8px;
}
.btn.box-pill[data-v-0c963195] {
  border-radius: 999px;
}
.btn.box-pill-fill[data-v-0c963195] {
  outline: none !important;
  border-radius: 999px;
  background-color: var(--hero-nav-button-fill-color, color-mix(in srgb, var(--background-fill-color), var(--hero-nav-button-text-color) 10%));
}
.btn.box-pill-fill[data-v-0c963195]:hover {
  font-weight: 400;
  background-color: var(--hero-nav-button-fill-color-hover);
}
.btn.box-pill-fill.active[data-v-0c963195], .btn.box-pill-fill[data-v-0c963195]:active {
  background-color: var(--hero-nav-button-text-color-hover);
  color: var(--background-fill-color);
  font-weight: 400;
}
@media (min-width: 768px) {
.navbar.sides .navbar-item[data-v-0c963195]:last-of-type {
    margin-right: auto;
}
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/hero/GetHeroSocialLinkItem.vue?vue&type=style&index=0&id=c3077cf0&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.social-links[data-v-c3077cf0] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.social-links.inline-above-text[data-v-c3077cf0] {
  order: -1;
}
.social-links a[data-v-c3077cf0] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 200ms;
  background-color: transparent;
  color: var(--hero-nav-button-text-color);
}
.social-links a[data-v-c3077cf0]:hover:not(.active), .social-links a[data-v-c3077cf0]:hover:not(:active) {
  color: var(--hero-nav-button-text-color-hover);
}
.social-links a .fa-website[data-v-c3077cf0]:before {
  content: "\f0ac";
}
.social-links a .fa[data-v-c3077cf0] {
  text-align: center;
}
.social-links a .fa-email[data-v-c3077cf0]:before {
  content: "\f0e0";
  line-height: 20px;
}
.social-links a.text[data-v-c3077cf0] {
  padding-top: 8px;
  padding-bottom: 8px;
  flex-direction: column;
  text-transform: capitalize;
}
.social-links a.text[data-v-c3077cf0]:hover {
  font-weight: 700;
}
.social-links a.text[data-v-c3077cf0]:before {
  content: attr(data-text);
  content: attr(data-text)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: bold;
  color: transparent;
}
@media speech {
.social-links a.text[data-v-c3077cf0]:before {
    display: none;
}
}
.social-links a.icon[data-v-c3077cf0] {
  min-width: 24px;
  min-height: 24px;
  height: 100%;
  aspect-ratio: 1/1;
  color: var(--social-icon-text-color);
}
.social-links a.icon[data-v-c3077cf0]:hover:not(.active), .social-links a.icon[data-v-c3077cf0]:hover:not(:active) {
  color: var(--social-icon-text-color-hover);
}
.social-links a.underline-regular[data-v-c3077cf0] {
  position: relative;
}
.social-links a.underline-regular[data-v-c3077cf0]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--hero-nav-button-text-color);
  transition-property: width;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.social-links a.underline-regular[data-v-c3077cf0]:hover:after {
  background-color: var(--hero-nav-button-text-color);
}
.social-links a.underline-regular[data-v-c3077cf0]:hover:after {
  width: 100%;
}
.social-links a[class*=box-][data-v-c3077cf0] {
  padding: 8px;
  font-size: 14px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1/1;
  outline: solid 1px var(--social-icon-outline-color, var(--border-color));
}
.social-links a[class*=box-][data-v-c3077cf0]:hover {
  outline-color: var(--social-icon-outline-color-hover, var(--hero-nav-button-text-color-hover));
}
.social-links a.box-rounded[data-v-c3077cf0] {
  border-radius: 8px;
}
.social-links a.box-pill[data-v-c3077cf0] {
  border-radius: 50%;
}
.social-links a.box-pill-fill[data-v-c3077cf0] {
  outline: none;
  border-radius: 999px;
  background-color: var(--social-icon-fill-color, color-mix(in srgb, var(--background-fill-color), var(--hero-nav-button-text-color) 10%));
}
.social-links a.box-pill-fill[data-v-c3077cf0]:hover {
  font-weight: 400;
  background-color: var(--social-icon-fill-color-hover);
}
.social-links a.box-pill-fill.active[data-v-c3077cf0], .social-links a.box-pill-fill[data-v-c3077cf0]:active {
  background-color: var(--social-icon-fill-color-hover, var(--hero-nav-button-text-color-hover));
  color: var(--social-icon-text-color-hover, var(--background-fill-color));
  font-weight: 400;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/hero/GetHeroSocialLinks.vue?vue&type=style&index=0&id=4c9ea16e&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.social-links[data-v-4c9ea16e] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.social-links.inline-above-text[data-v-4c9ea16e] {
  order: -1;
}
.social-links a[data-v-4c9ea16e] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 200ms;
  background-color: transparent;
  color: var(--hero-nav-button-text-color);
}
.social-links a[data-v-4c9ea16e]:hover:not(.active), .social-links a[data-v-4c9ea16e]:hover:not(:active) {
  color: var(--hero-nav-button-text-color-hover);
}
.social-links a .fa-website[data-v-4c9ea16e]:before {
  content: "\f0ac";
}
.social-links a .fa[data-v-4c9ea16e] {
  text-align: center;
}
.social-links a .fa-email[data-v-4c9ea16e]:before {
  content: "\f0e0";
  line-height: 20px;
}
.social-links a.text[data-v-4c9ea16e] {
  padding-top: 8px;
  padding-bottom: 8px;
  flex-direction: column;
  text-transform: capitalize;
}
.social-links a.text[data-v-4c9ea16e]:hover {
  font-weight: 700;
}
.social-links a.text[data-v-4c9ea16e]:before {
  content: attr(data-text);
  content: attr(data-text)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: bold;
  color: transparent;
}
@media speech {
.social-links a.text[data-v-4c9ea16e]:before {
    display: none;
}
}
.social-links a.icon[data-v-4c9ea16e] {
  min-width: 24px;
  min-height: 24px;
  height: 100%;
  aspect-ratio: 1/1;
  color: var(--social-icon-text-color);
}
.social-links a.icon[data-v-4c9ea16e]:hover:not(.active), .social-links a.icon[data-v-4c9ea16e]:hover:not(:active) {
  color: var(--social-icon-text-color-hover);
}
.social-links a.underline-regular[data-v-4c9ea16e] {
  position: relative;
}
.social-links a.underline-regular[data-v-4c9ea16e]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--hero-nav-button-text-color);
  transition-property: width;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.social-links a.underline-regular[data-v-4c9ea16e]:hover:after {
  background-color: var(--hero-nav-button-text-color);
}
.social-links a.underline-regular[data-v-4c9ea16e]:hover:after {
  width: 100%;
}
.social-links a[class*=box-][data-v-4c9ea16e] {
  padding: 8px;
  font-size: 14px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1/1;
  outline: solid 1px var(--social-icon-outline-color, var(--border-color));
}
.social-links a[class*=box-][data-v-4c9ea16e]:hover {
  outline-color: var(--social-icon-outline-color-hover, var(--hero-nav-button-text-color-hover));
}
.social-links a.box-rounded[data-v-4c9ea16e] {
  border-radius: 8px;
}
.social-links a.box-pill[data-v-4c9ea16e] {
  border-radius: 50%;
}
.social-links a.box-pill-fill[data-v-4c9ea16e] {
  outline: none;
  border-radius: 999px;
  background-color: var(--social-icon-fill-color, color-mix(in srgb, var(--background-fill-color), var(--hero-nav-button-text-color) 10%));
}
.social-links a.box-pill-fill[data-v-4c9ea16e]:hover {
  font-weight: 400;
  background-color: var(--social-icon-fill-color-hover);
}
.social-links a.box-pill-fill.active[data-v-4c9ea16e], .social-links a.box-pill-fill[data-v-4c9ea16e]:active {
  background-color: var(--social-icon-fill-color-hover, var(--hero-nav-button-text-color-hover));
  color: var(--social-icon-text-color-hover, var(--background-fill-color));
  font-weight: 400;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/_helper/GetSiteLogo.vue?vue&type=style&index=0&id=b84e4df4&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar-id[data-v-b84e4df4],
.navbar-logo[data-v-b84e4df4] {
  z-index: 2;
  position: relative;
}
.navbar-id[data-v-b84e4df4]:hover,
.navbar-id a[data-v-b84e4df4]:hover {
  font-weight: bold;
  color: var(--hero-nav-button-text-color-hover);
  cursor: pointer;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/components/HamburgerToggle.vue?vue&type=style&index=0&id=1ce90cfe&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar-toggle[data-v-1ce90cfe] {
  display: none;
}
@media (max-width: 768px) {
.navbar-toggle[data-v-1ce90cfe] {
    position: relative;
    z-index: 11;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin-left: auto;
}
.navbar-toggle.on svg[data-v-1ce90cfe] {
    display: block;
}
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/_helper/GetSiteNavigation.vue?vue&type=style&index=0&id=3fce7aa2&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar[data-v-3fce7aa2] {
  display: flex;
  flex-direction: row;
  position: relative;
  height: max-content;
  grid-column: 1/-1;
  align-items: center;
  padding: 24px 0;
  z-index: 1;
}
@media (max-width: 768px) {
.navbar[data-v-3fce7aa2] {
    justify-content: space-between;
    z-index: 3;
}
}
@media (min-width: 768px) {
.navbar.sides .navbar-container[data-v-3fce7aa2] {
    justify-content: space-between;
    width: 100%;
}
.navbar.sides .navbar-container .social-links[data-v-3fce7aa2] {
    margin-left: auto;
}
}
.navbar.middle .navbar-container[data-v-3fce7aa2] {
  width: 100%;
}
@media (min-width: 768.5px) {
.navbar.middle .navbar-item:first-child:nth-last-child(3) + .navbar-item + .navbar-item[data-v-3fce7aa2] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(4) + .navbar-item + .navbar-item[data-v-3fce7aa2] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(5) + .navbar-item + .navbar-item + .navbar-item[data-v-3fce7aa2] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(6) + .navbar-item + .navbar-item + .navbar-item[data-v-3fce7aa2] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(7) + .navbar-item + .navbar-item + .navbar-item + .navbar-item[data-v-3fce7aa2] {
    margin-left: auto;
}
}
.navbar.simple-left[data-v-3fce7aa2] {
  justify-content: flex-start;
}
.navbar.simple-middle[data-v-3fce7aa2] {
  justify-content: center;
}
.navbar.simple-right[data-v-3fce7aa2] {
  justify-content: flex-end;
}
.navbar.simple-right .navbar-id + .navbar-container[data-v-3fce7aa2],
.navbar.simple-right .navbar-logo + .navbar-container[data-v-3fce7aa2] {
  margin-left: auto;
}
.navbar.line-middle[data-v-3fce7aa2] {
  align-items: center;
}
.navbar.line-middle .navbar-container[data-v-3fce7aa2] {
  width: 100%;
}
@media (min-width: 768px) {
.navbar.line-middle .line[data-v-3fce7aa2] {
    flex: 1;
    height: 1px;
    border-top: 1px solid var(--divider-line-fill-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar.line-middle .line[data-v-3fce7aa2]:first-of-type {
    margin-right: 12px;
}
.navbar.line-middle .line[data-v-3fce7aa2]:last-of-type {
    margin-left: 12px;
}
}
.navbar .ufo-fab[data-v-3fce7aa2] {
  position: absolute;
  top: -12px;
  left: -48px;
}
.navbar-container[data-v-3fce7aa2] {
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
@media (max-width: 768px) {
.navbar-container[data-v-3fce7aa2] {
    width: 100%;
}
}
@media (max-width: 768px) {
.navbar-container[data-v-3fce7aa2]:not(.no-mob) {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    background-color: var(--background-fill-color, #FFFFFF);
    transition: top 200ms ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.navbar-container:not(.no-mob).on[data-v-3fce7aa2] {
    top: 0;
}
.navbar-container:not(.no-mob).on .social-links[data-v-3fce7aa2] {
    flex-direction: column;
}
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/MainHeader.vue?vue&type=style&index=0&id=ee0950d4&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@media (min-width: 1024px) {
.text-container div div[data-v-ee0950d4]:last-child {
    margin-bottom: 0;
}
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/Stats.vue?vue&type=style&index=0&id=2ae7f65f&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-sec .number[data-v-2ae7f65f] * {
  font-size: var(--numberSize);
}
.ufo-sec .unit[data-v-2ae7f65f] * {
  font-size: var(--unitsize);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/Gallery.vue?vue&type=style&index=0&id=b807e4dc&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-sec--gallery[data-v-b807e4dc] {
  overflow: hidden;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/projectGrid/ProjectThumbnail.vue?vue&type=style&index=0&id=56158a18&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.generated-cover-container .mockups-container .mockup-container .mockup-svg-container svg {
  width: auto;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/projectGrid/ProjectThumbnail.vue?vue&type=style&index=1&id=56158a18&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.image-container .project-thumbnail[data-v-56158a18] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.generated-cover-container[data-v-56158a18] {
  grid-column: 1/span 12;
}
.generated-cover-container.image-container[data-v-56158a18] {
  padding-top: 0% !important;
  height: 100% !important;
}
.generated-cover-container .background-color-container[data-v-56158a18] {
  width: 100%;
}
.generated-cover-container .background-color-container .thumbnail-preview[data-v-56158a18] {
  position: relative;
  background-repeat: no-repeat;
  overflow: hidden;
}
.generated-cover-container .background-color-container .thumbnail-preview.large[data-v-56158a18] {
  aspect-ratio: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .project-name[data-v-56158a18] {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 25px;
}
.generated-cover-container .background-color-container .thumbnail-preview .project-name.top[data-v-56158a18] {
  justify-content: flex-start;
}
.generated-cover-container .background-color-container .thumbnail-preview .project-name.bottom[data-v-56158a18] {
  justify-content: flex-end;
}
.generated-cover-container .background-color-container .thumbnail-preview .project-name.left[data-v-56158a18] {
  align-items: flex-start;
  text-align: left;
}
.generated-cover-container .background-color-container .thumbnail-preview .project-name.right[data-v-56158a18] {
  align-items: flex-end;
  text-align: right;
}
.generated-cover-container .background-color-container .thumbnail-preview .background-image[data-v-56158a18] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container[data-v-56158a18] {
  z-index: 3;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.small[data-v-56158a18] {
  width: 100%;
  aspect-ratio: 1;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium[data-v-56158a18] {
  margin: auto;
  width: 100%;
  aspect-ratio: 1.15;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.laptop.single_slided[data-v-56158a18] {
  margin-left: 50px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.laptop.mobile_middle[data-v-56158a18] {
  margin-left: 50px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large[data-v-56158a18] {
  margin: auto;
  height: 100%;
  width: 50%;
  aspect-ratio: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container[data-v-56158a18] {
  position: relative;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container[data-v-56158a18] {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  width: fit-content;
  margin: auto;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container .mockup-svg[data-v-56158a18] {
  width: auto;
  height: 100%;
  position: relative;
  z-index: 1;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container img[data-v-56158a18] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container .no_device-tablet-image[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container .no_device-mobile-image[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container .no_device-laptop-image[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container .mockup-container .no_device-desktop-image[data-v-56158a18] {
  width: 100%;
  height: 100%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.no_device .mockup-svg[data-v-56158a18] {
  visibility: hidden;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.no_device.squared img[data-v-56158a18] {
  border-radius: 0;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.no_device.rounded img[data-v-56158a18] {
  border-radius: 9px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet .mockup-container[data-v-56158a18] {
  height: 90%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop .mockup-container[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile .mockup-container[data-v-56158a18] {
  height: 79%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop .mockup-container[data-v-56158a18] {
  height: 78%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.small[data-v-56158a18] {
  overflow: hidden;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.single_slided .mockup-container[data-v-56158a18] {
  height: 125%;
  top: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.dual_middle .mockup-1[data-v-56158a18] {
  left: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.dual_middle .mockup-0[data-v-56158a18] {
  right: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.dual_slided .mockup-1[data-v-56158a18] {
  bottom: 10%;
  left: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.dual_slided .mockup-0[data-v-56158a18] {
  top: 10%;
  right: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_middle .mockup-1[data-v-56158a18] {
  height: 51%;
  right: 68%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_middle .mockup-2[data-v-56158a18] {
  height: 51%;
  left: 68%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_middle_horizontal .mockup-1[data-v-56158a18] {
  left: 72%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_middle_horizontal .mockup-2[data-v-56158a18] {
  right: 72%;
  left: unset;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided .mockup-0[data-v-56158a18] {
  right: 43%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided .mockup-1[data-v-56158a18] {
  left: 43%;
  bottom: 80%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided .mockup-2[data-v-56158a18] {
  left: 43%;
  top: 80%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided.browser .mockup-1[data-v-56158a18] {
  bottom: 83%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided.browser .mockup-2[data-v-56158a18] {
  top: 83%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated .mockup-container[data-v-56158a18] {
  transform: rotate(-30deg);
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated .mockup-0[data-v-56158a18] {
  right: 33%;
  top: 20%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated .mockup-1[data-v-56158a18] {
  bottom: 91%;
  left: -2%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated .mockup-2[data-v-56158a18] {
  left: 69%;
  top: 47%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated.browser .mockup-1[data-v-56158a18] {
  bottom: 90%;
  left: -10%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated.browser .mockup-2[data-v-56158a18] {
  left: 65%;
  top: 48%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated.no_device .mockup-1[data-v-56158a18] {
  bottom: 87%;
  left: -8%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.triple_slided_rotated.no_device .mockup-2[data-v-56158a18] {
  left: 64%;
  top: 44%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided .mockup-0[data-v-56158a18] {
  right: 42%;
  bottom: 62%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided .mockup-1[data-v-56158a18] {
  bottom: 92%;
  left: 42%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided .mockup-2[data-v-56158a18] {
  left: 42%;
  top: 67%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided .mockup-3[data-v-56158a18] {
  right: 42%;
  top: 92%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided.browser .mockup-2[data-v-56158a18] {
  top: 70%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided.browser .mockup-3[data-v-56158a18] {
  top: 100%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided.no_device .mockup-2[data-v-56158a18] {
  top: 60%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided.no_device .mockup-3[data-v-56158a18] {
  top: 90%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated .mockup-container[data-v-56158a18] {
  transform: rotate(-30deg);
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated .mockup-0[data-v-56158a18] {
  bottom: 72%;
  right: 43%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated .mockup-1[data-v-56158a18] {
  bottom: 35%;
  left: 66%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated .mockup-2[data-v-56158a18] {
  left: 38%;
  top: 66%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated .mockup-3[data-v-56158a18] {
  left: unset;
  right: 66%;
  top: 40%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated.browser .mockup-0[data-v-56158a18] {
  bottom: 75%;
  right: 45%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated.browser .mokup-2[data-v-56158a18] {
  left: 340%;
  top: 68%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated.no_device .mockup-0[data-v-56158a18] {
  bottom: 70%;
  right: 41%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.mobile.quadruple_slided_rotated.no_device .mokup-2[data-v-56158a18] {
  left: 36%;
  top: 64%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided .mockup-container[data-v-56158a18] {
  height: 71%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided .mockup-0[data-v-56158a18] {
  left: 5%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided.browser .mockup-0[data-v-56158a18] {
  left: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.mobile_overlay .mockup-0[data-v-56158a18] {
  height: 55%;
  right: 5%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.mobile_overlay .mockup-1 img[data-v-56158a18] {
  z-index: 1;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.mobile_overlay .mockup-1[data-v-56158a18] {
  height: 45%;
  left: 51%;
  top: 14%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.mobile_middle .mockup-0[data-v-56158a18] {
  height: 65%;
  left: 31%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.mobile_middle .mockup-1[data-v-56158a18] {
  height: 50%;
  right: 62%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided_big .mockup-0[data-v-56158a18] {
  height: 105%;
  left: -2%;
  top: 22%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided_big.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.single_slided_big.browser .mockup-0[data-v-56158a18] {
  left: -7%;
  top: 10%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.triple_variety .mockup-0[data-v-56158a18] {
  height: 50%;
  right: 10%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.triple_variety .mockup-1[data-v-56158a18] {
  height: 45%;
  z-index: 1;
  left: 47%;
  top: 17%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.laptop.triple_variety .mockup-2[data-v-56158a18] {
  height: 35%;
  top: 35%;
  left: 74%;
  z-index: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.single_slided .mockup-container[data-v-56158a18] {
  height: 117%;
  top: 30%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.mobile_overlay .mockup-0[data-v-56158a18] {
  top: -1%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.mobile_overlay .mockup-1 img[data-v-56158a18] {
  z-index: 1;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.mobile_overlay .mockup-1[data-v-56158a18] {
  height: 58%;
  top: 36%;
  left: 59%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.mobile_middle .mockup-0[data-v-56158a18] {
  left: 29%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.mobile_middle .mockup-1[data-v-56158a18] {
  right: 66%;
  height: 50%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.single_slided_big .mockup-0[data-v-56158a18] {
  height: 160%;
  left: 5%;
  top: 67%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.single_slided_big.brower .mockup-0[data-v-56158a18] {
  left: 5%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.tablet.single_slided_big.no_device .mockup-0[data-v-56158a18] {
  left: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.single_middle.browser .mockup-0[data-v-56158a18] {
  height: 71%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.mobile_middle .mockup-0[data-v-56158a18] {
  height: 60%;
  right: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.mobile_middle .mockup-1[data-v-56158a18] {
  height: 36%;
  z-index: 1;
  left: 54%;
  top: 30%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.mobile_middle.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.mobile_middle.browser .mockup-0[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.tablet_middle .mockup-0[data-v-56158a18] {
  height: 60%;
  right: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.tablet_middle .mockup-1[data-v-56158a18] {
  height: 45%;
  z-index: 1;
  left: 55%;
  top: 25%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.tablet_middle.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.tablet_middle.browser .mockup-0[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.desktop_middle .mockup-0[data-v-56158a18] {
  height: 60%;
  right: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.desktop_middle .mockup-1[data-v-56158a18] {
  height: 31%;
  z-index: 1;
  left: 48%;
  top: 34%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.desktop_middle.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.desktop_middle.browser .mockup-0[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.triple_variety .mockup-0[data-v-56158a18] {
  height: 60%;
  right: 15%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.triple_variety .mockup-1[data-v-56158a18] {
  height: 45%;
  z-index: 1;
  left: 47%;
  top: 25%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.triple_variety .mockup-2[data-v-56158a18] {
  height: 36%;
  top: 41%;
  left: 74%;
  z-index: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.triple_variety.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.triple_variety.browser .mockup-0[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety .mockup-0[data-v-56158a18] {
  height: 60%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety .mockup-1[data-v-56158a18] {
  height: 45%;
  z-index: 1;
  left: 55%;
  top: 27%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety .mockup-2[data-v-56158a18] {
  height: 34%;
  top: 42%;
  left: 78%;
  z-index: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety .mockup-3[data-v-56158a18] {
  height: 36%;
  right: 40%;
  top: 34%;
  z-index: 2;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.desktop.quadruple_variety.browser .mockup-0[data-v-56158a18] {
  height: 61%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-left[data-v-56158a18] {
  margin-right: 0;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-left.laptop.single_slided[data-v-56158a18] {
  margin-right: -10px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-left.laptop.single_slided_big[data-v-56158a18] {
  margin-right: -25px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-left.tablet.mobile_middle[data-v-56158a18] {
  margin-right: 15px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-left.tablet.single_slided_big[data-v-56158a18] {
  margin-right: -20px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right[data-v-56158a18] {
  margin-left: 0;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.laptop.mobile_middle[data-v-56158a18] {
  transform: scaleX(-1);
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.laptop.mobile_middle .mockup-container[data-v-56158a18] {
  transform: scaleX(-1);
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.laptop.single_slided[data-v-56158a18] {
  margin-left: -30px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.laptop.single_slided_big[data-v-56158a18] {
  margin-left: -25px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.tablet.mobile_middle[data-v-56158a18] {
  transform: scaleX(-1);
  margin-left: 15px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.tablet.mobile_middle .mockup-container[data-v-56158a18] {
  transform: scaleX(-1);
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.align-text-right.tablet.single_slided_big[data-v-56158a18] {
  margin-left: -25px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.tablet.single_slided_big .mockup-0[data-v-56158a18] {
  height: 140%;
  left: 5%;
  top: 65%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.tablet.mobile_middle .mockup-0[data-v-56158a18] {
  left: 50%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.tablet.mobile_middle .mockup-1[data-v-56158a18] {
  right: 50%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.laptop.single_slided_big .mockup-0[data-v-56158a18] {
  height: 90%;
  top: 25%;
  left: -20%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.laptop.mobile_middle .mockup-0[data-v-56158a18] {
  left: 25%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.laptop.mobile_middle .mockup-1[data-v-56158a18] {
  right: 100%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety .mockup-0[data-v-56158a18] {
  height: 60%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety .mockup-1[data-v-56158a18] {
  left: 70%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety .mockup-2[data-v-56158a18] {
  top: 45%;
  left: 92%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety .mockup-3[data-v-56158a18] {
  left: unset;
  right: 66%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety.no_device .mockup-0[data-v-56158a18], .generated-cover-container .background-color-container .thumbnail-preview .mockups-container.large.desktop:not(.align-text-right):not(.align-text-left).quadruple_variety.browser .mockup-0[data-v-56158a18] {
  height: 45%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.mobile.triple_middle_horizontal .mockup-1[data-v-56158a18] {
  left: 78%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.mobile.triple_middle_horizontal .mockup-2[data-v-56158a18] {
  right: 78%;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.laptop.single_slided_big[data-v-56158a18] {
  margin-left: 80px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.laptop.single_slided[data-v-56158a18] {
  margin-left: 80px;
}
.generated-cover-container .background-color-container .thumbnail-preview .mockups-container.medium.tablet.single_slided_big[data-v-56158a18] {
  margin-left: 80px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/_helper/EmptyProjectGrid.vue?vue&type=style&index=0&id=10f3bf38&scoped=true&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.empty-state[data-v-10f3bf38] {
  padding-top: 60px;
  padding-bottom: 60px;
}
.empty-state .empty-collection[data-v-10f3bf38] {
  padding: 90px 0;
  border-radius: 8px;
  border: 1px dashed rgba(15, 15, 15, 0.2);
  background-color: rgba(15, 15, 15, 0.02);
  grid-column: 1/13;
}
.empty-state .empty-collection.dark[data-v-10f3bf38] {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}
.empty-state .empty-collection.dark .container svg[data-v-10f3bf38] {
  color: var(--asphalt10);
}
.empty-state .empty-collection.dark .container .text-wrapper .title[data-v-10f3bf38] {
  color: var(--asphalt10);
}
.empty-state .empty-collection.dark .container .text-wrapper .subtitle[data-v-10f3bf38] {
  color: var(--asphalt30);
}
.empty-state .empty-collection .container[data-v-10f3bf38] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  align-self: stretch;
  max-width: 500px;
  margin: auto;
}
.empty-state .empty-collection .container svg[data-v-10f3bf38] {
  color: var(--asphalt100);
  width: 48px;
  height: 48px;
}
.empty-state .empty-collection .container .text-wrapper[data-v-10f3bf38] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  text-align: center;
}
.empty-state .empty-collection .container .text-wrapper .title[data-v-10f3bf38] {
  align-self: stretch;
  font: var(--editor-ui-h1);
  color: var(--asphalt100);
  margin: 0;
}
.empty-state .empty-collection .container .text-wrapper .subtitle[data-v-10f3bf38] {
  align-self: stretch;
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt60);
  margin: 0;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/Testimonial.vue?vue&type=style&index=0&id=6b428f42&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--slide[data-v-6b428f42] {
  cursor: grab;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/components/UXFolioLogo.vue?vue&type=style&index=0&id=24c9b9f2&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-24c9b9f2] {
  color: var(--asphalt100);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/PortfolioFooter.vue?vue&type=style&index=0&id=0a59c040&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.button-container.center[data-v-0a59c040] {
  display: flex;
  justify-content: center;
}
.button-container.right[data-v-0a59c040] {
  display: flex;
  justify-content: flex-end;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/Fab.vue?vue&type=style&index=0&id=06a124c2&lang=scss&global=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fab-icon-enter-active,
.fab-icon-leave-active {
  transition: opacity 100ms ease, transform 100ms ease;
}
.fab-icon-enter-from,
.fab-icon-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
.fab-icon-enter-to,
.fab-icon-leave-from {
  opacity: 1;
  transform: scale(1);
}
.ufo-fab {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 4px;
  border: none;
  background-color: var(--fabBackgroundColor);
  cursor: pointer;
  position: relative;
  color: var(--fabColor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ufo-fab.dark {
  --fabColor: var(--fabDarkColor);
  --fabBackgroundColor: var(--fabDarkBackgroundColor);
  --fabHoverBackgroundColor: var(--fabDarkHoverBackgroundColor);
  --fabDisabledColor: var(--fabDarkDisabledColor);
  --fabSelectedBackgroundColor: var(--fabDarkSelectedBackgroundColor);
  --fabSubtleColor: var(--fabDarkSubtleColor);
  --fabSubtleBackgroundColor: var(--fabDarkSubtleBackgroundColor);
  --fabSubtleHoverBackgroundColor: var(--fabDarkSubtleHoverBackgroundColor);
}
.ufo-fab svg {
  width: 24px;
  height: 24px;
}
.ufo-fab--small {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ufo-fab--small svg {
  width: 20px;
  height: 20px;
}
.ufo-fab--tiny {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fabAlertHoverColor);
  background-color: var(--fabAlertHoverBackgroundColor);
}
.ufo-fab--tiny.ufo-fab--tiny:hover {
  background-color: var(--fabAlertTinyBackgroundColor);
}
.ufo-fab--tiny svg {
  width: 18px;
  height: 18px;
}
.ufo-fab[disabled] {
  color: var(--fabDisabledColor) !important;
  cursor: not-allowed;
}
.ufo-fab--has-label {
  width: max-content;
  color: var(--fabColor);
  font: var(--editor-ui-b2-regular);
  letter-spacing: 0.12px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.ufo-fab--has-label svg {
  margin-right: 8px;
}
.ufo-fab:focus, .ufo-fab:active {
  outline: none;
}
.ufo-fab:hover {
  background-color: var(--fabHoverBackgroundColor);
}
.ufo-fab:hover .tooltip {
  background-color: var(--fabHoverBackgroundColor);
  visibility: visible;
  opacity: 1;
}
.ufo-fab:hover[disabled] {
  background-color: var(--fabBackgroundColor);
}
.ufo-fab.ufo-fab--alert {
  color: var(--fabAlertColor);
  z-index: 2;
}
.ufo-fab.ufo-fab--alert:hover {
  background-color: var(--fabAlertHoverBackgroundColor);
  color: var(--fabAlertHoverColor);
}
.ufo-fab.ufo-fab--alert:hover[disabled] {
  background-color: var(--fabBackgroundColor);
}
.ufo-fab.ufo-fab--alert.ufo-fab--tiny {
  color: var(--fabAlertHoverColor);
}
.ufo-fab.ufo-fab--alert .tooltip {
  background-color: var(--fabAlertHoverBackgroundColor);
  color: var(--fabAlertHoverColor);
}
.ufo-fab.subtle {
  color: var(--fabSubtleColor);
  background: var(--fabSubtleBackgroundColor);
}
.ufo-fab.subtle:hover {
  background: var(--fabSubtleHoverBackgroundColor);
}
.ufo-fab.selected {
  background-color: var(--fabSelectedBackgroundColor);
}
.ufo-fab .tooltip {
  visibility: hidden;
  background-color: var(--fabHoverBackgroundColor);
  color: var(--fabColor);
  font: var(--editor-ui-b3-semibold);
  letter-spacing: 0.12px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 4px;
  position: absolute;
  z-index: 11;
  opacity: 0;
  transition: opacity 200ms;
  top: 50%;
  right: 120%;
  transform: translateY(-50%);
  max-width: 220px;
  width: max-content;
  line-break: auto;
}
.ufo-fab .tooltip.top {
  bottom: 120%;
  top: auto;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.ufo-fab .tooltip.top.spacing {
  left: 131%;
}
.ufo-fab .tooltip.bottom {
  top: 120%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.ufo-fab .tooltip.bottom.spacing {
  left: 131%;
}
.ufo-fab .tooltip.right {
  top: 50%;
  left: 120%;
  transform: translateY(-50%);
  display: inline-table;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/UserImagePlaceholder.vue?vue&type=style&index=0&id=8b5a5050&scoped=true&lang=scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.placeholder-image[data-v-8b5a5050] {
  background-color: var(--asphalt30);
  text-align: center;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.placeholder-image.small[data-v-8b5a5050] {
  width: 36px;
  height: 36px;
}
.placeholder-image.medium[data-v-8b5a5050] {
  width: 48px;
  height: 48px;
}
.placeholder-image p[data-v-8b5a5050] {
  font: var(--editor-ui-b2-semibold);
  color: var(--asphalt70);
  margin: 0;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/MiniFab.vue?vue&type=style&index=0&id=5f644eeb&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.mini-fab-container[data-v-5f644eeb] {
  position: relative;
}
.mini-fab-container .icon-wrapper[data-v-5f644eeb] {
  display: flex;
  width: 28px;
  height: 28px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.mini-fab-container .icon-wrapper svg[data-v-5f644eeb] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--asphalt10);
}
.mini-fab-container .icon-wrapper.error[data-v-5f644eeb]:hover {
  background-color: var(--rose40);
}
.mini-fab-container .icon-wrapper[data-v-5f644eeb]:hover {
  cursor: pointer;
  background-color: var(--asphalt70);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/Comment.vue?vue&type=style&index=0&id=3361d91a&scoped=true&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.comment[data-v-3361d91a] {
  display: flex;
  padding: 20px;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
}
.comment.resolved .profile-picture[data-v-3361d91a], .comment.resolved .placeholder-image[data-v-3361d91a], .comment.resolved .comment-details[data-v-3361d91a] {
  opacity: 60%;
}
.comment .profile-picture[data-v-3361d91a] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.comment[data-v-3361d91a]:hover {
  background-color: var(--asphalt90);
}
.comment:hover .resolve-check[data-v-3361d91a] {
  opacity: 1;
}
.comment:hover .resolved-icon[data-v-3361d91a] {
  opacity: 0;
}
.comment .resolve-check[data-v-3361d91a], .comment .resolved-icon[data-v-3361d91a] {
  position: absolute;
  right: 20px;
  top: 19px;
}
.comment .resolve-check[data-v-3361d91a] {
  opacity: 0;
}
.comment .edit-wrapper[data-v-3361d91a] {
  display: flex;
  width: 28px;
  height: 28px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.comment .resolved-icon[data-v-3361d91a] {
  opacity: 1;
}
.comment .resolved-icon .icon-wrapper[data-v-3361d91a] {
  display: flex;
  width: 28px;
  height: 28px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.comment .resolved-icon .icon-wrapper svg[data-v-3361d91a] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--asphalt10);
}
.comment .edit-container-wrapper[data-v-3361d91a] {
  position: absolute;
  right: 17px;
  top: 15px;
  display: flex;
  gap: 4px;
}
.comment .comment-details[data-v-3361d91a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.comment .comment-details .comment-user-and-text[data-v-3361d91a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.comment .comment-details .comment-user-and-text .comment-user[data-v-3361d91a] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment .comment-details .comment-user-and-text .comment-user .name[data-v-3361d91a] {
  font: var(--editor-ui-b2-semibold);
  color: var(--asphalt20);
}
.comment .comment-details .comment-user-and-text .comment-user .time[data-v-3361d91a] {
  font: var(--editor-ui-b3-regular);
  color: var(--asphalt40);
}
.comment .comment-details .comment-user-and-text .comment-text[data-v-3361d91a] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt20);
  overflow-wrap: anywhere;
  max-width: 300px;
}
.comment .comment-details .label[data-v-3361d91a] {
  padding: 4px 12px;
  font: var(--editor-ui-l-medium);
  color: var(--asphalt40);
  border-radius: 30px;
  border: 1px solid var(--asphalt80);
}
.comment .comment-details .label.design-label[data-v-3361d91a] {
  background-color: #362B3B;
  color: #E6BEF9;
}
.comment .comment-details .label.structure-label[data-v-3361d91a] {
  background-color: #373B2B;
  color: #E3F9A6;
}
.comment .comment-details .label.content-label[data-v-3361d91a] {
  background-color: #2B3A3B;
  color: #B9F3F7;
}
.comment .comment-details .label.imagery-label[data-v-3361d91a] {
  background-color: #3B302B;
  color: #FECAA4;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/modals/_ModalWrapper.vue?vue&type=style&index=0&id=e64930a6&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.new-modal-wrapper[data-v-e64930a6] {
  --modal-title: var(--asphalt100);
  --modal-description: var(--asphalt60);
  --modal-border: var(--asphalt30);
  --modal-bg: var(--asphalt10);
}
.new-modal-wrapper.dark[data-v-e64930a6] {
  --modal-title: var(--asphalt10);
  --modal-description: var(--asphalt40);
  --modal-border: var(--asphalt80);
  --modal-bg: var(--asphalt95);
}
.new-modal-wrapper[data-v-e64930a6] {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  transition: opacity 0.3s ease;
}
.new-modal-wrapper .new-modal-mask[data-v-e64930a6] {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(88, 97, 101, 0.7);
}
.new-modal-wrapper .new-modal-container[data-v-e64930a6] {
  width: 750px;
  max-width: 100%;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  box-shadow: var(--shadow-light-large);
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  background-color: var(--modal-bg);
  overflow: hidden;
}
.new-modal-wrapper .new-modal-container--tiny[data-v-e64930a6] {
  width: 450px;
  height: auto;
}
.new-modal-wrapper .new-modal-container--small[data-v-e64930a6] {
  width: 500px;
  height: auto;
}
.new-modal-wrapper .new-modal-container--medium[data-v-e64930a6] {
  width: 640px;
  height: auto;
}
.new-modal-wrapper .new-modal-container--large[data-v-e64930a6] {
  width: 880px;
  height: 640px;
}
.new-modal-wrapper .new-modal-container--fit-content[data-v-e64930a6] {
  width: fit-content;
  height: fit-content;
  overscroll-behavior: none;
}
.modal-enter-active[data-v-e64930a6],
.modal-leave-active[data-v-e64930a6] {
  transition-property: opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.modal-enter-from[data-v-e64930a6],
.modal-leave-to[data-v-e64930a6] {
  transform: scale(1.1);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/modals/_ModalHeader.vue?vue&type=style&index=0&id=4d388c63&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.new-modal-header-wrapper[data-v-4d388c63] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--modal-border);
}
.new-modal-header-wrapper .new-modal-header[data-v-4d388c63] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.new-modal-header-wrapper .new-modal-header .new-modal-title[data-v-4d388c63] {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--editor-ui-h2);
  color: var(--modal-title);
}
.new-modal-header-wrapper .new-modal-header .right-side[data-v-4d388c63] {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.new-modal-header-wrapper .new-modal-description[data-v-4d388c63] {
  font: var(--editor-ui-b2-regular);
  color: var(--modal-description);
  letter-spacing: 0.14px;
}
.new-modal-header-wrapper .new-modal-tabs-container[data-v-4d388c63] {
  width: 100%;
}
.new-modal-header-wrapper.has-tabs[data-v-4d388c63] {
  padding: 24px 24px 0;
}
.new-modal-header-wrapper.has-steps[data-v-4d388c63] {
  border-bottom: none;
  gap: 20px;
  padding: 24px 24px 0;
}
.new-modal-header-wrapper.small[data-v-4d388c63] {
  padding: 32px 32px 16px 32px;
  border-bottom: none;
}
.new-modal-header-wrapper.small .new-modal-header[data-v-4d388c63] {
  justify-content: center;
  text-align: center;
}
.new-modal-header-wrapper.small .new-modal-header .new-modal-title[data-v-4d388c63] {
  font: var(--editor-ui-h1);
}
.new-modal-header-wrapper.small .new-modal-header .new-modal-description[data-v-4d388c63] {
  font: var(--editor-ui-b1-regular);
  letter-spacing: 0.16px;
}
.new-modal-header-wrapper.section-settings .new-modal-title[data-v-4d388c63] {
  font: var(--editor-ui-h3);
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/modals/_ModalBody.vue?vue&type=style&index=0&id=5ab8a878&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.new-modal-body[data-v-5ab8a878] {
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  flex: 1;
  height: 100%;
}
.new-modal-body.small[data-v-5ab8a878] {
  padding: 0 32px;
  font: var(--editor-ui-b1-regular);
  letter-spacing: 0.16px;
  color: var(--modal-description);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.new-modal-body.small.center[data-v-5ab8a878] {
  text-align: center;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/sections/modals/_ModalFooter.vue?vue&type=style&index=0&id=2c062871&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.new-modal-footer[data-v-2c062871] {
  padding: 24px;
  border-top: 1px solid var(--modal-border);
}
.new-modal-footer .new-ufo-cta--container[data-v-2c062871] {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.new-modal-footer button[data-v-2c062871]:not(.link) {
  width: 100%;
}
.new-modal-footer.small[data-v-2c062871] {
  border-top: none;
  padding: 32px;
}
.new-modal-footer.small .new-ufo-cta--container[data-v-2c062871] {
  justify-content: space-around;
  width: 100%;
}
.new-modal-footer.small .new-ufo-cta--container[data-v-2c062871] button:not(.link) {
  width: 100%;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/CommentInput.vue?vue&type=style&index=0&id=60d82547&scoped=true&lang=scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.comment-input[data-v-60d82547] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.comment-input .input-row[data-v-60d82547] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 24px;
  align-self: stretch;
}
.comment-input .input-row .ufo--text-area-comment[data-v-60d82547] {
  width: 100%;
  font: var(--editor-ui-b1-semibold);
  color: var(--asphalt10);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  overflow: auto;
}
.comment-input .input-row svg[data-v-60d82547] {
  width: 24px;
  height: 24px;
  color: var(--asphalt50);
  align-self: self-end;
}
.comment-input .input-row svg.active[data-v-60d82547] {
  color: var(--asphalt10);
}
.comment-input .input-row svg[data-v-60d82547]:not(.disabled):hover {
  cursor: pointer;
  color: var(--asphalt10);
}
.comment-input .labels-row[data-v-60d82547] {
  display: flex;
  padding: 12px 24px 24px 24px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.comment-input .labels-row .label[data-v-60d82547] {
  padding: 8px 12px;
  font: var(--editor-ui-l-medium);
  color: var(--asphalt40);
  border-radius: 30px;
  border: 1px solid var(--asphalt80);
}
.comment-input .labels-row .label[data-v-60d82547]:hover {
  cursor: pointer;
  color: var(--asphalt10);
}
.comment-input .labels-row .label.selected.design-label[data-v-60d82547] {
  background-color: #362B3B;
  color: #E6BEF9;
}
.comment-input .labels-row .label.selected.structure-label[data-v-60d82547] {
  background-color: #373B2B;
  color: #E3F9A6;
}
.comment-input .labels-row .label.selected.content-label[data-v-60d82547] {
  background-color: #2B3A3B;
  color: #B9F3F7;
}
.comment-input .labels-row .label.selected.imagery-label[data-v-60d82547] {
  background-color: #3B302B;
  color: #FECAA4;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/reviewer/ReviewFabs.vue?vue&type=style&index=0&id=4e8e23e2&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.profile_theme_four .review-fabs.hero {
  top: 20px !important;
}
.profile_theme_nine .review-fabs.hero {
  top: -300px !important;
  right: -20px !important;
}
.profile_theme_default .review-fabs.hero {
  top: -60px !important;
  right: 0 !important;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/FabWrapper.vue?vue&type=style&index=0&id=e5bca6b0&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-fabs {
  position: absolute;
  right: 24px;
  top: 10px;
  z-index: 2;
  height: calc(100% - 100px);
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: 100ms;
}
.review-fabs.MainHeader, .review-fabs.hero {
  top: 100px;
  height: calc(100% - 100px);
}
.review-fabs.sticky-header .sticky {
  top: 175px;
}
.review-fabs .sticky {
  display: flex;
  position: sticky;
  top: 75px;
  gap: 8px;
}
.review-fabs .ufo-fab {
  min-width: 44px;
  height: 44px;
  width: auto;
  border-radius: 6px;
  outline: 1px solid var(--asphalt90);
}
.review-fabs .reaction-fab-container {
  display: flex; /* Included from the first file */
  flex-direction: row-reverse; /* Included from the first file */
  gap: 12px; /* Included from the first file */
  position: relative; /* Included from the second file */
}
.review-fabs .reaction-fab-container .reaction-in-fab-container,
.review-fabs .reaction-fab-container .reaction-in-fab {
  font-size: 18px; /* Taken from the second file */
  display: flex;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.review-fabs .reaction-fab-container .reaction-in-fab-container .reaction-wrapper,
.review-fabs .reaction-fab-container .reaction-in-fab .reaction-wrapper {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.review-fabs .reaction-fab-container .reaction-in-fab-container .reaction-wrapper img,
.review-fabs .reaction-fab-container .reaction-in-fab .reaction-wrapper img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.review-fabs .reaction-fab-container .reaction-in-fab-container span,
.review-fabs .reaction-fab-container .reaction-in-fab span {
  color: var(--asphalt10);
  font: var(--editor-ui-b3-medium);
}
.review-fabs .reaction-fab-container .reactions-container {
  position: absolute;
  right: 0;
  top: 51px;
  display: flex;
  border-radius: 8px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}
.review-fabs .reaction-fab-container .reactions-container .reaction {
  display: flex;
  width: 56px;
  height: 56px;
  padding: 6px;
  justify-content: center;
  align-items: center;
}
.review-fabs .reaction-fab-container .reactions-container .reaction p {
  margin: 0;
}
.review-fabs .reaction-fab-container .reactions-container .reaction .reaction-wrapper {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 6px;
  transition: transform 150ms ease-in-out;
}
.review-fabs .reaction-fab-container .reactions-container .reaction .reaction-wrapper.selected {
  background-color: var(--asphalt70);
}
.review-fabs .reaction-fab-container .reactions-container .reaction .reaction-wrapper:hover {
  background-color: var(--asphalt70);
  cursor: pointer;
  transform: translateY(-2px) rotate(-8deg);
}
.review-fabs .reaction-fab-container .reactions-container .reaction .reaction-wrapper .fab-wrapper {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.review-fabs .reaction-fab-container .reactions-container .reaction .reaction-wrapper .fab-wrapper img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.review-fabs .comments-fab-container {
  position: relative;
}
.review-fabs .comments-fab-container :deep(.ufo-fab) {
  border-radius: 6px;
}
.review-fabs .comments-fab-container .comment-in-fab {
  display: flex;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.review-fabs .comments-fab-container .comment-in-fab span {
  color: var(--asphalt10);
  font: var(--editor-ui-b3-medium);
}
.review-fabs .comments-fab-container .comment-in-fab .placeholder-image {
  display: flex;
  width: 28px;
  height: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  background: var(--asphalt30);
}
.review-fabs .comments-fab-container .comment-in-fab .placeholder-image p {
  margin: 0;
  color: var(--asphalt70);
  font: var(--editor-ui-l-semibold);
}
.review-fabs .comments-fab-container .comments-container {
  position: absolute;
  right: 0;
  top: 51px;
  display: flex;
  width: 380px;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 3;
}
.review-fabs .comments-fab-container .comments-container .header-row {
  display: flex;
  border-bottom: 1px solid var(--asphalt90);
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}
.review-fabs .comments-fab-container .comments-container .header-row svg {
  width: 20px;
  height: 20px;
}
.review-fabs .comments-fab-container .comments-container .header-row svg:hover {
  cursor: pointer;
}
.review-fabs .comments-fab-container .comments-container .header-row {
  font: var(--editor-ui-b1-semibold);
  color: var(--asphalt10);
}
.review-fabs .comments-fab-container .comments-container .comments {
  display: flex;
  max-height: 360px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--asphalt90);
  overflow: auto;
  overscroll-behavior: contain;
}
.review-fabs .comments-fab-container .comments-container .comments ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.review-fabs .comments-fab-container .comments-container .comments {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/sections/SectionLoader.vue?vue&type=style&index=0&id=104bbed0&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.section-container[data-v-104bbed0] {
  position: relative;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/editorNavBar/NavBarPill.vue?vue&type=style&index=0&id=0b38cad7&lang=scss&scoped=true ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button[data-v-0b38cad7] {
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt60);
  padding: 4px 8px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
}
button[data-v-0b38cad7]:focus {
  outline: none;
}
button.dark[data-v-0b38cad7] {
  color: var(--asphalt40);
}
button.dark[data-v-0b38cad7]:hover, button.dark.selected[data-v-0b38cad7] {
  color: var(--asphalt10);
}
button[data-v-0b38cad7]:disabled {
  color: var(--asphalt50);
}
button[data-v-0b38cad7]:disabled:hover {
  color: var(--asphalt50);
  cursor: not-allowed;
}
button[data-v-0b38cad7]:hover, button.selected[data-v-0b38cad7] {
  color: var(--asphalt90);
}
button.selected[data-v-0b38cad7] {
  background-color: var(--asphalt90);
}
button.large[data-v-0b38cad7] {
  height: 44px;
}
button.large svg[data-v-0b38cad7] {
  width: 20px;
  height: 20px;
}
button.large span[data-v-0b38cad7] {
  margin-left: 6px;
}
button svg[data-v-0b38cad7] {
  width: 20px;
  height: 20px;
}
button span[data-v-0b38cad7] {
  display: none;
  font-size: 13px;
}
@media (min-width: 640px) {
button span[data-v-0b38cad7] {
    display: inline;
    margin-left: 6px;
}
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/UrlCardCopy.vue?vue&type=style&index=0&id=451d496f&scoped=true&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.url-card[data-v-451d496f] {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 16px 16px;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  border-radius: 4px;
  background: var(--asphalt90);
  cursor: pointer;
}
.url-card.disabled svg[data-v-451d496f],
.url-card.disabled .url[data-v-451d496f] {
  color: var(--asphalt50);
}
.url-card.disabled .type[data-v-451d496f] {
  color: var(--asphalt60);
}
.url-card.disabled[data-v-451d496f]:hover {
  color: var(--asphalt50);
  cursor: default;
}
.url-card.disabled:hover svg[data-v-451d496f],
.url-card.disabled:hover .url[data-v-451d496f] {
  color: var(--asphalt50);
}
.url-card[data-v-451d496f]:hover {
  background-color: var(--asphalt80);
  color: var(--asphalt10);
}
.url-card:hover svg[data-v-451d496f],
.url-card:hover .url[data-v-451d496f] {
  color: var(--asphalt10);
}
.url-card .url[data-v-451d496f] {
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt30);
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.url-card .url span[data-v-451d496f] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.url-card .url svg[data-v-451d496f] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--asphalt30);
}
.url-card .type[data-v-451d496f] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/MessageHighlight.vue?vue&type=style&index=0&id=596256c2&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--message-highlight-container[data-v-596256c2] {
  --highlight-border: var(--asphalt50);
  --highlight-bg: var(--asphalt20);
  --highlight-title: var(--asphalt100);
  --highlight-message: var(--asphalt60);
}
.ufo--message-highlight-container.warning[data-v-596256c2] {
  --highlight-border: var(--error50);
}
.ufo--message-highlight-container.success[data-v-596256c2] {
  --highlight-border: var(--success60);
}
.ufo--message-highlight-container.dark[data-v-596256c2] {
  --highlight-border: var(--asphalt40);
  --highlight-bg: var(--asphalt90);
  --highlight-title: var(--asphalt10);
  --highlight-message: var(--asphalt40);
}
.ufo--message-highlight-container.dark.warning[data-v-596256c2] {
  --highlight-border: var(--error40);
}
.ufo--message-highlight-container.dark.success[data-v-596256c2] {
  --highlight-border: var(--success50);
}
.ufo--message-highlight-container[data-v-596256c2] {
  border-radius: 4px;
  width: 100%;
  display: flex;
  background-color: var(--highlight-bg);
  overflow: hidden;
}
.ufo--message-highlight-container .border-left[data-v-596256c2] {
  width: 4px;
  background-color: var(--highlight-border);
}
.ufo--message-highlight-container .ufo--message-highlight[data-v-596256c2] {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 16px;
  gap: 12px;
}
.ufo--message-highlight-container .ufo--message-highlight .picto[data-v-596256c2] {
  flex-shrink: 0;
  color: var(--highlight-border);
  width: 24px;
  height: 24px;
}
.ufo--message-highlight-container .ufo--message-highlight .message-content[data-v-596256c2] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.ufo--message-highlight-container .ufo--message-highlight .title[data-v-596256c2] {
  font: var(--editor-ui-b1-medium);
  letter-spacing: 0.16px;
  color: var(--highlight-title);
}
.ufo--message-highlight-container .ufo--message-highlight .message[data-v-596256c2] {
  font: var(--editor-ui-b2-regular);
  letter-spacing: 0.14px;
  color: var(--highlight-message);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/IconButton.vue?vue&type=style&index=0&id=282c1620&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button[data-v-282c1620] {
  --color-icon-btn-color: var(--asphalt50);
  --color-icon-btn-color-hover: var(--asphalt100);
  --color-icon-btn-label-color: var(--asphalt10);
  --color-icon-btn-label-bg: var(--asphalt90);
}
button.high[data-v-282c1620] {
  --color-icon-btn-color: var(--asphalt60) ;
}
button.dark[data-v-282c1620] {
  --color-icon-btn-color: var(--asphalt40);
  --color-icon-btn-color-hover: var(--asphalt10);
  --color-icon-btn-label-color: var(--asphalt100);
  --color-icon-btn-label-bg: var(--asphalt20);
}
button.dark.high[data-v-282c1620] {
  --color-icon-btn-color: var(--asphalt30) ;
}
button[data-v-282c1620] {
  background-color: transparent;
  border: none;
  font: var(--editor-ui-b3-semibold);
  text-transform: capitalize;
  color: var(--color-icon-btn-color);
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  padding: 0px;
}
button[data-v-282c1620]:focus {
  outline: none;
}
button[data-v-282c1620]:hover {
  color: var(--color-icon-btn-color-hover);
}
button svg[data-v-282c1620] {
  width: 24px;
  height: 24px;
}
button.small svg[data-v-282c1620] {
  width: 20px;
  height: 20px;
}
button.large svg[data-v-282c1620] {
  width: 32px;
  height: 32px;
}
button.tooltip-on[tooltip][data-v-282c1620] {
  position: relative;
}
button.tooltip-on[tooltip][data-v-282c1620]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-icon-btn-label-bg);
  font: var(--editor-ui-b3-semibold);
  color: var(--color-icon-btn-label-color);
  letter-spacing: 0.12px;
  text-align: center;
  text-transform: none;
  border-radius: 4px;
  pointer-events: none;
  padding: 8px 12px;
  z-index: 99;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
button.tooltip-on[tooltip][data-v-282c1620]:hover::before, button.tooltip-on[tooltip][data-v-282c1620]:hover::after {
  opacity: 1;
}
button.tooltip-on.tooltip-slim[data-v-282c1620]::after {
  font-size: 13px;
  padding: 8px;
}
button.tooltip-on.large[data-v-282c1620] {
  cursor: pointer;
}
button.tooltip-on.large[data-v-282c1620]::after {
  min-width: 140px;
  text-align: center;
}
button.tooltip-on[tooltip-position=top][data-v-282c1620]::before, button.tooltip-on[tooltip-position=top][data-v-282c1620]::after {
  left: 50%;
}
button.tooltip-on[tooltip-position=right][data-v-282c1620]::before, button.tooltip-on[tooltip-position=right][data-v-282c1620]::after {
  left: 100%;
  top: 50%;
}
button.tooltip-on[tooltip-position=right][data-v-282c1620]::before {
  margin-left: 1px;
  transform: translateY(-50%) rotate(90deg);
}
button.tooltip-on[tooltip-position=right][data-v-282c1620]::after {
  margin-left: 8px;
  transform: translateX(0%) translateY(-50%);
}
button.tooltip-on[tooltip-position=top-right][data-v-282c1620]::after {
  left: -3px;
  top: -40px;
  transform: translateX(0px) translateY(0%);
}
button.tooltip-on[tooltip-position=top-right][data-v-282c1620]::before {
  left: 6px;
  top: -12px;
  transform: translateY(50%);
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-icon-btn-label-bg) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 98;
}
button.tooltip-on[tooltip-position=bottom][data-v-282c1620]::before, button.tooltip-on[tooltip-position=bottom][data-v-282c1620]::after {
  top: 100%;
  margin-top: 8px;
}
button.tooltip-on[tooltip-position=bottom][data-v-282c1620]::before {
  transform: translateX(-50%) translateY(-100%) rotate(-180deg);
}
button.tooltip-on[tooltip-position=bottom][data-v-282c1620]::after {
  transform: translateX(-50%) translateY(0%);
}
button.tooltip-on[tooltip-position=left][data-v-282c1620]::before, button.tooltip-on[tooltip-position=left][data-v-282c1620]::after {
  left: 0%;
  top: 47%;
}
button.tooltip-on[tooltip-position=left][data-v-282c1620]::before {
  position: absolute;
  margin-left: -12px;
  transform: translateY(-50%) rotate(-90deg);
}
button.tooltip-on[tooltip-position=left][data-v-282c1620]::after {
  margin-left: -8px;
  transform: translateX(-100%) translateY(-50%);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/Tag.vue?vue&type=style&index=0&id=29025056&scoped=true&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tag[data-v-29025056] {
  display: inline-flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: var(--asphalt20);
  font: var(--editor-ui-b3-medium);
  color: var(-volt);
  cursor: pointer;
}
.tag.dark[data-v-29025056] {
  background: var(--asphalt90);
  color: var(--volt);
}
.tag.dark[data-v-29025056]:hover {
  background: var(--asphalt70);
  color: var(--volt);
}
.tag[data-v-29025056]:hover {
  background: var(--asphalt10);
  color: var(--asphalt70);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/UrlEditNavContainer.vue?vue&type=style&index=0&id=1e13f414&scoped=true&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.nav-url-edit[data-v-1e13f414] {
  position: relative;
}
.nav-url-edit .navbar-toggle button[data-v-1e13f414] {
  outline: none;
  flex-direction: row-reverse;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  height: 36px;
}
.nav-url-edit .navbar-toggle button[data-v-1e13f414]:hover, .nav-url-edit .navbar-toggle button.selected[data-v-1e13f414] {
  border-radius: 8px;
  border: 1px solid var(--asphalt70);
  background: var(--asphalt90);
}
.nav-url-edit .url-edit-container[data-v-1e13f414] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 55px;
  display: flex;
  width: 460px;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  /* Dark/Medium */
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.4), 0 16px 24px 0 rgba(0, 0, 0, 0.32);
}
.nav-url-edit .url-edit-container .body-container[data-v-1e13f414] {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.nav-url-edit .url-edit-container .body-container .title-text[data-v-1e13f414] {
  margin: 0;
  color: var(--asphalt10);
  font: var(--editor-ui-b1-semibold);
}
.nav-url-edit .url-edit-container .body-container .url-container[data-v-1e13f414] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--asphalt40);
}
.nav-url-edit .url-edit-container .body-container .url-container .card[data-v-1e13f414] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  border-radius: 6px;
  padding: 16px 14px 16px 16px;
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt30);
  height: 48px;
  cursor: pointer;
  background: var(--asphalt90);
}
.nav-url-edit .url-edit-container .body-container .url-container .card button.dark.low.small[data-v-1e13f414] {
  padding: 6px 8px;
  border-radius: 4px;
}
.nav-url-edit .url-edit-container .body-container .url-container .card span[data-v-1e13f414] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.nav-url-edit .url-edit-container .body-container .url-container .card[data-v-1e13f414]:hover {
  color: var(--asphalt10);
  background: var(--asphalt80);
}
.nav-url-edit .url-edit-container .body-container .url-container .card:hover button.dark.low.small[data-v-1e13f414] {
  color: var(--asphalt10);
}
.nav-url-edit .url-edit-container .body-container .url-container .url-type[data-v-1e13f414] {
  font: var(--editor-ui-b3-regular);
  padding: 0 12px;
}
.nav-url-edit .url-edit-container .dd-container[data-v-1e13f414] {
  display: flex;
  padding: 8px 0;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-top: 1px solid var(--asphalt90);
}
.nav-url-edit .url-edit-container .dd-container .dd-select-items[data-v-1e13f414] {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nav-url-edit .url-edit-container .dd-container .dd-select-item[data-v-1e13f414] {
  padding: 12px 24px;
  color: var(--asphalt40);
  font: var(--editor-ui-b2-medium);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}
.nav-url-edit .url-edit-container .dd-container .dd-select-item[data-v-1e13f414]:not(.blocked):hover, .nav-url-edit .url-edit-container .dd-container .dd-select-item[data-v-1e13f414]:not(.blocked):focus {
  color: var(--asphalt10);
}
.nav-url-edit .url-edit-container .dd-container .dd-select-item.blocked[data-v-1e13f414] {
  cursor: default;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/ViewNavBar.vue?vue&type=style&index=0&id=70fecdd4&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
#app:has(.view-nav-bar) .sticked {
  top: 60px;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/ViewNavBar.vue?vue&type=style&index=1&id=70fecdd4&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--nav-bar[data-v-70fecdd4] {
  height: 60px;
  background-color: var(--asphalt10);
  padding: 12px 30px;
}
@media (min-width: 1024px) {
.ufo--nav-bar[data-v-70fecdd4] {
    padding: 12px 30px;
}
}
.ufo--nav-bar[data-v-70fecdd4] {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 103;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
}
.ufo--nav-bar.dark[data-v-70fecdd4] {
  background-color: var(--asphalt100);
}
.ufo--nav-bar > .left[data-v-70fecdd4],
.ufo--nav-bar > .right[data-v-70fecdd4] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 640px) {
.ufo--nav-bar > .left[data-v-70fecdd4],
  .ufo--nav-bar > .right[data-v-70fecdd4] {
    gap: 8px;
}
}
.ufo--nav-bar > .left .publish[data-v-70fecdd4],
.ufo--nav-bar > .right .publish[data-v-70fecdd4] {
  margin: 0 16px 0 8px;
}
.ufo--nav-bar > .left[data-v-70fecdd4] {
  margin-right: auto;
}
.ufo--nav-bar > .right[data-v-70fecdd4] {
  margin-left: auto;
}
.ufo--nav-bar .mid[data-v-70fecdd4] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
}
.ufo--nav-bar.dark .logo[data-v-70fecdd4] {
  color: var(--asphalt20);
}
.logo[data-v-70fecdd4] {
  height: 24px;
  cursor: pointer;
  margin-right: 8px;
  color: var(--asphalt90);
}
@media (min-width: 1024px) {
.logo[data-v-70fecdd4] {
    margin-right: 24px;
}
}
.ufo-cta .btn-content[data-v-70fecdd4] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.account-name[data-v-70fecdd4] {
  width: 140px;
  text-align: center;
}
@media (min-width: 1280px) {
.account-name[data-v-70fecdd4] {
    width: 234px;
}
}
@media (min-width: 1440px) {
.account-name[data-v-70fecdd4] {
    width: 326px;
}
}
.account-name[data-v-70fecdd4] {
  height: 36px;
  padding: 0 12px;
  margin: 0;
  border-radius: 4px;
  background-color: var(--asphalt100);
  line-height: 36px;
  color: var(--asphalt10);
  font-size: 14px;
  font-family: var(--primarySans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/icons/UXfolioLogo.vue?vue&type=style&index=0&id=4eefcc1e&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-4eefcc1e] {
  fill: var(--color-text);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/components/CtaButton.vue?vue&type=style&index=0&id=4622b797&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button[data-v-4622b797] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  height: 2.75rem;
  padding: 0 1rem;
  font-family: var(--font-headline-family);
  font-weight: 500;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: -0.015rem;
  border: 2px solid;
  transition: all 200ms ease-in-out;
  gap: 0.375rem;
}
button svg[data-v-4622b797] {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 768px) {
button[data-v-4622b797] {
    height: 3rem;
    font-size: 1rem;
    letter-spacing: -0.0175rem;
    padding: 0 1.25rem;
}
}
@media (min-width: 1024px) {
button[data-v-4622b797] {
    height: 3.375rem;
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
    padding: 0 1.5rem;
    gap: 0.5rem;
}
button svg[data-v-4622b797] {
    width: 1.5rem;
    height: 1.5rem;
}
}
button[data-v-4622b797]:focus {
  outline: none;
}
button span[data-v-4622b797] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
button span[data-v-4622b797]::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
button span[data-v-4622b797]::after {
    display: none;
}
}
button.primary[data-v-4622b797], button.submit[data-v-4622b797] {
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
  color: var(--color-btn-primary-text);
}
button.primary svg path[data-v-4622b797], button.submit svg path[data-v-4622b797] {
  fill: var(--color-btn-primary-text);
  transition: fill 300ms ease-in-out;
}
button.primary[data-v-4622b797]:hover, button.submit[data-v-4622b797]:hover {
  color: var(--color-btn-primary-text-hover);
  background-color: var(--color-btn-primary-bg-hover);
}
button.primary:hover svg path[data-v-4622b797], button.submit:hover svg path[data-v-4622b797] {
  fill: var(--color-btn-primary-text-hover);
}
button.secondary[data-v-4622b797] {
  background-color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
}
button.secondary svg path[data-v-4622b797] {
  fill: var(--color-btn-secondary-text);
  transition: fill 300ms ease-in-out;
}
button.secondary[data-v-4622b797]:hover {
  background-color: var(--color-btn-secondary-bg-hover);
  color: var(--color-btn-secondary-text-hover);
}
button.secondary:hover svg path[data-v-4622b797] {
  fill: var(--color-btn-secondary-text-hover);
}
button.tertiary[data-v-4622b797] {
  background-color: var(--color-btn-tertiary-bg);
  border-color: var(--color-btn-tertiary-border);
  color: var(--color-btn-tertiary-text);
}
button.tertiary[data-v-4622b797]:hover {
  --color-btn-tertiary-text-hover: var(--Asphalt-10);
  background-color: var(--color-btn-tertiary-bg-hover);
  border-color: var(--color-btn-tertiary-border-hover);
  color: var(--color-btn-tertiary-text-hover);
}
button.inline[data-v-4622b797] {
  background-color: var(--color-btn-inline-bg);
  border-color: var(--color-btn-inline-border);
  color: var(--color-btn-inline-text);
  padding: 0.25rem 0;
  position: relative;
  border: none;
  height: unset;
}
button.inline svg path[data-v-4622b797] {
  fill: var(--color-btn-inline-text);
  transition: fill 200ms ease-in-out;
}
button.inline[data-v-4622b797]:hover:after, button.inline.active[data-v-4622b797]:after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--color-btn-inline-text);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/components/CtaButton.vue?vue&type=style&index=1&id=4622b797&lang=scss&global=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button.primary svg path {
  fill: var(--color-btn-primary-text);
}
button.primary:hover svg path {
  fill: var(--color-btn-primary-text-hover);
}
button.secondary svg path {
  fill: var(--color-btn-secondary-text);
}
button.secondary:hover svg path {
  fill: var(--color-btn-secondary-text-hover);
}
button.tertiary svg path {
  fill: var(--color-btn-tertiary-text);
}
button.tertiary:hover svg path {
  fill: var(--color-btn-tertiary-text-hover);
}
button.inline svg path {
  fill: var(--color-btn-inline-text);
}
button.inline:hover svg path {
  fill: var(--color-btn-inline-text-hover);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/components/Footer.vue?vue&type=style&index=0&id=d3981994&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
footer[data-v-d3981994] {
  flex-direction: column;
  align-items: center;
}
footer .top-footer[data-v-d3981994] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem 0;
}
@media (min-width: 768px) {
footer .top-footer[data-v-d3981994] {
    flex-direction: row;
    padding: 4rem 0;
    gap: 3.75rem;
}
}
@media (min-width: 1280px) {
footer .top-footer[data-v-d3981994] {
    padding: 7.5rem 0;
}
}
footer .top-footer .site-map[data-v-d3981994] {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 1rem;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map[data-v-d3981994] {
    padding-top: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: unset;
    width: unset;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map[data-v-d3981994] {
    width: 59.25rem;
    max-width: 100%;
}
}
footer .top-footer .site-map .category[data-v-d3981994] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map .category[data-v-d3981994] {
    flex: 50%;
    width: unset;
    margin-bottom: 0.87rem;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map .category[data-v-d3981994] {
    flex: 1 0 0;
    margin-bottom: 0;
}
}
@media (max-width: 768px) {
footer .top-footer .site-map .category[data-v-d3981994] {
    gap: 0;
}
footer .top-footer .site-map .category nav[data-v-d3981994] {
    height: 0;
    overflow: hidden;
    display: none;
}
footer .top-footer .site-map .category.expanded nav[data-v-d3981994] {
    height: max-content;
    display: flex;
}
footer .top-footer .site-map .category.expanded svg[data-v-d3981994] {
    transform: rotate(-180deg);
}
}
footer .top-footer .site-map .title[data-v-d3981994] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.0625rem;
  width: 100%;
  padding: 0.75rem 0;
  color: var(--color-text);
  font-family: var(--font-headline-family);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.5;
}
footer .top-footer .site-map .title svg[data-v-d3981994] {
  height: 2.375rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map .title[data-v-d3981994] {
    height: 3rem;
    font-size: 1.125rem;
    font-weight: 500;
}
footer .top-footer .site-map .title svg[data-v-d3981994] {
    display: none;
}
}
footer .top-footer .site-map nav[data-v-d3981994] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
footer .top-footer .site-map nav a[data-v-d3981994] {
  font-size: 0.875rem;
}
footer .bottom-footer[data-v-d3981994] {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .bottom-footer[data-v-d3981994] {
    flex-direction: row;
    align-items: center;
    padding: 1.5rem 0;
}
}
footer .bottom-footer .cc[data-v-d3981994] {
  padding: 0.875rem 0;
}
footer .controls[data-v-d3981994] {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
footer .controls button[data-v-d3981994] {
  font-size: 0.75rem;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/hero/GetHeroPortfolioLogo.vue?vue&type=style&index=0&id=e1773b96&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar-id[data-v-e1773b96],
.navbar-logo[data-v-e1773b96] {
  z-index: 2;
  position: relative;
}
.navbar-id[data-v-e1773b96]:hover,
.navbar-id a[data-v-e1773b96]:hover {
  font-weight: bold;
  color: var(--hero-nav-button-text-color-hover);
  cursor: pointer;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/hero/GetHeroNavigation.vue?vue&type=style&index=0&id=b1476e3c&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navbar[data-v-b1476e3c] {
  display: flex;
  flex-direction: row;
  position: relative;
  height: max-content;
  grid-column: 1/-1;
  align-items: center;
  padding: 24px 0;
  z-index: 1;
}
@media (max-width: 768px) {
.navbar[data-v-b1476e3c] {
    justify-content: space-between;
    z-index: 3;
}
}
@media (min-width: 768px) {
.navbar.sides .navbar-container[data-v-b1476e3c] {
    justify-content: space-between;
    width: 100%;
}
.navbar.sides .navbar-container .social-links[data-v-b1476e3c] {
    margin-left: auto;
}
}
.navbar.middle .navbar-container[data-v-b1476e3c] {
  width: 100%;
}
@media (min-width: 768.5px) {
.navbar.middle .navbar-item:first-child:nth-last-child(3) + .navbar-item + .navbar-item[data-v-b1476e3c] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(4) + .navbar-item + .navbar-item[data-v-b1476e3c] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(5) + .navbar-item + .navbar-item + .navbar-item[data-v-b1476e3c] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(6) + .navbar-item + .navbar-item + .navbar-item[data-v-b1476e3c] {
    margin-left: auto;
}
.navbar.middle .navbar-item:first-child:nth-last-child(7) + .navbar-item + .navbar-item + .navbar-item + .navbar-item[data-v-b1476e3c] {
    margin-left: auto;
}
}
.navbar.simple-left[data-v-b1476e3c] {
  justify-content: flex-start;
}
.navbar.simple-middle[data-v-b1476e3c] {
  justify-content: center;
}
.navbar.simple-right[data-v-b1476e3c] {
  justify-content: flex-end;
}
.navbar.simple-right .navbar-id + .navbar-container[data-v-b1476e3c],
.navbar.simple-right .navbar-logo + .navbar-container[data-v-b1476e3c] {
  margin-left: auto;
}
.navbar.line-middle[data-v-b1476e3c] {
  align-items: center;
}
.navbar.line-middle .navbar-container[data-v-b1476e3c] {
  width: 100%;
}
@media (min-width: 768px) {
.navbar.line-middle .line[data-v-b1476e3c] {
    flex: 1;
    height: 1px;
    border-top: 1px solid var(--divider-line-fill-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar.line-middle .line[data-v-b1476e3c]:first-of-type {
    margin-right: 12px;
}
.navbar.line-middle .line[data-v-b1476e3c]:last-of-type {
    margin-left: 12px;
}
}
.navbar .ufo-fab[data-v-b1476e3c] {
  position: absolute;
  top: -12px;
  left: -48px;
}
.navbar-container[data-v-b1476e3c] {
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
@media (max-width: 768px) {
.navbar-container[data-v-b1476e3c] {
    width: 100%;
}
}
@media (max-width: 768px) {
.navbar-container[data-v-b1476e3c]:not(.no-mob) {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    background-color: var(--background-fill-color, #FFFFFF);
    transition: top 200ms ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.navbar-container:not(.no-mob).on[data-v-b1476e3c] {
    top: 0;
}
.navbar-container:not(.no-mob).on .social-links[data-v-b1476e3c] {
    flex-direction: column;
}
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/portfolioEditor/components/themes/theme-parts/TemplateHeroBackground.vue?vue&type=style&index=0&id=4cf9818a&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--page-hero-background[data-v-4cf9818a] {
  overflow: hidden;
}
.background-wrapper[data-v-4cf9818a] {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.background-wrapper .background-svg[data-v-4cf9818a] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.theme_six .ufo--page-hero-background .ufo-fab--container[data-v-4cf9818a],
.profile_theme_six .ufo--page-hero-background .ufo-fab--container[data-v-4cf9818a] {
  top: -28px;
}
.theme_five .ufo--page-hero-background .ufo-fab--container[data-v-4cf9818a],
.profile_theme_five .ufo--page-hero-background .ufo-fab--container[data-v-4cf9818a] {
  top: 74px;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/user/UserSocialLinks.vue?vue&type=style&index=0&id=0ef55e10&lang=scss&scoped=true ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.social-links[data-v-0ef55e10] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.social-links.inline-above-text[data-v-0ef55e10] {
  order: -1;
}
.social-links a[data-v-0ef55e10] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 200ms;
  background-color: transparent;
  color: var(--hero-nav-button-text-color);
}
.social-links a[data-v-0ef55e10]:hover:not(.active), .social-links a[data-v-0ef55e10]:hover:not(:active) {
  color: var(--hero-nav-button-text-color-hover);
}
.social-links a .fa-website[data-v-0ef55e10]:before {
  content: "\f0ac";
}
.social-links a .fa[data-v-0ef55e10] {
  text-align: center;
}
.social-links a .fa-email[data-v-0ef55e10]:before {
  content: "\f0e0";
  line-height: 20px;
}
.social-links a.text[data-v-0ef55e10] {
  padding-top: 8px;
  padding-bottom: 8px;
  flex-direction: column;
  text-transform: capitalize;
}
.social-links a.text[data-v-0ef55e10]:hover {
  font-weight: 700;
}
.social-links a.text[data-v-0ef55e10]:before {
  content: attr(data-text);
  content: attr(data-text)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: bold;
  color: transparent;
}
@media speech {
.social-links a.text[data-v-0ef55e10]:before {
    display: none;
}
}
.social-links a.icon[data-v-0ef55e10] {
  min-width: 24px;
  min-height: 24px;
  height: 100%;
  aspect-ratio: 1/1;
  color: var(--social-icon-text-color);
}
.social-links a.icon[data-v-0ef55e10]:hover:not(.active), .social-links a.icon[data-v-0ef55e10]:hover:not(:active) {
  color: var(--social-icon-text-color-hover);
}
.social-links a.underline-regular[data-v-0ef55e10] {
  position: relative;
}
.social-links a.underline-regular[data-v-0ef55e10]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--hero-nav-button-text-color);
  transition-property: width;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.social-links a.underline-regular[data-v-0ef55e10]:hover:after {
  background-color: var(--hero-nav-button-text-color);
}
.social-links a.underline-regular[data-v-0ef55e10]:hover:after {
  width: 100%;
}
.social-links a[class*=box-][data-v-0ef55e10] {
  padding: 8px;
  font-size: 14px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1/1;
  outline: solid 1px var(--social-icon-outline-color, var(--border-color));
}
.social-links a[class*=box-][data-v-0ef55e10]:hover {
  outline-color: var(--social-icon-outline-color-hover, var(--hero-nav-button-text-color-hover));
}
.social-links a.box-rounded[data-v-0ef55e10] {
  border-radius: 8px;
}
.social-links a.box-pill[data-v-0ef55e10] {
  border-radius: 50%;
}
.social-links a.box-pill-fill[data-v-0ef55e10] {
  outline: none;
  border-radius: 999px;
  background-color: var(--social-icon-fill-color, color-mix(in srgb, var(--background-fill-color), var(--hero-nav-button-text-color) 10%));
}
.social-links a.box-pill-fill[data-v-0ef55e10]:hover {
  font-weight: 400;
  background-color: var(--social-icon-fill-color-hover);
}
.social-links a.box-pill-fill.active[data-v-0ef55e10], .social-links a.box-pill-fill[data-v-0ef55e10]:active {
  background-color: var(--social-icon-fill-color-hover, var(--hero-nav-button-text-color-hover));
  color: var(--social-icon-text-color-hover, var(--background-fill-color));
  font-weight: 400;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/user/UserPortfolioDescription.vue?vue&type=style&index=0&id=31269680&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.anim-wrapper[data-v-31269680] {
  display: flex;
  flex-direction: column;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/themes/_helper/PortfolioHeroHelper.vue?vue&type=style&index=0&id=782a00ec&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.hero-container[data-v-782a00ec] {
  position: relative;
}
.profile_theme_four .hero-container[data-v-782a00ec],
.profile_theme_nine .hero-container[data-v-782a00ec] {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/Page.vue?vue&type=style&index=0&id=741d9e70&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--page-hero-content[data-v-741d9e70] {
  position: relative;
}
.profile_theme_four .ufo--page-hero-content[data-v-741d9e70] {
  position: sticky !important;
}
.profile_theme_default .ufo--page-hero-content[data-v-741d9e70] {
  position: sticky;
}
.ufo--page-sections.empty-list[data-v-741d9e70] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/common/PasswordProtection.vue?vue&type=style&index=0&id=eaef1fb2&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--portfolio-password-protected[data-v-eaef1fb2] {
  width: 100%;
  height: 100vh;
  background-color: rgba(240, 246, 251, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ufo--portfolio-password-protected .icon[data-v-eaef1fb2] {
  width: 72px;
  height: 72px;
  margin-bottom: 36px;
  border: solid 1px #d1d9dd;
  border-radius: 50%;
  background: url(/dist/src/assets/images/icon-lock-small-grey..svg) center center no-repeat;
  background-size: 20px 26px;
}
.ufo--portfolio-password-protected h1[data-v-eaef1fb2] {
  font-family: var(--primarySans);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  color: #140a2f;
  margin: 0 0 36px;
  max-width: 500px;
}
@media (min-width: 768px) {
.ufo--portfolio-password-protected h2[data-v-eaef1fb2] {
    font-size: 36px;
}
}
.ufo--portfolio-password-protected form[data-v-eaef1fb2] {
  width: 100%;
  max-width: 540px;
}
.ufo--portfolio-password-protected .ufo-form--group[data-v-eaef1fb2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 24px;
}
.ufo--portfolio-password-protected .ufo-form--group input[data-v-eaef1fb2] {
  width: 100%;
  margin: 0 0 16px 0;
}
.ufo--portfolio-password-protected .ufo-form--group .ufo-cta[data-v-eaef1fb2] {
  width: 100%;
  height: 46px;
}
@media (min-width: 450px) {
.ufo--portfolio-password-protected .ufo-form--group[data-v-eaef1fb2] {
    display: flex;
    flex-direction: row;
}
.ufo--portfolio-password-protected .ufo-form--group input[data-v-eaef1fb2] {
    max-width: 448px;
    margin: 0 16px 0 0;
}
.ufo--portfolio-password-protected .ufo-form--group .ufo-cta[data-v-eaef1fb2] {
    width: 78px;
}
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/ProgressButton.vue?vue&type=style&index=0&id=e916654a&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-cta[data-v-e916654a] {
  --color-btn-primary-text: var(--asphalt10);
  --color-btn-primary-bg: var(--asphalt100);
  --color-btn-primary-bg-hover: var(--asphalt90);
  --color-btn-primary-bg-active: var(--asphalt80);
  --color-btn-primary-text-disabled: var(--asphalt40);
  --color-btn-primary-bg-disabled: var(--asphalt20);
  --color-btn-primary-loader: var(--asphalt10);
  --color-btn-progress-text: var(--asphalt20);
  --color-btn-progress-bg: var(--asphalt80);
  --color-btn-progress-bg-hover: var(--asphalt70);
  --color-btn-progress-bg-active: var(--asphalt80);
  --color-btn-progress-text-disabled: var(--asphalt40);
  --color-btn-progress-bg-disabled: var(--asphalt90);
  --color-btn-secondary-text: var(--asphalt80);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--asphalt30);
  --color-btn-secondary-border-hover: var(--asphalt50);
  --color-btn-secondary-text-disabled: var(--asphalt30);
  --color-btn-secondary-loader: var(--asphalt80);
  --color-btn-tertiary-bg: var(--asphalt80);
  --color-btn-tertiary-text: var(--asphalt10);
  --color-btn-tertiary-bg-hover: var(--asphalt100);
  --color-btn-link-text: var(--asphalt80);
  --color-btn-link-bg: transparent;
  --color-btn-link-text-hover: var(--statis100);
  --color-btn-link-text-disabled: var(--asphalt50);
  --color-btn-alert-text: var(--asphalt10);
  --color-btn-alert-bg: var(--error50);
  --color-btn-alert-bg-hover: var(--error40);
  --color-btn-icon-text: var(--asphalt100);
  --color-btn-icon-bg-hover: var(--asphalt20);
  --color-btn-subtle-text: var(--asphalt90);
  --color-btn-subtle-bg: var(--asphalt20);
  --color-btn-subtle-text-hover: var(--asphalt100);
  --color-btn-subtle-bg-hover: var(--asphalt30);
  --color-btn-subtle-text-disabled: var(--asphalt40);
  --color-btn-subtle-bg-disabled: var(--asphalt20);
  --color-btn-upgrade-text: var(--asphalt90);
  --color-btn-upgrade-bg: var(--volt);
  --color-btn-upgrade-bg-hover: var(--asphalt10);
  --color-btn-upgrade-bg-active: var(--asphalt10);
  --color-btn-upgrade-text-disabled: var(--asphalt40);
  --color-btn-upgrade-bg-disabled: var(--asphalt10);
}
.ufo-cta.dark[data-v-e916654a] {
  --color-btn-primary-text: var(--asphalt90);
  --color-btn-primary-bg: var(--asphalt10);
  --color-btn-primary-bg-hover: var(--volt);
  --color-btn-primary-bg-active: var(--volt);
  --color-btn-primary-text-disabled: var(--asphalt60);
  --color-btn-primary-bg-disabled: var(--asphalt90);
  --color-btn-primary-loader: var(--asphalt90);
  --color-btn-progress-text: var(--asphalt20);
  --color-btn-progress-bg: var(--asphalt80);
  --color-btn-progress-bg-hover: var(--asphalt70);
  --color-btn-progress-bg-active: var(--asphalt80);
  --color-btn-progress-text-disabled: var(--asphalt40);
  --color-btn-progress-bg-disabled: var(--asphalt90);
  --color-btn-secondary-text: var(--asphalt20);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--asphalt50);
  --color-btn-secondary-border-hover: var(--asphalt30);
  --color-btn-secondary-text-disabled: var(--asphalt50);
  --color-btn-secondary-loader: var(--asphalt20);
  --color-btn-tertiary-bg: var(--asphalt10);
  --color-btn-tertiary-text: var(--asphalt100);
  --color-btn-tertiary-bg-hover: var(--asphalt30);
  --color-btn-link-text: var(--asphalt20);
  --color-btn-link-bg: transparent;
  --color-btn-link-text-hover: var(--volt);
  --color-btn-link-text-disabled: var(--asphalt60);
  --color-btn-alert-text: var(--asphalt10);
  --color-btn-alert-bg: var(--error50);
  --color-btn-alert-bg-hover: var(--error40);
  --color-btn-icon-text: var(--asphalt10);
  --color-btn-icon-bg-hover: var(--asphalt70);
  --color-btn-subtle-text: var(--asphalt20);
  --color-btn-subtle-bg: var(--asphalt90);
  --color-btn-subtle-text-hover: var(--asphalt10);
  --color-btn-subtle-bg-hover: var(--asphalt80);
  --color-btn-subtle-text-disabled: var(--asphalt60);
  --color-btn-subtle-bg-disabled: var(--asphalt90);
}
.ufo-cta[data-v-e916654a] {
  font: var(--editor-ui-btn-l-default);
  letter-spacing: 0.00875rem;
  padding: 0 1.25rem;
  height: 48px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  border: none;
  position: relative;
  white-space: nowrap;
  user-select: none;
}
.ufo-cta[data-v-e916654a]:focus {
  outline: none;
}
.ufo-cta[data-v-e916654a]:disabled {
  cursor: not-allowed;
}
.ufo-cta.tiny[data-v-e916654a] {
  height: 28px;
  width: 28px;
  padding: 0.25rem;
  font: var(--editor-ui-btn-l-small);
  letter-spacing: 0.0075rem;
}
.ufo-cta.small[data-v-e916654a] {
  height: 36px;
  padding: 0.625rem 1rem;
  font: var(--editor-ui-btn-l-small);
  letter-spacing: 0.0075rem;
}
.ufo-cta.large[data-v-e916654a] {
  height: 54px;
  padding: 0.625rem 1.5rem;
  font: var(--editor-ui-btn-l-large);
  letter-spacing: 0.01rem;
}
.ufo-cta--primary[data-v-e916654a] {
  color: var(--color-btn-primary-text);
  background-color: var(--color-btn-primary-bg);
}
.ufo-cta--primary[data-v-e916654a]:hover {
  background-color: var(--color-btn-primary-bg-hover);
}
.ufo-cta--primary[data-v-e916654a]:active {
  background-color: var(--color-btn-primary-bg-active);
}
.ufo-cta--primary[data-v-e916654a]:disabled {
  color: var(--color-btn-primary-text-disabled);
  background-color: var(--color-btn-primary-bg-disabled);
}
.ufo-cta--primary.subtle[data-v-e916654a] {
  color: var(--color-btn-subtle-text);
  background-color: var(--color-btn-subtle-bg);
}
.ufo-cta--primary.subtle.no-bg[data-v-e916654a] {
  background-color: transparent;
}
.ufo-cta--primary.subtle[data-v-e916654a]:hover {
  color: var(--color-btn-subtle-text-hover);
  background-color: var(--color-btn-subtle-bg-hover);
}
.ufo-cta--primary.subtle[data-v-e916654a]:disabled {
  color: var(--color-btn-primary-text-disabled);
}
.ufo-cta--progress[data-v-e916654a] {
  color: var(--color-btn-progress-text);
  background-color: var(--color-btn-progress-bg);
}
.ufo-cta--progress[data-v-e916654a]:hover {
  background-color: var(--color-btn-progress-bg-hover);
}
.ufo-cta--progress[data-v-e916654a]:active {
  background-color: var(--color-btn-progress-bg-active);
}
.ufo-cta--progress[data-v-e916654a]:disabled {
  color: var(--color-btn-progress-text-disabled);
  background-color: var(--color-btn-progress-bg-disabled);
}
.ufo-cta--alert[data-v-e916654a] {
  color: var(--color-btn-alert-text);
  background-color: var(--color-btn-alert-bg);
}
.ufo-cta--alert[data-v-e916654a]:hover, .ufo-cta--alert[data-v-e916654a]:active, .ufo-cta--alert[data-v-e916654a]:focus {
  background-color: var(--color-btn-alert-bg-hover);
}
.ufo-cta--alert[data-v-e916654a]:disabled {
  color: var(--color-btn-primary-text-disabled);
  background-color: var(--color-btn-primary-bg-disabled);
}
.ufo-cta--secondary[data-v-e916654a], .ufo-cta--tertiary[data-v-e916654a], .ufo-cta--link[data-v-e916654a] {
  background-color: var(--color-btn-secondary-bg);
}
.ufo-cta--secondary[data-v-e916654a] {
  color: var(--color-btn-secondary-text);
  outline: 1px solid var(--color-btn-secondary-border);
}
.ufo-cta--secondary[data-v-e916654a]:hover, .ufo-cta--secondary[data-v-e916654a]:active, .ufo-cta--secondary[data-v-e916654a]:focus {
  outline: 1px solid var(--color-btn-secondary-border-hover);
}
.ufo-cta--secondary[data-v-e916654a]:disabled, .ufo-cta--secondary[data-v-e916654a]:disabled:hover {
  color: var(--color-btn-secondary-text-disabled);
  outline: 1px solid var(--color-btn-secondary-border);
}
.ufo-cta--secondary.loading .loading-state svg[data-v-e916654a] {
  color: var(--color-btn-secondary-loader) !important;
}
.ufo-cta--tertiary[data-v-e916654a], .ufo-cta--link[data-v-e916654a] {
  color: var(--color-btn-link-text);
  padding: 0.125rem 0rem;
}
.ufo-cta--tertiary[data-v-e916654a]:hover, .ufo-cta--tertiary[data-v-e916654a]:active, .ufo-cta--tertiary[data-v-e916654a]:focus, .ufo-cta--link[data-v-e916654a]:hover, .ufo-cta--link[data-v-e916654a]:active, .ufo-cta--link[data-v-e916654a]:focus {
  color: var(--color-btn-link-text-hover);
}
.ufo-cta--tertiary[data-v-e916654a]:disabled, .ufo-cta--link[data-v-e916654a]:disabled {
  color: var(--color-btn-link-text-disabled);
}
.ufo-cta--tertiary img[data-v-e916654a] {
  margin-right: 4px;
}
.ufo-cta--link[data-v-e916654a], .ufo-cta--link-tiny[data-v-e916654a], .ufo-cta--link.small[data-v-e916654a], .ufo-cta--link.large[data-v-e916654a] {
  height: unset;
  padding: 0;
}
.ufo-cta.loading .button-icon[data-v-e916654a] {
  opacity: 0;
}
.ufo-cta.loading .loading-state[data-v-e916654a] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.ufo-cta.loading .loading-state svg[data-v-e916654a] {
  color: var(--color-btn-primary-loader);
}
@keyframes loaderRotation-e916654a {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(359deg);
}
}
.ufo-cta--loader[data-v-e916654a] {
  position: relative;
  animation: loaderRotation-e916654a 1.5s infinite linear;
}
.ufo-cta--floating[data-v-e916654a] {
  color: var(--carbon70);
  text-transform: none;
  font-weight: normal;
  background: var(--base00);
  border: 1px solid var(--carbon30);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 20px 20px -15px rgba(71, 84, 97, 0.16);
  position: absolute;
  top: -10px;
  right: 0;
  transform: translateY(-100%);
  white-space: nowrap;
}
.ufo-cta--upgrade[data-v-e916654a] {
  color: var(--color-btn-upgrade-text);
  background-color: var(--color-btn-upgrade-bg);
}
.ufo-cta--upgrade[data-v-e916654a]:hover {
  background-color: var(--color-btn-upgrade-bg-hover);
  outline: 1px solid var(--asphalt20);
}
.ufo-cta--upgrade[data-v-e916654a]:active {
  background-color: var(--color-btn-upgrade-bg-active);
  outline: 1px solid var(--asphalt20);
}
.ufo-cta--upgrade[data-v-e916654a]:disabled {
  outline: 1px solid var(--asphalt20);
  color: var(--color-btn-upgrade-text-disabled);
}
.ufo-cta--icon[data-v-e916654a] {
  height: 24px;
  width: 24px;
  border-radius: 4px;
  padding: 0;
  background-color: transparent;
  color: var(--color-btn-icon-text);
}
.ufo-cta--icon.xl[data-v-e916654a] {
  width: 36px;
  height: 36px;
}
.ufo-cta--icon[data-v-e916654a]:hover {
  background-color: var(--color-btn-icon-bg-hover);
}
.ufo-cta--icon.small[data-v-e916654a] {
  min-height: 20px;
  min-width: 20px;
  color: var(--asphalt90);
}
.ufo-cta--icon.back[data-v-e916654a] {
  margin-right: 6px;
}
.ufo-cta--icon.back svg[data-v-e916654a] {
  width: 24px;
  height: 24px;
}
.ufo-cta--icon.close[data-v-e916654a], .ufo-cta--icon.add[data-v-e916654a] {
  margin-left: 6px;
}
.ufo-cta--icon.close svg[data-v-e916654a], .ufo-cta--icon.add svg[data-v-e916654a] {
  width: 24px;
  height: 24px;
}
.ufo-cta--icon.subtle[data-v-e916654a] {
  color: var(--color-btn-subtle-text);
  background-color: var(--color-btn-subtle-bg);
}
.ufo-cta--icon.subtle.no-bg[data-v-e916654a] {
  background-color: transparent;
}
.ufo-cta--icon.subtle[data-v-e916654a]:hover {
  color: var(--color-btn-subtle-text-hover);
  background-color: var(--color-btn-subtle-bg-hover);
}
.ufo-cta .button-icon[data-v-e916654a] {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 100%;
}
.ufo-cta .button-icon .icon-container[data-v-e916654a] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.ufo-cta .button-icon .icon-container svg[data-v-e916654a] {
  width: 24px;
  height: 24px;
}
.ufo-cta svg[data-v-e916654a] {
  width: 24px;
  height: 24px;
}
.ufo-cta.tiny .icon-container svg[data-v-e916654a] {
  width: 20px;
  height: 20px;
}
.ufo-cta.extension[data-v-e916654a] {
  padding-right: 0;
}
.ufo-cta--dd-extension[data-v-e916654a] {
  width: 38px;
  border-left: solid 1px var(--asphalt10);
  display: inline-block;
  margin: 12px 0 12px 4px;
  text-align: center;
}
.ufo-cta.tooltip-on[tooltip][data-v-e916654a] {
  position: relative;
}
.ufo-cta.tooltip-on[tooltip][data-v-e916654a]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 6px 0 6px;
  border-style: solid;
  border-color: var(--color-btn-icon-bg-hover) transparent transparent transparent;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.ufo-cta.tooltip-on[tooltip][data-v-e916654a]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-btn-icon-bg-hover);
  font: var(--editor-ui-l-regular);
  color: var(--color-btn-icon-text);
  text-align: center;
  text-transform: none;
  font-weight: normal;
  border-radius: 3px;
  pointer-events: none;
  padding: 3px 16px;
  z-index: 99;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.ufo-cta.tooltip-on[tooltip][data-v-e916654a]:hover::before, .ufo-cta.tooltip-on[tooltip][data-v-e916654a]:hover::after {
  opacity: 1;
}
.ufo-cta.tooltip-on.tooltip-slim[data-v-e916654a]::after {
  font-size: 13px;
  padding: 8px;
}
.ufo-cta.tooltip-on.large[data-v-e916654a] {
  cursor: pointer;
}
.ufo-cta.tooltip-on.large[data-v-e916654a]::after {
  min-width: 140px;
  text-align: center;
}
.ufo-cta.tooltip-on[tooltip-position=top][data-v-e916654a]::before, .ufo-cta.tooltip-on[tooltip-position=top][data-v-e916654a]::after {
  left: 50%;
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-e916654a]::before, .ufo-cta.tooltip-on[tooltip-position=right][data-v-e916654a]::after {
  left: 100%;
  top: 50%;
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-e916654a]::before {
  margin-left: 1px;
  transform: translateY(-50%) rotate(90deg);
}
.ufo-cta.tooltip-on[tooltip-position=right][data-v-e916654a]::after {
  margin-left: 8px;
  transform: translateX(0%) translateY(-50%);
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-e916654a]::before, .ufo-cta.tooltip-on[tooltip-position=bottom][data-v-e916654a]::after {
  top: 100%;
  margin-top: 8px;
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-e916654a]::before {
  transform: translateX(-50%) translateY(-100%) rotate(-180deg);
}
.ufo-cta.tooltip-on[tooltip-position=bottom][data-v-e916654a]::after {
  transform: translateX(-50%) translateY(0%);
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-e916654a]::before, .ufo-cta.tooltip-on[tooltip-position=left][data-v-e916654a]::after {
  left: 0%;
  top: 47%;
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-e916654a]::before {
  position: absolute;
  margin-left: -12px;
  transform: translateY(-50%) rotate(-90deg);
}
.ufo-cta.tooltip-on[tooltip-position=left][data-v-e916654a]::after {
  margin-left: -8px;
  transform: translateX(-100%) translateY(-50%);
}
@keyframes rotation-e916654a {
from {
    transform: translate(-50%, -50%) rotate(0deg);
}
to {
    transform: translate(-50%, -50%) rotate(359deg);
}
}
.progress-button-container[data-v-e916654a] {
  position: relative;
}
.progress-button-container .progress-details-container[data-v-e916654a] {
  display: flex;
  width: 380px;
  padding: 24px;
  flex-direction: column;
  gap: 24px;
  border-radius: 12px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  box-shadow: 0px 287px 80px 0px rgba(0, 0, 0, 0), 0px 183px 73px 0px rgba(0, 0, 0, 0.01), 0px 103px 62px 0px rgba(0, 0, 0, 0.05), 0px 46px 46px 0px rgba(0, 0, 0, 0.08), 0px 11px 25px 0px rgba(0, 0, 0, 0.09);
  position: absolute;
  top: 55px;
  right: 0;
  z-index: 100;
}
.progress-button-container .progress-details-container .title-container[data-v-e916654a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-button-container .progress-details-container .title-container .title-text[data-v-e916654a] {
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt10);
}
.progress-button-container .progress-details-container .title-container .subtitle-text[data-v-e916654a] {
  font: var(--editor-ui-b3-regular);
  color: var(--asphalt30);
}
.progress-button-container .progress-details-container .steps[data-v-e916654a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.progress-button-container .progress-details-container .steps .step[data-v-e916654a] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--asphalt30);
}
.progress-button-container .progress-details-container .steps .step.done .indicator[data-v-e916654a] {
  background-color: var(--volt);
}
.progress-button-container .progress-details-container .steps .step.done p[data-v-e916654a] {
  color: var(--asphalt40);
  text-decoration: line-through;
}
.progress-button-container .progress-details-container .steps .step .indicator[data-v-e916654a] {
  width: 20px;
  height: 20px;
  border-radius: 24px;
  border: 1px solid var(--asphalt60);
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-button-container .progress-details-container .steps .step .indicator svg[data-v-e916654a] {
  width: 20px;
  height: 20px;
  color: var(--asphalt100);
}
.progress-button-container .progress-details-container .steps .step p[data-v-e916654a] {
  margin: 0;
  font: var(--editor-ui-b3-regular);
  color: var(--asphalt10);
}
.progress-button-container button[data-v-e916654a] {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 10px;
}
.progress-button-container button svg[data-v-e916654a] {
  width: 20px;
  height: 20px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/OptionBar.vue?vue&type=style&index=0&id=67167b59&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button[data-v-67167b59] {
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font: var(--editor-ui-btn-l-default);
  color: var(--asphalt40);
  cursor: pointer;
  padding: 6px;
  margin: 0;
  width: 100%;
  border-radius: 2px;
  height: 32px;
}
button.small[data-v-67167b59] {
  height: 28px;
  font: var(--editor-ui-btn-l-small);
}
button .picto[data-v-67167b59] {
  width: auto;
  height: 100%;
}
button[data-v-67167b59]:focus {
  outline: none;
}
button[data-v-67167b59]:hover {
  color: var(--asphalt10);
}
button.selected[data-v-67167b59] {
  background-color: var(--asphalt60);
  color: var(--asphalt10);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
}
button.disabled[data-v-67167b59] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
button svg[data-v-67167b59] {
  width: 100%;
  height: 100%;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/LargeTooltip.vue?vue&type=style&index=0&id=7986779d&scoped=true&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.large-tooltip-container[data-v-7986779d] {
  position: absolute;
  display: flex;
  width: 296px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
  background: var(--asphalt90);
  /* Dark/Large */
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4), 0 32px 40px 0 rgba(0, 0, 0, 0.32);
  outline: 1px solid var(--asphalt70);
  right: 70px;
  top: -3px;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 10;
}
.large-tooltip-container.video[data-v-7986779d] {
  width: 286px;
}
.large-tooltip-container .relative-wrapper[data-v-7986779d] {
  position: relative;
}
.large-tooltip-container .video-wrapper[data-v-7986779d] {
  padding: 8px 8px 0px 8px;
}
.large-tooltip-container .text-wrapper[data-v-7986779d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  text-align: center;
  padding: 20px;
}
.large-tooltip-container .text-wrapper.left-aligned[data-v-7986779d] {
  text-align: left;
}
.large-tooltip-container .text-wrapper .title-text[data-v-7986779d] {
  color: var(--asphalt10);
  font: var(--editor-ui-h3);
}
.large-tooltip-container .text-wrapper .subtitle-text[data-v-7986779d] {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.large-tooltip-container .arrow[data-v-7986779d] {
  position: absolute;
}
.large-tooltip-container .arrow.top[data-v-7986779d] {
  left: 40px;
  rotate: 90deg;
  top: -21px;
}
.large-tooltip-container .arrow.top.top-right[data-v-7986779d] {
  left: unset;
  right: 30px;
}
.large-tooltip-container .arrow.right[data-v-7986779d] {
  right: -12px;
  top: 15px;
  rotate: 180deg;
}
.large-tooltip-container .arrow.left[data-v-7986779d] {
  left: -12px;
  top: 15px;
}
.large-tooltip-container .arrow.left.center[data-v-7986779d], .large-tooltip-container .arrow.right.center[data-v-7986779d] {
  top: 50%;
  transform: translateY(-50%);
}
.large-tooltip-container.video .arrow.right[data-v-7986779d] {
  right: -15px;
}
.ufo-fab--container[data-v-7986779d] {
  top: calc(var(--7986779d-templateHeroTopPos) - 10px);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ufo-fab--container.selected[data-v-7986779d] {
  opacity: 1;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/ReviewNavigation.vue?vue&type=style&index=0&id=261744b0&scoped=true&lang=scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.navigation-row-container[data-v-261744b0] {
  height: 60px;
  padding: 12px 24px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: var(--asphalt95);
  border-top: 1px solid var(--asphalt90);
  z-index: 100;
  display: flex;
  color: var(--asphalt10);
}
.navigation-row-container p[data-v-261744b0] {
  margin: 0;
}
.navigation-row-container .left-side[data-v-261744b0] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.navigation-row-container .left-side .main-text[data-v-261744b0] {
  display: flex;
  gap: 10px;
  align-items: center;
}
.navigation-row-container .left-side .main-text svg[data-v-261744b0] {
  width: 34px;
  height: 24px;
}
.navigation-row-container .left-side .main-text div[data-v-261744b0] {
  color: var(--asphalt10);
  font: var(--review-ui-b1-medium);
}
.navigation-row-container .left-side .divider[data-v-261744b0] {
  width: 1px;
  height: 24px;
  background-color: var(--asphalt80);
}
.navigation-row-container .left-side .portfolio-text[data-v-261744b0] {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.navigation-row-container .left-side .portfolio-text span[data-v-261744b0] {
  color: var(--asphalt10);
  font: var(--editor-ui-b2-medium);
}
.navigation-row-container .middle[data-v-261744b0] {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
}
.navigation-row-container .right-side[data-v-261744b0] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
}
.navigation-row-container .right-side .button-wrapper[data-v-261744b0] {
  position: relative;
}
.navigation-row-container .right-side .button-wrapper .large-tooltip-container[data-v-261744b0] {
  top: 60px;
  right: 30px;
}
.navigation-row-container .right-side .button-container[data-v-261744b0] {
  display: flex;
  gap: 12px;
}
.navigation-row-container .right-side .button-container[data-v-261744b0] button {
  min-width: 160px;
}
.navigation-row-container .right-side .button-container[data-v-261744b0] button .button-icon {
  display: unset;
}
.navigation-row-container .right-side .button-container .text-with-icon[data-v-261744b0] {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.navigation-row-container .right-side .button-container .text-with-icon svg[data-v-261744b0] {
  width: 24px;
  height: 24px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/TertiaryButton.vue?vue&type=style&index=0&id=23c73f8e&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
button[data-v-23c73f8e] {
  --tertiary-neutral-text: var(--asphalt10);
  --tertiary-neutral-bg: var(--asphalt80);
  --tertiary-neutral-bg-hover: var(--asphalt100);
  --tertiary-neutral-text-disabled: var(--asphalt40);
  --tertiary-neutral-bg-disabled: var(--asphalt20);
  --tertiary-alert-text: var(--asphalt10);
  --tertiary-alert-bg: var(--error50);
  --tertiary-alert-bg-hover: var(--error40);
  --tertiary-subtle-text: var(--asphalt100);
  --tertiary-subtle-bg: var(--asphalt20);
  --tertiary-subtle-bg-hover: var(--asphalt30);
  --tertiary-subtle-text-disabled: var(--asphalt40);
}
button.dark[data-v-23c73f8e] {
  --tertiary-neutral-text: var(--asphalt100);
  --tertiary-neutral-bg: var(--asphalt10);
  --tertiary-neutral-bg-hover: var(--asphalt30);
  --tertiary-neutral-text-disabled: var(--asphalt60);
  --tertiary-neutral-bg-disabled: var(--asphalt90);
  --tertiary-subtle-text: var(--asphalt10);
  --tertiary-subtle-bg: var(--asphalt90);
  --tertiary-subtle-bg-hover: var(--asphalt80);
}
button[data-v-23c73f8e] {
  background-color: var(--tertiary-neutral-bg);
  border-radius: 100px;
  border: none;
  display: inline-flex;
  padding: 6px 14px;
  align-items: center;
  gap: 6px;
  font: var(--editor-ui-btn-l-small);
  color: var(--tertiary-neutral-text);
  cursor: pointer;
  height: 30px;
}
button.small[data-v-23c73f8e] {
  padding: 4px 12px 4px 8px;
  gap: 4px;
  letter-spacing: 0.1px;
}
button.small svg[data-v-23c73f8e] {
  width: 14px;
  height: 14px;
}
button.large[data-v-23c73f8e] {
  gap: 6px;
  padding: 8px 16px;
}
button.icon[data-v-23c73f8e] {
  padding: 6px;
  height: unset;
}
button.icon .tertiary-text[data-v-23c73f8e] {
  display: none;
}
button[data-v-23c73f8e]:focus {
  outline: none;
}
button[data-v-23c73f8e]:hover {
  background-color: var(--tertiary-neutral-bg-hover);
}
button.disabled[data-v-23c73f8e] {
  color: var(--tertiary-neutral-text-disabled);
  background-color: var(--tertiary-neutral-bg-disabled);
}
button.alert[data-v-23c73f8e] {
  color: var(--tertiary-alert-text);
  background-color: var(--tertiary-alert-bg);
}
button.alert[data-v-23c73f8e]:hover {
  background-color: var(--tertiary-alert-bg-hover);
}
button.neutral.disabled[data-v-23c73f8e] {
  color: var(--tertiary-neutral-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
button.subtle[data-v-23c73f8e] {
  color: var(--tertiary-subtle-text);
  background-color: var(--tertiary-subtle-bg);
}
button.subtle[data-v-23c73f8e]:hover {
  background-color: var(--tertiary-subtle-bg-hover);
}
button.subtle.disabled[data-v-23c73f8e] {
  color: var(--tertiary-subtle-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
button svg[data-v-23c73f8e] {
  width: 16px;
  height: 16px;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/ReviewResultEmptyState.vue?vue&type=style&index=0&id=72637956&scoped=true&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-result-empty-state-container[data-v-72637956] {
  display: flex;
  padding: 36px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  height: 100%;
  border-radius: 4px;
  border: 1px dashed var(--asphalt70);
  background: rgba(255, 255, 255, 0.02);
}
.review-result-empty-state-container p[data-v-72637956] {
  margin: 0;
  color: var(--asphalt40);
  text-align: center;
  font: var(--editor-ui-b3-regular);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/ReceiverEmptyState.vue?vue&type=style&index=0&id=852ebfa2&scoped=true&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.empty-state[data-v-852ebfa2] {
  display: flex;
  padding: 80px 40px 40px 40px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.empty-state.small[data-v-852ebfa2] {
  padding: 40px 80px;
  gap: 20px;
}
.empty-state.small img[data-v-852ebfa2] {
  width: 120px;
  height: 120px;
}
.empty-state.small .text-container .title-text[data-v-852ebfa2] {
  font: var(--editor-ui-b2-semibold);
}
.empty-state.small .text-container .subtitle-text[data-v-852ebfa2] {
  font: var(--editor-ui-b3-regular);
}
.empty-state img[data-v-852ebfa2] {
  width: 150px;
  height: 150px;
}
.empty-state .text-container[data-v-852ebfa2] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.empty-state .text-container .title-text[data-v-852ebfa2] {
  text-align: center;
  color: var(--asphalt10);
  font: var(--editor-ui-b1-semibold);
}
.empty-state .text-container .subtitle-text[data-v-852ebfa2] {
  text-align: center;
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/OverviewField.vue?vue&type=style&index=0&id=6ed643d6&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--text-area-review-overview .ProseMirror,
.ufo--text-area-comment .ProseMirror {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt20);
  width: 100%;
  height: 100%;
}
.ufo--text-area-review-overview .ProseMirror p,
.ufo--text-area-comment .ProseMirror p {
  margin-bottom: 1px;
}
.ufo--text-area-review-overview .ProseMirror-focused,
.ufo--text-area-comment .ProseMirror-focused {
  border: none;
  outline: none;
}
.ufo--text-area-review-overview .ProseMirror-focused p.is-empty:first-child::before,
.ufo--text-area-comment .ProseMirror-focused p.is-empty:first-child::before {
  color: var(--asphalt60) !important;
}
.ufo--text-area-review-overview p.is-empty:first-child::before,
.ufo--text-area-comment p.is-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--asphalt50);
  pointer-events: none;
  height: 0;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/OverviewField.vue?vue&type=style&index=1&id=6ed643d6&scoped=true&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.overview-input-group[data-v-6ed643d6] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
}
.overview-input-group .title-container[data-v-6ed643d6] {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.overview-input-group .title-container p[data-v-6ed643d6]::first-letter {
  text-transform: uppercase; /* Capitalize only the first letter */
}
.overview-input-group .title-container p[data-v-6ed643d6] {
  margin: 0;
  font: var(--editor-ui-b1-medium);
  color: var(--asphalt20);
}
.overview-input-group .input-text-box[data-v-6ed643d6] {
  border-radius: 6px;
  border: 1px solid var(--asphalt80);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.overview-input-group .input-text-box .ufo--text-area-review-overview[data-v-6ed643d6] {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  overflow: auto;
}
.overview-input-group .input-text-box .ufo--text-area-review-overview[data-v-6ed643d6] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.overview-input-group .input-text-box .ufo--text-area-review-overview[data-v-6ed643d6] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
.overview-input-group .input-text-box.focused[data-v-6ed643d6] {
  border: 1px solid var(--asphalt60);
}
.overview-input-group .input-text-box .editor-toolbar[data-v-6ed643d6] {
  display: flex;
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 1px solid var(--asphalt80);
}
.overview-input-group .input-text-box .editor-toolbar .buttons[data-v-6ed643d6] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.overview-input-group .input-text-box .editor-toolbar .buttons span[data-v-6ed643d6] {
  width: 24px;
  height: 24px;
  padding: 2px 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.overview-input-group .input-text-box .editor-toolbar .buttons span svg[data-v-6ed643d6] {
  color: var(--asphalt40);
  width: 20px;
  height: 20px;
}
.overview-input-group .input-text-box .editor-toolbar .buttons span.active[data-v-6ed643d6] {
  background-color: var(--asphalt70);
}
.overview-input-group .input-text-box .editor-toolbar .buttons span.active svg[data-v-6ed643d6] {
  color: var(--asphalt10);
}
.overview-input-group .input-text-box .editor-toolbar .buttons span[data-v-6ed643d6]:hover {
  cursor: pointer;
}
.overview-input-group .input-text-box .editor-toolbar .buttons span:hover svg[data-v-6ed643d6] {
  color: var(--asphalt10);
}
.overview-input-group .input-text-box .editor-toolbar .save-feedback-container[data-v-6ed643d6] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.overview-input-group .input-text-box .editor-toolbar .save-feedback-container svg[data-v-6ed643d6] {
  width: 16px;
  height: 16px;
  color: var(--asphalt40);
}
.overview-input-group .input-text-box .editor-toolbar .save-feedback-container span[data-v-6ed643d6] {
  color: var(--asphalt40);
  font: var(--editor-ui-l-regular);
  letter-spacing: 0.12px;
}
.overview-input-group .overview-text[data-v-6ed643d6] {
  width: 100%;
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/receiver/OverviewFollowUps.vue?vue&type=style&index=0&id=585ebe0a&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.follow-up-container[data-v-585ebe0a] {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.follow-up-container .follow-ups[data-v-585ebe0a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  overflow: auto;
}
.follow-up-container .follow-ups[data-v-585ebe0a] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.follow-up-container .follow-ups[data-v-585ebe0a] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
.follow-up-container .input-row[data-v-585ebe0a] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 24px;
  align-self: stretch;
  border-top: 1px solid var(--Asphalt-80, #333);
  max-height: 150px;
  overflow: auto;
}
.follow-up-container .input-row .ufo--text-area-comment[data-v-585ebe0a] {
  width: 100%;
  font: var(--editor-ui-b1-semibold);
  color: var(--asphalt10);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  overflow: auto;
}
.follow-up-container .input-row svg[data-v-585ebe0a] {
  width: 24px;
  height: 24px;
  color: var(--asphalt50);
  align-self: self-end;
}
.follow-up-container .input-row svg[data-v-585ebe0a]:not(.disabled):hover {
  cursor: pointer;
  color: var(--asphalt10);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/DropDownSelect.vue?vue&type=style&index=0&id=60291e22&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--dd-select[data-v-60291e22] {
  --labelColor: var(--asphalt50);
  --selectColor: var(--asphalt60);
  --selectBackgroundColor: var(--asphalt20);
  --selectBackgroundHoverColor: var(--asphalt30);
  --activeColor: var(--asphalt100);
  --optionsBackgroundColor: var(--asphalt10);
  --optionsBackgroundBorderColor: var(--asphalt20);
  --itemColor: var(--asphalt100);
  --itemBackgroundHoverColor: var(--asphalt20);
  --optionsShadow: var(--shadow-light-small);
}
.ufo--dd-select.dark[data-v-60291e22] {
  --labelColor: var(--asphalt40);
  --selectColor: var(--asphalt40);
  --selectBackgroundColor: var(--asphalt90);
  --selectBackgroundHoverColor: var(--asphalt80);
  --activeColor: var(--asphalt10);
  --optionsBackgroundColor: var(--asphalt70);
  --optionsBackgroundBorderColor: var(--asphalt60);
  --itemColor: var(--asphalt10);
  --itemBackgroundHoverColor: var(--asphalt60);
}
.ufo--dd-select[data-v-60291e22] {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  font: var(--editor-ui-b2-regular);
  letter-spacing: 0.14px;
}
.ufo--dd-select label[data-v-60291e22] {
  font: var(--editor-ui-b2-regular);
  color: var(--labelColor);
  margin-bottom: 12px;
}
.ufo--dd-select .ufo--dd-selector[data-v-60291e22] {
  width: 100%;
  position: relative;
}
.ufo--dd-select .ufo--dd-selector[data-v-60291e22] ::first-letter {
  text-transform: uppercase;
}
.ufo--dd-select .ufo--dd-selected[data-v-60291e22] {
  font: var(--editor-ui-b2-regular);
  color: var(--selectColor);
  background-color: var(--selectBackgroundColor);
  padding: 6px 12px 6px 16px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}
.ufo--dd-select .ufo--dd-selected.inline-edit[data-v-60291e22] {
  padding: 6px 16px;
}
.ufo--dd-select .ufo--dd-selected[data-v-60291e22]:not(.inline-edit) {
  user-select: none;
}
.ufo--dd-select .ufo--dd-selected.align-center[data-v-60291e22] {
  padding: 6px 16px;
  justify-content: center;
}
.ufo--dd-select .ufo--dd-selected[data-v-60291e22]:hover {
  background-color: var(--selectBackgroundHoverColor);
}
.ufo--dd-select .ufo--dd-selected.disabled[data-v-60291e22] {
  cursor: not-allowed;
  background-color: transparent;
  color: var(--asphalt50);
}
.ufo--dd-select .ufo--dd-selected svg[data-v-60291e22] {
  transition: transform 100ms ease-in-out;
  width: 24px;
  height: 24px;
  min-width: 24px;
}
.ufo--dd-select .ufo--dd-selected .selected-container[data-v-60291e22] {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.ufo--dd-select .ufo--dd-selected .selected-container .type-icon[data-v-60291e22] {
  margin-left: 0;
  width: 20px;
  height: 20px;
}
.ufo--dd-select .ufo--dd-selected .selected-container span[data-v-60291e22] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ufo--dd-select .ufo--dd-selected.open[data-v-60291e22] {
  color: var(--activeColor);
}
.ufo--dd-select .ufo--dd-selected.open[data-v-60291e22]:hover {
  background-color: var(--selectBackgroundColor);
}
.ufo--dd-select .ufo--dd-selected.open .chevron[data-v-60291e22] {
  transform: rotate(180deg);
}
.ufo--dd-select .ufo--dd-selected input[data-v-60291e22] {
  padding: 0;
  border: none;
  max-width: 32px;
  background-color: inherit;
  color: var(--selectColor);
  outline: none;
  text-align: center;
  /* Chrome, Safari, Edge, Opera */
}
.ufo--dd-select .ufo--dd-selected input[data-v-60291e22]::-webkit-outer-spin-button, .ufo--dd-select .ufo--dd-selected input[data-v-60291e22]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ufo--dd-select .ufo--dd-selected input[data-v-60291e22] {
  /* Firefox */
}
.ufo--dd-select .ufo--dd-selected input[type=number][data-v-60291e22] {
  -moz-appearance: textfield;
}
.ufo--dd-select .ufo--dd-selected input[data-v-60291e22]:disabled {
  cursor: not-allowed;
  background-color: transparent;
  color: var(--asphalt50);
}
.ufo--dd-select .ufo--dd-options[data-v-60291e22] {
  width: 100%;
  border: 1px solid var(--optionsBackgroundBorderColor);
  position: absolute;
  left: 0;
  top: 60px;
  z-index: 1;
  background: var(--optionsBackgroundColor);
  border-radius: 4px;
  box-shadow: var(--optionsShadow);
}
.ufo--dd-select .ufo--dd-options .dd-scrollable[data-v-60291e22] {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 205px;
  overflow: hidden;
  user-select: none;
}
.ufo--dd-select .ufo--dd-options.footer[data-v-60291e22] {
  max-height: unset;
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option[data-v-60291e22] {
  padding: 12px;
  font: var(--editor-ui-b2-regular);
  cursor: pointer;
  width: 100%;
  color: var(--itemColor);
  display: flex;
  justify-content: space-between;
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option[data-v-60291e22]:hover {
  background-color: var(--itemBackgroundHoverColor);
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option.selected[data-v-60291e22] {
  font: var(--editor-ui-b2-medium);
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option svg[data-v-60291e22] {
  width: 20px;
  height: 20px;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/ToggleSwitch.vue?vue&type=style&index=0&id=7c62b2fd&lang=scss&scoped=true ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.switch[data-v-7c62b2fd] {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  float: right;
  margin: 0 0 -5px 0;
}
.switch input[data-v-7c62b2fd] {
  display: none;
}
.switch .slider[data-v-7c62b2fd] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 150ms;
  border-radius: 14px;
  background-color: var(--asphalt30);
}
.switch .slider[data-v-7c62b2fd]:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  transition: 150ms;
  border-radius: 50%;
  background-color: var(--asphalt10);
}
.switch .slider:before.dark[data-v-7c62b2fd] {
  box-shadow: 0 0 4px 1px rgba(15, 15, 15, 0.2);
}
.switch input:checked + .slider[data-v-7c62b2fd] {
  background-color: var(--success60);
}
.switch.monochrome .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt70);
}
.switch.monochrome.dark .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt20);
}
.switch.monochrome.dark .slider[data-v-7c62b2fd]:before {
  background-color: var(--asphalt90);
}
.switch.dark .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt70);
}
.switch.monochrome input:checked + .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt70);
}
.switch.monochrome.dark input:checked + .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt20);
}
.switch input:checked + .slider[data-v-7c62b2fd]:before {
  transform: translateX(16px);
}
.switch input:disabled + .slider[data-v-7c62b2fd] {
  background-color: var(--asphalt40);
  cursor: not-allowed;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/Reaction.vue?vue&type=style&index=0&id=507ed5c5&scoped=true&lang=scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.reaction-display-container[data-v-507ed5c5] {
  display: flex;
  padding: 16px 20px;
  gap: 16px;
  align-self: stretch;
  align-items: center;
}
.reaction-display-container:hover .reaction-wrapper[data-v-507ed5c5] {
  background-color: var(--asphalt80);
}
.reaction-display-container .reaction-wrapper[data-v-507ed5c5] {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background-color: var(--asphalt90);
}
.reaction-display-container .reaction-wrapper .image-wrapper[data-v-507ed5c5] {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.reaction-display-container .reaction-wrapper .image-wrapper img[data-v-507ed5c5] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.reaction-display-container .name[data-v-507ed5c5] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
.reaction-display-container .name span[data-v-507ed5c5] {
  font: var(--editor-ui-b2-semibold);
  color: var(--asphalt10);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/receiver/OverviewComments.vue?vue&type=style&index=0&id=1937c601&scoped=true&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.comments-tab[data-v-1937c601] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}
.comments-tab[data-v-1937c601] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.comments-tab[data-v-1937c601] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
.comments-tab .filter-container[data-v-1937c601] {
  display: flex;
  padding: 24px 24px 12px 24px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  width: 270px;
}
.comments-tab .filter-container .footer-option-resolved[data-v-1937c601] {
  display: flex;
  padding: 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 1px solid var(--asphalt60);
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt10);
}
.comments-tab .page-group .page-details[data-v-1937c601] {
  display: flex;
  padding: 20px 24px;
  justify-content: space-between;
  border-bottom: 1px solid var(--asphalt80);
}
.comments-tab .page-group .page-details .page-name[data-v-1937c601] {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.comments-tab .page-group .page-details svg[data-v-1937c601] {
  width: 24px;
  height: 24px;
  color: var(--asphalt40);
}
.comments-tab .page-group .page-details[data-v-1937c601]:hover {
  cursor: pointer;
}
.comments-tab .comments-container[data-v-1937c601] {
  border-bottom: 1px solid var(--asphalt80);
}
.comments-tab .comments-container .comment[data-v-1937c601]:hover, .comments-tab .comments-container .reaction-display-container[data-v-1937c601]:hover {
  cursor: pointer;
  background-color: var(--asphalt90);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/UserSelectDropdown.vue?vue&type=style&index=0&id=28a7b926&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--dd-select[data-v-28a7b926] {
  --labelColor: var(--asphalt50);
  --selectColor: var(--asphalt60);
  --selectBackgroundColor: var(--asphalt20);
  --selectBackgroundHoverColor: var(--asphalt30);
  --activeColor: var(--asphalt100);
  --optionsBackgroundColor: var(--asphalt10);
  --optionsBackgroundBorderColor: var(--asphalt20);
  --itemColor: var(--asphalt100);
  --itemBackgroundHoverColor: var(--asphalt20);
  --optionsShadow: var(--shadow-light-small);
}
.ufo--dd-select.dark[data-v-28a7b926] {
  --labelColor: var(--asphalt40);
  --selectColor: var(--asphalt40);
  --selectBackgroundColor: var(--asphalt90);
  --selectBackgroundHoverColor: var(--asphalt80);
  --activeColor: var(--asphalt10);
  --optionsBackgroundColor: var(--asphalt80);
  --optionsBackgroundBorderColor: var(--asphalt70);
  --itemColor: var(--asphalt10);
  --itemBackgroundHoverColor: var(--asphalt70);
}
.ufo--dd-select[data-v-28a7b926] {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  font: var(--editor-ui-b2-regular);
}
.ufo--dd-select .user-value[data-v-28a7b926] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ufo--dd-select .user-value img[data-v-28a7b926] {
  width: 36px;
  height: 36px;
  border-radius: 36px;
}
.ufo--dd-select .user-value .user-details[data-v-28a7b926] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.ufo--dd-select .user-value .user-details .user-name[data-v-28a7b926] {
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt20);
}
.ufo--dd-select .user-value .user-details .user-job-title[data-v-28a7b926] {
  font: var(--editor-ui-b3-medium);
  color: var(--asphalt40);
}
.ufo--dd-select label[data-v-28a7b926] {
  font: var(--editor-ui-b2-regular);
  color: var(--labelColor);
  margin-bottom: 16px;
}
.ufo--dd-select .ufo--dd-selector[data-v-28a7b926] {
  width: 100%;
  position: relative;
  text-transform: capitalize;
}
.ufo--dd-select .ufo--dd-selected[data-v-28a7b926] {
  font-size: 14px;
  color: var(--selectColor);
  background-color: var(--selectBackgroundColor);
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}
.ufo--dd-select .ufo--dd-selected[data-v-28a7b926]:hover {
  background-color: var(--selectBackgroundHoverColor);
}
.ufo--dd-select .ufo--dd-selected svg[data-v-28a7b926] {
  margin-left: 10px;
  transition: transform 100ms ease-in-out;
  width: 24px;
  height: 24px;
}
.ufo--dd-select .ufo--dd-selected.open[data-v-28a7b926] {
  color: var(--activeColor);
  outline: 1px solid var(--asphalt80);
}
.ufo--dd-select .ufo--dd-selected.open[data-v-28a7b926]:hover {
  background-color: var(--selectBackgroundColor);
}
.ufo--dd-select .ufo--dd-selected.open svg[data-v-28a7b926] {
  transform: rotate(180deg);
}
.ufo--dd-select .ufo--dd-options[data-v-28a7b926] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-height: 180px;
  border: 1px solid var(--optionsBackgroundBorderColor);
  overflow: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overscroll-behavior: contain;
  /* Hide scrollbar for Chrome, Safari, and Opera */
}
.ufo--dd-select .ufo--dd-options[data-v-28a7b926]::-webkit-scrollbar {
  display: none;
}
.ufo--dd-select .ufo--dd-options[data-v-28a7b926] {
  position: absolute;
  left: 0;
  top: 68px;
  z-index: 1;
  background: var(--optionsBackgroundColor);
  border-radius: 4px;
  box-shadow: var(--optionsShadow);
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option[data-v-28a7b926] {
  padding: 14px 16px;
  cursor: pointer;
  width: 100%;
  color: var(--itemColor);
  display: flex;
  justify-content: space-between;
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option[data-v-28a7b926]:hover {
  background-color: var(--itemBackgroundHoverColor);
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option.selected[data-v-28a7b926] {
  font: var(--editor-ui-b2-medium);
}
.ufo--dd-select .ufo--dd-options .ufo--dd-option svg[data-v-28a7b926] {
  width: 20px;
  height: 20px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/receiver/ReceiverOverview.vue?vue&type=style&index=0&id=6ee9867c&scoped=true&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.receiver-overview-container[data-v-6ee9867c] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.receiver-overview-container .review-selector[data-v-6ee9867c] {
  padding: 24px;
}
.receiver-overview-container .review-selector .user-option[data-v-6ee9867c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.receiver-overview-container .review-selector .user-option svg[data-v-6ee9867c] {
  color: var(--asphalt10);
}
.receiver-overview-container .review-selector .user-option .user-value[data-v-6ee9867c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.receiver-overview-container .review-selector .user-option .user-value img[data-v-6ee9867c] {
  width: 36px;
  height: 36px;
  border-radius: 36px;
}
.receiver-overview-container .review-selector .user-option .user-value .placeholder-image[data-v-6ee9867c] {
  background-color: var(--asphalt30);
  text-align: center;
  width: 44px;
  height: 44px;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.receiver-overview-container .review-selector .user-option .user-value .placeholder-image p[data-v-6ee9867c] {
  font: var(--editor-ui-b2-semibold);
  color: var(--asphalt70);
  margin: 0;
}
.receiver-overview-container .review-selector .user-option .user-value .user-details[data-v-6ee9867c] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.receiver-overview-container .review-selector .user-option .user-value .user-details .user-name[data-v-6ee9867c] {
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt20);
}
.receiver-overview-container .review-selector .user-option .user-value .user-details .user-job-title[data-v-6ee9867c] {
  font: var(--editor-ui-b3-medium);
  color: var(--asphalt40);
}
.receiver-overview-container .tab-bar[data-v-6ee9867c] {
  padding: 0 24px;
}
.receiver-overview-container .overview-tab[data-v-6ee9867c] {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.receiver-overview-container .overview-tab[data-v-6ee9867c] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.receiver-overview-container .overview-tab[data-v-6ee9867c] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
.receiver-overview-container .overview-tab .overviews[data-v-6ee9867c] {
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.receiver-overview-container .empty-state-overlay[data-v-6ee9867c] {
  display: flex;
  height: 360px;
  padding: 60px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, #191919 12%);
  position: absolute;
  bottom: 0;
}
.receiver-overview-container .empty-state-overlay[data-v-6ee9867c] button {
  min-width: 160px;
}
.receiver-overview-container .empty-state-overlay[data-v-6ee9867c] button .button-icon {
  display: unset;
}
.receiver-overview-container .empty-state-overlay .text-with-icon[data-v-6ee9867c] {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
.receiver-overview-container .empty-state-overlay .text-with-icon svg[data-v-6ee9867c] {
  width: 24px;
  height: 24px;
}
.receiver-overview-container .empty-state-overlay .text-wrapper[data-v-6ee9867c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.receiver-overview-container .empty-state-overlay .text-wrapper .title-text[data-v-6ee9867c] {
  font: var(--editor-ui-h3);
  color: var(--asphalt10);
}
.receiver-overview-container .empty-state-overlay .text-wrapper .subtitle-text[data-v-6ee9867c] {
  text-align: center;
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/components/Overview.vue?vue&type=style&index=0&id=5cf2c115&scoped=true&lang=scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.overview-container[data-v-5cf2c115] {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 3;
  width: 400px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  box-shadow: 0px 287px 80px 0px rgba(0, 0, 0, 0), 0px 183px 73px 0px rgba(0, 0, 0, 0.01), 0px 103px 62px 0px rgba(0, 0, 0, 0.05), 0px 46px 46px 0px rgba(0, 0, 0, 0.08), 0px 11px 25px 0px rgba(0, 0, 0, 0.09);
}
.overview-container.isOpen[data-v-5cf2c115] {
  height: calc(100% - 105px);
}
.overview-container.receiver .header-row[data-v-5cf2c115] {
  border-bottom: none !important;
}
.overview-container .header-row[data-v-5cf2c115] {
  display: flex;
  flex-direction: row;
  padding: 20px 20px 20px 24px;
  justify-content: space-between;
  color: var(--asphalt10);
  font: var(--editor-ui-b1-semibold);
}
.overview-container .header-row[data-v-5cf2c115]:hover {
  cursor: pointer;
}
.overview-container .header-row svg[data-v-5cf2c115] {
  width: 24px;
  height: 24px;
}
.overview-container .header-row.isOpen[data-v-5cf2c115] {
  border-bottom: 1px solid var(--asphalt80);
}
.overview-container .body-row[data-v-5cf2c115] {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 0 0;
  align-self: stretch;
}
.overview-container .body-row p[data-v-5cf2c115] {
  margin: 0;
}
.overview-container .body-row .overviews[data-v-5cf2c115] {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
  align-self: stretch;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/TourModal.vue?vue&type=style&index=0&id=17a41119&scoped=true&lang=scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tour-modal-wrapper[data-v-17a41119] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 104;
  width: 100%;
  height: 100%;
}
.tour-modal-wrapper .overlay[data-v-17a41119] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(18, 24, 35, 0.45);
}
.tour-modal-wrapper .overlay.step-2[data-v-17a41119] {
  top: 60px;
}
.example-review-fabs[data-v-17a41119] {
  position: absolute;
  right: 25px;
  top: 170px;
  display: flex;
  gap: 12px;
}
.example-overview[data-v-17a41119] {
  display: flex;
  flex-direction: row;
  padding: 20px 20px 20px 24px;
  justify-content: space-between;
  color: var(--asphalt10);
  font: var(--editor-ui-b1-semibold);
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 3;
  width: 420px;
  border-radius: 12px;
  border: 1px solid var(--asphalt90);
  background: var(--asphalt95);
  box-shadow: 0px 287px 80px 0px rgba(0, 0, 0, 0), 0px 183px 73px 0px rgba(0, 0, 0, 0.01), 0px 103px 62px 0px rgba(0, 0, 0, 0.05), 0px 46px 46px 0px rgba(0, 0, 0, 0.08), 0px 11px 25px 0px rgba(0, 0, 0, 0.09);
}
.tour-container[data-v-17a41119] {
  display: flex;
  width: 360px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: 12px;
  background: var(--asphalt90);
  outline: 1px solid var(--asphalt70);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4), 0 32px 40px 0 rgba(0, 0, 0, 0.32);
  position: fixed;
  z-index: 10;
}
.tour-container .review-arrow[data-v-17a41119] {
  position: absolute;
}
.tour-container.step-0[data-v-17a41119] {
  bottom: 119px;
  left: 54px;
}
.tour-container.step-0 .review-arrow[data-v-17a41119] {
  bottom: -21px;
  rotate: -90deg;
}
.tour-container.step-1[data-v-17a41119] {
  top: 105px;
  right: 153px;
}
.tour-container.step-1 .review-arrow[data-v-17a41119] {
  rotate: 180deg;
  top: 75px;
  right: -12px;
}
.tour-container.step-2[data-v-17a41119] {
  top: 85px;
  right: 38px;
}
.tour-container.step-2 .review-arrow[data-v-17a41119] {
  top: -21px;
  right: 64px;
  transform: rotate(90deg);
}
.tour-container .text-container[data-v-17a41119] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
}
.tour-container .text-container .title-row[data-v-17a41119] {
  color: var(--asphalt10);
  font: var(--editor-ui-h3);
}
.tour-container .text-container .description-row[data-v-17a41119] {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.tour-container .pwt-actions[data-v-17a41119] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tour-container .pwt-actions .buttons[data-v-17a41119] {
  display: flex;
  gap: 8px;
}
.tour-container .pwt-actions .page-number[data-v-17a41119] {
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt60);
}
.tour-container .pwt-actions .ufo-cta.small[data-v-17a41119] {
  height: 30px;
  border-radius: 999px;
  padding: 0 1rem;
}
.tour-container .pwt-actions .ufo-cta--link[data-v-17a41119] {
  padding-left: 20px;
  padding-right: 20px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/OverviewModal.vue?vue&type=style&index=0&id=8aca85d0&scoped=true&lang=scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.new-modal-title .pill[data-v-8aca85d0] {
  margin-right: 8px;
  display: flex;
  padding: 4px 10px;
  align-items: center;
  border-radius: 20px;
}
.new-modal-title .pill.Empty[data-v-8aca85d0] {
  background-color: rgba(248, 113, 113, 0.1019607843);
  color: var(--rose40);
  font: var(--editor-ui-b3-medium);
  letter-spacing: 0.12px;
}
.new-modal-title .pill.Incomplete[data-v-8aca85d0] {
  background-color: rgba(251, 191, 36, 0.1019607843);
  color: var(--zest40);
  font: var(--editor-ui-b3-medium);
  letter-spacing: 0.12px;
}
.dot[data-v-8aca85d0] {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background-color: var(--zest40);
  margin-left: 7.5px;
}
.tab-data[data-v-8aca85d0] {
  display: flex;
  height: 500px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  overflow: auto;
  overscroll-behavior: contain;
}
.tab-data[data-v-8aca85d0] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.tab-data[data-v-8aca85d0] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
.tab-data p[data-v-8aca85d0] {
  color: var(--asphalt10);
}
.tab-data .overview[data-v-8aca85d0] {
  width: 100%;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
  align-self: stretch;
}
.tab-data .comments[data-v-8aca85d0] {
  display: flex;
  height: 500px;
  flex-direction: column;
  width: 100%;
}
.tab-data .comments .comments-empty-container[data-v-8aca85d0] {
  padding: 36px 24px;
  height: 100%;
}
.tab-data .comments .selector-container[data-v-8aca85d0] {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.tab-data .comments .selector-container .text[data-v-8aca85d0] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
.tab-data .comments .selector-container .string-value[data-v-8aca85d0] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
.tab-data .comments .selector-container .string-option[data-v-8aca85d0] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-data .comments .selector-container .string-option svg[data-v-8aca85d0] {
  width: 24px;
  height: 24px;
  color: var(--asphalt10);
}
.tab-data .comments .selector-container .string-option[data-v-8aca85d0]:hover {
  cursor: pointer;
  background-color: var(--asphalt80);
}
.tab-data .comments .comments-list[data-v-8aca85d0] {
  overflow: auto;
  overscroll-behavior: contain;
}
.tab-data .comments .comments-list[data-v-8aca85d0] ::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.tab-data .comments .comments-list[data-v-8aca85d0] {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/OverviewSuccessModal.vue?vue&type=style&index=0&id=b0c13f62&scoped=true&lang=scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.modal-body-container[data-v-b0c13f62] {
  display: flex;
  width: 500px;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}
.modal-body-container .illustration[data-v-b0c13f62] {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--asphalt50);
  background: var(--asphalt60);
}
.modal-body-container .illustration svg[data-v-b0c13f62] {
  width: 24px;
  height: 24px;
  color: var(--asphalt10);
}
.modal-body-container .text-wrapper[data-v-b0c13f62] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.modal-body-container .text-wrapper .title-text[data-v-b0c13f62] {
  color: var(--asphalt10);
  font: var(--editor-ui-h2);
}
.modal-body-container .text-wrapper .subtitle-text[data-v-b0c13f62] {
  color: var(--asphalt30);
  font: var(--editor-ui-b2-regular);
}
.modal-body-container .link-wrapper[data-v-b0c13f62] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-body-container .link-wrapper div[data-v-b0c13f62] {
  color: var(--asphalt40);
  font: var(--editor-ui-b2-regular);
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/ReviewWelcomeModal.vue?vue&type=style&index=0&id=fdfe2ea2&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-welcome-modal-container[data-v-fdfe2ea2] {
  display: flex;
  width: 640px;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.review-welcome-modal-container .image-wrapper[data-v-fdfe2ea2] {
  display: flex;
  width: 640px;
  height: 310px;
  justify-content: center;
  align-items: center;
}
.review-welcome-modal-container .image-wrapper img[data-v-fdfe2ea2] {
  width: 100%;
  height: 100%;
}
.review-welcome-modal-container .footer-wrapper[data-v-fdfe2ea2] {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  box-shadow: 0 5.845px 14.612px 2.922px rgba(12, 44, 76, 0.08);
}
.review-welcome-modal-container .footer-wrapper .text[data-v-fdfe2ea2] {
  text-align: center;
  font: var(--editor-ui-h0);
  color: var(--asphalt10);
}
.review-welcome-modal-container .footer-wrapper .button-container[data-v-fdfe2ea2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.review-welcome-modal-container .footer-wrapper .button-container .ufo-cta--primary[data-v-fdfe2ea2] {
  min-width: 224px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/loginModals/LoginError.vue?vue&type=style&index=0&id=14fffa6a&scoped=true&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.continue-review[data-v-14fffa6a] {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.continue-review .header-row[data-v-14fffa6a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.continue-review .header-row .title-text[data-v-14fffa6a] {
  font: var(--editor-ui-h2);
  color: var(--asphalt10);
}
.continue-review .header-row .subtitle-text[data-v-14fffa6a] {
  text-align: center;
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt30);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/loginModals/AuthError.vue?vue&type=style&index=0&id=21675c78&scoped=true&lang=scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.continue-review[data-v-21675c78] {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.continue-review .header-row[data-v-21675c78] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.continue-review .header-row .title-text[data-v-21675c78] {
  font: var(--editor-ui-h2);
  color: var(--asphalt10);
}
.continue-review .header-row .subtitle-text[data-v-21675c78] {
  text-align: center;
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt30);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/loginModals/GuestLogin.vue?vue&type=style&index=0&id=2463161d&scoped=true&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.button-container span[data-v-2463161d] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/loginModals/ContinueReview.vue?vue&type=style&index=0&id=05e3438b&scoped=true&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.continue-review[data-v-05e3438b] {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.continue-review .header-row[data-v-05e3438b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.continue-review .header-row .title-text[data-v-05e3438b] {
  font: var(--editor-ui-h2);
  color: var(--asphalt10);
  text-align: center;
}
.continue-review .header-row .subtitle-text[data-v-05e3438b] {
  text-align: center;
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt30);
}
.continue-review .button-container span[data-v-05e3438b] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/loginModals/ExistingUserLogin.vue?vue&type=style&index=0&id=42b82fd2&scoped=true&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.header-container .header[data-v-42b82fd2] {
  text-align: center;
  color: var(--asphalt10);
  font: var(--editor-ui-h2);
}
.user-wrapper[data-v-42b82fd2] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  border-radius: 4px;
  background: var(--asphalt90);
}
.user-wrapper img[data-v-42b82fd2] {
  width: 36px;
  height: 36px;
  border-radius: 36px;
}
.user-wrapper .user-details[data-v-42b82fd2] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.user-wrapper .user-details .user-name[data-v-42b82fd2] {
  font: var(--editor-ui-b2-medium);
  color: var(--asphalt20);
}
.user-wrapper .user-details .user-job-title[data-v-42b82fd2] {
  font: var(--editor-ui-b3-medium);
  color: var(--asphalt40);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/modals/ReviewLoginModalHandler.vue?vue&type=style&index=0&id=b05b8c5c&lang=scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-login-modal-container {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  background-color: var(--asphalt95);
  border-radius: 8px;
  border: 1px solid var(--asphalt90);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 32px 40px rgba(0, 0, 0, 0.32);
}
.review-login-modal-container .header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
.review-login-modal-container .header-wrapper img {
  display: flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.review-login-modal-container .header-wrapper .header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.review-login-modal-container .header-wrapper .header-container .header {
  text-align: center;
  font: var(--editor-ui-h2);
  color: var(--asphalt10);
}
.review-login-modal-container .header-wrapper .header-container .subheader {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
}
.review-login-modal-container .header-wrapper .header-container .subheader .name {
  color: var(--asphalt10);
  font: var(--editor-ui-b2-medium);
}
.review-login-modal-container .inputs-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.review-login-modal-container .button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.review-login-modal-container .button-container.row {
  flex-direction: row;
}
.review-login-modal-container .button-container.row button {
  width: 100%;
}
.review-login-modal-container .button-container .ufo-cta--primary {
  width: 100%;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/ReviewMode.vue?vue&type=style&index=0&id=5e4e3ae8&global=true&lang=scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-wrapper::-webkit-scrollbar-track {
  background-color: transparent; /* Makes the track transparent */
}
.review-wrapper {
  scrollbar-color: #888 transparent; /* Thumb color and track color */
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/components/Header.vue?vue&type=style&index=0&id=913351b0&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
header[data-v-913351b0] {
  border-radius: 0.16606rem;
  background-color: var(--color-navigation-bg);
  box-shadow: 0 5.313px 132.828px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  -webkit-position: sticky;
  top: 0;
  z-index: 3;
}
header .content[data-v-913351b0] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (max-width: 1023px) {
header .logo[data-v-913351b0] {
    width: 6rem;
}
header .logo svg[data-v-913351b0] {
    width: 100%;
}
}
header nav[data-v-913351b0] {
  display: flex;
  align-items: center;
  gap: 1.71556rem;
  align-self: stretch;
}
header nav svg[data-v-913351b0] {
  display: none;
}
header nav button.login[data-v-913351b0] {
  margin: 0.625rem 0;
}
@media (max-width: 767px) {
header nav[data-v-913351b0] {
    order: 3;
    width: 100%;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
header nav.on[data-v-913351b0] {
    height: calc(100vh - 5.1rem);
    padding-top: 1.63rem;
}
header nav a[data-v-913351b0] {
    width: 100%;
    font-size: 1.1875rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
}
header nav a svg[data-v-913351b0] {
    display: block;
    transform: rotate(-90deg);
}
}
@media (min-width: 768px) {
header nav button.login[data-v-913351b0] {
    display: none;
}
}
header .actions[data-v-913351b0] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
@media (max-width: 767px) {
header .actions button.login[data-v-913351b0] {
    display: none;
}
}
@media (min-width: 768px) {
header .actions button.toggler[data-v-913351b0] {
    display: none;
}
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/publicPages/components/Header.vue?vue&type=style&index=1&id=913351b0&lang=scss&global=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.alert-banner-container {
  min-height: 56px;
  width: 100%;
  background-color: #DCFA37;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 769px) {
.alert-banner-container {
    min-height: 56px;
}
}
@media (max-width: 640px) {
.alert-banner-container {
    min-height: 70px;
}
}
@media (max-width: 769px) {
.alert-banner-container .banner-content-container {
    padding: 0 62px;
}
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container {
    padding: 0;
}
}
.alert-banner-container .banner-content-container .banner-text-container {
  padding: 16px;
  display: flex;
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container .banner-text-container {
    padding: 12px 6px;
}
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container .banner-text-container .info-icon {
    font-size: 12px;
}
}
.alert-banner-container .banner-content-container .banner-text-container .info-icon svg {
  height: 23px;
  color: #0F0F0F;
}
.alert-banner-container .banner-content-container .banner-text-container .message {
  margin-left: 8px;
  color: #0F0F0F;
  font-family: var(--primarySans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.16px;
}
@media (max-width: 769px) {
.alert-banner-container .banner-content-container .banner-text-container .message {
    font-size: 9px;
}
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/ComingSoon.vue?vue&type=style&index=0&id=0d3e2b10&lang=scss&global=true (1) ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bold;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
* {
  box-sizing: border-box;
}
:root {
  --Asphalt: #0F0F0F;
  --Asphalt-10: #FEFEFE;
  --Asphalt-15: #F9F9F9;
  --Asphalt-20: #EEEEEE;
  --Asphalt-30: #D1D1D1;
  --Asphalt-40: #A2A2A2;
  --Asphalt-50: #707070;
  --Asphalt-60: #484747;
  --Asphalt-70: #3D3D3D;
  --Asphalt-80: #333333;
  --Asphalt-90: #262626;
  --Asphalt-95: #1A1A1A;
  --Snow: #FEFEFE;
  --Volt: #DCFA37;
  --Rain: #91939A;
  --Frost: #EEF0F6;
  --Stone: #3D3F45;
  --Success60: #10B981;
  --Error-40: #F87171;
  --Error-60: #DC2626;
  --Linear: linear-gradient(180deg, var(--Rain, #91939A) 37.12%, transparent 74.17%);
  --headlineFont: "Bricolage Grotesque", sans-serif;
  --font-headline-family: "Bricolage Grotesque", sans-serif;
  --bodyFont: "Work Sans", sans-serif;
  --font-body-family: "Work Sans", sans-serif;
  --font-h0: 700 3.375rem/1.1 var(--font-headline-family);
  --font-h1: 700 3rem/1.1 var(--font-headline-family);
  --font-h2: 600 2.375rem/1.1 var(--font-headline-family);
  --font-s1: 600 1.6875rem/1.2 var(--font-headline-family);
  --font-s2: 500 1.1875rem/1.4 var(--font-headline-family);
  --font-s3: 600 0.8125rem/1.2 var(--font-body-family);
  --font-s4: 400 18px/1.2 var(--font-body-family);
  --font-b1: 500 1.3125rem/1.2 var(--font-body-family);
  --font-b2: 400 1rem/1.2 var(--font-body-family);
  --font-b3: 400 0.8125rem/1.2 var(--font-body-family);
  --font-c1: 400 0.75rem/1.3 var(--font-body-family);
  --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
@media (min-width: 768px) {
:root {
    --font-h0: 700 6.0625rem/1.08 var(--font-headline-family);
    --font-h1: 700 4.25rem/1.1 var(--font-headline-family);
    --font-h2: 600 3.375rem/1.1 var(--font-headline-family);
    --font-s1: 600 1.8125rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.3125rem/1.2 var(--font-headline-family);
    --font-s3: 600 0.9375rem/1.2 var(--font-body-family);
    --font-s4: 400 20px/1.2 var(--font-body-family);
    --font-b1: 500 1.5rem/1.2 var(--font-body-family);
    --font-b2: 400 1.125rem/1.2 var(--font-body-family);
    --font-b3: 400 0.9375rem/1.2 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
@media (min-width: 1024px) {
:root {
    --font-h0: 700 6.8125rem/1.06 var(--font-headline-family);
    --font-h1: 700 5.375rem/1.2 var(--font-headline-family);
    --font-h2: 600 3.8125rem/1.2 var(--font-headline-family);
    --font-s1: 600 3rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.5rem/1.2 var(--font-headline-family);
    --font-s3: 600 1.0625rem/1.3 var(--font-body-family);
    --font-s4: 400 24px/1.2 var(--font-body-family);
    --font-s5: 500 18px/1.2 var(--font-headline-family);
    --font-b1: 500 1.6875rem/1.4 var(--font-body-family);
    --font-b2: 400 1.1875rem/1.3 var(--font-body-family);
    --font-b3: 400 1.0625rem/1.3 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
.light-mode {
  --color-text: var(--Asphalt);
  --color-bg: var(--Snow);
  --color-bg-rgba: rgba(254, 254, 254, 0);
  --color-secondary-bg: #F3F3F3;
  --color-navigation-bg: rgba(254, 254, 254, 0.70);
  --color-examples-border: var(--Frost);
  --bannerBgColor: #212121;
  --color-btn-primary-bg: var(--Volt);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt);
  --color-btn-primary-bg-hover: var(--Asphalt);
  --color-btn-primary-text-hover: var(--Snow);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
  --color-btn-tertiary-bg: var(--Asphalt);
  --color-btn-tertiary-border: var(--Asphalt);
  --color-btn-tertiary-text: var(--Snow);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Asphalt);
  --color-btn-inline-text-hover: var(--Asphalt);
  --color-nav-link-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-30);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt);
  --color-form-elem-border-disabled: var(--Asphalt-30);
  --color-form-elem-border-error: var(--Error-60);
  --color-form-elem-label: var(--Asphalt-60);
  --color-form-elem-label-hover: var(--Asphalt-60);
  --color-form-elem-label-focus: var(--Asphalt-60);
  --color-form-elem-label-disabled: var(--Asphalt-60);
  --color-form-elem-text: var(--Asphalt-70);
  --color-form-elem-text-hover: var(--Asphalt-70);
  --color-form-elem-text-focus: var(--Asphalt-80);
  --color-form-elem-text-disabled: var(--Asphalt-70);
  --color-banner-bg: #212121;
  --color-banner-text: var(--Snow);
}
.light-mode .banner:not(.color) {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
}
.light-mode {
  --color-cycle-text-inactive: var(--Stone);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: #EDEDED;
  --color-cycle-active-bg: var(--Snow);
}
.dark-mode {
  --color-text: var(--Snow);
  --color-bg: var(--Asphalt);
  --color-bg-rgba: rgba(15, 15, 15, 0);
  --color-secondary-bg: #212121;
  --color-navigation-bg: rgba(15, 15, 15, 0.70);
  --color-examples-border: var(--Stone);
  --bannerBgColor: #F3F3F3;
  --color-btn-primary-bg: var(--Volt);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt);
  --color-btn-primary-bg-hover: var(--Snow);
  --color-btn-primary-text-hover: var(--Asphalt);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
  --color-btn-tertiary-bg: var(--Snow);
  --color-btn-tertiary-border: var(--Snow);
  --color-btn-tertiary-text: var(--Asphalt);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt-10);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Snow);
  --color-btn-inline-text-hover: var(--Snow);
  --color-nav-link-text: var(--Snow);
  --color-banner-bg: #F3F3F3;
  --color-banner-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-50);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt-30);
  --color-form-elem-border-disabled: var(--Asphalt-50);
  --color-form-elem-border-error: var(--Error-40);
  --color-form-elem-label: var(--Asphalt-40);
  --color-form-elem-label-hover: var(--Asphalt-40);
  --color-form-elem-label-focus: var(--Asphalt-30);
  --color-form-elem-label-disabled: var(--Asphalt-40);
  --color-form-elem-text: var(--Asphalt-30);
  --color-form-elem-text-hover: var(--Asphalt-20);
  --color-form-elem-text-focus: var(--Asphalt-10);
  --color-form-elem-text-disabled: var(--Asphalt-30);
}
.dark-mode .banner {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
}
.dark-mode {
  --color-cycle-text-inactive: var(--Snow);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: var(--Stone);
  --color-cycle-active-bg: var(--Snow);
}
body {
  background-color: var(--background-fill-color, var(--color-bg));
}
.h0 {
  font: var(--font-h0);
  color: var(--color-text);
}
.h1 {
  font: var(--font-h1);
  color: var(--color-text);
}
.h2 {
  font: var(--font-h2);
  color: var(--color-text);
}
.s1 {
  font: var(--font-s1);
  color: var(--color-text);
}
.s2 {
  font: var(--font-s2);
  color: var(--color-text);
}
.s3 {
  font: var(--font-s3);
  color: var(--color-text);
}
.s4 {
  font: var(--font-s4);
  color: var(--color-text);
}
.s5 {
  font: var(--font-s5);
  color: var(--color-text);
}
.b1 {
  font: var(--font-b1);
  color: var(--color-text);
}
.b2 {
  font: var(--font-b2);
  color: var(--color-text);
}
.b3 {
  font: var(--font-b3);
  color: var(--color-text);
}
.c1 {
  font: var(--font-c1);
  color: var(--color-text);
}
.c2 {
  font: var(--font-c2);
  color: var(--color-text);
}
.content {
  width: 100%;
  max-width: 1440px;
  padding: 0 1rem;
}
@media (min-width: 768px) {
.content {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.content {
    padding: 0 4rem;
}
}
.grid-12 {
  --gridGap: 1rem;
  width: 100%;
  max-width: 1440px;
  padding: 0 1rem;
  display: grid;
  gap: var(--gridGap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
.grid-12 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0 4rem;
}
}
.grid-20 {
  --gridGap: 0;
  --colNum: 20;
}
@media (max-width: 1300px) {
.grid-20 {
    --colNum: 18;
}
}
@media (max-width: 1200px) {
.grid-20 {
    --colNum: 16;
}
}
@media (max-width: 1000px) {
.grid-20 {
    --colNum: 14;
}
}
@media (max-width: 900px) {
.grid-20 {
    --colNum: 12;
}
}
@media (max-width: 768px) {
.grid-20 {
    --colNum: 10;
}
}
@media (max-width: 480px) {
.grid-20 {
    --colNum: 8;
}
}
@media (max-width: 360px) {
.grid-20 {
    --colNum: 6;
}
}
.grid-20 {
  --gridFixer: 0;
}
@media (min-width: 1001px) {
.grid-20 {
    --gridFixer: 1;
}
}
@media (min-width: 1201px) {
.grid-20 {
    --gridFixer: 2;
}
}
@media (min-width: 1301px) {
.grid-20 {
    --gridFixer: 3;
}
}
.grid-20 {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(var(--colNum), minmax(0, var(--gridRow)));
  grid-auto-rows: var(--gridRow);
  gap: 0;
}
@media (min-width: 1456px) {
.grid-20 {
    grid-template-columns: repeat(var(--colNum), minmax(0, 65.6px));
    grid-auto-rows: 65.6px;
}
}
.divider {
  height: 0.5rem;
  align-self: stretch;
  background-color: var(--Volt);
}
@media (min-width: 1024px) {
.divider {
    height: 0.75rem;
}
}
header,
section,
footer {
  display: flex;
  justify-content: center;
}
p a {
  color: var(--color-text);
  text-decoration: underline;
}
p a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
nav a {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0.25rem 0;
  gap: 0.5rem;
  color: var(--color-nav-link-text);
  font-family: var(--font-headline-family);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.0225rem;
}
@media (min-width: 768px) {
nav a {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
}
}
@media (min-width: 1024px) {
nav a {
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
}
}
nav a {
  position: relative;
}
nav a:hover, nav a.router-link-active {
  color: var(--color-text);
}
nav a:hover:after, nav a.router-link-active:after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--color-nav-link-text);
}
nav a span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
nav a span::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
nav a span::after {
    display: none;
}
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/ComingSoon.vue?vue&type=style&index=1&id=0d3e2b10&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
main[data-v-0d3e2b10] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: 56px;
  background: var(--color-bg) url(/dist/src/assets/images/squared-bg..svg);
}
.coming-soon[data-v-0d3e2b10] header {
  display: flex;
  justify-content: center;
}
.coming-soon .page-content[data-v-0d3e2b10] {
  width: 100%;
  height: calc(100% - 98px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coming-soon .page-content .ufo--container[data-v-0d3e2b10] {
  width: 524px;
  height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 48px;
  text-align: center;
}
.coming-soon .page-content .ufo--container h1[data-v-0d3e2b10] {
  color: var(--color-text);
  font: var(--font-h2);
}
.coming-soon .page-content .ufo--container h2[data-v-0d3e2b10] {
  color: var(--color-form-elem-text-disabled);
  font: var(--font-b2);
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/PageWrapper.vue?vue&type=style&index=0&id=4db7eeb3&lang=scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--page-sections,
.footer-info {
  --black: #140a2f;
  --white: #FFFFFF;
  --red: #fc3d83;
  --blue: #4a3dff;
  --purple: #5c50ff;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/portfolio/Portfolio.vue?vue&type=style&index=0&id=452afe92&lang=scss&global=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.alert-banner-container {
  min-height: 56px;
  width: 100%;
  background-color: var(--volt);
  display: flex;
  justify-content: center;
}
@media (max-width: 769px) {
.alert-banner-container {
    min-height: 56px;
}
}
@media (max-width: 640px) {
.alert-banner-container {
    min-height: 70px;
}
}
@media (max-width: 769px) {
.alert-banner-container .banner-content-container {
    padding: 0 62px;
}
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container {
    padding: 0;
}
}
.alert-banner-container .banner-content-container .banner-text-container {
  padding: 16px;
  display: flex;
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container .banner-text-container {
    padding: 12px 6px;
}
}
@media (max-width: 640px) {
.alert-banner-container .banner-content-container .banner-text-container .info-icon {
    font-size: 12px;
}
}
.alert-banner-container .banner-content-container .banner-text-container .info-icon svg {
  height: 20px;
  color: var(--asphalt100);
}
.alert-banner-container .banner-content-container .banner-text-container .message {
  margin-left: 8px;
  color: var(--asphalt100);
  font-family: var(--primarySans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.16px;
}
@media (max-width: 769px) {
.alert-banner-container .banner-content-container .banner-text-container .message {
    font-size: 9px;
}
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/review/ReviewWrapper.vue?vue&type=style&index=0&id=5f7b525e&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.review-wrapper .ufo-sec--navigation .sticky-header.sticked {
  top: 60px;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/portfolioEditor/modals/caseStudyGenerator/components/LimitTag.vue?vue&type=style&index=0&id=5636a862&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.limit-tag-container[data-v-5636a862] {
  position: relative;
}
.limit-tag-container:hover .limit-tag[data-v-5636a862] {
  background: var(--asphalt80);
}
.limit-tag-container .limit-tag[data-v-5636a862] {
  display: inline-flex;
  padding: 6px 10px 6px 6px;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  background: var(--asphalt90);
  backdrop-filter: blur(2px);
  color: var(--volt);
  font: var(--editor-ui-b2-regular);
}
.limit-tag-container .limit-tag svg[data-v-5636a862] {
  width: 16px;
  height: 16px;
}
.limit-tag-container .limit-tag[data-v-5636a862]:hover {
  cursor: pointer;
}
.limit-tag-container .popover[data-v-5636a862] {
  display: flex;
  width: 340px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 6px;
  border: 1px solid var(--asphalt80);
  background: var(--asphalt90);
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 10;
}
.limit-tag-container .popover .content-wrapper[data-v-5636a862] {
  display: flex;
  align-items: center;
  gap: 11px;
  align-self: stretch;
}
.limit-tag-container .popover .content-wrapper svg[data-v-5636a862] {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  color: var(--asphalt10);
}
.limit-tag-container .popover .content-wrapper .text-wrapper[data-v-5636a862] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}
.limit-tag-container .popover .content-wrapper .text-wrapper .title[data-v-5636a862] {
  color: var(--asphalt15);
  font: var(--editor-ui-b1-medium);
}
.limit-tag-container .popover .content-wrapper .text-wrapper .subtitle[data-v-5636a862] {
  color: var(--asphalt40);
  font: var(--editor-ui-b3-regular);
}
.limit-tag-container .popover .upgrade-card-wrapper[data-v-5636a862] {
  display: flex;
  width: 301px;
  height: 70px;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  background: var(--volt);
}
.limit-tag-container .popover .upgrade-card-wrapper .text-wrapper .title[data-v-5636a862] {
  color: var(--asphalt100);
  font: var(--editor-ui-b2-semibold);
}
.limit-tag-container .popover .upgrade-card-wrapper .text-wrapper .subtitle[data-v-5636a862] {
  color: var(--asphalt80);
  font: var(--editor-ui-b3-regular);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/jobFitChecker/components/JFCNavigation.vue?vue&type=style&index=0&id=11ca9d6a&scoped=true&lang=scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
[data-v-11ca9d6a] .limit-tag-container .popover {
  top: 56px;
  left: 0;
  right: unset;
}
.navigation-row-container[data-v-11ca9d6a] {
  height: 60px;
  padding: 12px 24px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: var(--asphalt95);
  border-top: 1px solid var(--asphalt90);
  border-bottom: 1px solid var(--asphalt70);
  z-index: 101;
  display: flex;
  color: var(--asphalt10);
}
.navigation-row-container .left-side[data-v-11ca9d6a] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.navigation-row-container .left-side .main-text[data-v-11ca9d6a] {
  display: flex;
  gap: 10px;
  align-items: center;
}
.navigation-row-container .left-side .main-text svg[data-v-11ca9d6a] {
  width: 34px;
  height: 24px;
}
.navigation-row-container .left-side .main-text div[data-v-11ca9d6a] {
  color: var(--asphalt10);
  font: var(--review-ui-b1-medium);
}
.navigation-row-container .right-side[data-v-11ca9d6a] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
}
.navigation-row-container .right-side .button-container[data-v-11ca9d6a] {
  display: flex;
  gap: 8px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/TextArea.vue?vue&type=style&index=0&id=4623e7a2&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.text-area-container[data-v-4623e7a2] {
  --bgColor: var(--asphalt10);
  --disabledBgColor: var(--asphalt10);
  --outlineColor: var(--asphalt30);
  --hoverOutlineColor: var(--asphalt50);
  --focusOutlineColor: var(--asphalt100);
  --disabledOutlineColor: var(--asphalt20);
  --labelColor: var(--asphalt50);
  --disabledLabelColor: var(--asphalt40);
  --textColor: var(--asphalt100);
  --warningColor: var(--error50);
  --successColor: var(--success60);
}
.text-area-container.dark[data-v-4623e7a2] {
  --bgColor: var(--asphalt95);
  --disabledBgColor: var(--asphalt90);
  --outlineColor: var(--asphalt70);
  --hoverOutlineColor: var(--asphalt50);
  --focusOutlineColor: var(--asphalt10);
  --disabledOutlineColor: var(--asphalt80);
  --labelColor: var(--asphalt40);
  --disabledLabelColor: var(--asphalt50);
  --textColor: var(--asphalt10);
  --warningColor: var(--error50);
  --successColor: var(--success60);
}
.text-area-container .ufo-textarea[data-v-4623e7a2] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  font: var(--editor-ui-b2-regular);
  background-color: var(--bgColor);
  outline: solid 1px var(--outlineColor);
  border-radius: 4px;
  color: var(--textColor);
}
.text-area-container .ufo-textarea.focus[data-v-4623e7a2] {
  outline: 1px solid var(--focusOutlineColor);
}
.text-area-container .ufo-textarea[data-v-4623e7a2]:hover:not(.focus) {
  outline: 1px solid var(--hoverOutlineColor);
}
.text-area-container .ufo-textarea.error[data-v-4623e7a2] {
  outline: 1px solid var(--warningColor);
}
.text-area-container .ufo-textarea.disabled[data-v-4623e7a2] {
  cursor: not-allowed;
  background: var(--disabledBgColor);
}
.text-area-container .ufo-textarea .disabled[data-v-4623e7a2] {
  cursor: not-allowed;
  background: var(--disabledBgColor);
  color: var(--labelColor);
}
.text-area-container label[data-v-4623e7a2] {
  line-height: 1;
  display: none;
  color: var(--labelColor);
  margin-bottom: 0;
}
.text-area-container label.focus[data-v-4623e7a2] {
  font: var(--editor-ui-b3-regular);
  position: absolute;
  display: block;
  left: 12px;
  top: -10px;
  padding: 0 4px;
  background: var(--bgColor);
}
.text-area-container textarea[data-v-4623e7a2] {
  font: var(--editor-ui-b2-regular);
  background-color: var(--bgColor);
  outline: none;
  border-radius: 4px;
  color: var(--textColor);
  padding: 14px 16px;
  height: 100%;
}
.text-area-container textarea[data-v-4623e7a2]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--labelColor);
  opacity: 1; /* Firefox */
}
.text-area-container textarea[data-v-4623e7a2]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--labelColor);
}
.text-area-container textarea[data-v-4623e7a2]::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--labelColor);
}
.text-area-container .alert-message[data-v-4623e7a2] {
  font: var(--editor-ui-b2-regular);
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: var(--warningColor);
}
.text-area-container .text-area-container[data-v-4623e7a2] {
  padding-bottom: 23px;
  width: 100%;
  height: 100%;
}
.text-area-container .text-area-container[data-v-4623e7a2]:focus {
  outline: var(--focusOutlineColor);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/components/SimpleAiButton.vue?vue&type=style&index=0&id=35449b61&scoped=true&lang=scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.simple-button[data-v-35449b61] {
  display: inline-flex;
  padding: 6px 12px 6px 6px;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  background-color: var(--asphalt90);
  backdrop-filter: blur(2px);
  outline: none;
  border: none;
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
}
.simple-button.active[data-v-35449b61] {
  outline: none;
}
.simple-button.disabled[data-v-35449b61] {
  background-color: var(--asphalt90);
  color: var(--asphalt60);
  cursor: default;
}
.simple-button[data-v-35449b61]:hover {
  background-color: var(--asphalt80);
  cursor: pointer;
}
.simple-button svg[data-v-35449b61] {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/portfolioEditor/modals/caseStudyGenerator/components/PromptSelector.vue?vue&type=style&index=0&id=53a3b9a6&lang=scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo--text-area-generator-prompt .ProseMirror {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt20);
  width: 100%;
  height: 100%;
  line-height: 24px;
}
.ufo--text-area-generator-prompt .ProseMirror p {
  margin-bottom: 1px;
}
.ufo--text-area-generator-prompt .ProseMirror .custom-placeholder {
  color: var(--asphalt40);
  border-radius: 2px;
  padding: 0 2px;
  cursor: pointer;
}
.ufo--text-area-generator-prompt .ProseMirror .custom-placeholder:hover {
  background-color: var(--asphalt80);
  color: var(--asphalt10);
  cursor: pointer;
}
.ufo--text-area-generator-prompt .ProseMirror .custom-placeholder.ProseMirror-selectednode {
  background-color: var(--asphalt10);
  color: var(--asphalt100);
}
.ufo--text-area-generator-prompt .ProseMirror-focused {
  border: none;
  outline: none;
}
.ufo--text-area-generator-prompt .ProseMirror-focused p.is-empty:first-child::before {
  color: var(--asphalt60) !important;
}
.ufo--text-area-generator-prompt p.is-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--asphalt40);
  pointer-events: none;
  height: 0;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/portfolioEditor/modals/caseStudyGenerator/components/PromptSelector.vue?vue&type=style&index=1&id=53a3b9a6&scoped=true&lang=scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.generator-prompt-input-container[data-v-53a3b9a6] {
  height: 100%;
  width: 100%;
}
.generator-prompt-input-container .input-text-box[data-v-53a3b9a6] {
  border-radius: 6px;
  border: 1px solid var(--asphalt80);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  height: 200px;
}
.generator-prompt-input-container .input-text-box .char-counter[data-v-53a3b9a6] {
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt60);
  align-self: flex-end;
}
.generator-prompt-input-container .input-text-box.error[data-v-53a3b9a6] {
  border: 1px solid var(--rose50);
}
.generator-prompt-input-container .input-text-box .ufo--text-area-generator-prompt[data-v-53a3b9a6] {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  overflow: auto;
}
.generator-prompt-input-container .input-text-box .ufo--text-area-generator-prompt[data-v-53a3b9a6] ::-webkit-scrollbar-track {
  background-color: transparent;
}
.generator-prompt-input-container .input-text-box .ufo--text-area-generator-prompt[data-v-53a3b9a6] {
  scrollbar-color: #888 transparent;
}
.generator-prompt-input-container .input-text-box.focused[data-v-53a3b9a6]:not(.error) {
  border: 1px solid var(--asphalt60);
}
.generator-prompt-input-container .input-text-box .editor-toolbar[data-v-53a3b9a6] {
  display: flex;
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.generator-prompt-input-container .error-message[data-v-53a3b9a6] {
  margin: 12px 0 0 16px;
  color: var(--rose50);
  font: var(--editor-ui-b3-regular);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/jobFitChecker/components/JFCResult.vue?vue&type=style&index=0&id=2ec13df3&scoped=true&lang=scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.jfc-tabs[data-v-2ec13df3] {
  padding: 0 24px;
}
.jfc-tab-content[data-v-2ec13df3] {
  padding: 24px;
}
.jfc-tab-content .overview-container[data-v-2ec13df3] {
  font: var(--editor-ui-h2);
  color: var(--asphalt15);
}
.jfc-tab-content .overview-container .score-section[data-v-2ec13df3] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--asphalt80);
  position: relative;
}
.jfc-tab-content .overview-container .score-section .score-wrapper[data-v-2ec13df3] {
  position: relative;
}
.jfc-tab-content .overview-container .score-section .score-summary[data-v-2ec13df3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jfc-tab-content .overview-container .score-section .score-summary .score[data-v-2ec13df3] {
  font-family: var(--primaryHeader);
  font-size: 74px;
  font-weight: 600;
  line-height: normal;
}
.jfc-tab-content .overview-container .score-section .score-bar[data-v-2ec13df3] {
  width: 100%;
  height: 12px;
  border: 1px solid var(--asphalt80);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}
.jfc-tab-content .overview-container .score-section .score-fill[data-v-2ec13df3] {
  height: 100%;
  background: var(--volt);
  border-radius: 4px;
}
.jfc-tab-content .overview-container .score-section .score-segment[data-v-2ec13df3] {
  height: 100%;
}
.jfc-tab-content .overview-container .score-section .score-segment[data-v-2ec13df3]:last-child {
  border-radius: 0 4px 4px 0;
}
.jfc-tab-content .overview-container .score-section .score-details[data-v-2ec13df3] {
  display: flex;
  gap: 8px;
  position: absolute;
  padding-top: 6px;
}
.jfc-tab-content .overview-container .score-section .score-details .score-label[data-v-2ec13df3] {
  display: flex;
  align-items: center;
  gap: 4px;
  font: var(--editor-ui-b3-regular);
  font-size: 10px;
  line-height: 18px;
  color: var(--asphalt40);
}
.jfc-tab-content .overview-container .score-section .score-details .score-label .dot[data-v-2ec13df3] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.jfc-tab-content .overview-container .overview-container[data-v-2ec13df3] {
  padding: 24px 0;
  border-bottom: 1px solid var(--asphalt80);
}
.title[data-v-2ec13df3] {
  font: var(--editor-ui-b2-semibold);
  margin-bottom: 16px;
}
.list[data-v-2ec13df3] {
  background-color: var(--asphalt90);
  border-radius: 4px;
  padding: 12px;
}
.list-item[data-v-2ec13df3] {
  display: flex;
  gap: 12px;
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt30);
  margin-bottom: 4px;
}
.list-item svg[data-v-2ec13df3] {
  flex-shrink: 0;
  color: var(--asphalt40);
}
.accordion .accordion-title[data-v-2ec13df3] {
  display: flex;
  justify-content: space-between;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--asphalt80);
  cursor: pointer;
  color: var(--asphalt30);
  font: var(--editor-ui-b2-semibold);
}
.accordion .accordion-title.open[data-v-2ec13df3] {
  border: none;
  color: var(--asphalt15);
}
.accordion .accordion-title[data-v-2ec13df3]:hover {
  color: var(--asphalt20);
}
.accordion .accordion-title svg[data-v-2ec13df3] {
  width: 24px;
  height: 24px;
  color: var(--asphalt40);
}
.accordion .accordion-body[data-v-2ec13df3] {
  font: var(--editor-ui-b2-regular);
}
.accordion .accordion-body > div[data-v-2ec13df3]:nth-child(2) {
  padding-top: 16px;
}
.job-description-container[data-v-2ec13df3] {
  display: flex;
  flex-direction: column;
  font: var(--editor-ui-b2-regular);
  color: var(--asphalt40);
  gap: 24px;
}
.job-description-container .job-title-and-description[data-v-2ec13df3] {
  display: flex;
  gap: 24px;
}
.job-description-container .job-title-and-description .text-box[data-v-2ec13df3] {
  flex: 1;
}
.job-description-container .text-box[data-v-2ec13df3] {
  padding: 14px 16px;
  border: 1px solid var(--asphalt80);
  border-radius: 4px;
  white-space: pre-wrap;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/portfolioEditor/modals/caseStudyGenerator/components/AILoader.vue?vue&type=style&index=0&id=013cfebe&scoped=true&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.loader-container[data-v-013cfebe] {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--asphalt100);
  padding: 24px;
}
.loader-container .middle-content[data-v-013cfebe] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
}
.loader-container .loading-state[data-v-013cfebe] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 310px;
}
.loader-container .error-text-wrapper .error-message[data-v-013cfebe] {
  color: var(--rose50);
  font: var(--ai-ui-h3);
  line-height: 30.741px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.loader-container .error-text-wrapper .error-message svg[data-v-013cfebe] {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  color: var(--rose50);
}
.loader-container .loading-step[data-v-013cfebe] {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: var(--ai-ui-h3);
  color: var(--asphalt50);
  background: transparent;
  transition: transform 1s ease;
}
.loader-container .loading-step.step-1 .step-text[data-v-013cfebe] {
  color: var(--asphalt10);
}
.loader-container .loading-step.step-1 svg[data-v-013cfebe] {
  color: var(--asphalt10);
}
.loader-container .step-text[data-v-013cfebe],
.loader-container svg[data-v-013cfebe] {
  transition: color 1s ease-in-out;
  color: var(--asphalt50);
}
.loader-container .disclaimer-wrapper[data-v-013cfebe] {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.loader-container .disclaimer-wrapper .error-buttons-wrapper[data-v-013cfebe] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.loader-container .disclaimer-wrapper .text[data-v-013cfebe] {
  text-align: center;
  color: var(--asphalt40);
  font: var(--editor-ui-b3-regular);
}
.overlap-fade-enter-active[data-v-013cfebe] {
  transition: transform 1s ease, opacity 1s ease;
}
.overlap-fade-enter-from[data-v-013cfebe] {
  transform: translateY(100%);
  opacity: 0;
}
.overlap-fade-enter-to[data-v-013cfebe] {
  transform: translateY(0);
  opacity: 1;
}
.overlap-fade-leave-active[data-v-013cfebe] {
  position: absolute;
  width: 100%;
  z-index: 2;
  background: transparent !important;
  transition: opacity 1s ease !important;
  transition-property: opacity;
}
.overlap-fade-leave-from[data-v-013cfebe] {
  opacity: 1;
  transform: none;
}
.overlap-fade-leave-to[data-v-013cfebe] {
  opacity: 0;
  transform: none;
}
.overlap-fade-move[data-v-013cfebe] {
  transition: transform 1s ease;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/common/AlertMessage.vue?vue&type=style&index=0&id=168a67ff&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.update-status-alert[data-v-168a67ff] {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 107;
  transform: translate(-50%, 66px);
  min-height: 56px;
  max-width: 400px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: var(--asphalt95);
  border: 1px solid var(--asphalt90);
  border-radius: 4px;
  transition-property: opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  transition-delay: unset;
  cursor: pointer;
  box-shadow: var(--shadow-light-small);
}
.update-status-alert.success .info-icon[data-v-168a67ff], .update-status-alert.payment .info-icon[data-v-168a67ff] {
  color: var(--success50);
}
.update-status-alert.alert .info-icon[data-v-168a67ff] {
  color: var(--error50);
}
.update-status-alert.narrow[data-v-168a67ff] {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 12px 7px 8px;
}
.update-status-alert .info-icon[data-v-168a67ff] {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: var(--asphalt10);
}
.update-status-alert .info-icon svg[data-v-168a67ff] {
  width: 24px;
  height: 24px;
}
.update-status-alert .close-icon[data-v-168a67ff] {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  color: var(--asphalt40);
}
.update-status-alert .close-icon svg[data-v-168a67ff] {
  width: 20px;
  height: 20px;
}
.update-status-alert .alert-message-container[data-v-168a67ff] {
  flex-direction: row;
  display: flex;
  align-items: center;
}
.update-status-alert .alert-message-container .alert-message[data-v-168a67ff] {
  color: var(--asphalt10);
  font: var(--editor-ui-b2-regular);
}
.update-status-alert .alert-button[data-v-168a67ff] {
  width: 73px;
  height: 36px;
  border: none;
  background: transparent;
  font: var(--editor-ui-l-semibold);
  color: var(--asphalt80);
  text-transform: uppercase;
  cursor: pointer;
}
.update-status-alert .link[data-v-168a67ff] {
  font-weight: bold;
  cursor: pointer;
}
.update-status-alert .ufo-cta[data-v-168a67ff] {
  align-self: flex-start;
  margin-left: 36px;
  margin-top: 7.5px;
}
.update-status-alert.alert-enter-active[data-v-168a67ff], .update-status-alert.alert-leave-active[data-v-168a67ff] {
  transform: translate(-50%, 66px);
}
.update-status-alert.alert-enter-from[data-v-168a67ff], .update-status-alert.alert-leave-to[data-v-168a67ff] {
  transform: translate(-50%, 12px);
  opacity: 0;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/jobFitChecker/JFCLayout.vue?vue&type=style&index=0&id=c0b9c4ce&scoped=true&lang=scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.jfc-wrapper .loader-container[data-v-c0b9c4ce] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: var(--asphalt100);
}
.jfc-wrapper .loader-container[data-v-c0b9c4ce] .loading-state {
  width: 450px;
}
.jfc-wrapper .jfc-page-content[data-v-c0b9c4ce] {
  min-width: 1140px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 430px 0 0;
}
.jfc-wrapper .jfc-sidebar[data-v-c0b9c4ce] {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 430px;
  color: var(--asphalt10);
  background: var(--asphalt95);
  box-shadow: -15px 15px 15px -10px rgba(71, 84, 97, 0.16), 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
  margin: 60px 0 0 0;
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-title[data-v-c0b9c4ce] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 24px;
  font: var(--editor-ui-b1-semibold);
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-content[data-v-c0b9c4ce] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  scrollbar-color: #888 transparent;
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-content .job-description-content[data-v-c0b9c4ce] {
  padding: 12px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-content .job-description-content .title[data-v-c0b9c4ce] {
  font: var(--editor-ui-b1-regular);
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-content .job-description-content .job-description-form[data-v-c0b9c4ce] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-content .job-description-content .job-description-form .inputs[data-v-c0b9c4ce] {
  display: flex;
  gap: 24px;
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-actions[data-v-c0b9c4ce] {
  display: flex;
  gap: 24px;
  padding: 24px;
  position: fixed;
  bottom: 0;
  width: inherit;
  flex-shrink: 0;
  background: var(--asphalt95);
}
.jfc-wrapper .jfc-sidebar .jfc-sidebar-actions[data-v-c0b9c4ce] button.ufo-cta {
  width: 100%;
}
.jfc-wrapper .jfc-sidebar.sidebar-full[data-v-c0b9c4ce] {
  width: 100%;
  overflow-y: auto;
}
.jfc-wrapper .jfc-sidebar.sidebar-full[data-v-c0b9c4ce]::-webkit-scrollbar {
  display: none;
}
.jfc-wrapper .jfc-sidebar.sidebar-full[data-v-c0b9c4ce] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results[data-v-c0b9c4ce] {
  padding: 172px 0;
  width: 776px;
  margin: 0 auto;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .page-title[data-v-c0b9c4ce] {
  font: var(--editor-ui-h3);
  color: var(--asphalt10);
  margin-bottom: 24px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results[data-v-c0b9c4ce] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item[data-v-c0b9c4ce] {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--asphalt80);
  border-radius: 8px;
  font: var(--editor-ui-b1-regular);
  color: var(--asphalt40);
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .left[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .center[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .right[data-v-c0b9c4ce] {
  display: flex;
  flex: 1;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .left[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .center[data-v-c0b9c4ce] {
  flex-direction: column;
  gap: 4px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .left[data-v-c0b9c4ce] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .right[data-v-c0b9c4ce] {
  gap: 12px;
  justify-content: flex-end;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .right[data-v-c0b9c4ce] >  .ufo-cta.small {
  padding: 0;
  width: 36px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .right[data-v-c0b9c4ce] >  .ufo-cta.small:nth-child(2) {
  padding: 0 16px;
  width: auto;
  height: 38px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .job-title[data-v-c0b9c4ce] {
  color: var(--asphalt10);
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .job-title[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .job-company[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .portfolio-name[data-v-c0b9c4ce] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .job-company[data-v-c0b9c4ce],
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .portfolio-name[data-v-c0b9c4ce] {
  font: var(--editor-ui-b3-regular);
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .score-content[data-v-c0b9c4ce] {
  display: flex;
  gap: 12px;
  align-items: center;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .score-content .score-text[data-v-c0b9c4ce] {
  color: var(--asphalt15);
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .score-content .score-bar[data-v-c0b9c4ce] {
  width: 100%;
  height: 12px;
  border: 1px solid var(--asphalt80);
  border-radius: 6px;
}
.jfc-wrapper .jfc-sidebar.sidebar-full .previous-results .results .result-item .score-content .score-bar .score-fill[data-v-c0b9c4ce] {
  height: 100%;
  background: var(--volt);
  border-radius: 4px;
}
[data-v-c0b9c4ce] input {
  width: 100%;
}
[data-v-c0b9c4ce] .generator-prompt-input-container .input-text-box {
  min-height: 250px;
  max-height: 400px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/scripts/view/jobFitChecker/JFCWrapper.vue?vue&type=style&index=0&id=56713bb4&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.jfc-wrapper .ufo-sec--navigation .sticky-header.sticked {
  top: 60px;
}

/*# sourceMappingURL=styles.css.map*/