@charset "UTF-8";

/* ************************************************** */
/* ********************** FONTS ********************* */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@400;700&display=swap');
.mplus2-regular {
    font-family: "M PLUS 2", sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
}
.mplus2-bold {
    font-family: "M PLUS 2", sans-serif;
    font-weight: 700;
    font-optical-sizing: auto;
    font-style: normal;
}
@font-face {
    font-family: "Graphik-Regular";
    src: url("//cdn1.toonboom.com/fonts/Graphik/Graphik-Regular.woff2") format("woff2"), url("//cdn1.toonboom.com/fonts/Graphik/Graphik-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Graphik-Medium";
    src: url("//cdn1.toonboom.com/fonts/Graphik/Graphik-Medium.woff2") format("woff2"), url("//cdn1.toonboom.com/fonts/Graphik/Graphik-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GeneralSans-Regular";
    src: url("//cdn1.toonboom.com/fonts/GeneralSans/GeneralSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GeneralSans-SemiBold";
    src: url("//cdn1.toonboom.com/fonts/GeneralSans/GeneralSans-Semibold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GeneralSans-Bold";
    src: url("//cdn1.toonboom.com/fonts/GeneralSans/GeneralSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ************************************************** */


/* ************************************************** */
/* **************** NORMALIZE / RESET *************** */

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
b, strong { font-weight: bolder }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; max-width: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [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 { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
/* ************************************************** */


/* ************************************************** */
/* ********************** BASE ********************** */

:root {
    --color-default:            #22272E;
    --color-gray-darker:        #45484D;
    --color-gray-dark:          #5A5D61;
    --color-gray:               #A1A1AA;
    --color-gray-light:         #D4D4D8;
    --color-gray-lighter:       #ECEDEF;
    --color-gray-lightest:      #F6F8FA;
    --color-border:             #D4D4D8;
    --color-border-light:       #E7E7E8;
    --color-link:               #006FF9;
    --color-link-light:         #E5EFFF;
    --color-link-dark:          #00139D;

    --color-harmony:            #00B9A7;
    --color-harmony-dark:       #009381;
    --color-storyboardpro:      #7E77E9;
    --color-storyboardpro-dark: #5851C3;

    --color-info:               #1B50F7;
    --color-info-light:         #c3d1fd;
    --color-info-lighter:       #e0e7fe;
    --color-success:            #84CC16;
    --color-success-light:      #b3ed5b;
    --color-success-lighter:    #eafad2;
    --color-warning:            #F97316;
    --color-warning-light:      #fdd9bf;
    --color-warning-lighter:    #feeadd;
    --color-danger:             #DC2626;
    --color-danger-light:       #f4bbbb;
    --color-danger-lighter:     #f8d6d6;

    --ff-body:                   "Graphik-Regular";
    --ff-body-medium:            "Graphik-Medium";
    --ff-heading:                "GeneralSans-Bold";
    --ff-heading-normal:         "GeneralSans-Regular";
    --ff-heading-semibold:       "GeneralSans-SemiBold";
    --ff-ja:                     "M PLUS 2";

    --fs-default:                16px;
    --fs-sm:                     14.63px;
    --fs-xs:                     13.25px;
    --fs-xxs:                    12.25px;

    --lh-default:                1.6;
    --lh-sm:                     1.5;
    --lh-xs:                     1.4;
    --lh-xxs:                    1.1;

    --bp-min-sm:                 640px;
    --bp-min-md:                 768px;
    --bp-min-lg:                 1024px
    --bp-min-xl:                 1280px;
    --bp-min-2xl:                1536px;
}

::-webkit-input-placeholder         { color: var(--color-gray) !important; }
::-moz-placeholder                  { color: var(--color-gray) !important; }
:-ms-input-placeholder              { color: var(--color-gray) !important; }
::-ms-input-placeholder             { color: var(--color-gray) !important; }
::placeholder                       { color: var(--color-gray) !important; }

:focus::-webkit-input-placeholder   { color: transparent !important; }
:focus::-moz-placeholder            { color: transparent !important; }
:focus:-ms-input-placeholder        { color: transparent !important; }
:focus::-ms-input-placeholder       { color: transparent !important; }
:focus::placeholder                 { color: transparent !important; }

:focus-visible { outline: var(--color-link) auto 1px; }
/* ************************************************** */


/* ************************************************** */
/* ******************** UTILITIES ******************* */

.color-white                { color: #FFFFFF !important; }
.color-default              { color: var(--color-default) !important; }
.color-gray-darker          { color: var(--color-gray-darker) !important; }
.color-gray-dark            { color: var(--color-gray-dark) !important; }
.color-gray                 { color: var(--color-gray) !important; }
.color-gray-light           { color: var(--color-gray-light) !important; }
.color-gray-lighter         { color: var(--color-gray-lighter) !important; }
.color-gray-lightest        { color: var(--color-gray-lightest) !important; }
.color-border               { color: var(--color-border) !important; }
.color-border-light         { color: var(--color-border-light) !important; }
.color-link                 { color: var(--color-link) !important; }
.color-link-light           { color: var(--color-link-light) !important; }
.color-link-dark            { color: var(--color-link-dark) !important; }
.color-info                 { color: var(--color-info) !important; }
.color-info-light           { color: var(--color-info-light) !important; }
.color-info-lighter         { color: var(--color-info-lighter) !important; }
.color-success              { color: var(--color-success) !important; }
.color-success-light        { color: var(--color-success-light) !important; }
.color-success-lighter      { color: var(--color-success-lighter) !important; }
.color-warning              { color: var(--color-warning) !important; }
.color-warning-light        { color: var(--color-warning-light) !important; }
.color-warning-lighter      { color: var(--color-warning-lighter) !important; }
.color-danger               { color: var(--color-danger) !important; }
.color-danger-light         { color: var(--color-danger-light) !important; }
.color-danger-lighter       { color: var(--color-danger-lighter) !important; }
.color-harmony              { color: var(--color-harmony) !important; }
.color-harmony-dark         { color: var(--color-harmony-dark) !important; }
.color-storyboardpro        { color: var(--color-storyboardpro) !important; }
.color-storyboardpro-dark   { color: var(--color-storyboardpro-dark) !important; }

.bg-white                   { background-color: #FFFFFF !important; }
.bg-default                 { background-color: var(--color-default) !important; }
.bg-gray-darker             { background-color: var(--color-gray-darker) !important; }
.bg-gray-dark               { background-color: var(--color-gray-dark) !important; }
.bg-gray                    { background-color: var(--color-gray) !important; }
.bg-gray-light              { background-color: var(--color-gray-light) !important; }
.bg-gray-lighter            { background-color: var(--color-gray-lighter) !important; }
.bg-gray-lightest           { background-color: var(--color-gray-lightest) !important; }
.bg-border                  { background-color: var(--color-border) !important; }
.bg-border-light            { background-color: var(--color-border-light) !important; }
.bg-link                    { background-color: var(--color-link) !important; }
.bg-link-light              { background-color: var(--color-link-light) !important; }
.bg-link-dark               { background-color: var(--color-link-dark) !important; }
.bg-info                    { background-color: var(--color-info) !important; }
.bg-info-light              { background-color: var(--color-info-light) !important; }
.bg-info-lighter            { background-color: var(--color-info-lighter) !important; }
.bg-success                 { background-color: var(--color-success) !important; }
.bg-success-light           { background-color: var(--color-success-light) !important; }
.bg-success-lighter         { background-color: var(--color-success-lighter) !important; }
.bg-warning                 { background-color: var(--color-warning) !important; }
.bg-warning-light           { background-color: var(--color-warning-light) !important; }
.bg-warning-lighter         { background-color: var(--color-warning-lighter) !important; }
.bg-danger                  { background-color: var(--color-danger) !important; }
.bg-danger-light            { background-color: var(--color-danger-light) !important; }
.bg-danger-lighter          { background-color: var(--color-danger-lighter) !important; }
.bg-harmony                 { background-color: var(--color-harmony) !important; }
.bg-harmony-dark            { background-color: var(--color-harmony-dark) !important; }
.bg-storyboardpro           { background-color: var(--color-storyboardpro) !important; }
.bg-storyboardpro-dark      { background-color: var(--color-storyboardpro-dark) !important; }

.font-body                  { font-family: var(--ff-body); font-weight: 400; }
.font-body-medium           { font-family: var(--ff-body-medium); font-weight: 500; }
.font-heading               { font-family: var(--ff-heading); font-weight: 400; }
.font-heading-semibold      { font-family: var(--ff-heading-semibold); font-weight: 400; }
.font-heading-normal        { font-family: var(--ff-heading-normal); font-weight: 400; }
.font-ja-body,
.font-ja-heading-normal     { font-family: var(--ff-ja); font-weight: 400; }
.font-ja-body-medium,
.font-ja-heading            { font-family: var(--ff-ja); font-weight: 700; }

.text-default               { font-size: var(--fs-default); line-height: var(--lh-default) }
.text-sm                    { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-xs                    { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.text-xxs                   { font-size: var(--fs-xxs); line-height: var(--lh-xxs); }

.line-height-default        { line-height: var(--lh-default) }
.line-height-sm             { line-height: var(--lh-sm); }
.line-height-xs             { line-height: var(--lh-xs); }
.line-height-xxs            { line-height: var(--lh-xxs); }

.block                      { display: block !important; }
.inline-block               { display: inline-block !important; }
.inline                     { display: inline !important; }
.flex                       { display: flex !important; }
.grid                       { display: grid !important; }
.hidden                     { display: none !important; }

@media (min-width: 640px) {
    .sm\:block              { display: block !important; }
    .sm\:inline-block       { display: inline-block !important; }
    .sm\:inline             { display: inline !important; }
    .sm\:flex               { display: flex !important; }
    .sm\:grid               { display: grid !important; }
    .sm\:hidden             { display: none !important; }
}
@media (min-width: 768px) {
    .md\:block              { display: block !important; }
    .md\:inline-block       { display: inline-block !important; }
    .md\:inline             { display: inline !important; }
    .md\:flex               { display: flex !important; }
    .md\:grid               { display: grid !important; }
    .md\:hidden             { display: none !important; }
}
@media (min-width: 1024px) {
    .lg\:block              { display: block !important; }
    .lg\:inline-block       { display: inline-block !important; }
    .lg\:inline             { display: inline !important; }
    .lg\:flex               { display: flex !important; }
    .lg\:grid               { display: grid !important; }
    .lg\:hidden             { display: none !important; }
}
@media (min-width: 1280px) {
    .xl\:block              { display: block !important; }
    .xl\:inline-block       { display: inline-block !important; }
    .xl\:inline             { display: inline !important; }
    .xl\:flex               { display: flex !important; }
    .xl\:grid               { display: grid !important; }
    .xl\:hidden             { display: none !important; }
}

.align-top       { vertical-align: top !important; }
.align-middle    { vertical-align: middle !important; }
.align-bottom    { vertical-align: bottom !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }

.items-start     { align-items: flex-start !important; }
.items-end       { align-items: flex-end !important; }
.items-center    { align-items: center !important; }

.gap-0           { gap: 0px !important; }
.gap-10          { gap: 10px !important; }
.gap-20          { gap: 20px !important; }
.gap-30          { gap: 30px !important; }
.gap-40          { gap: 40px !important; }
.gap-50          { gap: 50px !important; }

.gap-x-0         { column-gap: 0px !important; }
.gap-x-10        { column-gap: 10px !important; }
.gap-x-20        { column-gap: 20px !important; }
.gap-x-30        { column-gap: 30px !important; }
.gap-x-40        { column-gap: 40px !important; }
.gap-x-50        { column-gap: 50px !important; }

.gap-y-0         { row-gap: 0px !important; }
.gap-y-10        { row-gap: 10px !important; }
.gap-y-20        { row-gap: 20px !important; }
.gap-y-30        { row-gap: 30px !important; }
.gap-y-40        { row-gap: 40px !important; }
.gap-y-50        { row-gap: 50px !important; }

.text-left       { text-align: left !important; }
.text-center     { text-align: center !important; }
.text-right      { text-align: right !important; }

.m-0             { margin: 0 !important; }
.m-5             { margin: 5px !important; }
.m-10            { margin: 10px !important; }
.m-15            { margin: 15px !important; }
.m-20            { margin: 20px !important; }
.m-25            { margin: 25px !important; }
.m-30            { margin: 30px !important; }
.m-35            { margin: 35px !important; }
.m-40            { margin: 40px !important; }
.m-45            { margin: 45px !important; }
.-m-5            { margin: -5px !important; }
.-m-10           { margin: -10px !important; }
.-m-15           { margin: -15px !important; }
.-m-20           { margin: -20px !important; }
.-m-25           { margin: -25px !important; }
.-m-30           { margin: -30px !important; }
.-m-35           { margin: -35px !important; }
.-m-40           { margin: -40px !important; }
.-m-45           { margin: -45px !important; }

.mt-0            { margin-top: 0 !important; }
.mt-5            { margin-top: 5px !important; }
.mt-10           { margin-top: 10px !important; }
.mt-15           { margin-top: 15px !important; }
.mt-20           { margin-top: 20px !important; }
.mt-25           { margin-top: 25px !important; }
.mt-30           { margin-top: 30px !important; }
.mt-35           { margin-top: 35px !important; }
.mt-40           { margin-top: 40px !important; }
.mt-45           { margin-top: 45px !important; }
.-mt-5           { margin-top: -5px !important; }
.-mt-10          { margin-top: -10px !important; }
.-mt-15          { margin-top: -15px !important; }
.-mt-20          { margin-top: -20px !important; }
.-mt-25          { margin-top: -25px !important; }
.-mt-30          { margin-top: -30px !important; }
.-mt-35          { margin-top: -35px !important; }
.-mt-40          { margin-top: -40px !important; }
.-mt-45          { margin-top: -45px !important; }

.mb-0            { margin-bottom: 0 !important; }
.mb-5            { margin-bottom: 5px !important; }
.mb-10           { margin-bottom: 10px !important; }
.mb-15           { margin-bottom: 15px !important; }
.mb-20           { margin-bottom: 20px !important; }
.mb-25           { margin-bottom: 25px !important; }
.mb-30           { margin-bottom: 30px !important; }
.mb-35           { margin-bottom: 35px !important; }
.mb-40           { margin-bottom: 40px !important; }
.mb-45           { margin-bottom: 45px !important; }
.-mb-5           { margin-bottom: -5px !important; }
.-mb-10          { margin-bottom: -10px !important; }
.-mb-15          { margin-bottom: -15px !important; }
.-mb-20          { margin-bottom: -20px !important; }
.-mb-25          { margin-bottom: -25px !important; }
.-mb-30          { margin-bottom: -30px !important; }
.-mb-35          { margin-bottom: -35px !important; }
.-mb-40          { margin-bottom: -40px !important; }
.-mb-45          { margin-bottom: -45px !important; }

.ml-0            { margin-left: 0 !important; }
.ml-5            { margin-left: 5px !important; }
.ml-10           { margin-left: 10px !important; }
.ml-15           { margin-left: 15px !important; }
.ml-20           { margin-left: 20px !important; }
.ml-25           { margin-left: 25px !important; }
.ml-30           { margin-left: 30px !important; }
.ml-35           { margin-left: 35px !important; }
.ml-40           { margin-left: 40px !important; }
.ml-45           { margin-left: 45px !important; }
.-ml-5           { margin-left: -5px !important; }
.-ml-10          { margin-left: -10px !important; }
.-ml-15          { margin-left: -15px !important; }
.-ml-20          { margin-left: -20px !important; }
.-ml-25          { margin-left: -25px !important; }
.-ml-30          { margin-left: -30px !important; }
.-ml-35          { margin-left: -35px !important; }
.-ml-40          { margin-left: -40px !important; }
.-ml-45          { margin-left: -45px !important; }

.mr-0            { margin-right: 0 !important; }
.mr-5            { margin-right: 5px !important; }
.mr-10           { margin-right: 10px !important; }
.mr-15           { margin-right: 15px !important; }
.mr-20           { margin-right: 20px !important; }
.mr-25           { margin-right: 25px !important; }
.mr-30           { margin-right: 30px !important; }
.mr-35           { margin-right: 35px !important; }
.mr-40           { margin-right: 40px !important; }
.mr-45           { margin-right: 45px !important; }
.-mr-5           { margin-right: -5px !important; }
.-mr-10          { margin-right: -10px !important; }
.-mr-15          { margin-right: -15px !important; }
.-mr-20          { margin-right: -20px !important; }
.-mr-25          { margin-right: -25px !important; }
.-mr-30          { margin-right: -30px !important; }
.-mr-35          { margin-right: -35px !important; }
.-mr-40          { margin-right: -40px !important; }
.-mr-45          { margin-right: -45px !important; }

.my-0            { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-5            { margin-top: 5px !important; margin-bottom: 5px !important; }
.my-10           { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-15           { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-20           { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-25           { margin-top: 25px !important; margin-bottom: 25px !important; }
.my-30           { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-35           { margin-top: 35px !important; margin-bottom: 35px !important; }
.my-40           { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-45           { margin-top: 45px !important; margin-bottom: 45px !important; }
.-my-5           { margin-top: -5px !important; margin-bottom: -5px !important; }
.-my-10          { margin-top: -10px !important; margin-bottom: -10px !important; }
.-my-15          { margin-top: -15px !important; margin-bottom: -15px !important; }
.-my-20          { margin-top: -20px !important; margin-bottom: -20px !important; }
.-my-25          { margin-top: -25px !important; margin-bottom: -25px !important; }
.-my-30          { margin-top: -30px !important; margin-bottom: -30px !important; }
.-my-35          { margin-top: -35px !important; margin-bottom: -35px !important; }
.-my-40          { margin-top: -40px !important; margin-bottom: -40px !important; }
.-my-45          { margin-top: -45px !important; margin-bottom: -45px !important; }

.mx-0            { margin-left: 0 !important; margin-right: 0 !important; }
.mx-5            { margin-left: 5px !important; margin-right: 5px !important; }
.mx-10           { margin-left: 10px !important; margin-right: 10px !important; }
.mx-15           { margin-left: 15px !important; margin-right: 15px !important; }
.mx-20           { margin-left: 20px !important; margin-right: 20px !important; }
.mx-25           { margin-left: 25px !important; margin-right: 25px !important; }
.mx-30           { margin-left: 30px !important; margin-right: 30px !important; }
.mx-35           { margin-left: 35px !important; margin-right: 35px !important; }
.mx-40           { margin-left: 40px !important; margin-right: 40px !important; }
.mx-45           { margin-left: 45px !important; margin-right: 45px !important; }
.-mx-5           { margin-left: -5px !important; margin-right: -5px !important; }
.-mx-10          { margin-left: -10px !important; margin-right: -10px !important; }
.-mx-15          { margin-left: -15px !important; margin-right: -15px !important; }
.-mx-20          { margin-left: -20px !important; margin-right: -20px !important; }
.-mx-25          { margin-left: -25px !important; margin-right: -25px !important; }
.-mx-30          { margin-left: -30px !important; margin-right: -30px !important; }
.-mx-35          { margin-left: -35px !important; margin-right: -35px !important; }
.-mx-40          { margin-left: -40px !important; margin-right: -40px !important; }
.-mx-45          { margin-left: -45px !important; margin-right: -45px !important; }

.p-0             { padding: 0 !important; }
.p-5             { padding: 5px !important; }
.p-10            { padding: 10px !important; }
.p-15            { padding: 15px !important; }
.p-20            { padding: 20px !important; }
.p-25            { padding: 25px !important; }
.p-30            { padding: 30px !important; }
.p-35            { padding: 35px !important; }
.p-40            { padding: 40px !important; }
.p-45            { padding: 45px !important; }

.pt-0            { padding-top: 0 !important; }
.pt-5            { padding-top: 5px !important; }
.pt-10           { padding-top: 10px !important; }
.pt-15           { padding-top: 15px !important; }
.pt-20           { padding-top: 20px !important; }
.pt-25           { padding-top: 25px !important; }
.pt-30           { padding-top: 30px !important; }
.pt-35           { padding-top: 35px !important; }
.pt-40           { padding-top: 40px !important; }
.pt-45           { padding-top: 45px !important; }

.pb-0            { padding-bottom: 0 !important; }
.pb-5            { padding-bottom: 5px !important; }
.pb-10           { padding-bottom: 10px !important; }
.pb-15           { padding-bottom: 15px !important; }
.pb-20           { padding-bottom: 20px !important; }
.pb-25           { padding-bottom: 25px !important; }
.pb-30           { padding-bottom: 30px !important; }
.pb-35           { padding-bottom: 35px !important; }
.pb-40           { padding-bottom: 40px !important; }
.pb-45           { padding-bottom: 45px !important; }

.pl-0            { padding-left: 0 !important; }
.pl-5            { padding-left: 5px !important; }
.pl-10           { padding-left: 10px !important; }
.pl-15           { padding-left: 15px !important; }
.pl-20           { padding-left: 20px !important; }
.pl-25           { padding-left: 25px !important; }
.pl-30           { padding-left: 30px !important; }
.pl-35           { padding-left: 35px !important; }
.pl-40           { padding-left: 40px !important; }
.pl-45           { padding-left: 45px !important; }

.pr-0            { padding-right: 0 !important; }
.pr-5            { padding-right: 5px !important; }
.pr-10           { padding-right: 10px !important; }
.pr-15           { padding-right: 15px !important; }
.pr-20           { padding-right: 20px !important; }
.pr-25           { padding-right: 25px !important; }
.pr-30           { padding-right: 30px !important; }
.pr-35           { padding-right: 35px !important; }
.pr-40           { padding-right: 40px !important; }
.pr-45           { padding-right: 45px !important; }

.py-0            { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-5            { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-10           { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-15           { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-20           { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-25           { padding-top: 25px !important; padding-bottom: 25px !important; }
.py-30           { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-35           { padding-top: 35px !important; padding-bottom: 35px !important; }
.py-40           { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-45           { padding-top: 45px !important; padding-bottom: 45px !important; }

.px-0            { padding-left: 0 !important; padding-right: 0 !important; }
.px-5            { padding-left: 5px !important; padding-right: 5px !important; }
.px-10           { padding-left: 10px !important; padding-right: 10px !important; }
.px-15           { padding-left: 15px !important; padding-right: 15px !important; }
.px-20           { padding-left: 20px !important; padding-right: 20px !important; }
.px-25           { padding-left: 25px !important; padding-right: 25px !important; }
.px-30           { padding-left: 30px !important; padding-right: 30px !important; }
.px-35           { padding-left: 35px !important; padding-right: 35px !important; }
.px-40           { padding-left: 40px !important; padding-right: 40px !important; }
.px-45           { padding-left: 45px !important; padding-right: 45px !important; }

/* Padding & Margin */
.pt-slide, .pt-page {
    padding-top: 40px;
    @media (min-width: 768px) { padding-top: 60px; }
}
.pb-slide, .pb-page {
    padding-bottom: 40px;
    @media (min-width: 768px) { padding-bottom: 60px; }
}
.py-slide, .py-page {
    padding-top: 40px; padding-bottom: 40px;
    @media (min-width: 768px) { padding-top: 60px; padding-bottom: 60px; }
}
.mt-slide {
    margin-top: 40px;
    @media (min-width: 768px) { margin-top: 60px; }
}
.mb-slide {
    margin-bottom: 40px;
    @media (min-width: 768px) { margin-bottom: 60px; }
}
.my-slide {
    margin-top: 40px; margin-bottom: 40px;
    @media (min-width: 768px) { margin-top: 60px; margin-bottom: 60px; }
}
.pt-slide-sm {
    padding-top: 25px;
    @media (min-width: 768px) { padding-top: 40px; }
}
.pb-slide-sm {
    padding-bottom: 25px;
    @media (min-width: 768px) { padding-bottom: 40px; }
}
.py-slide-sm {
    padding-top: 25px; padding-bottom: 25px;
    @media (min-width: 768px) { padding-top: 40px; padding-bottom: 40px; }
}
.mt-slide-sm {
    margin-top: 25px;
    @media (min-width: 768px) { margin-top: 40px; }
}
.mb-slide-sm {
    margin-bottom: 25px;
    @media (min-width: 768px) { margin-bottom: 40px; }
}
.my-slide-sm {
    margin-top: 25px; margin-bottom: 25px;
    @media (min-width: 768px) { margin-top: 40px; margin-bottom: 40px; }
}

.stacked-horizontal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    &.space-between {
        justify-content: space-between;
    }
}
.panel {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .07);
    margin-bottom: 30px;

    @media (min-width: 1024px) {
        padding: 35px;
        margin-bottom: 40px;
    }
    &.panel-sm {
        border-radius: 6px;
        padding: 15px;

        @media (min-width: 1024px) {
            padding: 25px;
        }
    }
    &.panel-gray {
        background: var(--color-gray-lighter);
        box-shadow: none;
    }
    &.panel-gray-light {
        background: var(--color-gray-lightest);
        box-shadow: none;
    }
}
.callout {
    position: relative;
    background: var(--color-gray-lighter);
    outline: 1px solid var(--color-border);
  	border: 0 !important;
    border-radius: 8px;
    padding: 14px 25px;
    margin-top: 20px;

    @media (min-width: 1024px) {
        padding-left: 35px;
        padding-right: 35px;
    }

    td {
        padding: 14px 25px 18px;
        font-size: var(--fs-default);
        line-height: var(--lh-default);

        @media (min-width: 1024px) {
            padding-left: 35px;
            padding-right: 35px;
        }
    }
    &.note {
        background: var(--color-info-lighter);
        outline: 1px solid var(--color-info-light);
    }
    &.tip {
        background: var(--color-success-lighter);
        outline: 1px solid var(--color-success-light);
    }
    &.warning {
        background: var(--color-warning-lighter);
        outline: 1px solid var(--color-warning-light);
    }
    &.error {
        background: var(--color-danger-lighter);
        outline: 1px solid var(--color-danger-light);
    }
    a:not(.button, [class^="button"]) {
        color: var(--color-default);
        text-decoration: underline;

        &:hover {
            color: var(--color-link-dark);
        }
    }
    > :last-child {
        margin-bottom: 0;
    }
}
table {
    width: 100%;
    min-width: 100%;
    border-radius: 6px;
    overflow: hidden;
    outline: 1px solid var(--color-border);
    border-spacing: 0;

    > thead {
        border-bottom: 1px solid var(--color-border);
    }
    > thead,
    > tbody {
        background-color: transparent;
    }
    th, td {
        padding: 11px 16px 12px;
        white-space: normal;
        text-align: left;
        line-height: var(--lh-xs);
        vertical-align: top;
    }
    th, td:before {
        font-family: var(--ff-heading-semibold);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;

        html[lang^=ja] &:not([class^="fa-"]) {
            font-family: var(--ff-ja);
        }
    }
    th {
        background: var(--color-gray-lighter);
    }
    .fit2content {
        white-space: nowrap;
        width: 1%;
    }
    tr:not(:first-of-type) td {
        border-top: 1px solid var(--color-border);
    }
    &.table-responsive tr:not(:first-of-type) td:not(:first-of-type) {
        border-width: 0;
        @media (min-width: 768px) {
            border-top-width: 1px;
        }
    }
    &[class*=table-responsive] {
        > thead { display: none; }
        td { display: block; }
        td:before {
            content: attr(data-label);
            display: block;
        }
    }
    &.table-responsive {
        @media (min-width: 768px) {
            > thead { display: table-header-group; }
            td { display: table-cell; }
            td:before { display: none !important; }
        }
        @media (max-width: 768px) {
            td:first-of-type { padding-top: 15px; }
            td:last-of-type { padding-bottom: 18px; }
            td:not(:first-of-type) { padding-top: 0; }
            .fit2content { white-space: normal; width: auto; }
        }
        @media (min-width: 768px) {
            table tr:last-of-type td { padding-bottom: 0; }
        }
    }
    &.table-responsive-lg {
        @media (min-width: 1024px) {
            > thead { display: table-header-group; }
            td { display: table-cell }
            td:before { display: none !important; }
        }
        @media (max-width: 1024px) {
            td:first-of-type { padding-top: 15px; }
            td:last-of-type { padding-bottom: 18px; }
            td:not(:first-of-type) { padding-top: 0; }
            .fit2content { white-space: normal; width: auto; }
        }
        @media (min-width: 1024px) {
            table tr:last-of-type td { padding-bottom: 0; }
        }
    }
    &.table-responsive-xl {
        @media (min-width: 1280px) {
            > thead { display: table-header-group; }
            td { display: table-cell }
            td:before { display: none !important; }
        }
        @media (max-width: 1280px) {
            td:first-of-type { padding-top: 15px; }
            td:last-of-type { padding-bottom: 18px; }
            td:not(:first-of-type) { padding-top: 0; }
            .fit2content { white-space: normal; width: auto; }
        }
        @media (min-width: 1280px) {
            table tr:last-of-type td { padding-bottom: 0; }
        }
    }
    &:not([class*=table-responsive]) table tr:last-of-type td {
        padding-bottom: 0;
    }
    &.table-sm {
        th, td {
            padding: 7px 12px 8px;
        }
    }
    &.table-noWrapper {
        th:first-of-type, td:first-of-type {
            padding-left: 0;
        }
        th:last-of-type, td:last-of-type {
            padding-right: 0;
        }
    }
    &.table-data {
        outline: none;
        border-radius: 0;

        th {
            padding-bottom: 11px;
            background-color: transparent;
        }
        &.table-sm {
            th {
                padding-bottom: 7px;
            }
        }

        &[class*=table-responsive] td:before {
            content: attr(data-label);
            float: left;
            padding-right: 10px;
            padding-top: 1px;
        }
        &.table-responsive {
            @media (max-width: 768px) {
                td { padding-left: 0; padding-right: 0; }
                tr:first-of-type td:first-of-type { padding-top: 0; }
                tr:last-of-type td:last-of-type { padding-bottom: 0; }
            }
        }
        &.table-responsive-lg {
            @media (max-width: 1024px) {
                td { padding-left: 0; padding-right: 0; }
                tr:first-of-type td:first-of-type { padding-top: 0; }
                tr:last-of-type td:last-of-type { padding-bottom: 0; }
            }
        }
        &.table-responsive-xl {
            @media (max-width: 1280px) {
                td { padding-left: 0; padding-right: 0; }
                tr:first-of-type td:first-of-type { padding-top: 0; }
                tr:last-of-type td:last-of-type { padding-bottom: 0; }
            }
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ***************** ELEMENTS - MISC **************** */

* {
    box-sizing: border-box;
}
html {
    font-family: var(--ff-body);
    font-size: var(--fs-default);
    color: var(--color-default);
    scroll-padding-top: auto !important;

    &[lang^=ja] {
        font-family: var(--ff-ja);
        font-weight: 400;
    }
}
body {
    background-color: var(--color-gray-lightest);
    color: var(--color-default);
    font-size: var(--fs-default);
    line-height: var(--lh-default);
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

    &.scrollLock {
        height: 100%;
        overflow: hidden;
    }
}
body,
.customScrollbar {
    &::-webkit-scrollbar { height: 6px; width: 6px; }
    &::-webkit-scrollbar-track { background-color: var(--color-gray-light); }
    &::-webkit-scrollbar-thumb { background-color: var(--color-gray-dark); }
}
body > main {
    min-height: 100vh;
    display: flex;
}
[id^=mainContent]{
    width: 100%;
}
hr {
    border: solid var(--color-border);
    border-width:  1px 0 0;
    margin: 50px 0;
}
code, .code,
pre, .pre {
    font-family: Courier New, monospace;
    background: var(--color-gray-lighter);
    border-radius: 4px;
    line-height: var(--lh-xs);
    color: black;
    word-wrap: break-word;
}
code, .code {
    padding: 2px 6px 3px;
    margin: 12px 2px 0;
}
pre, .pre {
    display: block;
    padding: 12px 16px 13px;
    margin: 1rem 0;
    overflow: auto;
    white-space: normal;
}
div.code {
    padding: 10px 15px 12px;
}
blockquote, .blockquote {
    border-left: 2px solid var(--color-border);
    font-style: italic;
    color: var(--color-gray-dark);
    padding: 0 15px;
    margin: 20px 0 20px 40px;
}
[class^=columns-] {
    display: grid;
    column-gap: 30px;
}
.columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (min-width: 640px) {
    [class^=sm-columns-] {
        display: grid;
        column-gap: 30px;
    }
    .sm-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    [class^=md-columns-] {
        display: grid;
        column-gap: 30px;
    }
    .md-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    [class^=lg-columns-] {
        display: grid;
        column-gap: 30px;
    }
    .lg-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    [class^=xl-columns-] {
        display: grid;
        column-gap: 30px;
    }
    .xl-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.page--category #pageTitle {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 9px;
    row-gap: 4px;

    .title-logo {
        margin: -1px -2px -8px;

        @media (min-width: 1024px) {
            margin-top: -2px;
        }
        &.storyboardpro {
            width: 225px;

            @media (min-width: 768px) {
                width: 273px;
            }
            @media (min-width: 1024px) {
                width: 298px;
            }
        }
        &.harmony {
            width: 173px;

            @media (min-width: 768px) {
                width: 210px;
            }
            @media (min-width: 1024px) {
                width: 229px;
            }
        }
    }
}
#leftNav-title > span {
    display: flex !important;
    flex-wrap: wrap;
    align-items: start;
    column-gap: 3px;

    .title-logo {
        margin-top: 1.5px;
        margin-left: -1px;

        &.storyboardpro {
            width: 120px;
        }
        &.harmony {
            width: 92px;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************* ELEMENTS - Typography ************** */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ff-heading-semibold);
    font-weight: 700;
    margin-top: -4px;
    margin-bottom: 18px;
    padding: 0;

    html[lang^=ja] &:not([class^="fa-"]) {
        font-family: var(--ff-ja);
    }
}
h1, .h1 {
    font-family: var(--ff-heading);
    font-size: 36px;
    line-height: 40px;

    @media (min-width: 768px) {
        font-size: 42px;
        line-height: 48px;
        margin-top: -6px;
    }
    @media (min-width: 1024px) {
        font-size: 46px;
        line-height: 50px;
    }
}
.h1-lg {
    font-family: var(--ff-heading);
    font-size: 44px;
    line-height: 48px;
    margin-top: -6px;

    @media (min-width: 768px) {
        font-size: 50px;
        line-height: 54px;
        margin-top: -8px;
    }
    @media (min-width: 1024px) {
        font-size: 54px;
        line-height: 58px;
    }
}
h2, .h2 {
    font-family: var(--ff-heading);
    font-size: 25px;
    line-height: 29px;
    margin-top: -5px;

    @media (min-width: 768px) {
        font-size: 30px;
        line-height: 34px;
    }
}
h3, .h3 {
    font-size: 22px;
    line-height: 26px;
    margin-top: -4px;

    @media (min-width: 768px) {
        font-size: 24px;
        line-height: 28px;
    }
}
h4, .h4 {
    font-size: 18px;
    line-height: 24px;

    @media (min-width: 768px) {
        font-size: 20px;
        line-height: 25px;
    }
}
h5, .h5,
h6, .h6 {
    font-size: 16px;
    line-height: 22px;

    @media (min-width: 768px) {
        font-size: 18px;
        line-height: 24px;
    }
}
.-mt-h1 {
    margin-top: -6px !important;
    @media (min-width: 768px) { margin-top: -8px !important; }
}
.-mt-h2 {
    margin-top: -6px !important;
    @media (min-width: 768px) { margin-top: -8px !important; }
}
.-mt-h3, .-mt-h4 {
    margin-top: -6px !important;
}
p, .pTag {
    font-size: var(--fs-default);
    line-height: var(--lh-default);
    margin: 0 0 16px;
}
b, strong, em {
    font-family: var(--ff-body-medium);
    font-weight: 500;

    html[lang^=ja] &:not([class^="fa-"]) {
        font-family: var(--ff-ja);
        font-weight: 700;
    }
}
ul, ol {
    list-style: none;
}
ul, ol,
ul li, ol li {
    margin: 0;
    padding: 0;
}
/* ************************************************** */


/* ************************************************** */
/* **************** ELEMENTS - Links **************** */

.reset-to-link {
    cursor: pointer !important;
    text-decoration: none;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    all: unset;
    color: var(--color-link);
    background: transparent !important;

    &:hover, .group:hover & {
        all: unset;
        color: var(--color-link-dark);
        background: transparent !important;
    }
}
a, [class^='link'] {
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-link);

    &:hover, .group:hover & {
        color: var(--color-link-dark)
    }
}
.link-gray {
    color: var(--color-default);

    &:hover, .group:hover & {
        color: var(--color-link);
    }
}
.link-gray-underline {
    color: var(--color-default);

    &:hover, .group:hover & {
        color: var(--color-default);
        text-decoration: underline;
    }
}
.link-white {
    color: #FFFFFF;

    &:hover, .group:hover & {
        color: #FFFFFF;
        text-decoration: underline;
    }
}
.link-with-arrow {
    font-family: var(--ff-body-medium);
    font-weight: 500;

    html[lang^=ja] &:not([class^="fa-"]) {
        font-family: var(--ff-ja);
        font-weight: 700;
    }
    &:after {
        content: "\f178";
        font: var(--fa-font-solid);
        padding-left: 8px;
        transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    }
    &:hover, .group:hover & {
        &:after {
            padding-left: 16px;
        }
    }
    &.font-body {
        font-family: var(--ff-body);
        font-weight: 400;

        &:after {
            font: var(--fa-font-regular);
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* *************** ELEMENTS - Buttons *************** */

button,
[role="button"] {
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    border: 0;
}
.button,
input[type="submit"],
#mainContent--section .section-subscribe .dropdown-toggle,
.article-share .share a,
[id^=follow-button],
.unsubscribe-button a,
[data-action='edit-profile'],
.community-follow .dropdown-toggle {
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    color: #FFFFFF;
    background: var(--color-link);
    border: 2px solid transparent;
    font-family: var(--ff-body-medium);
    font-weight: 500;
    border-radius: 50px;
    font-size: var(--fs-sm);
    margin: 0;
    padding: 8px 22px 10px;
    line-height: var(--lh-sm);
    text-align: center;

    @media (min-width: 768px) {
        padding: 13px 30px 16px;
    }
    .button-sm &, &.button-sm {
        padding: 8.5px 22px 9.5px;
    }
    .button-xs &, &.button-xs {
        padding: 5px 16px 6px;
    }
    html[lang^=ja] &:not([class^="fa-"]) {
        font-family: var(--ff-ja);
        font-weight: 700;
    }
    &:hover, .group:hover & {
        background: var(--color-link-dark);
        color: #FFFFFF;
    }
}
.button-hollow {
    color: var(--color-link) !important;
    background: transparent !important;
    border: 2px solid var(--color-link) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-link) !important;
        border: 2px solid var(--color-link) !important;
    }
}
.button-white {
    color: var(--color-default) !important;
    background: #FFFFFF !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-default) !important;
    }
}
.button-white-hollow {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 2px solid #FFFFFF !important;

    &:hover, .group:hover & {
        color: var(--color-default) !important;
        background: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
    }
}
.button-harmony {
    color: #FFFFFF !important;
    background: var(--color-harmony) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-harmony-dark) !important;
    }
}
.button-harmony-hollow {
    color: var(--color-harmony) !important;
    background: transparent !important;
    border: 2px solid var(--color-harmony) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-harmony) !important;
        border: 2px solid var(--color-harmony) !important;
    }
}
.button-storyboardpro {
    color: #FFFFFF !important;
    background: var(--color-storyboardpro) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-storyboardpro-dark) !important;
    }
}
.button-storyboardpro-hollow {
    color: var(--color-storyboardpro) !important;
    background: transparent !important;
    border: 2px solid var(--color-storyboardpro) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-storyboardpro) !important;
        border: 2px solid var(--color-storyboardpro) !important;
    }
}
.button-gray,
[id^=follow-button][aria-pressed="true"] {
    color: #FFFFFF !important;
    background: var(--color-default) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-gray-dark) !important;
    }
}
.button-gray-hollow,
.article-share .share a,
[id^=follow-button],
.unsubscribe-button a,
[data-action='edit-profile'],
.community-follow .dropdown-toggle {
    color: var(--color-default) !important;
    background: transparent !important;
    border: 2px solid var(--color-default) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-default) !important;
        border: 2px solid var(--color-default) !important;
    }
}
.button-gray-light {
    color: var(--color-default) !important;
    background: var(--color-gray-light) !important;

    &:hover, .group:hover & {
        color: #FFFFFF !important;
        background: var(--color-default) !important;
    }
}
.button-gray-light-hollow {
    color: var(--color-default) !important;
    background: transparent !important;
    border: 2px solid var(--color-gray-light) !important;

    &:hover, .group:hover & {
        color: var(--color-default) !important;
        background: var(--color-gray-light) !important;
        border: 2px solid var(--color-gray-light) !important;
    }
}
.button-gray-lighter {
    color: var(--color-default) !important;
    background: var(--color-gray-lighter) !important;

    &:hover, .group:hover & {
        color: var(--color-default) !important;
        background: var(--color-gray-light) !important;
    }
}
.button-gray-lighter-hollow {
    color: var(--color-default) !important;
    background: transparent !important;
    border: 2px solid var(--color-gray-lighter) !important;

    &:hover, .group:hover & {
        color: var(--color-default) !important;
        background: var(--color-gray-lighter) !important;
    }
}
[id^=follow-button] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8.5px 22px 9.5px;

    &:before {
        content: "\e62c";
        font: var(--fa-font-solid);
        font-size: 110%;
        margin-top: 2px;
    }
    &[aria-pressed="true"] {
        gap: 5px;
        &:before { content: "\f1f6";}
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************** ELEMENTS - Form Items ************* */

input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea,
.form-field .nesty-input,
ul[data-hc-pills-container] {
    background-image: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: block;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-top: 5px;
    box-shadow: 0 0 #000000, 0 0 #000000, 0 1px 2px 0 rgba(0,0,0,.05);
    font-size: var(--fs-default);
    line-height: var(--lh-xs);
    padding: 10px 15px 12px;
    color: var(--color-default);

    &:focus {
        outline: 2px solid var(--color-default);
        outline-offset: -2px;
        border-color: transparent;
    }
}
textarea {
    min-height: 140px;
}
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
}
ul[data-hc-pills-container][data-hc-focus=true] {
    outline: 2px solid var(--color-default);
    outline-offset: -2px;
    border-color: transparent;
}
ul[data-hc-pills-container] {
    padding: 0;

    li {
        height: auto;
    }
    li[data-hc-pill=true] {
        margin: 10px 0 10px 14px;
        height: auto;
        background: var(--color-gray-lighter);
        border-color: var(--color-border);

        &[aria-invalid=true]{
            border-color: var(--color-danger) !important;
        }
    }
    input {
        height: auto !important;
        margin: 0 !important;
        padding: 10px 15px 12px !important;
        box-shadow: 0 0 0;
    }
}
.form-field {
    margin-top: 1rem;

    label {
        cursor: pointer;
        display: block;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-family: var(--ff-body-medium);
        font-weight: 500;
    }
    &.required > label::after {
        --tw-text-opacity: 1;
        color: var(--color-danger);
        content: " *";
        font-size: var(--fs-default);
        line-height: var(--lh-sm);
    }
    p {
        color: var(--color-gray);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        margin-top: 5px;
    }
}
.upload-dropzone {
    font-size: var(--fs-default);
    line-height: var(--lh-sm);
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    margin-top: 5px;

    &[data-hc-focus=true] {
        border-color: var(--color-default);
    }

    span {
        display: block;
        color: var(--color-default);
        font-size: inherit;
        line-height: inherit;
        padding: 20px 15px 22px;
    }
    a {
        font-size: inherit;
        line-height: inherit;
    }
}
.upload-pool {
    margin-top: 10px;

    .upload-item {
        width: 100%;
        float: none;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        margin: 0;
        padding: 10px 15px;
        border: solid var(--color-border);
        border-width: 1px 1px 0;
        border-radius: 0;

        &:first-of-type {
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
        &:last-of-type {
            border-width: 1px;
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
        }
        &:hover {
            background: transparent;
        }
        .upload-link,
        .upload-remove {
            color: var(--color-default);

            &:hover {
                color: var(--color-link-dark);
            }
            &:before {
                color: var(--color-default);
            }
        }
    }
}
.form {
    footer {
        margin-top: 1.75rem;
    }
    .suggestion-list {
        .searchbox {
            font-size: var(--fs-sm);
            line-height: var(--lh-sm);
            margin: 15px 0 0;
        }
        h2 {
            font-family: var(--ff-body-medium);
            font-weight: 500;
            font-size: var(--fs-sm);
            line-height: var(--lh-sm);
            margin: 0;

            html[lang^=ja] &:not([class^="fa-"]) {
                font-family: var(--ff-ja);
            }
        }
        label {
            border-bottom: 1px solid var(--color-border);
            display: block;
            padding-bottom: 5px;
        }
        li {
            padding-top: 10px;
        }
        li a:visited {
            color: var(--color-link-dark);
        }
    }
}
.nesty-input {
    &:after {
        top: 29%;
        color: var(--color-gray);
    }
}
.nesty-panel {
    max-height: 190px;
    border-radius: 8px;
    border: 2px solid var(--color-default);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .07);

    li {
        color: var(--color-default);
        font-size: var(--font-default);
        padding: 12px 16px !important;

        &:focus {
            background: var(--color-gray-lighter);
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* **************** HEADER & FOOTER ***************** */

#siteHeader {
    width: 100%;
    z-index: 55;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--color-default);

    &[aria-expanded="true"] {
        background: var(--color-default) !important;

        #headerNav-icon:before {
            content: "\f00d";
            font-size: 26px;
        }
    }
    .innerWrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .siteLogo {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-shrink: 0;

        img {
            width: 84px;
            display: block;

            @media (min-width: 1024px) {
                width: auto;
            }
        }
    }
    .icon-button {
        border-radius: 50px;
        padding: 0;
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:not(.button-default) {
            color: #FFFFFF;
            background: var(--color-gray-darker);

            &:hover {
                color: var(--color-default) !important;
                background: #FFFFFF !important;
            }
        }
        @media (min-width: 768px) {
            width: 44px;
        }
        @media (max-width: 1280px) {
            padding: 0 !important;
        }
        &.with-text {
            @media (min-width: 1280px) {
                width: auto;
            }
        }
        &:not(.with-text) {
            font-size: var(--fs-default);
        }
    }
    .search {
        width: 100%;

        @media (min-width: 768px) {
            width: 240px;
        }
        @media (min-width: 1536px) {
            width: 400px;
        }
        input[type="search"] {
            height: 42px;
            color: #FFFFFF;
            background: var(--color-gray-darker);
            outline: 0;
            border: 0;

            &:focus {
                color: var(--color-default);
                background: #FFFFFF;
            }
            &:not(:focus)::-webkit-input-placeholder { color: var(--color-gray) !important; }
            &:not(:focus)::-moz-placeholder { color: var(--color-gray) !important; }
            &:not(:focus):-ms-input-placeholder { color: var(--color-gray) !important; }
            &:not(:focus)::-ms-input-placeholder { color: var(--color-gray) !important; }
            &:not(:focus)::placeholder { color: var(--color-gray) !important; }
        }
    }
    #headerNav-icon {
        cursor: pointer;
        display: flex;
        padding: 8px 5px 5px;
        margin: -8px -5px -5px;

        &:before {
            content: "\f0c9";
            font: var(--fa-font-sharp-regular);
            color: #FFFFFF;
            font-size: 24px;
        }
    }
    #headerNav {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        gap: 10px;

        @media (max-width: 768px) {
            display: none;

            > * {
                width: 100%;
            }
        }
        @media (min-width: 768px) {
            position: relative;
            flex-direction: row;
        }
    }
    @media (max-width: 768px) {
        &[aria-expanded="true"] #headerNav {
            display: flex;
            padding: 30px 20px;
            background-color: var(--color-default);
            border-top: 1px solid var(--color-gray-dark);
            border-bottom: 1px solid var(--color-gray-dark);
            right: 0;
            left: 0;
            top: 71px;
            z-index: 1;
        }
        .dropdown-toggle {
            display: none !important;
        }
        .dropdown-menu {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0.5rem 0;
            box-shadow: none;
            position: relative;
            border-radius: 0;
            background: transparent;
            display: grid;
            gap: 1rem;

            [role=menuitem] {
                text-align: center;
                padding: 0;
                color: #FFF;
                font-family: var(--ff-body-medium);
                font-weight: 500;
                text-decoration: underline;
            }
        }
    }
}
#dummyHeader {
    width: 100%;
    position: relative;
}
#userHeader {
    width: 100%;
    z-index: 50;
    background: #FFFFFF;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px;

    @media (max-width: 768px) {
        position: static !important;
    }
    .innerWrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        min-height: 38px;

        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
        }
    }
}
#dummyUserHeader {
    width: 100%;

    @media (max-width: 768px) {
        display: none !important;
    }
}
#siteFooter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;

    @media (min-width: 768px) {
        flex-direction: row;
        align-items: center;
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************* COMPONENTS - Container ************* */

.container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;

    @media (min-width: 768px) {
        padding-left: 30px;
        padding-right: 30px;
    }
    &.container-sm {
        max-width: 1024px;
    }
}
.container-px {
    padding-left: 20px;
    padding-right: 20px;

    @media (min-width: 768px) {
        padding-left: 30px;
        padding-right: 30px;
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************** COMPONENTS - Dropdown ************* */

.dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;

    &:after {
        content: "\f107";
        font: var(--fa-font-solid);
        color: inherit;
        font-size: 115%;
        margin-top: 4px;
    }
    &:focus {
        &:after {
            content: "\f106";
            color: inherit;
            line-height: 1;
        }
    }
    &.button-language:after {
        display: none;
    }
}
.user-info .dropdown-toggle {
    padding: 0;
    background: transparent;
    border-radius: 100% !important;
    overflow: hidden;
    border: 0;
    line-height: 0;

    &:after { display: none; }

    .user-avatar {
        width: 44px;
        height: 44px;
    }
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    background: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    left: 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
    min-width: 180px;
    margin-top: 8px;
    padding: 5px 0;
    font-size: var(--fs-sm);
    box-shadow: 0 8px 12px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.03);
    overflow: hidden;
    border-radius: 8px;

    [role=menuitem] {
        cursor: pointer;
        display: block;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        -webkit-appearance: none;
        line-height: inherit;
        width: 100%;
        text-align: left;
        padding: 6px 20px 9px;
        color: var(--color-default);

        &:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    span[role=menuitem] {
        opacity: 0.5;
        cursor: not-allowed;

        &:hover {
            text-decoration: none;
        }
    }
    .button-signout {
        color: var(--color-default);
        background: var(--color-gray-light);
        font-family: var(--ff-body-medium);
        font-weight: 500;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        text-align: center !important;
        margin-bottom: -5px;
        padding: 10px 20px 12px;

        html[lang^=ja] &:not([class^="fa-"]) {
            font-family: var(--ff-ja);
            font-weight: 700;
        }
        &:hover {
            color: var(--color-default);
            background: var(--color-gray);
            text-decoration: none;
        }
        @media (max-width: 768px) {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            background: var(--color-gray-darker);
            border-radius: 50px;
            padding: 0;
            margin: 0;
            text-decoration: none !important;
        }
    }
    .community-follow & {
        left: auto;
        right: 0;
    }
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
    display: block;
}
.dropdown-menu-end {
    left: auto;
    right: 0
}
/* ************************************************** */


/* ************************************************** */
/* ************ COMPONENTS - Breadcrumbs ************ */

.breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 12px;

    li {
        font-size: var(--fs-sm);
        line-height: 1;
        color: var(--color-gray);
    }
    > *::after {
        content: "\f105";
        font: var(--fa-font-solid);
        font-size: var(--fs-xs);
        padding-left: 10px;
    }
    > *:last-of-type::after {
        display: none;
    }
    a {
        color: var(--color-default);

        &:hover {
            color: var(--color-default);
            text-decoration: underline;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************* COMPONENTS - Hero Banner *********** */

#hero-banner {
    padding: 90px 0;
    background-color: var(--color-default);
    background-image: url(/hc/theming_assets/01J3K7JD57CK54R0C793JGEANC);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;

    .search {
        max-width: 600px;
        margin: 50px auto 0;

        input[type="search"] {
            height: 55px;
            padding: 0 70px 5px 30px;
            font-size: var(--fs-default);
        }
        input[type="submit"] {
            font-size: var(--fs-default) !important;
            padding: 0 0 2px;
            width: 49px;
            height: 49px;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* *************** COMPONENTS - Search ************** */

.search {
    position: relative;
    display: flex;

    input[type="search"] {
        height: 46px;
        padding: 0 60px 4px 24px;
        margin: 0;
        border-radius: 50px;
        font-size: var(--fs-default);
    }
    input[type="submit"] {
        font: var(--fa-font-solid) !important;
        font-size: var(--fs-sm) !important;
        padding: 2px 0 0;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
    }
    &:not(.with-button) {
        &::before {
            content: "\f002";
            font: var(--fa-font-solid);
            color: var(--color-gray);
            position: absolute;
            left: 20px;
            top: 49%;
            transform: translateY(-50%);
        }
        input[type="search"] {
            padding: 0 15px 2px 46px;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ********* COMPONENTS - Search Autocomplete ******* */

zd-autocomplete {
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .07);
}
zd-autocomplete-header {
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-default);
    padding: 12px 20px 14px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background-color: var(--color-gray-lightest);
    font-size: var(--fs-sm);
}
zd-autocomplete-option {
    color: var(--color-default);
    font-size: var(--fs-sm);
    padding: 8px 20px;

    &[aria-selected=true] {
        background-color: var(--color-gray-lighter);
    }
    &:last-child {
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px
    }
    em {
        font-family: var(--ff-body-medium);
        font-weight: 500;
    }
    zd-autocomplete-breadcrumbs {
        color: var(--color-gray);
        font-size: var(--fs-xxs);
    }
}
zd-autocomplete-multibrand {
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-default);
    padding: 12px 20px 16px;
    font-size: var(--fs-sm);

    &[aria-selected=true] {
        background-color: var(--color-gray-lighter);
    }
    &:last-child {
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px
    }
    em {
        font-family: var(--ff-body-medium);
        font-weight: 500;
    }
    zd-autocomplete-title-multibrand {
        color: var(--color-link);
        font-size: var(--fs-sm);
    }
    zd-autocomplete-breadcrumbs-multibrand {
        color: var(--color-gray);
        font-size: var(--fs-xxs);
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************* COMPONENTS - Pagination ************ */

.pagination {
    margin-top: 30px;

    .pagination-list {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    li {
        display: inline-block;
    }
    a {
        display: inline-block;
        font-family: var(--ff-body-medium);
        font-weight: 500;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        text-align: center;
        color: var(--color-default);
        border: 1px solid var(--color-border);
        border-radius: 50px;
        padding: 8px 13px 10px;

        &:hover {
            color: var(--color-link);
            border: 1px solid var(--color-link);
        }
    }
    .pagination-first-text,
    .pagination-last-text {
        display: none;
    }
    [class$="-icon"] {
        display: none;
    }
    .pagination-first-link:before,
    .pagination-prev-link:before,
    .pagination-next-link:after,
    .pagination-last-link:before {
        font: var(--fa-font-solid);
        font-size: var(--fs-xxs);
    }
    .pagination-first-link:before { content: "\f100"; }
    .pagination-prev-link:before { content: "\f104"; padding-right: 2px; }
    .pagination-next-link:after { content: "\f105"; padding-left: 2px; }
    .pagination-last-link:before { content: "\f101"; }
}
/* ************************************************** */


/* ************************************************** */
/* *************** COMPONENTS - Icons *************** */

.icon-lock::before,
.icon-star::before,
.icon-agent::before {
    display: inline;
    padding: 6px 8.25px 7px;
    margin-right: 10px;
    font: var(--fa-font-solid);
    border-radius: 50%;
    background-color: var(--color-default);
    color: #FFFFFF;
}
.icon-lock::before { content: "\f30d"; background-color: var(--color-danger); }
.icon-star::before { content: "\e28b"; background-color: var(--color-link); }
.icon-agent::before { content: "\f007"; }

/* Status labels (used in posts, articles and requests) */
.status-label {
    background-color: var(--color-success);
    border-radius: 12px;
    color: #FFFFFF;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    padding: 2px 10px 3px;
    display: inline-block;

    &:hover {
        text-decoration: none;
    }
}
.status-label-pinned,
.status-label-featured,
.status-label-official {
    background-color: var(--color-link);
}
.status-label-official {
    width: 100%;
    border-radius: 0;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;

    @media (min-width: 768px) {
        width: auto;
        border-radius: 0 0 12px 12px;
        right: 10px;
    }
}
.status-label-pending,
.status-label-not-planned {
    background-color: var(--color-gray-light);
    color: var(--color-default);
}
.status-label-open { background-color: var(--color-danger); }
.status-label-closed { background-color: var(--color-gray); }
.status-label-solved { background-color: var(--color-success); }
.status-label-new { background-color: var(--color-warning); }
.status-label-hold { background-color: #000000; }
.requests-sort-symbol {
    font-size: var(--fs-xs);
    padding-left: 5px;
}
/* ************************************************** */


/* ************************************************** */
/* ************* COMPONENTS - Accordions ************ */

.userAccordionMenu {
    max-height: 50px;
    overflow: hidden;
    font-size: var(--fs-sm);
    background-color: var(--color-gray-lighter);
    border-radius: 8px;

    @media (min-width: 768px) {
        height: auto;
        max-height: none;
        background-color: transparent;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
    }
    &[aria-expanded="true"] {
        max-height: none;
    }
    &[aria-expanded="true"] li[aria-selected="true"]::after {
        content: "\f106";
    }
    li {
        order: 1;

        @media (min-width: 768px) {
            border-bottom: 3px solid transparent;
        }
        &:hover {
            @media (min-width: 768px) {
                border-color: var(--color-gray-lighter);
            }
        }
        &[aria-selected="true"] {
            position: relative;
            padding: 12px 16px;
            font-family: var(--ff-body-medium);
            font-weight: 500;
            order: 0;

            &::after {
                content: "\f107";
                font: var(--fa-font-solid);
                position: absolute;
                top: 19px;
                right: 16px;
            }
            @media (min-width: 768px) {
                padding: 16px 0 14px;
                order: 1;
                border-color: var(--color-link);

                &::after {
                    display: none;
                }
            }
            a {
                opacity: 1;
            }
        }
        a {
            display: block;
            padding: 12px 16px;
            color: var(--color-default);
            opacity: 0.5;

            &:hover {
                text-decoration: underline;
                opacity: 1;

                @media (min-width: 768px) {
                    text-decoration: none;
                }
            }
            @media (min-width: 768px) {
                padding: 16px 0 14px;
                opacity: 1;
            }
        }
    }
    ul {
        display: flex;
        flex-direction: column;

        @media (min-width: 768px) {
            flex-direction: row;
            gap: 30px;
        }
    }
}
.userProfile-subNav {
    position: sticky;
    top: 0;
    z-index: 1;
}
#userHeader.userAccordionMenu {
    border-bottom: 0;

    li, a {
        padding-left: 0;
        padding-right: 0;
    }
    li[aria-selected="true"]::after {
        right: 0;
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************ COMPONENTS - Columns Grid *********** */

.colums-grid {
    display: grid;
    gap: 30px;

    @media (min-width: 768px) {
        &.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        &.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        &.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        gap: 40px;
        &.lg\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        &.lg\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        &.lg\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 1280px) {
        gap: 40px;
        &.xl\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        &.xl\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        &.xl\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ************* COMPONENTS - CTA Panels ************ */

.ctaPanels {
    .panel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .panel-title {
        display: flex;
        align-items: start;
        gap: 15px;
        margin-bottom: 10px;

        .icon {
            line-height: 17px;
        }
        .icon-circle {
            display: flex;
            align-items: center;
            flex: 0 0 44px;
            height: 44px;
            padding-bottom: 2px;
            margin-top: -3px;
            border-radius: 50px;
            background-color: var(--color-default);
            font-size: 20px;
            text-align: center;
            color: #FFFFFF;

            &::before {
                flex: 0 0 44px;
            }
            + h2,
            + h3 {
                margin-top: 5px;
            }
        }
    }
    .catPanel {
        transition: 0.3s background-color cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
            background: var(--color-gray-lighter);
            box-shadow: 0 0;
        }
    }
    .productsPanel {
        align-items: center;
        justify-content: center;
        color: var(--color-default);
        outline: 1px solid transparent;


        &#catLink_harmony_ess,
        &#catLink_harmony_adv,
        &#catLink_harmony_pre {
            img {
                width: 173px;

                @media (min-width: 768px) {
                    width: 210px;
                }
            }
        }
        &#catLink_storyboardpro {
            img {
                width: 225px;

                @media (min-width: 768px) {
                    width: 273px;
                }
            }
        }
        &#catLink_producer {
            img {
                width: 185px;

                @media (min-width: 768px) {
                    width: 220px;
                }
            }
        }
    }
}
#reachUs-slide {
    h2 {
        padding-bottom: 10px;
    }
    #reachUs--search {
        .panel-title {
            margin-bottom: 24px;
        }
        .search {
            margin-bottom: 5px;
        }
    }
    [class^=social-links] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 10px;
    }
}
html[lang^=ja] .social-links-en,
html[lang^=en] .social-links-ja,
html[lang^=fr] .social-links-ja,
html[lang^=es] .social-links-ja { display: none !important; }
/* ************************************************** */


/* ************************************************** */
/* ************ COMPONENTS - User Avatar ************ */

.user-avatar {
    display: inline-block;
    position: relative;
    width: 54px;
    height: 54px;

    img {
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
    }
    .icon-agent {
        position: absolute;
        right: -2px;
        bottom: -2px;
        z-index: 1;

        &::before {
            border: 2px solid #FFFFFF;
            width: 18px;
            height: 18px;
            font-size: 9px;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ********** COMPONENTS - Articles List ********** */

.articlesList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--color-border);
    padding: 24px 0 26px;

    &:last-of-type {
        border-bottom: 1px solid var(--color-border);
    }
    .meta-datas {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: space-between;

        @media (min-width: 1024px) {
            flex-direction: row;
            align-items: center;
            gap: 20px;
        }
    }
}

.article-list {
    border: 1px solid var(--color-border-light);
    box-shadow: 0 0;
    margin: 0;

    li {
        padding: 10px 0;

        &:first-of-type {
            padding-top: 0;
        }
        &.section-title {
            padding-top: 0;
            padding-bottom: 30px;
            margin-top: -7px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--color-border-light);

            a {
                line-height: inherit;
            }
            p {
                line-height: var(--lh-xs);
            }
        }
        &:last-of-type {
            padding-bottom: 0;
        }
    }
    a {
        display: block;
        line-height: var(--lh-xs);
    }
    &.colums-grid {
        li {
            padding: 0;
        }
    }
}
/* ************************************************** */

/* ************************************************** */
/* ********** COMPONENTS - Left Navigation ********** */

.page--category,
.page--section,
.page--article {
    #siteHeader {
        border-bottom: 1px solid var(--color-gray-dark);
    }
}
#leftNav {
    display: none;
    position: fixed;
    z-index: 20;
    width: 250px;
    height: 0;
    background-color: var(--color-default);
    border-right: 1px solid var(--color-gray-dark);

    @media (min-width: 1024px) {
        display: flex;
        height: 100vh;
        position: sticky;
        top: 0;
    }
    @media (min-width: 1280px) {
        flex: 0 0 300px;
    }
    #leftNav-innerWrap {
        width: 100%;
        overflow: auto;
    }
    #leftNav-header {
        padding-bottom: 18px;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--color-default);
    }
    #leftNav-title {
        position: sticky;
        transition: none;
        color: #FFFFFF;
        margin: 0;
    }
    [class^="section"] {
        a {
            line-height: 1.2;
            display: block;
            justify-content: space-between;
            padding: 8px 12px 10px;
            margin: 0 -12px 2px;
            background: transparent;
            border-radius: 4px;

            &:before {
                display: none;
            }
            &:hover, &.is-current {
                background-color: var(--color-gray-darker);
            }
        }
    }
}
@media (min-width: 1024px) {
    .leftNav--is-visible {
        #leftNav {
            position: fixed;
            width: 250px;
        }
        [id^=mainContent] {
            padding-left: 250px;
        }
    }
}
@media (min-width: 1280px) {
    .leftNav--is-visible {
        #leftNav {
            width: 300px;
        }
        [id^=mainContent] {
            padding-left: 300px;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ***************** PAGE - ARTICLE ***************** */

#mainContent--article {
    .columns {
        width: 100%;
        display: grid;
        gap: 40px;

        @media (min-width: 1024px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    .tocWrapper {
        position: relative;
        z-index: 1;

        .tocLists {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        a {
            font-size: var(--fs-sm);
            line-height: var(--lh-xs);
            color: var(--color-default);
            opacity: 0.6;

            &:hover {
                opacity: 1;
            }
        }
        .secondTier {
            padding-left: 16px;
        }
        &.inRight {
            align-self: start;
            order: 9999;
            display: none;
            width: 100%;
            position: sticky;
            top: 0;
            overflow: hidden;

            @media (min-width: 1024px) {
                grid-column: span 1 / span 1;
                display: flex;
                flex-direction: column;
            }
            @media (min-width: 1536px) {
                padding-left: 30px;
            }
            .tocLists {
                overflow: auto;
            }
            a.active {
                opacity: 1;
            }
        }
        &:not(.inRight) {
            @media (min-width: 1024px) {
                display: none;
            }
        }
    }
    .tocTarget {
        display: block;
        width: 100%;
        position: relative;
        z-index: -1;
        transition: none;
    }
    .article-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;

        @media (min-width: 1024px) {
            grid-column: span 2 / span 2;
        }
        .icon-lock {
            display: inline-block;
            background: var(--color-danger-light);
            font-family: var(--ff-heading-semibold);
            border-radius: 50px;
            padding: 5px 16px 6px 0;

            &:before {
                font-size: 125%;
                vertical-align: middle;
            }
            + h1 {
                margin-top: 20px !important;
            }
        }
        hr:not(.set2default) {
            margin: 0;
        }
        img {
            height: auto !important;
        }
        br + img {
            margin: 25px 0;
        }
        li br + img:last-child {
            margin-bottom: 12px;
        }
    }
    .article-short-info {
        position: relative;
        z-index: 1;
        gap: 20px;
    }
    .article-share {
        position: relative;
        z-index: 1;

        .share {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;

            &.space-between {
                justify-content: space-between;
            }
            a.share-facebook,
            a.share-twitter,
            a.share-linkedin {
                font-size: 0;
                padding: 6px 0 5px;
                width: 37.66px;

                &:before {
                    font: var(--fa-font-brands);
                    font-size: var(--fs-sm);
                    line-height: var(--lh-sm);
                }
                svg {
                    display: none;
                }
            }
            a.share-facebook:before { content: "\f39e"; }
            a.share-twitter:before { content: "\e61b"; }
            a.share-linkedin:before { content: "\f0e1"; }
        }
    }
    .article-body {
        > :first-child,
        > ul > li:first-child,
        > ol > li:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        > :last-child,
        > ul > li:last-child,
        > ol > li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }
        li :last-child,
        li :last-child {
            margin-bottom: 0;
        }
        > .tocTarget:first-child + h2,
        > .tocTarget:first-child + .article-h2,
        > .tocTarget:first-child + h3,
        > .tocTarget:first-child + .article-h3 {
            margin-top: 0;
        }
        ul,
        ol {
            padding-left: 30px !important;
        }
        ul {
            list-style: disc;

            > li {
                padding: 0 0 16px 10px;
            }
        }
        ol {
            list-style: decimal;

            > li {
                padding: 0 0 16px 15px;
            }
        }
        ul > li,
        ol > li {
            :not(p) + ul,
            :not(p) + ol {
                padding-top: 10px;
            }
            ul,
            ol {
                &:last-of-type li:last-of-type {
                    padding-bottom: 0;
                }
            }
        }
        > ul,
        > ol {
            padding-bottom: 10px;
            padding-left: 10px;
        }
        ul + h2,
        ul + .article-h2,
        ol + h2,
        ol + .article-h2 {
            margin-top: 25px;
        }
        ul + h3, ul + .article-h3,
        ul + h4, ul + .article-h4,
        ul + h5, ul + .article-h5,
        ul + h6, ul + .article-h6,
        ol + h3, ol + .article-h3,
        ol + h4, ol + .article-h4,
        ol + h5, ol + .article-h5,
        ol + h6, ol + .article-h6 {
            margin-top: 15px;
        }
        div + p {
            margin-top: 24px;
        }
        p + div > table.calloutTable {
            margin-top: 30px;
        }
        ul + p,
        ol + p {
            margin-top: 10px;
        }
        li .callout {
            margin-top: 24px;
            margin-bottom: 10px;
        }
        li .wysiwyg-text-align-center {
            margin: 25px auto 10px;
        }
        li:last-of-type img:last-child {
            margin-bottom: 0 !important;
        }
        h2, .article-h2 {
            margin-top: 30px;
        }
        h3, .article-h3 {
            margin-top: 30px;
        }
        h4, .article-h4,
        h5, .article-h5,
        h6, .article-h6 {
            margin-top: 10px;
        }
        h2, h3, h4, h5, h6 {
            > span:only-child {
                color: inherit !important;
            }
        }
        .callout {
            padding: 21px 25px 25px 55px;
            line-height: var(--lh-default);

            @media (min-width: 1024px) {
                padding-left: 60px;
            }
            &:before {
                content: "\f05a";
                font: var(--fa-font-regular);
                font-size: 20px;
                text-align: center;
                width: 24px;
                position: absolute;
                top: 2px;
                margin-left: -34px;
                padding-top: inherit;
            }
            &.note:before {
                content: "\e1ff";
                color: var(--color-info);
            }
            &.tip:before {
                content: "\f672";
                color: var(--color-success);
            }
            &.warning:before {
                content: "\f071";
                color: var(--color-warning);
            }
            &.error:before {
                content: "\f057";
                color: var(--color-danger);
            }
            & + h2, & + .article-h2 {
                margin-top: 55px;
            }
            & + h3, & + .article-h3,
            & + h4, & + .article-h4,
            & + h5, & + .article-h5,
            & + h6, & + .article-h6 {
                margin-top: 40px;
            }
            > ul:last-child > li:last-child {
                padding-bottom: 0;
            }
            p {
                margin-bottom: 10px;
            }
            li {
                padding-bottom: 10px;
            }
        }
        .callout {
            margin-top: 15px;
            margin-bottom: 24px;
        }
        table {
            td {
                vertical-align: middle;
            }
            &.calloutTable {
                overflow: auto;
                outline: none;
              	border: 0 !important;
            }
        }
        img {
            vertical-align: middle;
        }
        .soloImg {
            border: 1px solid var(--color-border-light);
            border-radius: 8px;
            display: block;
            margin: 15px auto 22px;
        }
        p + p .soloImg {
            margin-top: 28px;
        }
        li > .code {
            margin: 12px 0;
        }
        li > pre {
            margin-top: 24px;

            &:last-child {
                margin-bottom: 6px !important;
            }
        }
        ul + div > figure.wysiwyg-table,
        ol + div > figure.wysiwyg-table,
        ul + div > table,
        ol + div > table {
            margin: 15px auto 24px;

            > table {
                margin: 0;
            }
        }
        p + div > figure.wysiwyg-table,
        p + div > table,
        div + div > figure.wysiwyg-table {
            margin: 29px auto 26px;

            > table {
                margin: 0;
            }
        }
    }
    .article-suffix {
        > * {
            padding: 16px 0;
        }
        > * ~ *,
        > :first-child {
            border-top: 1px solid var(--color-border);
        }
        > :last-child {
            border-bottom: 1px solid var(--color-border);
        }
        .item-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            column-gap: 10px;
            row-gap: 5px;
            font-size: var(--fs-sm);
            line-height: var(--lh-xs);
            margin-top: -2px;

            a {
                font-size: var(--fs-xs);
                line-height: var(--lh-xs);
                padding: 1px 12px 3px !important;
            }
        }
    }
    .article-votes {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .article-vote {
        display: flex;
        align-items: center;

        &:before {
            font: var(--fa-font-regular);
            font-size: 140%;
            padding-right: 8px;
            margin-bottom: -2px;
        }
        &:after {
            content: attr(title);
        }
    }
    .article-vote-up {
        &:before { content: "\f59a"; }
    }
    .article-vote-down {
        &:before { content: "\e376"; }
    }
    .related-articles {
        ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        a {
            display: block;
            line-height: var(--lh-xs);
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* ******************* PAGE - HOME ****************** */

.page--home,
.page--submitRequest,
.page--searchResults {
    > main {
        padding-top: 0 !important;
    }
    #siteHeader {
        border: 0;
        background: transparent;

        &.fixedHeader {
            background: var(--color-default);
            transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
        }
    }
}
#promotedArticles-tabs {
    display: flex;

    input {
        display: none;
    }
    .triggersWrapper {
        width: 300px;
        max-width: 40%;
        margin: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        label {
            position: relative;
            cursor: pointer;
            display: block;
            padding: 10px 0;
            line-height: var(--lh-xs);
            transition: all 0.5s ease;
            color: var(--color-gray);

            &:hover {
                color: var(--color-default);
            }
            &.is-current {
                color: var(--color-default);

                &:after,
                &:before {
                    content: "";
                    position: absolute;
                    right: -31px;
                    top: 0;
                    bottom: 0px;
                    z-index: 10;
                    width: 22px;
                    background: var(--color-gray-lightest);
                    clip-path: polygon(100% 0, 100% 100%, 0 50%);

                    @media (min-width: 1024px) {
                        right: -41px;
                    }
                }
                &:before {
                    top: -10px;
                    bottom: -10px;
                    width: 31px;
                    background: #FFFFFF;
                }
            }
            &:first-of-type {
                margin-top: -10px !important;
            }
            &:last-of-type {
                margin-bottom: -10px !important;
            }
        }
    }
    .targetsWrapper {
        flex-grow: 1;
        position: relative;
        margin: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 6px solid #FFFFFF;
        /* border: 1px solid var(--color-border-light); */
        /* border-left: 0; */
        /* background: #FFFFFF; */

        @media (min-width: 768px) {
            grid-column: span 2 / span 2;
        }
        @media (min-width: 1024px) {
            grid-column: span 3 / span 3;
        }
        .target {
            display: none;
            margin: -10px 0;

            &.is-current {
                display: block;
            }
            li {
                padding: 10px 0;
            }
            a {
                display: block;
                line-height: var(--lh-xs);
            }
        }
    }
    /* .accrodianList {
        border-top: 1px solid var(--color-border-light);

        &:last-of-type {
            border-bottom: 1px solid var(--color-border-light);
        }
        input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }
        .accrodianTrigger {
            cursor: pointer;
            transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            gap: 12px;
            padding: 20px 12px 24px;
            line-height: 1.2;

            &:before {
                content: "\f105";
                color: var(--color-link);
                font: var(--fa-font-solid);
                padding-top: 1px;
                width: 16px;
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
                transform-origin: center;
            }
            &:hover {
                background-color: var(--color-gray-lightest);
            }
        }
        .accrodianContent {
            li {
                padding: 0 0 20px 30px;

                &:last-of-type {
                    padding-bottom: 10px;
                }
            }
            a {
                display: block;
                line-height: var(--lh-xs);
            }
        }
        .accrodianContent-wrapper {
            display: grid;
            grid-template-rows: 0fr;
            transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);

            .accrodianContent {
                overflow: hidden;
                padding: 0 10px;
                margin: 0;
                transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
        input:checked + .accrodianTrigger {
            background: transparent !important;
            font-family: var(--ff-body-medium);
            font-weight: 500;

            &:before {
                transform: rotate(90deg);
                color: var(--color-default);
            }
        }
        input:checked ~ .accrodianContent-wrapper {
            grid-template-rows: 1fr;

            .accrodianContent {
                padding-bottom: 30px;
            }
        }
    } */
}
/* ************************************************** */


/* ************************************************** */
/* ************** PAGE - SEARCH RESULTS ************* */

#mainContent--searchResults {
    .columns {
        width: 100%;
        display: grid;
        row-gap: 40px;
        grid-template-columns: repeat(1, minmax(0, 1fr));

        @media (min-width: 768px) {
            gap: 40px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        @media (min-width: 1024px) {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }
    }
    .searchFilters-wrapper {
        @media (min-width: 768px) {
            order: 9999;
        }
        @media (min-width: 1024px) {
            grid-column: span 2 / span 2;
        }
        .filterGroup {
            background-color: var(--color-gray-lighter);
            border-radius: 8px;
            height: 50px;
            overflow: hidden;

            @media (min-width: 768px) {
                height: auto;
            }
            input[type=checkbox] {
                display: none;
            }
            h2 {
                padding: 20px;
                margin-bottom: 0;

                @media (max-width: 768px) {
                    padding: 16px 20px;
                    cursor: pointer;
                    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &:after {
                        content: "\f107";
                        font: var(--fa-font-solid);
                        margin-bottom: -3px;
                    }
                    &:hover {
                        background: var(--color-gray-light);
                    }
                }
            }
            ul {
                padding: 0 20px 20px;

                @media (max-width: 768px) {
                    padding-bottom: 16px;
                }
            }
            @media (max-width: 768px) {
                &.is-open {
                    height: auto;

                    h2 {
                        background: var(--color-gray-light);

                        &:after {
                            content: "\f106";
                        }
                    }
                    ul {
                        margin-top: 15px;
                    }
                }
            }
        }
        .sidenav-item {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 6px 0;
            font-size: var(--fs-sm);
            line-height: var(--lh-xs);
            color: var(--color-default);
            opacity: 0.5;

            &:hover,
            &.current {
                opacity: 1;
            }
        }
        li:first-of-type .sidenav-item {
            padding-top: 0;
        }
        li:last-of-type .sidenav-item {
            padding-bottom: 0;
        }
        .sidenav-tag {
            display: inline-block;

            .sidenav-item {
                gap: 5px;
                background-color: var(--color-gray-lightest);
                padding: 4px 12px 5px !important;
            }
        }
    }
    .searchResults-wrapper {
        grid-column: span 2 / span 2;

        @media (min-width: 1024px) {
            padding-right: 30px;
            grid-column: span 6 / span 6;
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* **************** USER PAGES - MISC *************** */

#mainContent--myRequests,
#mainContent--contributions,
#mainContent--following {
    #content {
        display: grid;
        gap: 30px;
    }
    #pageTitle {
        margin-bottom: -25px;
    }
    .userAccordionMenu:not(#userHeader) {
        @media (max-width: 768px) {
            margin-top: 20px;
        }
    }
}
.requests-table-toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    @media (min-width: 768px) {
        flex-direction: row;
    }
    .search {
        flex: 1;
        width: 100%;
    }
    .request-table-filter {
        line-height: 1;

        @media (max-width: 768px) {
            width: 100%;
        }
    }
}
.sort-button-wrapper {
    a {
        border-radius: 50px;
        color: var(--color-default);
        font-size: var(--fs-xs);
        padding: 4px 15px 5px;
        display: inline-block;
        background: var(--color-gray-light);

        &[aria-selected=true] {
            color: #FFFFFF;
            background: var(--color-default);
        }
    }
}
/* ************************************************** */


/* ************************************************** */
/* *************** USER PAGES - PROFILE ************* */

.profile-header {
    margin-top: -40px;
    padding: 40px 0;

    @media (min-width: 768px) {
        margin-top: -55px;
        padding: 55px 0;
    }
    @media (min-width: 1280px) {
        margin-top: -70px;
        padding: 70px 0;
    }

    .profile-user-details {
        display: grid;
        gap: 5px;
        flex-grow: 1;
        flex-basis: 0;
    }
    .profile-stats {
        column-gap: 50px;
        row-gap: 30px;

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: start;
            gap: 25px;
        }
        @media (min-width: 768px) {
            justify-content: space-between;
        }
    }
}
.profile-activity {
    position: relative;
    padding-bottom: 30px;

    @media (min-width: 768px) {
        padding-left: 25px;
        margin-left: 5px;
    }
    &:not(:last-child) {
        @media (min-width: 768px) {
            border-left: 1px solid var(--color-border);
        }
    }
    &::before {
        width: 28px;
        padding: 10px 0;
        background-color: var(--color-gray-lightest);
        text-align: center;
        font: var(--fa-font-sharp-light);
        color: var(--color-gray);
        position: absolute;
        left: -14px;
        top: -4px;

        &::before {
            @media (min-width: 768px) {
                left: -14px;
            }
        }
    }
}
.profile-activity-list > li[class$="-article"]::before {
    content: "\e1d8";
}
.profile-activity-list > li[class$="-post"]::before {
    content: "\f02d";
}
.profile-activity-list > li[class$="-comment"]::before {
    content: "\f086";
}
.profile-activity-header {
    margin-left: 40px;

    @media (min-width: 768px) {
        margin-left: 0;
    }
    span:first-child {
        font-weight: 600;
        display: inline;
    }
}
.profile-activity-contribution {
    margin: 0;
}
.profile-activity-contribution,
.profile-contribution .panel {
    position: relative;
    display: grid;
    gap: 10px;

    > * {
        margin-bottom: 0;
    }
}
.profile-contribution:last-of-type .panel {
    margin-bottom: 0;
}
/* ************************************************** */


/* ************************************************** */
/* *************** USER PAGES - REQUEST ************* */

.request-container {
    width: 100%;
    display: grid;
    gap: 40px;

    @media (min-width: 1024px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.requestDetails {
    @media (min-width: 1024px) {
        grid-column: span 1 / span 1;
        order: 1;
    }
    dl {
        margin: 0;
        display: grid;
        grid-gap: 5px 15px;
        grid-template-columns: 2fr 3fr;
        font-size: var(--fs-sm);
    }
    dt {
        font-family: var(--ff-body-medium);
        font-weight: 500;
    }
    dd {
        margin: 0;
    }
    hr {
        margin: 20px 0;
    }
    .attachments {
        font-size: var(--fs-sm);
    }
}
.requestMain {
    @media (min-width: 1024px) {
        grid-column: span 2 / span 2;
    }
    .comment-fields,
    .request-submit-comment {
        display: none;
    }
    .comment-fields.shown,
    .comment-ccs,
    .comment-form-controls,
    .request-submit-comment.shown {
        display: block;
    }
    .request-submit-comment input[type="submit"] {
        margin-top: 1.75rem;
    }
    .comment-show-container {
        cursor: pointer;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 12px 20px 16px;
    }
    .comment-ccs {
        + textarea {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0;

            &:focus {
                border-top: 1px solid rgba(0, 111, 249, 1);
            }
        }
        &.form-field {
            > ul {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border-bottom: 0;
            }
            > ul[data-hc-focus="true"] {
                border: 1px solid rgba(0, 111, 249, 1);
            }
            > input[type="text"] {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border-bottom: 0;
            }
        }
    }
    input#mark_as_solved {
        display: none;
    }
    .zd-comment {
        :last-child {
            margin-bottom: 0;
        }
    }
}
/* ************************************************** */