editor.css

/*
body {
	// WordPress adds these automatically
	--wp--style--global--content-size: 1560px;
	--wp--style--global--wide-size: 1560px;

	// Font Families
	--font-sofia-pro: sofia-pro, Helvetica, Arial, sans-serif;
	--font-abhaya-libre: Abhaya Libre, serif;

	// Colors
	--color-purple: #9069ac;
	--color-purple-light: #e6c8ff;
	--color-purple-lightest: #faf4ff;

	--color-blue: #0957de;
	--color-blue-light: #c9dcfd;
	--color-blue-lightest: #f4f8ff;

	--color-white: #ffffff;
	--color-dark-purple: #68626e;
	--color-black: #0e0d0d;

	--color-gray-10: #fbfbfb;
	--color-gray-8: #f1f1f1;
	--color-gray-6: #e7e7e7;
	--color-gray-4: #e3e3e3;
	--color-gray-2: #3e3e3e;

	--color-text-primary: #0e0d0d;
	--color-text-secondary: #68626e;

	--color-text-purple: #9069ac;
	--color-text-blue: #0957de;
	--color-black-light: #e3e3e3;
	--color-black-lightest: #fbfbfb;

	// Font Sizes
	--font-size-body: 16px;
	--font-size-body-mobile: 18px;

	--font-size-large: 18px;
	--font-size-regular: 16px;
	--font-size-small: 14px;
	--font-size-x-small: 12px;

	--font-size-h1: 80px;
	--font-size-h2: 60px;
	--font-size-h3: 32px;
	--font-size-h4: 28px;
	--font-size-h5: 18px;
	--font-size-h6: 14px;

	--font-size-h1-mobile: 36px;
	--font-size-h2-mobile: 32px;
	--font-size-h3-mobile: 24px;
	--font-size-h4-mobile: 18px;
	--font-size-h5-mobile: 18px;
	--font-size-h6-mobile: 14px;

	--font-size-button: 16px;
	--font-size-button-mobile: 16px;
}

// Figma Variables -- Do not use!
// If any of these variables are used in another SCSS file, replace it as dictated below.
body.figma-variables {
	// Colors - Figma variables (aliases)
	--grey: var( --color-gray_4 );
	--white: var( --color-white );
	--black: var( --color-black );
	--secondary-text: var( --color-dark-purple );
	--bg: var( --color-gray-10 );
	--primary-violet: var( --color-purple );
	--primary-blue: var( --color-blue );

	// Font Sizes - Figma variables (aliases)
	--button: var( --font-size-button );
	--h1: var( --font-size-h1 );
	--h2: var( --font-size-h2 );
	--h3: var( --font-size-h3 );
	--h4: var( --font-size-h4 );
	--h5: var( --font-size-h5 );
	--mobile---h1: var( --font-size-h1-mobile );
	--mobile---h2: var( --font-size-h2-mobile );
	--mobile---h3: var( --font-size-h3-mobile );
	--mobile---h4: var( --font-size-h4-mobile );
	--mobile---h4-light: var( --font-size-h4-mobile );
	--mobile---h3-light--uppercase: var( --font-size-h3-mobile );
	--body--light: var( --font-size-body );
	--body--light--uppercase: var( --font-size-body );
	--body--medium: var( --font-size-body );
	--small--light--uppercase: var( --font-size-small );
	--small--light: var( --font-size-small );
	--small-2--medium: var( --font-size-x-small );
	--small-2--light: var( --font-size-x-small );

	// (These didn't exist in Figma. I added them for consistency.)
	--h6: var( --font-size-h6 );
	--body--mobile: var( --font-size-large );
	--mobile---h5: var( --font-size-h5-mobile );
	--mobile---h6: var( --font-size-h6-mobile );
}
*/
body {
  --border-1px-width: 1px;
  --border-2px-width: 2px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  body {
    --border-1px-width: 1.5px;
    --border-2px-width: 3px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    --border-1px-width: 2px;
    --border-2px-width: 4px;
  }
}

/*
Custom search replace
https://css-tricks.com/snippets/sass/str-replace-function/
*/
/*
@mixin site-content-width() {
	margin-left: auto;
	margin-right: auto;

	@media ( min-width: $site_content_width ) {
		// max-width: $site_content_width;
		max-width: var(--wp--style--global--content-size, $site_content_width);
	}

	// Keep the main content at the correct ratio of total width to match the design
	// 81.25% = 1560px / 1920px
	// 83.33% = 1600px / 1920px

	// @media ( min-width: $break_above_desktop ) and ( max-width: $design_width ) {
	// 	width: clamp( $break_above_desktop, 85%, $design_width );
	//
	// 	body .editor-styles-wrapper & {
	// 		width: auto !important; // Do not clamp in editor
	// 	}
	// }

}
*/
/*
// For the property "border-color", the border will inherit the background color of the current element.
@mixin match_background_color( $property ) {
	&.has-background {
		&.has-purple-background-color          { $property: var( --wp--preset--color--purple          ); }
		&.has-light-purple-background-color    { $property: var( --wp--preset--color--light-purple    ); }
		&.has-lightest-purple-background-color { $property: var( --wp--preset--color--lightest-purple ); }
		&.has-blue-background-color            { $property: var( --wp--preset--color--blue            ); }
		&.has-light-blue-background-color      { $property: var( --wp--preset--color--light-blue      ); }
		&.has-lightest-blue-background-color   { $property: var( --wp--preset--color--lightest-blue   ); }
		&.has-gray-10-background-color         { $property: var( --wp--preset--color--gray-10         ); }
		&.has-gray-8-background-color          { $property: var( --wp--preset--color--gray-8          ); }
		&.has-gray-6-background-color          { $property: var( --wp--preset--color--gray-6          ); }
		&.has-gray-4-background-color          { $property: var( --wp--preset--color--gray-4          ); }
		&.has-gray-2-background-color          { $property: var( --wp--preset--color--gray-2          ); }
		&.has-dark-purple-background-color     { $property: var( --wp--preset--color--dark-purple     ); }
		&.has-white-background-color           { $property: var( --wp--preset--color--white           ); }
		&.has-black-background-color           { $property: var( --wp--preset--color--black           ); }
	}
}
*/
/*
CSS Reset
*/
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body, ol, ul {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

/*
Reusable formats
*/
body.mce-content-body {
  color: #0e0d0d;
  font-family: sofia-pro, Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 16px;
  margin: 10px !important;
}
@media (max-width: 480.1px) {
  body.mce-content-body {
    line-height: 1.5;
  }
}
body.mce-content-body h1,
body.mce-content-body h2 {
  font-size: 60px;
  line-height: 1.25;
}
body.mce-content-body h3 {
  font-size: 32px;
  line-height: 1.25;
}
body.mce-content-body h4 {
  font-size: 28px;
  line-height: 1.25;
}
body.mce-content-body h5 {
  font-size: 18px;
  line-height: 1.25;
}
body.mce-content-body h6 {
  font-size: 14px;
  line-height: 1.25;
}
body.mce-content-body h1,
body.mce-content-body h2,
body.mce-content-body h3,
body.mce-content-body h4,
body.mce-content-body h5,
body.mce-content-body h6 {
  font-weight: 500;
  margin: 0 0 15px;
}
body.mce-content-body p, body.mce-content-body ul, body.mce-content-body ol {
  margin: 0 0 15px;
}
@media (max-width: 1200px) {
  body.mce-content-body p, body.mce-content-body ul, body.mce-content-body ol {
    margin-bottom: 12px;
  }
}
body.mce-content-body strong {
  font-weight: 700;
}
body.mce-content-body a {
  color: inherit;
  text-decoration: underline;
}
body.mce-content-body a:hover {
  color: #9069ac;
}
body.mce-content-body a:has(.gcm-icon) {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  text-decoration: none;
}
body.mce-content-body a:has(.gcm-icon):hover {
  color: #0957de;
  text-decoration: underline;
}
body.mce-content-body a:has(.gcm-icon) .gcm-icon {
  display: block;
  height: 24px;
}
body.mce-content-body a:has(.gcm-icon) .gcm-icon .icon-frame {
  width: 14px;
  height: 14px;
  padding: 5px;
}
body.mce-content-body a:has(.gcm-icon) .gcm-icon .icon-frame svg {
  width: 20px;
  height: 20px;
  margin: -3px;
}
body.mce-content-body .font-sofia-pro {
  font-family: sofia-pro, Helvetica, Arial, sans-serif;
}
body.mce-content-body .text-color-purple {
  color: #9069ac;
}
body.mce-content-body .text-color-purple-light {
  color: #e6c8ff;
}
body.mce-content-body .text-color-purple-lightest {
  color: #faf4ff;
}
body.mce-content-body .text-color-blue {
  color: #0957de;
}
body.mce-content-body .text-color-blue-light {
  color: #c9dcfd;
}
body.mce-content-body .text-color-blue-lightest {
  color: #f4f8ff;
}
body.mce-content-body .text-color-black {
  color: #0e0d0d;
}
body.mce-content-body .text-color-black-light {
  color: #e3e3e3;
}
body.mce-content-body .text-color-black-lightest {
  color: #fbfbfb;
}
body.mce-content-body .text-color-white {
  color: #ffffff;
}
body.mce-content-body .text-lowercase {
  text-transform: lowercase;
}
body.mce-content-body .text-uppercase {
  text-transform: uppercase;
}
body.mce-content-body .text-sans-serif {
  font-family: sofia-pro, Helvetica, Arial, sans-serif;
}
body.mce-content-body .text-serif {
  font-family: "Abhaya Libre", serif;
}
body.mce-content-body .weight-light {
  font-weight: 300;
}
body.mce-content-body .weight-regular {
  font-weight: 400;
}
body.mce-content-body .weight-medium {
  font-weight: 500;
}
body.mce-content-body .weight-bold {
  font-weight: 700;
}
body.mce-content-body .heading-eyebrow-text {
  color: #0957de;
  font-weight: 300;
  text-transform: uppercase;
}
body.mce-content-body .heading-h1,
body.mce-content-body .heading-h2 {
  font-size: 60px;
  /*
  // Scale fonts between 1920px and 1200px
  @media ( min-width: $break_above_desktop ) and ( max-width: $break_at_large_desktop ) {
  	// 80px font size = 4.16vw on desktop
  	// (80 / 1920) * 100 = 4.16vw
  	$desktop_vw: calc( round( calc($desktop_px / $design_width) * 10000vw ) / 100 );
  	font-size: min( $desktop_px, $desktop_vw );
  }
  */
  line-height: 1.25;
}
@media (max-width: 1200px) {
  body.mce-content-body .heading-h1,
  body.mce-content-body .heading-h2 {
    font-size: 32px;
  }
}
body.mce-content-body .heading-h3 {
  font-size: 32px;
  /*
  // Scale fonts between 1920px and 1200px
  @media ( min-width: $break_above_desktop ) and ( max-width: $break_at_large_desktop ) {
  	// 80px font size = 4.16vw on desktop
  	// (80 / 1920) * 100 = 4.16vw
  	$desktop_vw: calc( round( calc($desktop_px / $design_width) * 10000vw ) / 100 );
  	font-size: min( $desktop_px, $desktop_vw );
  }
  */
  line-height: 1.25;
}
@media (max-width: 1200px) {
  body.mce-content-body .heading-h3 {
    font-size: 24px;
  }
}
body.mce-content-body .heading-h4 {
  font-size: 28px;
  /*
  // Scale fonts between 1920px and 1200px
  @media ( min-width: $break_above_desktop ) and ( max-width: $break_at_large_desktop ) {
  	// 80px font size = 4.16vw on desktop
  	// (80 / 1920) * 100 = 4.16vw
  	$desktop_vw: calc( round( calc($desktop_px / $design_width) * 10000vw ) / 100 );
  	font-size: min( $desktop_px, $desktop_vw );
  }
  */
  line-height: 1.25;
}
@media (max-width: 1200px) {
  body.mce-content-body .heading-h4 {
    font-size: 18px;
  }
}
body.mce-content-body .heading-h5 {
  font-size: 18px;
  line-height: 1.25;
}
body.mce-content-body .heading-h6 {
  font-size: 14px;
  line-height: 1.25;
}
body.mce-content-body .heading-page-title {
  font-size: 60px;
  /*
  // Scale fonts between 1920px and 1200px
  @media ( min-width: $break_above_desktop ) and ( max-width: $break_at_large_desktop ) {
  	// 80px font size = 4.16vw on desktop
  	// (80 / 1920) * 100 = 4.16vw
  	$desktop_vw: calc( round( calc($desktop_px / $design_width) * 10000vw ) / 100 );
  	font-size: min( $desktop_px, $desktop_vw );
  }
  */
  line-height: 1.25;
}
@media (max-width: 1200px) {
  body.mce-content-body .heading-page-title {
    font-size: 32px;
  }
}
@media (min-width: 1920.1px) {
  body.mce-content-body .heading-page-title {
    font-size: 80px;
  }
}

/* Buttons! */
.button {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  padding: 18px 48px;
}
.button:focus-within {
  outline: 3px solid #9069ac;
  outline-color: inherit;
}

.button-text {
  padding-left: 40px;
  padding-right: 40px;
}

.button-small {
  padding: 4px 16px 7px;
}

.button {
  transition: all 0.2s ease-in-out;
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}
.button:hover {
  color: #9069ac;
  border: 1px solid #9069ac;
  background: #faf4ff;
}
.button.button-secondary {
  color: #9069ac;
  border: 1px solid #9069ac;
  background: #faf4ff;
}
.button.button-secondary:hover {
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}
.button.button-outline {
  background: transparent;
  color: #9069ac;
  border: 1px solid #9069ac;
}
.button.button-outline:hover {
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}
.button.button-text {
  background: transparent;
  border: 1px solid transparent;
  color: #9069ac;
}
.button.button-text:hover {
  background: transparent;
  color: #9069ac;
  border: 1px solid #9069ac;
}
.button.button-blue {
  color: #ffffff;
  border: 1px solid #0957de;
  background: #0957de;
}
.button.button-blue:hover {
  color: #0957de;
  border: 1px solid #0957de;
  background: #f4f8ff;
}
.button.button-blue.button-secondary {
  color: #0957de;
  border: 1px solid #0957de;
  background: #f4f8ff;
}
.button.button-blue.button-secondary:hover {
  color: #ffffff;
  border: 1px solid #0957de;
  background: #0957de;
}
.button.button-blue.button-outline {
  background: transparent;
  color: #0957de;
  border: 1px solid #0957de;
}
.button.button-blue.button-outline:hover {
  color: #ffffff;
  border: 1px solid #0957de;
  background: #0957de;
}
.button.button-blue.button-text {
  background: transparent;
  border: 1px solid transparent;
  color: #0957de;
}
.button.button-blue.button-text:hover {
  background: transparent;
  color: #0957de;
  border: 1px solid #0957de;
}
.button.button-black {
  color: #ffffff;
  border: 1px solid #0e0d0d;
  background: #0e0d0d;
}
.button.button-black:hover {
  color: #0e0d0d;
  border: 1px solid #0e0d0d;
  background: #fbfbfb;
}
.button.button-black.button-secondary {
  color: #0e0d0d;
  border: 1px solid #0e0d0d;
  background: #fbfbfb;
}
.button.button-black.button-secondary:hover {
  color: #ffffff;
  border: 1px solid #0e0d0d;
  background: #0e0d0d;
}
.button.button-black.button-outline {
  background: transparent;
  color: #0e0d0d;
  border: 1px solid #0e0d0d;
}
.button.button-black.button-outline:hover {
  color: #ffffff;
  border: 1px solid #0e0d0d;
  background: #0e0d0d;
}
.button.button-black.button-text {
  background: transparent;
  border: 1px solid transparent;
  color: #0e0d0d;
}
.button.button-black.button-text:hover {
  background: transparent;
  color: #0e0d0d;
  border: 1px solid #0e0d0d;
}
.button.button-white {
  color: #ffffff;
  color: #0e0d0d;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.button.button-white:hover {
  color: #0e0d0d;
  border: 1px solid #ffffff;
  background: #e3e3e3;
}
.button.button-white.button-secondary {
  color: #ffffff;
  color: #0e0d0d;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.button.button-white.button-secondary:hover {
  color: #0e0d0d;
  border: 1px solid #ffffff;
  background: #e3e3e3;
}
.button.button-white.button-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  background: #0e0d0d;
}
.button.button-white.button-outline:hover {
  color: #ffffff;
  color: #0e0d0d;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.button.button-white.button-text {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
}
.button.button-white.button-text:hover {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  background: #0e0d0d;
}

.alm-btn-wrap .button.button-secondary.alm-load-more-btn {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  padding: 18px 48px;
  color: #9069ac;
  border: 1px solid #9069ac;
  background: #faf4ff;
  box-sizing: content-box;
  height: auto;
}
.alm-btn-wrap .button.button-secondary.alm-load-more-btn:hover {
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}
.alm-btn-wrap .button.button-secondary.alm-load-more-btn.loading {
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}
.alm-btn-wrap .button.button-secondary.alm-load-more-btn.loading::before {
  display: none !important;
}
.alm-btn-wrap .button.button-secondary.alm-load-more-btn.done {
  display: none !important;
}

/* form fields */
input[type=text],
input[type=email],
input[type=password],
input[type=phone],
input[type=date],
input[type=number],
input[type=search],
textarea,
select {
  background-color: transparent;
  border-radius: 8px;
  border: 1px solid #D3D3D3;
  font-size: 18px;
  line-height: 30px;
  padding: 12px 16px;
  font-weight: 500;
  color: #000;
}
input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=password]:focus-visible,
input[type=phone]:focus-visible,
input[type=date]:focus-visible,
input[type=number]:focus-visible,
input[type=search]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  background-color: #fff;
}

textarea {
  line-height: 22px;
  padding-top: 16px;
  padding-bottom: 16px;
}

select {
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='%23d3d3d3' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 12px) 50%;
  padding-right: 40px;
}

select:hover,
select:focus-within {
  border-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

select:focus-within {
  border-color: #9069ac;
}

input[type=checkbox],
input[type=radio] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
}

input[type=radio] {
  border-radius: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='white' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
}
input[type=radio]:hover, input[type=radio]:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23FAF5FF' stroke='%239069AC'/%3E%3C/svg%3E%0A");
}
input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23FAF5FF' stroke='%239069AC'/%3E%3Ccircle cx='10' cy='10' r='5.5' fill='%239069AC' stroke='%239069AC'/%3E%3C/svg%3E%0A");
}

input[type=checkbox] {
  border-radius: 3px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='4.5' fill='white' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
}
input[type=checkbox]:hover, input[type=checkbox]:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='4.5' fill='%23FAF5FF' stroke='%239069AC'/%3E%3C/svg%3E%0A");
}
input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.5' fill='%23FAF5FF' stroke='%239069AC'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='2.5' fill='%239069AC' stroke='%239069AC'/%3E%3C/svg%3E%0A");
}

input[type=button],
input[type=submit],
button {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  padding: 18px 48px;
  border-radius: 100px !important;
}
input[type=button]:focus-within,
input[type=submit]:focus-within,
button:focus-within {
  outline: 3px solid #9069ac;
  outline-color: inherit;
}
input[type=button]:not(.button),
input[type=submit]:not(.button),
button:not(.button) {
  color: #9069ac;
  border: 1px solid #9069ac;
  background: #faf4ff;
}
input[type=button]:not(.button):hover,
input[type=submit]:not(.button):hover,
button:not(.button):hover {
  color: #ffffff;
  border: 1px solid #9069ac;
  background: #9069ac;
}

/*
Icon type: Circle (type-circle)
*/
.gcm-icon {
  display: inline-block;
}

.gcm-icon .icon-frame {
  display: inline-block;
}

.gcm-icon svg {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  aspect-ratio: 1/1;
}

/*
Icon frame styles
*/
.gcm-icon.type-circle .icon-frame {
  padding: 15px;
  border-radius: 100%;
  box-sizing: content-box;
}

.gcm-icon.type-circle .icon-frame {
  box-shadow: inset 0 0 0 1px #9069ac;
  background-color: #faf4ff;
}

.gcm-icon.type-circle.color-blue .icon-frame {
  box-shadow: inset 0 0 0 1px #0957de;
  background-color: #f4f8ff;
}

.gcm-icon.type-circle.color-black .icon-frame {
  box-shadow: inset 0 0 0 1px #0e0d0d;
  background-color: #fbfbfb;
}

/*
Icon sizes

	From figma:
	14 (header location icon)
	18 (testimonial review stars)
	24 [14+5] (learn more arrow, circled)
	32 [18+7] (accordion dropdown, circled)
	38 [20+9] (footer location icon, circled)
	47 [25+11] (hero testimonial icon, circled)
	60 (testimonial quote icon)
	80 [44+18] (hero images, circled)

	Icon field group:
	https://greatcitymedical.radgh.com/wp-admin/post.php?post=4211&action=edit

*/
.gcm-icon.size-tiny svg {
  width: 16px;
}
.gcm-icon.size-tiny.type-circle .icon-frame {
  padding: 7px;
}
.gcm-icon.size-x-small svg {
  width: 18px;
}
.gcm-icon.size-x-small.type-circle .icon-frame {
  padding: 7px;
}
.gcm-icon.size-small svg {
  width: 20px;
}
.gcm-icon.size-small.type-circle .icon-frame {
  padding: 9px;
}
.gcm-icon.size-medium svg {
  width: 31px;
}
.gcm-icon.size-medium.type-circle .icon-frame {
  padding: 8px;
}
.gcm-icon.size-large svg {
  width: 32px;
}
.gcm-icon.size-large.type-circle .icon-frame {
  padding: 14px;
}
.gcm-icon.size-x-large svg {
  width: 44px;
}
.gcm-icon.size-x-large.type-circle .icon-frame {
  padding: 18px;
}

/*
[gcm_icon_list]
*/
table.gcm-icon-list th,
table.gcm-icon-list td {
  text-align: left;
  vertical-align: top;
  padding: 5px;
}

table.gcm-icon-list tr th:first-child em {
  font-weight: 300;
}

table.gcm-icon-list tr > * {
  width: 120px;
  text-align: center;
}

table.gcm-icon-list tr > * span {
  display: inline-block;
}

table.gcm-icon-list tr > :first-child {
  width: 200px;
}

table.gcm-icon-list {
  position: relative;
}

table.gcm-icon-list thead {
  position: sticky;
  top: 0px;
  background: #fff;
}

body.admin-bar table.gcm-icon-list thead {
  top: 32px;
}

.gcm-icon-list .icon-wrap {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 80px;
}

.gcm-icon-list input[type=text] {
  width: 100%;
  font-size: 10px;
  padding: 3px 0;
}

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