/* GENERAL PURPOSE DECLARATIONS */
@media (min-width: 1200px) {
    .container {
        max-width: unset;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1280px
    }
}


section {
    margin-bottom: var(--section-gap)
}

hr {
    height: 1px;
    margin-block: 1rem;
    border: none;
    box-shadow: -3px 1px 3px 0px #FFF, 3px 1px 3px 0px #FFF, 0px -1px 0px 0px #0001;
}

[disabled="disabled"] {
    pointer-events: none;
    opacity: 0.3;
}

img.notFound {
    background-color: var(--primary) !important;
    padding: 20% !important;
    object-fit: contain !important
}

.btn.primary {
    background-color: var(--primary);
    color: var(--primaryText);
}

.btn.primary:hover {
    background-color: var(--primaryHover);
}

.btn.primary.outline {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid
}

.btn.primary.outline:hover {
    background-color: var(--primary);
    color: var(--primaryText)
}

.btn.secondary {
    background-color: var(--secondary);
    color: var(--secondaryText)
}

.btn.secondary:hover {
    background-color: var(--secondaryHover);
}

.btn.secondary[disabled="disabled"] {
    color: var(--lightText)
}

.btn.secondary.outline {
    background-color: transparent;
    color: var(--secondaryHover);
    border: 1px solid
}

.btn.secondary.outline:hover {
    background-color: var(--secondaryHover);
    color: var(--secondaryText)
}

.btn.secondary.outline[disabled="disabled"] {
    color: var(--secondaryHover)
}

.btn.light {
    background-color: var(--light);
    color: var(--lightText)
}

.btn.light:hover {
    color: var(--primary)
}

.btn.light.outline {
    background-color: transparent;
    color: var(--lightText);
    border: 1px solid var(--lightOutline)
}

.btn.light.outline:hover {
    background-color: var(--light);
    color: var(--primary)
}

.btn.light.outline[disabled="disabled"]:hover {
    color: var(--light);
    border: 1px solid
}

button.feedmore {
    margin-top: calc(var(--grid-space) * 2);
    margin-inline: auto;
    color: var(--primary);
        text-decoration: none;
        cursor: pointer;
}

.pill.primary {
    background-color: var(--primary);
    color: var(--primaryText)
}

.pill.primary:hover {
    background-color: var(--primaryHover);
}
.pill.red {
    background-color: var(--red);
    color: var(--redText)
}

.pill.red:hover {
    background-color: var(--redHover);
    color: var(--redHoverText)
}

.pill.blue {
    background-color: var(--blue);
    color: var(--blueText)
}

.pill.blue:hover {
    background-color: var(--blueHover);
    color: var(--blueHoverText)
}

.align-top {
    display: flex;
    align-items: flex-start;
}

.align-middle {
    display: flex;
    align-items: center;
}

.align-bottom {
    display: flex;
    align-items: flex-end;
}

.align-left {
    display: flex;
    justify-content: flex-start;
}

.align-center {
    display: flex;
    justify-content: center;
}

.align-between {
    display: flex;
    justify-content: space-between;
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.middle-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aligned-text {
    text-align: justify;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}

.area {
    padding: var(--grid-space);
    border-radius: var(--radiusValue);
    background-color: var(--lightergrey);
}

.row:has(>.area) {
    margin: var(--grid-space);
    gap: var(--grid-space);
}

:has(> .overlink) {
    position: relative !important
}

.overlink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.actions .group .action:first-child {
    border-top-left-radius: var(--radiusValue);
    border-top-right-radius: var(--radiusValue);
}

.actions .group .action {
    display: inline-block;
    width: 100%;
    padding: 1rem .33rem;
    margin-bottom: 0.25rem;
    border: none;
    background-color: var(--lightgrey);
    text-align: left;
    color: inherit;
    text-decoration: none;
}

.actions .group .action:last-child {
    border-bottom-left-radius: var(--radiusValue);
    border-bottom-right-radius: var(--radiusValue);
}

.actions .group .action i.faicon {
    display: inline-block;
    width: 1.75rem;
    vertical-align: text-bottom;
    text-align: center;
    font-size: 1.125rem !important;
    color: var(--plain-tx);
}

.iconbutton {
    padding: 0.30em 0.75em;
    background: none;
    border: none;
    color: var(--primary)
}

.home.iconbutton::before {
    content: url(../templates/assets/icons/icon_home_lines.svg)
}

.menu.iconbutton::before {
    content: url(../templates/assets/icons/icon_hamburger_lines.svg)
}

i.faicon {
    font-size: 1.5rem;
    margin-inline: 0.25em !important
}


.blocktitle {
    text-align: center;
    font-size: 1.5rem
}

/* BUTTON ACCORDION DECLARATIONS */
.button-accordion {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radiusValue);
}

.button-accordion:has( > button.collapsed) {
    border: none
}

.button-accordion:has( > button:not(.collapsed)) {
    border: 1px solid var(--primary)
}

.button-accordion > button {
    width: 100%;
    padding: 1rem;
    background-color: var(--lightergrey);
    border: none;
    text-align: left;
    transition: 0.75s all
}

.button-accordion > button:not(.collapsed) {
    background-color: var(--primary);
}

.button-accordion > button h5 {
    display: flex;
    align-items: center;
    margin: 0;
    text-align: left;
    color: var(--plain-tx)
}

.button-accordion > button:not(.collapsed) h5 {
    color: #FFF
}

.button-accordion > button h5 > .faicon {
    /*padding-right: 1.5em;*/
    width: 1.75rem;
    display: inline-block;
    text-align: center;
}

.button-accordion > button h5 > i.toggle {
    margin-left: auto;
    font-size: 0.75rem;
    transition: 0.5s rotate, 0.5s color
}

.button-accordion > button:not(.collapsed) h5 > i.toggle {
    rotate: 180deg;
}

/* STARS EVALUATION */
fieldset.grade[data-score] {
    padding-inline: 1rem;
    margin: 0;
    border: none;
}

fieldset.grade[data-score] > button {
    padding: 0;
    margin: 0;
    margin-inline: 0rem;
    border: none;
    background-color: transparent;
    cursor: auto;
}

fieldset.grade[data-score] > button > i.faicon {
    font-size: 1rem !important;
    margin-inline: 0rem !important;
    border: none;
    background-color: transparent;
    color: var(--primary) !important;
}

/* TABS ********************/

ul[role="tablist"] {list-style-type:none;margin:0;padding:0;display:flex;column-gap:1rem;justify-content:center;border-bottom:1px solid #0003;}
ul[role="tablist"] > li.nav-item:hover,
ul[role="tablist"] > li.nav-item > .nav-link {height:unset;box-shadow:none;border:none; color:#3d3d3d}
ul[role="tablist"] > li.nav-item > .nav-link:hover,
ul[role="tablist"] > li.nav-item > .nav-link.active {background-color:unset;border-bottom:2px solid var(--primary); color:var(--primary);}
ul[role="tablist"] > li.nav-item > .nav-link.active {cursor:default;pointer-events:none}
@media (max-width:767px){
    ul[role="tablist"] {flex-direction:column;background-color:white;margin-top:calc(var(--grid-space) * 2)}
    ul[role="tablist"] > li.nav-item {background-color:none;}
    ul[role="tablist"] > li.nav-item > .nav-link {width:100%;border-radius:none;border-top-left-radius:var(--radiusValue);border-top-right-radius:var(--radiusValue);}
    ul[role="tablist"] > li.nav-item > .nav-link {border:none!important;background-color:#FFF!important}
    ul[role="tablist"] > li.nav-item > .nav-link:not(.active) {padding-block:1.5rem;margin-bottom:-8px;border:1px solid var(--lightgrey)!important;box-shadow:inset 0 -4px 10px 0px #0001;}
    ul[role="tablist"] > li.nav-item > .nav-link.active {font-size:125%!important;font-weight:600!important;background-color:var(--primary)!important}
    ul[role="tablist"] > li.nav-item:has(.nav-link.active) {order:100;}
}
/***************************/