/* olivero_esg/css/style.css //////////////////////////////////////////////////////////////// */

:root {
    --color--gray-30: hsl(var(--color--gray-hue),var(--color--gray-saturation),30%);
    --color--gray-35: hsl(var(--color--gray-hue),var(--color--gray-saturation),35%);
    --color--primary-45: hsl(var(--color--primary-hue),var(--color--primary-saturation),45%);
}

/* BASIC /////////////////////////////////////////////////////////////////////////////////////// */

.justify-content-around { justify-content: space-around; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.w-25 { width: 25%; }
.w-50 { width: 50%; }

.container { max-width: unset !important; }
.page-wrapper  { max-width: unset !important; }
.main-content__container { padding-inline: 0 !important; }
.site-footer__inner { padding-block: 0; padding-top: 3rem; }
@media (min-width: 75rem) { .site-footer__inner { padding-block: 0; padding-top: 3rem; } }
select { height: var(--sp2); }
.visually-hidden { display: none !important; }

/* BUTTONS ///////////////////////////////////////////////////////////////////////////////////// */

.button--success        { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:hover  { color: #fff; background-color: #0b9b42; border-color: #0b9b42; }
.button--success:active { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:focus  { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:focus-visible { outline: 1px #0b9b42; }

.button--danger        { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:hover  { color: #fff; background-color: #9b0b0b; border-color: #9b0b0b; }
.button--danger:active { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:focus  { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:focus-visible { outline: 1px #9b0b0b; }

.text-danger { color: #dc3545 !important; }
.text-success { color: #0b9b42 !important; }

/* TABLE /////////////////////////////////////////////////////////////////////////////////////// */

.table { width: 100%; border-spacing: 1rem; border-collapse: collapse; }
.table tr { border-bottom: solid thin rgba(235, 235, 235, 0.8); border-right: solid thin rgba(235, 235, 235, 0.8); }
.table tr:first-child { border-top: solid thin rgba(235, 235, 235, 0.8); }
/* .table tbody tr:hover { filter: brightness(0.9); } */
.table th { filter: inherit; }
.table th { text-align: left; background-color: #FEFEFE; }
.table th, .table td { padding-inline: 10px; border-left: solid thin rgba(235, 235, 235, 0.8); border-bottom: none !important; }
.table td { background-color: #F7F7F7; padding-inline: 15px; }
.table tfoot td { background-color: #FEFEFE; }
.table

.table .views-table { min-width: 50%; }
.table .views-table th { border-block-end: unset; }
.table .views-table th, .table .views-table td { padding-inline: 10px !important; padding-block: 0.5rem !important; vertical-align: middle !important; }

.table .views-table td a:hover { color: var(--color--primary-50); }

.table-sm-font { font-size: 12px; }
.table-nlb td { white-space: nowrap; }

.table-font-consolas td { font-family: "Consolas","monaco",monospace !important; }

.console-font { font-family: "Lucida Console", "Courier New", monospace; }
.x-scroll { max-width: 100%; overflow-x: scroll; }
.prefont { font-size: 16px; }
.pl5px { padding-left: 5px; }

/* REGION ////////////////////////////////////////////////////////////////////////////////////// */

.region > * {
    margin-block-end: var(--sp);
}

@media (min-width: 43.75rem) {
    .region > * {
        margin-block-end: var(--sp);
    }
}

@media (min-width: 62.5rem) {
    .region > * {
        margin-block-end: 0 !important;
    }
}

.fs-22 {
    font-size: 22px;
}

/* field--name-field-home ////////////////////////////////////////////////////////////////////// */

#block-olivero-esg-breadcrumbs,
#block-olivero-esg-primary-local-tasks {
    margin-bottom: 0.5rem !important;
}

.field--name-field-home-header::before {
    background: var(--color--primary-50);
    margin-left: -50vw;
    position: absolute;
    content: "";
    z-index: -1;
    height: 88%;
    width: 97vw;
    left: 50%;
    top: 0;
}

.field--name-field-home-header {
    position: relative;
}

.field--name-field-home-header > h2 {
    background-color: var(--color--primary-50);
    padding-block: 4.5rem;
    text-align: center;
    color: white;
}

.field--name-field-home-columns {
    display: flex;
}

.field--name-field-home-columns > * {
    background-color: var(--color--gray-100);
    padding-inline: 15px;
    margin-inline: 15px;
    width: 33%;
}

.field--name-field-home-columns .field__item {
    color: var(--color--gray-20);
}

.field--name-field-home-columns .field__item h3 {
    height: 75px;
    border-bottom: solid thin var(--color--gray-20);
}

.node--type-homepage .field--name-body {
    background-color: var(--color--primary-80);
    color: var(--color--gray-20);
    margin-inline: 15px;
    padding: 15px;
}

/* webform-submission-form ///////////////////////////////////////////////////////////////////// */

.webform-submission-form .form-actions {
    justify-content: center;
}

.webform-submission-form .form-actions input {
    display: block;
    width: 200px;
}

.webform-submission-form .form-actions input#edit-wizard-prev  {
    text-align: end;
}

.webform-submission-form .form-actions input#edit-wizard-next {
    text-align: start;
    margin-inline-start: var(--sp1);
    margin-inline-end: 0;
}

.webform-submission-form .fieldset__legend {
    border: solid 2px var(--color--gray-45);
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    background-color: var(--color--primary-40);
    border-bottom: none;
}

.webform-submission-form .js-webform-radios {
    display: flex;
    flex-wrap: wrap;;
    justify-content: space-around;
}

.form-item__label_custom {
    text-align: center;
    font-size: 36px;
}

.path-webform .block-system-main-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.path-webform .block__content {
    max-width: 1400px;
    width: inherit;
}

.region--breadcrumb { margin-top: 15px; }

.question_set { 
    border: none !important; 
    /* max-width: 1400px; */
}

.question_set > legend {
    width: auto;
    padding: 12px;
    background-color: var(--color--gray-30)!important;

    border: solid 2px var(--color--gray-45)!important;
    border-radius: var(--border-radius)!important;
}

.question_set > .fieldset__wrapper {
    padding-inline-start: var(--sp2);
}

.question_set .js-form-type-radio .form-item__label {
    padding-inline-start: 1px !important;
}

.radios--wrapper > legend {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    
    margin: 0 !important;

    border-top:    solid 2px var(--color--gray-45) !important;
    border-left:   solid 2px var(--color--gray-45) !important;
    border-right:  solid 2px var(--color--gray-45) !important;
    border-bottom: none !important;

    border-top-left-radius:  var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-left-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
}

.radios--wrapper > div {
    padding: 0 !important;

    border-top-left-radius:  0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius:  var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

.question_button > input:hover {
    background-color: var(--color--primary-40) !important;
    color: white !important;
}

.field--name-field-results-text1,
.field--name-field-results-text2,
.field--name-field-qcateg-help-num {
    margin-top: 15px;
    border-top: solid thick black;
}

/* edit-p0 ///////////////////////////////////////////////////////////////////////////////////// */

#edit-p0 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#edit-p0 > label {
    width: 100%;
}

#edit-p0 > div {
    width: auto;
    margin-inline: 10px;
}

/* .page-title { 
    font-size: 32px; 
}  */

.block-campaign-add-subs {
    margin-inline: 0.5rem;
}

/* language-switcher /////////////////////////////////////////////////////////////////////////// */

.language-switcher-language-url > .block__content > ul.links {
    list-style: none;
    display: flex;
}

.language-switcher-language-url > .block__content > ul.links > li {
    margin-inline: 15px;
}

#edit-lang-dropdown-select {
    width: 130px !important;
    border: unset;
    font-weight: 700;
}

#edit-lang-dropdown-select:focus {
    outline: unset;
}

/* inspirer-graph-group //////////////////////////////////////////////////////////////////////// */

.inspirer-graph-group {
    border: solid medium lightgray; 
    margin-top: 120px;
    padding: 20px;
    border-radius: 5px;
}

.inspirer-graph-table {
    border-spacing: 0px;
}
.inspirer-graph-table,
.inspirer-graph-table tr { 
    width: 100%;
}
.inspirer-graph-table .th1 {
    width: 25%;
}
.inspirer-graph-table .th2 {
    width: 5%;
}
.inspirer-graph-table td {
    width: 70%;
    text-align: center;
}

.inspirer-graph-table,
.inspirer-graph-table tr,
.inspirer-graph-table td,
.inspirer-graph-table th {
    border: solid thin lightgray;
    font-size: 20px;
}

.inspirer-graph-table-header {
    background-color: lightgray;
    height: 60px;
}

.inspirer-graph-table > thead > tr > th {
    padding: 10px;
} 

.inspirer-graph-hr {
    background-color: var(--color--primary-60);
    border: solid medium var(--color--primary-50);
    margin-top: 40px;
    margin-bottom: 40px;
}

.graphBar {
    height: 40px;
}

.graphBorder {
    border: solid thin lightgray;
}

.inspirer-graph-canvas {
    height: 70px;
}

.my_surveys_home_link {
    justify-content: center;
    display: flex;
    height: 30px;
}

.my_surveys_home_link > div > a {
    font-size: 22px;
    color: black;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.my_surveys_home_link > div > a:after {
    background-color: var(--color--primary-50);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    transform: scaleY(0);
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
}

.my_surveys_home_link > div > a:hover:after{
	transform: scaleY(1);
    transform-origin: bottom left;
}

.form-wrapper {
    margin-bottom: 60px;
}

.view_part_codes {
    border: solid thin gray;
    padding: 15px;
    margin-top: 15px;
}

.view_campaign_helptext {
    font-style: italic;
    font-size: 15px;
    color: rgb(10,10,10);
}

.inspirer-goback-link {
    color: black;
    text-decoration: none;
}

.inspirer-goback-link:hover {
    color: black;
    text-decoration: underline;
    text-decoration-color: var(--color--primary-50);
}

.inspirer-goback-link:hover > svg {
    color: var(--color--primary-50);
}

/* node-campaign-form ////////////////////////////////////////////////////////////////////////// */

.node-campaign-form {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
}

.node-campaign-form > * {
    width: 50%;
}

.node-campaign-form > .form-actions {
    width: 100%;
}

.node-campaign-form > * > * {
    padding-left: 3%;
}

.node-campaign-form > * > * > input {
    width: 100%;
}

.node-campaign-form > * > * > input > .form-submit {
    text-align: center;
}

.esg-hr {
    border: 0; 
    border-top: 1px solid #d5d5d5;
}

/* inspirer-answers-table ////////////////////////////////////////////////////////////////////// */

.inspirer-answers-table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
}

.inspirer-answers-table th,
.inspirer-answers-table td {
    padding: 0.75rem 1rem;
    border-bottom: solid thin lightgray;
    text-align: left;
    vertical-align: top;
}

.inspirer-answers-table th:last-child,
.inspirer-answers-table td:last-child {
    width: 15%;
    text-align: right;
    white-space: nowrap;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

.site-branding__logo img {
  max-height: 8rem;
}

.site-branding__inner{
    height: auto;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}