/* 
    QC Registry
    Website CSS - Desktop
    By: Glimsol Web & Digital Solutions (PH)
*/

@font-face { font-family: 'BiggerDisplay'; src: url('../fonts/BiggerDisplay.otf'); font-display: swap;}
@font-face { font-family: 'BebasNeue'; src: url('../fonts/BebasNeue-Regular.ttf'); }

:root {
    --qcregistry-blue: #082159;
    --qcregistry-white: #FFFFFF;
    --qcregistry-dirty-white: #fcfcfc;
    --qcregistry-mid-blue: #1C3B95;
    --qcregistry-dark-blue: #010D29;
    --qcregistry-red: #D92615;
    --qcregistry-darker-red: #ab1204;
    --qcregistry-yellow: #FEB846;
    --qcregistry-gray: #676767;
    --qcregistry-dark-gray: #444444;
    --qcregistry-light-gray:#E4E4E4;
    --qcregistry-gradient-blue: transparent linear-gradient(180deg, #1C3B95 0%, #001034 100%) 0% 0% no-repeat padding-box;
    --form-section-gap: 20px;
    --qcregistry-lavender: #e0e8ff;
}

/* Global CSS  */
body { font-family: Neue Haas;}
hr { margin: 0;}
.region-sidebar-first, .region-sidebar-second, .region-footer, .region-content{padding: 0;}
.owl-carousel .owl-dots { display: flex; column-gap: 10px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
.owl-carousel .owl-dots button.owl-dot { background: rgba(255, 255, 255, 0.72); width: 10px; height: 10px; border-radius: 50%;}
.owl-carousel .owl-dots button.owl-dot.active { background: var(--qcregistry-yellow);}
.content-section-spacing {padding-block: 30px;}
.cta-btn { width: fit-content; display: flex; padding: 5px 30px; border-radius: 5px; border: 2px solid; text-decoration: none; font-weight: 500; color: var(--qcregistry-blue); position: relative; transition: all 300ms; align-items: center;}
.cta-btn:before { content: ''; width: 0%; height: 100%; position: absolute; left: 0; top: 0; display: grid; place-content: center; z-index: -1; background: var(--qcregistry-yellow); transition: all 300ms;}
.cta-btn:hover::before{ width: 100%;}
.cta-btn:hover{border-color: #FEB846; color: var(--qcregistry-white);}
.cta-btn svg { margin-left: 8px;}
.red-cta.cta-btn { display: inline; text-transform: uppercase; background-color: var(--qcregistry-red); color: white; padding: 10px 30px; border: none;}
.red-cta.cta-btn:hover { background-color: var(--qcregistry-darker-red); border: none;}
.red-cta.cta-btn::before{ display: none;}
.navbar-nav .nav-link:has(i),
.navbar-nav .nav-link:has(svg) { display: flex; align-items: center; gap: 10px;}
.accordion-button:not(.collapsed) { color: white; background-color: var(--qcregistry-mid-blue); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--qcregistry-mid-blue);}
.navbar-nav a.nav-link.active { color: var(--qcregistry-yellow);}
.form-check-input[type=checkbox] { margin-right: 5px;}
.center-text { text-align: center;}
.left-text {text-align-last: left;}
.right-text { text-align: right;}
.text-white { color: var(--qcregistry-white);}

/* Header  */
.header-navbar {padding-top: 1em;}
.region.region-header{position: relative; display: flex; align-items: center;}
.region.region-header p {margin-bottom: 0;}
.region-header #block-qcregistry-headerbackground > .field__item{ height: 100%;}
.region-header #block-qcregistry-headerbackground img { height: 100%; width: auto; object-fit: cover; aspect-ratio: 1350/283; min-height: 300px;}
.region-header #block-qcregistry-headerbackground{position: relative; min-height: 300px;}
.region-header #block-qcregistry-headerbackground::before { position: absolute; top: 0; left: 0; width: 100%; content: ''; z-index: 2; height: 100%;}
/* .region-header #block-qcregistry-sitebranding-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
.region-header #block-qcregistry-sitebranding-2 img { margin-right: 0; height: 200px;} */
header .main-navbar { background: var(--qcregistry-mid-blue) !important; padding-block: 10px;}
header .main-navbar .navbar-nav .nav-link { text-transform: uppercase; color: var(--qcregistry-white); transition: all 300ms;}
header .main-navbar .navbar-nav .nav-link.active { color: var(--qcregistry-yellow);}
header .main-navbar .navbar-nav .nav-link:hover { color: var(--qcregistry-yellow);}
header .header-navbar .navbar-nav .nav-link { text-transform: uppercase; color: black; transition: all 300ms;}
header .header-navbar .navbar-nav .nav-link:hover { color: var(--qcregistry-yellow);}
header .header-navbar .navbar-nav .nav-link.dropdown-toggle{ background-color: var(--qcregistry-blue); color: white; padding: 10px 16px; border-radius: 5px; }
header .header-navbar ul.navbar-nav { align-items: start;}
header .navbar #navbarSupportedContent .region-nav-main{ display: flex; justify-content: center; width: 100%; align-items: center;}
#block-qcregistry-main-navigation li { padding-right: 20px;}
#block-qcregistry-secondarynavigation li:first-child { border-right: 1px solid var(--qcregistry-white);}
#block-qcregistry-secondarynavigation li a { padding-block: 0;}

.region-header-nav  #block-qcregistry-headernavigation .nav li:nth-of-type(2) a { position: relative; }
.region-header-nav  #block-qcregistry-headernavigation .nav li:nth-of-type(2) { margin-right: 14px; }
.region-header-nav  #block-qcregistry-headernavigation .nav li:nth-of-type(2) a::after { content: "IT'S FREE!"; background-color: var(--qcregistry-red); color: white; padding: 3px 6px; border-radius: 2em; position: absolute; top: -12px; right: -6px; font-size: 0.6rem; font-weight: 500; }

/* Navbar */
.navbar .region-nav-branding {display: none;}

/* Footer  */
footer.footer-section { padding: 0;}
footer .main-footer { background-color: black; color: white; padding-block: 30px;}
footer .main-footer .socmed-contacts p { margin-bottom: 0;}
footer .main-footer form .form-type-checkbox {margin-top: 0; margin-bottom: 0; font-size: 0.9rem;}
footer .strip-footer { background: var(--qcregistry-white); color: black;}
#block-qcfc-brandlogoblock img { width: auto; max-width: 100%; height: 65px;}
#block-qcfc-footerinformation p { font-size: 0.85rem; margin-bottom: 0;}
#block-qcfc-footerinformation h6 { line-height: 1.6; font-weight: 500; margin-bottom: 5px;}
#block-qcfc-footerinformation { max-width: 450px;}
.region.region-footer { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;}
footer .strip-footer > .container { display: flex; justify-content: space-between; align-items: center; gap: 20px;}
#block-qcfc-footercopyright p { margin-bottom: 0;}
/* footer .strip-footer nav { width: 100%;} */
footer .strip-footer .nav.navbar-nav { display: flex; flex-direction: row;}

/* .footer-ribbon { border-top: 1px solid rgba(250, 250, 250, .4); padding-top: 10px; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;} */
.footer-social { display: flex; gap: 20px; font-size: 1.3rem;}
.footer-social a {color: var(--qcregistry-white);}
.region.region-footer nav ul li:not(:last-child) { border-right: 1px solid var(--qcregistry-white);}
.region.region-footer nav ul li a { padding: 0 15px; font-size: 0.95rem;}
.region.region-footer nav ul li:last-child a{ padding-right: 0;}

/* Homepage  */
.banner-section .owl-nav.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; pointer-events: none;}
.banner-section .owl-nav.container button{ background: var(--qcregistry-mid-blue); width: 35px; height: 35px; border-radius: 50%; color: var(--qcregistry-white); display: grid; place-content: center; pointer-events: all;}
.banner-section .owl-carousel .owl-item img { aspect-ratio: 1366 / 545; object-fit: cover;}
.banner-content > .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*max-width: 650px;*/ color: var(--qcregistry-white); text-align: center; text-wrap: pretty; font-size: 1.1rem;}
.banner-content { position: relative;}
.banner-content > .container > h4 { font-size: clamp(2rem, 8vw + 1rem, 4.5rem ); font-family: 'BiggerDisplay'; margin-bottom: 15px; letter-spacing: 1px;}
.banner-content-description { font-weight: 300;}
.banner-content-description strong { font-weight: 500;}
/* .banner-content > .container > a { display: block; width: fit-content; margin: 30px auto 0; text-decoration: none; text-transform: uppercase; border: 2px solid; padding: 5px 30px; border-radius: 30px; transition: all 300ms; color: var(--qcregistry-white); position: relative; overflow: hidden;}
.banner-content > .container > a:hover { border-color: var(--qcregistry-yellow);}
.banner-content > .container > a::before{ content: ''; width: 100%; height: 0%; position: absolute; z-index: 3; bottom: 0; left: 0; transition: all 300ms; background-color: var(--qcregistry-yellow); border-radius: 30px;}
.banner-content > .container > a:hover::after{ content: attr(data-text); width: 100%; height: 100%; position: absolute; z-index: 5; top: 0; left: 0; transition: all 300ms; color: var(--qcregistry-white); display: grid; place-content: center;}
.banner-content > .container > a:hover::before{ height: 100%;} */

/* Registration Page */
/* .registry-banner { padding: 80px 0;} */
.registry-banner { position: relative;}
.registry-banner img { position: relative; z-index: -1;}
.registry-banner .container { position: absolute; inset: 0; display: flex; padding: 50px 0;}
.registry-banner .container .banner-text { margin-top: auto; }
.registry-banner .container .banner-text .title-white { font-size: 4.5rem; line-height: 0.9; margin-top: 1rem; }
.content-registration .large-text-w-button .text-content { background-color: var(--qcregistry-blue);}
.content-registration .large-text-w-button .cta-btn { display: inline-block; text-transform: uppercase; background-color: var(--qcregistry-red); color: white; padding: 10px 30px; border: none; margin-top: 80px;}
.content-registration .large-text-w-button .cta-btn:hover { background-color: var(--qcregistry-darker-red); border: none; }
.content-registration .content-application-requirements .title { text-align: center;}
.content-registration .content-application-requirements .qualification-wrapper-check { grid-template-columns: repeat(2, 1fr); width: min(1000px, 100%); margin: 0 auto; column-gap: 80px; }
/* .rbanner-title { font-size: 5rem; font-family: 'BiggerDisplay'; line-height: 1; color: var(--qcregistry-white); z-index: 4; position: relative; margin-bottom: 0; letter-spacing: 1px;}
.rbanner-title { font-size: 4rem; text-wrap: balance; width: min(100%, 1000px);}
.rbanner-title.smaller { font-size: 3.65rem;}
.rbanner-img,
.rbanner-info img { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.rbanner-info { margin-block: 30px; padding: 50px 50px 40px; position: relative; z-index: 2; overflow: hidden; border-radius: 5px;}
.rbanner-info::before{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(90deg, rgba(2,21,64,0.8) 0%, rgba(28,59,149,0.6) 100%); z-index: 1;} */
/* .content-registration { padding-block: 30px;} */
.registry-gcard { padding: 30px; box-shadow: 0px 2px 12px #9B9B9B4D; height: 100%; display: inline-flex ; flex-direction: column; justify-content: space-between; align-items: self-start;}
.registry-gcard a:not(.rg-signup) { text-decoration: none; color: var(--qcregistry-blue); display: flex; flex-direction: column; height: 100%; align-items: flex-start;}
.registry-gcard h3 { font-size: 1.5rem; text-transform: uppercase; font-weight: 700; text-wrap: pretty;}
.registry-gcard p:not(.rg-signup) { color: var(--qcregistry-gray);}
.registry-gcard img { height: 45px; width: auto; margin-bottom: 15px;}
.node-7 .registry-gcard .rg-signup { font-size: 0.9rem; font-weight: 500;}
.registry-gcard .rg-signup { /* transition: all 0.5s ease; */ text-decoration: none; font-size: 0.9rem; font-weight: 500; margin-block: auto 0; color: var(--qcregistry-blue) !important; background-color: white; border-radius: 10px;} /*padding: 5px 20px; */
.registration-gcards li > div, .registration-gcards li > div > span { height: 100%; display: block;}
.qualification-wrapper{margin-top: 30px;}
.qualification-item p { font-size: 0.9rem; color: var(--qcregistry-dark-gray);}

/* Sign in Popup */
.signin-image-wrapper #block-qcregistry-sitebranding {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.signin-image-wrapper {position: relative; height: 100%;}
.signin-image-wrapper > #block-qcregistry-signinbackground,
.signin-image-wrapper > #block-qcregistry-signinbackground > div{height: 100%;}
.signin-image-wrapper #block-qcregistry-signinbackground img { width: 100%; height: 100%; object-fit: cover; object-position: left;}
.signin-form-wrapper { display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; padding-inline: 10px 20px;}
.signin-form-wrapper .btn-close { position: absolute; right: 15px; top: 15px;}
.signin-form-wrapper #block-qcregistry-sigindescription p:last-child { margin-bottom: 0;}
.signin-form-wrapper #edit-actions input { width: 100%; background: var(--qcregistry-mid-blue); border: none; border-radius: 5px;}
.signin-form-wrapper #edit-actions {position: relative;}
.signin-form-wrapper #edit-actions::before { pointer-events: none; transition: all 300ms; border-radius: 5px; position: absolute; content: ''; top: 0; left: 0; width: 0; height: 100%; background: var(--qcregistry-yellow); z-index: 2; cursor: pointer}
.signin-form-wrapper #edit-actions::after{ pointer-events: none; content: 'Continue';position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; display: grid; place-content: center; color: var(--qcregistry-white); cursor: pointer;}
.signin-form-wrapper #edit-actions:hover::before { width: 100%;}
.signin-form-wrapper #block-qcregistry-userlogin .item-list ul { margin: 0; list-style: none; display: flex; justify-content: center;}
#block-qcregistry-userlogin .item-list ul li { margin: 0;}
#block-qcregistry-userlogin .item-list ul li a { text-decoration: none; color: var(--qcregistry-gray);}
#block-qcregistry-userlogin .item-list ul li:not(:last-child) a { padding-right: 10px; border-right: 1px solid; margin-right: 10px;}
.sign-in-link{ cursor: pointer;}
.signin-form-wrapper #block-qcregistry-userlogin .form-item--error-message { font-size: 0.8rem; margin-top: 5px; font-weight: 300; font-family: 'Neue Haas';}
.signin-form-wrapper #block-qcregistry-sigindescription p { color: var(--qcregistry-gray);}

/* Sign up page */
.node-7 .rbanner-title.smaller { font-size: 2.5rem; margin-bottom: 5px;}
.node-7 .rbanner-title { font-size: 5rem;}

/* Landing Page  */
.content-landing-page .rbanner-title { width: 40%; text-wrap: pretty; text-transform: uppercase; font-size: 3rem;}

/* Profile wrapper */
.profile-img { width: 30px; object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1; margin-right: 10px;}
.region-header-nav ul.dropdown-menu { background: var(--qcregistry-blue); text-transform: uppercase; font-size: 0.9rem; min-width: 200px; border-radius: 3px;}
.region-header-nav a.nav-link.dropdown-toggle.show { color: var(--qcregistry-yellow);}
.region-header-nav a.nav-link.dropdown-toggle::after{ transition: rotate 300ms;}
.region-header-nav a.nav-link.dropdown-toggle.show::after { rotate: 180deg;}
.navbar-nav .dropdown-menu .nav-link { padding-inline: 15px;}
.profile-menu > ul { list-style: none; padding: 0; margin-bottom: 0;}

/* Register  */
/* #edit-qcraw-profiles-wrapper details { border: none; padding: 0; margin: 0;} */
.user-register-form details { border: none; padding: 0; margin: 0;}
.user-register-form summary { display: none;}
.user-register-form .details-wrapper h3 a { display: block; text-decoration: none; border: 1px solid var(--qcregistry-blue); background: var(--qcregistry-blue); color: var(--qcregistry-white); padding: 15px 20px; flex-grow: 1;}
.user-register-form .details-wrapper h3 { font-weight: normal; font-family: 'Neue Haas'; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; border-radius: 4px; overflow: hidden; margin-bottom: 0;display: flex; width: 100%; background: var(--qcregistry-blue);}
.user-register-form .details-wrapper h3::after { content: '\f0d8'; font: var(--fa-font-solid); color: var(--qcregistry-white); display: flex; justify-content: center; align-items: center; font-size: 1.3rem; padding-inline: 20px; transition: all 300ms;}
.user-register-form .details-wrapper .collapsed h3::after { rotate: -180deg;}
.user-register-form .details-wrapper > div .field-group-wrapper { padding: 0 20px !important; width: 100% !important;}
.user-register-form .details-wrapper > div { margin-bottom: 10px; border: 1px solid var(--qcregistry-blue);  border-radius: 5px;}
.user-register-form .field-group-wrapper { color: var(--qcregistry-dark-blue);}
.user-register-form details > .details-wrapper { padding: 0; counter-reset: accordion-ctr;}
.user-register-form details > .details-wrapper > div { counter-increment: accordion-ctr;}
.user-register-form details > .details-wrapper h3 a::before { content: counter(accordion-ctr) '. ';}
.user-register-form details .form-checkboxes .form-item,
.user-register-form details .form-radios .form-item{display: flex; align-items: center; gap: 7px;}
.user-register-form #edit-account { display: none;}
.user-register-form .clearfix .input { background-color: var(--qcregistry-mid-blue); color: white;}
.user-register-form div.field--type-datetime {}
.field--type-markup {  width: 100%;} /* margin-block: 1em; */
/* #block-qcregistry-qcrawregister .rbanner-title { font-size: 4rem; text-wrap: balance; max-width: 700px;}
#block-qcregistry-qcrawregister .rbanner-info { margin-block: 30px;} */
.account-credentials + .field-group-wrapper .field--name-field-profile { display: none;}
.section-row + .field-group-wrapper > div.field--name-field-house-address,
.section-row + .field-group-wrapper > div.field--name-field-pay-rate-per-day-in-pesos,
.section-row + .field-group-wrapper > div.field--name-field-pay-rate-per-show-in-pesos,
.section-row + .field-group-wrapper > div.field--name-field-package-rate-per-project-i,
.section-row + .field-group-wrapper > div.field--name-field-occupational-status,
.section-row + .field-group-wrapper > div.field--name-field-notes-on-rate,
.section-row + .field-group-wrapper > div.field--name-field-i-am-currently-employed-he
.section-row + .field-group-wrapper > div.field--name-field-affiliation{ width: 100% !important;} /* I can't decide how to increase specifit against the selector that makes it 50% width */
.field--name-field-project-engagement input.btn { border: 2px solid var(--qcregistry-blue); background: transparent; color: var(--qcregistry-blue); font-weight: 500;}
.field--name-field-project-engagement input.btn:hover { color: var(--qcregistry-white); background: var(--qcregistry-yellow); border-color: var(--qcregistry-yellow);}
.modifiedDropdownList { background: rgba(0, 0, 0, 0.5);}
.modifiedDropdownList .modal-header { justify-content: space-between; align-items: center; padding: 10px 20px;}
.modifiedDropdownList .modal-header p:has(button) { margin: 0;}
.modifiedDropdownList .modal-header button { margin: 0; border: none; background: none; font-size: 1.5rem; transition: all 300ms;}
.modifiedDropdownList .modal-header button:hover{ color: var(--qcregistry-yellow);}
.modifiedDropdownList .list-item ul a { text-decoration: none; color: var(--qcregistry-mid-blue); transition: all 300ms;}
.modifiedDropdownList .list-item ul a:hover { color: var(--qcregistry-yellow);}
.modifiedDropdownList .list-item ul { list-style: none; padding-left: 0;}
.modifiedDropdownList .modal-footer button { background: var(--qcregistry-blue); border: none; padding: 3px 15px;}
.modifiedDropdownList .modal-footer button:hover { background: var(--qcregistry-yellow);}
.field--name-field-region > div .form-text,
.field--name-field-city-province > div .form-text{display: none;}
.user-register-form #edit-user-picture-wrapper { display: none;}

.field-group-wrapper .field--name-field-profession-list {display: none;}
.styled-file + .field-group-wrapper .field--type-file .description,
 .styled-file + .field-group-wrapper .field--type-image .description { display: none;}
.styled-file + .field-group-wrapper .field--type-file label,
 .styled-file + .field-group-wrapper .field--type-image label{ display: none;}
.styled-file + .field-group-wrapper .field--type-file .form-managed-file,
 .styled-file + .field-group-wrapper .field--type-image .form-managed-file{ position: relative; text-align: center; padding: 35px 30px; border: 1px dashed var(--qcregistry-gray); border-radius: 5px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;}
.styled-file + .field-group-wrapper .field--type-file .form-managed-file::before,
.styled-file + .field-group-wrapper .field--type-image .form-managed-file::before
{ content: ''; background: url('../assets/upload-solid.png'); width: 30px; height: 30px; background-size: contain;}
.styled-file + .field-group-wrapper .field--type-file .form-managed-file::after,
.styled-file + .field-group-wrapper .field--type-image .form-managed-file::after
{ content: 'Browse File To Upload'; color: var(--qcregistry-dark-gray); margin-top: 5px;}
.styled-file + .field-group-wrapper .js-form-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.tabledrag-handle { display: none;}
.tabledrag-toggle-weight-wrapper { display: none !important; }

/* Register form for qcrc */
/* #edit-qcrc-profiles */
.account-information + .field-group-wrapper > div.field--type-markup{ margin-block: 0;} /* remove margin top and bottom for basic labels */
.account-information + .field-group-wrapper > div.field--type-markup p{ margin: 0;}

/* Registration Form Classes */
.small-subtext { font-size: 0.9rem;}
fieldset.label--description--input .fieldset-wrapper { display: flex; flex-direction: column-reverse;}
fieldset.label--description--input .fieldset-wrapper .description { font-size: 1rem; margin-block: 5px;}
.section-row + .field-group-wrapper { display: flex; flex-direction: row; gap: var(--form-section-gap); flex-wrap: wrap; margin-block: 20px;}
.section-row + .field-group-wrapper > div:not(.field--type-markup),
.section-row + .field-group-wrapper > fieldset { width: calc(50% - calc(var(--form-section-gap) / 2));}
.section-row + .field-group-wrapper > div .form-item { margin: 0;}
.section-row + .field-group-wrapper > div .tabledrag-toggle-weight-wrapper { display: none;}
.upload-file-note { color: var(--qcregistry-gray);}

.engagements + .field-group-wrapper .fieldset-wrapper > div { display: flex; flex-direction: row; gap: var(--form-section-gap); flex-wrap: wrap; margin-block: 20px;}
.engagements + .field-group-wrapper .fieldset-wrapper > div > div { width: calc(50% - var(--form-section-gap));}
.engagements + .field-group-wrapper .fieldset-wrapper > div > div .form-item { margin: 0;}
.engagements + .field-group-wrapper .fieldset-wrapper > div > div h4.label { font-weight: normal;}
.engagements + .field-group-wrapper .fieldset-wrapper > div > div .js-form-type-date { width: 100%;}
div#inline-entity-form-qcraw_profiles-0-entity-field_project_engagement-form { margin-top: 20px;}

.inline-description .field-group-wrapper > div > div:has(.description){display: grid; grid-template: 'label description' 'input input'; grid-template-columns: auto 1fr;}
.inline-description .field-group-wrapper > div > div label{ grid-area: label;}
.inline-description .field-group-wrapper > div > div .description{ grid-area: description; display: flex ; align-items: center; margin-left: 5px; color: var(--qcregistry-gray); line-height: 1;}
.inline-description .field-group-wrapper > div > div input{ grid-area: input;}
.ch-rb-legend-margin fieldset legend { margin-bottom: 5px;}


/* Profile  */
#user-form:not(:has([data-drupal-selector="edit-user-register-form"])),
#user-register-form:not(:has([data-drupal-selector="edit-user-register-form"])) { display: grid; grid-template-areas: 'profile basic' 'profile account' 'profile action'; grid-auto-columns: 175px 1fr; column-gap: 15px;}
.profile-wrapper { grid-area: profile;}
.personal-information { grid-area: basic;}
.account-information { grid-area: account;}
.personal-information,
.account-information{margin-bottom: 0;}
#user-form #edit-actions { grid-area: action;}
.profile-wrapper > legend { display: none;}
#edit-user-picture-wrapper{text-align: center;}
#edit-user-picture-wrapper .js-form-item > label{display: none;}
#edit-user-picture-wrapper .image-widget-data > span { display: none;}
#edit-user-picture-wrapper .image-widget + div {display: none;}
#edit-user-picture-wrapper .image-widget-data input.button { border: none; margin-top: 10px; background: var(--qcregistry-blue); margin-inline: 0;}
.image-widget-data label:has(input[type="file"]) { padding: 6px 12px; margin-top: 15px; background: var(--qcregistry-blue); color: var(--qcregistry-white); border-radius: 0.375rem; cursor: pointer;}
.image-widget-data label input[type="file"] { display: none;}
.image-preview { margin-inline: 30px; padding: 11px; border-radius: 50%; aspect-ratio: 1 / 1; overflow: hidden; outline: 3px solid var(--qcregistry-blue);}
.image-preview img {width: 100%; height: auto;}
.personal-information legend,
.account-information legend{color: var(--qcregistry-white); background: linear-gradient(90deg, #1C3B95 0%, #031A4E 100%); padding: 10px 15px; border-radius: 4px;}
.personal-information > div,
.account-information > div .js-form-wrapper{ display: grid; column-gap: 15px; padding-block: 10px 30px; grid-template-columns: 1fr 1fr;}
.personal-information > div { row-gap: 15px;}
.personal-information > div .js-form-item { margin: 0;}
.personal-information .form-item label,
.account-information .form-item label{ font-weight: 500;}
.personal-information .field--name-field-bio,
.personal-information .field--name-field-separate{grid-column: span 2;}
.personal-information .field--type-markup{margin-block: 0;}
.personal-information .fieldset-wrapper .field--type-file .description { display: none;}
.personal-information .fieldset-wrapper .field--type-file .form-managed-file{ position: relative; text-align: center; padding: 35px 30px; border: 1px dashed var(--qcregistry-gray); border-radius: 5px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;}
.personal-information .fieldset-wrapper .field--type-file .form-managed-file::before{ content: ''; background: url('../assets/upload-solid.png'); width: 30px; height: 30px; background-size: contain;}
.personal-information .fieldset-wrapper .field--type-file .form-managed-file::after{ content: 'Browse File To Upload'; color: var(--qcregistry-dark-gray); margin-top: 5px;}
.personal-information .fieldset-wrapper .js-form-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}

/* About Page */
.content-about-page .hero-section > .row > * { padding-left: 0; padding-right: 0;}
.content-about-page .hero-section img { object-fit: cover; height: 100%;}
.content-about-page .content-application-requirements .title { text-align: center; }
.content-about-page .qualification-wrapper-check { grid-template-columns: repeat(2, 1fr); width: min(1000px, 100%); margin: 0 auto; column-gap: 80px; }
/* .content-about-page .about-footer .p-5 { background-color: var(--qcregistry-red); color: white; }
.content-about-page .about-footer .cta-btn { margin: 0 auto; background-color: var(--qcregistry-blue); color: white; border: unset;}
.content-about-page .about-footer .cta-btn:hover { background-color: var(--qcregistry-mid-blue);} */
.content-about-page .hero-section .row > div:last-child { text-align: end;}

/*Database page (coming soon) */
.content-database-page .db-page-content { position: relative;}
.db-page-content .container {background-color: white; text-align: center; border-radius: 10px; padding: 40px; width: min(100%, 1000px); position: absolute; inset: 0; max-height: fit-content; margin: auto;}
.db-page-content .container .text-content { margin: 0 auto;}
.db-page-content .text-content h2 { color: var(--qcregistry-blue);}
.db-page-content img { z-index: -1;}

/* System Message after successful registration */
.page-node-type-homepage .alert-wrapper { position: absolute; z-index: 5; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex ; border-color: transparent; }
.page-node-type-homepage .alert-wrapper:empty { display: none; }
.page-node-type-homepage .alert { width: min(100%, 700px); background-color: white; margin: auto; text-align: center; padding: 50px; display: flex; flex-direction: column;}
.alert img { display: none;}
.page-node-type-homepage .alert img { display: inline-block; width: 100px; margin: 0 auto; margin-bottom: 20px;}
.page-node-type-homepage .alert h5 { font-size: 1.3rem; font-weight: bold;}
.alert .default-message { display: block}
.page-node-type-homepage .alert .default-message { display: none;}
.alert .modal-message { display: none}
.page-node-type-homepage .alert .modal-message { display: block}

/* Error pages */
.content-error-page .container-fluid { padding-left: 0; padding-right: 0;}
.content-error-page .banner-content { position: relative;} 
.content-error-page .banner-content img { position: relative; z-index: -1;}
.content-error-page .banner-content .content { position: absolute; margin: auto; inset: 0; text-align: center; }
.content-error-page .banner-content .container h2 { color: rgba(8, 33, 89, 0.3); font-size: 10rem; font-family: 'BiggerDisplay'; letter-spacing: 8px; margin-bottom: 0; line-height: 1; -webkit-text-stroke: 3px var(--qcregistry-yellow); margin-bottom: -14px; }
.content-error-page .banner-content .container h3 { font-size: 2.3rem; color: var(--qcregistry-yellow); }

/* Node: 94 (HELP DESK) */
.content-help-desk .container-fluid { padding-left: 0; padding-right: 0;}
.content-help-desk .small-banner-section { padding-block: 40px; position: relative;}
.content-help-desk .small-banner-section img { position: absolute; inset: 0; height: 100%; }
.content-help-desk .small-banner-section .title-white{ position: relative; font-size: 5rem; }
.content-help-desk .form-container { padding: 0 150px;}
.content-help-desk .attachments-title { font-size: 1.5rem; }
.content-help-desk .title-pill { display: inline-block; margin-top: 1.5em; margin-bottom: 0; }
.content-help-desk .border { border-width: 2px;}
.help-desk-msg-wrapper { height: 90dvh; height: 90vh; width: 100%; display: flex;}
.help-desk-form-msg { display: flex ; flex-direction: column; justify-content: center; text-align: center; align-items: center; } 
.help-desk-form-msg img { margin-bottom: 1em; width: 80px;}
.help-desk-form-msg a { color: black; border: 2px solid var(--qcregistry-blue); text-decoration: none; border-radius: 5px; padding: 5px 30px;}
.help-desk-form-msg a:hover { background-color: var(--qcregistry-blue); color: white; border-color: var(--qcregistry-blue);}

#edit-attachments-container .description,
 #edit-attachments-container .description { display: none;}
#edit-attachments-container label,
 #edit-attachments-container label{ display: none;}
#edit-attachments-container .form-managed-file,
 #edit-attachments-container .form-managed-file{ position: relative; text-align: center; padding: 35px 30px; border: 1px dashed var(--qcregistry-gray); border-radius: 5px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;}
#edit-attachments-container .form-managed-file::before,
#edit-attachments-container .form-managed-file::before
{ content: ''; background: url('../assets/upload-solid.png'); width: 30px; height: 30px; background-size: contain;}
#edit-attachments-container .form-managed-file::after,
#edit-attachments-container .form-managed-file::after
{ content: 'Browse File To Upload'; color: var(--qcregistry-dark-gray); margin-top: 5px;}
#edit-attachments-container .js-form-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}