
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/IHMA_dark.svg");
    --logo-alt: url("../../custom/theme/assets/images/IHMA_white.png");

    /***Header Image (Van toepassing op visual.twig)***/
    --header-image: url("../../custom/theme/assets/images/bg.jpg");

    /***Brand Colors***/
    --color-brand-primary: #699e99;
    --color-brand-primary-rgb: 105, 158, 153;
    --color-brand-secondary: #274845;
    --color-brand-tertiary: #c21f43;
    --color-brand-light: #F0EFEE;
    --color-brand-dark: #1F1F24;
    --text-color: #6F6F6F;

    /***Font***/
    --font-family: "Nunito Sans",sans-serif;
    --font-family-title: 'Georgia', sans-serif;
    --font-size: 1.6rem;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/

    --percentage-degrees: 0deg;
    --percentage-pending-degrees: 0deg;
}

.form_check {
    display: inline;
}

html{
    color: var(--text-color);
}
h1, h2, h3, h4, h5, h6{
    color: var(--color-brand-dark);
}

.nunito-sans-regular, p {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
        color: var(--text-color);

}
b{
  font-family: "Nunito Sans bold", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;}
.logo {
    height: 65px;
}

header .header_bar {
    background: #f0efee;
}

body.layout-header-full-width main {
    background-color: #f0efee;
}

.speakers-holder .speaker-name {
    margin-bottom: 20px;
}

.speakers-holder .background-image-container {
    aspect-ratio: 1 / 1;
}
.header_visual-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 50vh;
}
.header_visual .container-fluid {
    padding: 0 6.4rem;
}

.strikethrough {
    text-decoration: line-through;
}
body.layout-header-float footer .footer_bar,
body.layout-header-float footer,
footer {
    background-color: var(--color-brand-dark);
    color: var(--color-neutral-white);
    font-size: var(--font-size-xxs);
}
body.layout-header-float footer hr {
    border-color: var(--color-neutral-gray-05);
}
.assign-ticket--confirm-modal .ui-button.button--light, .button--light {
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark);
    cursor: pointer;
    border: none;
}
.assign-ticket--confirm-modal .ui-button.button--light:hover, .button--light:hover {
    background-color: var(--color-brand-primary);
}
body.indevelopment .container-fluid .sidebar {
    background-color: var(--color-brand-light);
    min-height: calc(100vh - var(--menu-height) - 4rem);
    padding-top: 4em;
}
.ui-widget-content {
    border: 1px solid #ddd;
    background: #fff;
    color: var(--text-color);
}
.tickets .title {
    font-weight: 400;
    font-size: var(--font-size-s);
}
.tickets .title br{
    display: none;
    margin-top: 0.8rem;
}
.tickets .title span{
    padding-top: 0.4rem;
    display: inline-block;
}
.faq_list .ui-accordion-header {
    font-size: var(--font-size-m);
        font-weight: 600;

}
.tickets .ticket-item .title{
    padding-top: 0.4rem;
}
.ticket-input-control input,
.ticket-input-control .input{
    color: var(--text-color);

}

.warning {
    background-color: rgb(241, 215, 166);
    border: 2px solid orange;
    padding: 10px;
}
.calculation-table .total_price .amount:not(.calculation-table .total_price .calculation-discount-incl .amount),
.calculation-table .total_price .label:not(.calculation-table .total_price .calculation-discount-incl .label){
    font-weight: 700;
    color: var(--color-brand-dark);
}
.calculation-discount-incl div + div .calculation-table .total_price div:nth-last-child(1) {
    border-top: 1px solid var(--color-brand-primary);
    padding-top: 0.8rem;
}
div .calculation-table .total_price .calculation-discount-incl div +  div:nth-last-child(1) {
    border-top: none;
    padding-top: 0rem;
}

.progress_legend--status-pending {
    color: var(--color-brand-tertiary);
}
.tickets-progress .progress_container {
    background: conic-gradient(
        var(--color-brand-primary) var(--percentage-degrees),
        var(--color-brand-tertiary) var(--percentage-degrees) calc(var(--percentage-pending-degrees) + var(--percentage-degrees)),
        var(--color-neutral-gray-02) calc(var(--percentage-pending-degrees) + var(--percentage-degrees))
    );
}
body.layout-header-float .header_visual:before {
    content: "";
    background-image: url("../images/program_page.jpeg");
    background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--menu-height));
}
.col-video{
        display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;

    margin-top: 3.2rem;
}
.video-wrapper  {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
      position: sticky;
    top: var(--menu-height);
    top:calc(3.2rem + var(--menu-height));
}
.video-wrapper iframe {
    position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {

    .layout-header-full-width .header_visual,
    .layout-header-full-width .header_visual:before {
        height: 45vh;
            min-height: unset;

    }
    .header_visual-logo {
    max-height: 25vh;
}
.header_visual .container-fluid {
    padding: 0 3.2rem;
}
}
@media only screen and (max-width: 992px) {
    .row{
        grid-gap: 0.8rem;
    }
}
@media only screen and (max-width: 1024px) {
body.indevelopment.layout-header-float .header_visual, body.indevelopment.layout-header-float .header_visual:before {
    height: unset;
    top: 0;
    min-height: unset;
    aspect-ratio: 16 /9;
}
}
