/*? MEMBER CARD  */
.memberCard{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: auto;
    width: 180px;
    border-radius: 14px;
    text-align: center;
    background-color: var(--cardColor);
    -webkit-box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
    -webkit-user-select: none;
    user-select: none;
    transition: 0.4s;
    cursor: pointer;
}

.memberCard .image{
    position: relative;
    flex-shrink: 0;
    height: auto;
    min-height: 108px;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background-color: var(--secondaryColor);
}

.memberCard .image img{
    width: 100%;
    height: auto;
    display: block;
}

.memberCard .image .icon{
    text-align: center;
    line-height: 108px;
    min-height: 108px;
    max-height: 108px;
    font-size: 63px;
    color: var(--writeColorParagraph);
}

.memberCard .image .memberTag{
    position: absolute;
    bottom: 9px;
    left: 9px;
    z-index: 1;
    width: auto;
    font-size: 13px;
    line-height: 1.2;
    padding: 5px 18px;
    border-radius: 14px;
    background-color: var(--highlightColor);
    color: var(--buttonWriteColor);
}

.memberCard .image .memberTag.disabled{
    background-color: var(--deniedColor);
}


.memberCard .text{
    padding-top: 9px;
    padding: 9px 9px 0 9px;
    height: 90px;
}

.memberCard .text h4{
    font-size: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.memberCard .light{
    font-weight: 500;
    font-size: 14px;
    color: var(--writeColorParagraph);
}

.memberButtonContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.memberButtonContainer.buttonView{
    margin: 0;
}

.memberButton {
    width: 100%;
    height: 34px;
    letter-spacing: 0.4px;
    border: none;
    background-color: var(--secondaryColor);
    border-radius: 9px;
    padding: 0 27px;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
    color: var(--highlightColor);
    cursor: pointer;
    transition: 0.4s;
}

.memberButton:hover {
    background-color: var(--secondaryHoverColor);
}


.memberButton.primary {
    background-color: var(--highlightColor);
    color: var(--buttonWriteColor);
}

.memberButton.primary:hover {
    background-color: var(--highlightHoverColor);
}

.memberButton.fix{
    width: 126px;
    padding: 0;
}

.memberButton.secondary {
    color: var(--writeColorParagraph3);
}

/* Logo container */
.logoContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 18px;
    
    align-items: center;
    text-align: center;
}

.logoContainer img{
    height: 108px;
    width: 108px;
    border-radius: 9px;
}

.logoContainer .text{
    position: relative;
    
}




/* Flex button container */
.flexButtonContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: 14px;
    padding: 0;
}

.contentModal .mobileShoppingCart .contactData button.addAttendeeButton{
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
}


/* Contact Data */
.contentModal .mobileShoppingCart .contactData{
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.contentModal .mobileShoppingCart .contactData .clipContainerHeader{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 23px;
    height: auto;
    line-height: 1.2;
    margin: 0 0 9px 0;
}

.contentModal .mobileShoppingCart .contactData .clipContainerHeader i{
    font-size: 17px;
    cursor: pointer;
}

.contentModal .mobileShoppingCart .contactData .clipContainerHeader i:hover{
    color: var(--highlightHoverColor);
}



.contentModal .mobileShoppingCart .contactData .noDisplay, .contentModal .mobileShoppingCart .contactData .stornoContainer.noDisplay{
    display: none;
}


.contentModal .mobileShoppingCart .contactData h4{
    font-size: 16px;
    margin: 0 0 9px 0;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.contentModal .mobileShoppingCart .contactData .clipContainerHeader h4{
    margin: 0;
}

.contentModal .mobileShoppingCart .contactData #paymentMethodContainer > h4,
.contentModal .mobileShoppingCart .contactData > h4{
    margin: 0 0 9px 0;
}

.contentModal .mobileShoppingCart .contactData .stornoSectionBody > :first-child,
.contentModal .mobileShoppingCart .contactData #paymentMethodContainer > div > :first-child{
    margin-top: 0 !important;
}

.contentModal .mobileShoppingCart .contactData span{
    font-weight: 550;
    color: var(--writeColorParagraph);
    cursor: pointer;
    transition: 0.4s;
}

.contentModal .mobileShoppingCart .contactData span:hover{
    color: var(--highlightHoverColor);
}

.contentModal .mobileShoppingCart .contactData span.subHeader{
    font-weight: 500;
    font-size: 14px;
    color: var(--writeColorParagraph2);
    font-style: normal;
}

.contentModal .mobileShoppingCart .contactData label{
    font-size: 13px;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.contentModal .mobileShoppingCart .contactData input{
    width: 100%;
    border: solid 1.4px var(--writeColorParagraph2);
    min-height: 32px;
    border-radius: 9px;
    font-size: 14px;
    padding: 0 9px;
    color: var(--writeColorParagraph);
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
    scroll-margin-top: 153px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.dividertop{
    border-top: solid 1.4px var(--secondaryColor);
    margin-top: 18px;
    padding-top: 18px;
}

.dividertop.strong{
    border-top: solid 5px var(--secondaryColor);
}

.dividerbottom{
    border-bottom: solid 1.4px var(--secondaryColor);
    margin-bottom: 18px;
    padding-bottom: 23px;
}

.contentModal .mobileShoppingCart .contactData .inputContainer textarea, .contentModal .mobileShoppingCart .contactData .inputContainer input, .contentModal .mobileShoppingCart .contactData .inputContainer select.regNativeSelect{
    width: 100%;
    height: 27px;
    line-height: 27px;
    border: solid 1.4px var(--secondaryColor);
    background-color: var(--secondaryColor);
    border-radius: 9px;
    margin-top: 5px;
    padding: 9px;
    font-size: 14px;
    font-weight: 400;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
    color: var(--writeColorParagraph);
}

.contentModal .mobileShoppingCart .contactData .inputContainer select.regNativeSelect{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 31px;
    min-height: 41px;
    line-height: 20px;
    background: color-mix(in srgb, var(--secondaryColor) 46%, var(--cardColor));
}

.contentModal .mobileShoppingCart .contactData .inputContainer textarea, .contentModal textarea{
    line-height: 18px;
    height: auto;
}

.contentModal .mobileShoppingCart .contactData input::-webkit-outer-spin-button,
.contentModal .mobileShoppingCart .contactData input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.contentModal .mobileShoppingCart .contactData .loginImage{
    width: 117px;
    margin: 18px 0 36px 0;
    align-self: center;
    border-radius: 9px;
    -webkit-box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 16px 0px rgba(110, 112, 113, 0.32);
}

.contentModal .mobileShoppingCart .contactData .attendeInnerContainer{
    padding: 23px 0;
    border-top: solid 3px var(--secondaryColor);
}

.contentModal .mobileShoppingCart .contactData .attendeInnerContainer:first-child, .contentModal .mobileShoppingCart .contactData .attendeInnerContainer.noBorder{
    border-top: none;
    padding-top: 0;
}

@supports (content-visibility: auto){
    .contentModal .mobileShoppingCart .registrationSummaryCard,
    .contentModal .mobileShoppingCart .contactData,
    .contentModal .mobileShoppingCart .contactData .attendeInnerContainer{
        content-visibility: auto;
        contain-intrinsic-size: auto 216px;
    }
}

.contentModal .mobileShoppingCart .contactData .attendeHeaderContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 9px;
}

.contentModal .mobileShoppingCart .contactData .attendeHeaderContainer h6{
    font-size: 15px;
    line-height: 27px;
    font-weight: 600;
    color: var(--writeColorHeader);
    -webkit-user-select: none;
    user-select: none;
}

.contentModal .mobileShoppingCart .contactData .attendeHeaderContainer i{
    font-size: 15px;
    line-height: 27px;
    cursor: pointer;
    transition: 0.4s;
}

.contentModal .mobileShoppingCart .contactData .attendeHeaderContainer i:hover{
    color: var(--highlightColor);
}


.contentModal .mobileShoppingCart .contactData .inputContainerDouble{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contentModal .mobileShoppingCart .contactData .inputContainer{
    margin: 0 0 11px 0;
    transition: none;
}

.contentModal .mobileShoppingCart .contactData .inputContainer.noMargin{
    margin: 0;
    padding: 0;
}

.contentModal .mobileShoppingCart .contactData .inputContainerDouble .inputContainer{
    width: 55%;
}

.contentModal .mobileShoppingCart .contactData .inputContainerDouble .inputContainer:nth-child(1){
    width: 40%;
}

.contentModal .mobileShoppingCart .contactData .inputContainerDouble .inputContainer:nth-child(3){
    width: 100%;
}

.contentModal .mobileShoppingCart .contactData .inputContainerDouble .inputContainer.fullWidthMobile, .contentModal .mobileShoppingCart .contactData .inputContainerDouble .inputContainer.fullWidthMobile2{
    width: 100%;
}


.contentModal .mobileShoppingCart .contactData .inputContainer:focus-within label {
    color: var(--highlightColor);
    transition: color 140ms ease;
}

.contentModal .mobileShoppingCart .contactData .inputContainer textarea:focus, .contentModal .mobileShoppingCart .contactData input:focus, .contentModal .mobileShoppingCart .contactData .inputContainer select.regNativeSelect:focus{
    border: solid 1.4px var(--highlightColor);
}

.contentModal .mobileShoppingCart .contactData .inputContainer.error label{
    color: var(--deniedColor);
}

.contentModal .mobileShoppingCart .contactData .inputContainer.error input, .contentModal .mobileShoppingCart .contactData .inputContainer.error textarea, .contentModal .mobileShoppingCart .contactData .inputContainer.error select.regNativeSelect {
    border-color: var(--deniedColor);
}



@media (hover: hover) and (pointer: fine){
    .contentModal .mobileShoppingCart .contactData .inputContainer textarea:hover,
    .contentModal .mobileShoppingCart .contactData input:hover,
    .contentModal .mobileShoppingCart .contactData .inputContainer select.regNativeSelect:hover{
        border: solid 1.4px var(--highlightColor);
    }
}








.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    height: auto;
    margin-top: 5px;
    overflow-x: auto;
    -webkit-user-select: none;
    user-select: none;
    padding-bottom: 9px;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox::-webkit-scrollbar{
    display: block;
    height: 6px;
    width: 6px;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox::-webkit-scrollbar-thumb { /* Foreground */
    background: var(--writeColorParagraph2);
    border-radius: 6px;
}
.contentModal .mobileShoppingCart .contactData .inputContainer .flexBox::-webkit-scrollbar-track { /* Background */
    background: transparent;
}

.contentModal .mobileShoppingCart .contactData .inputContainer button:not(.bookingOfferModalChip):not(.registrationPersonPickerChip){
    width: 100%;
    height: auto;
    margin-top: 5px;
    padding: 9px;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex .checkBoxLabelContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex input[type="checkbox"]{
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    opacity: 0;
    z-index: -1;
}

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex input[type="checkbox"] + label{
    position: relative;
    text-decoration: none;
    display: inline-block;

    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
    padding-left: 21px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 9px 0;
}
    

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex input[type="checkbox"] + label:before{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    border-radius: 5px;
    background-color: var(--secondaryColor);
    border: none;
    content: '';
    display: inline-block;
    font-size: 14px;
    height: 23px;
    width: 23px;
    line-height: 23px;
    left: -13.5px;
    position: absolute;
    text-align: center;
    top: 0;
} 
        

.contentModal .mobileShoppingCart .contactData .inputContainer .checkBoxFlex input[type="checkbox"]:checked + label:before{
    background-color: var(--highlightColor);
    content: '\f00c';
    color: var(--buttonWriteColor);
}


.singleCheckBoxContainer{
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 14px;
    margin-top: 9px;
    cursor: pointer;
}

.singleCheckBoxContainer i{
    font-size: 23px;
    transition: 0.4s;
    color: var(--secondaryColor);
    -webkit-user-select: none;
    user-select: none;
}

.singleCheckBoxContainer i.selected{
    color: var(--highlightColor);
}

.singleCheckBoxContainer p{
    line-height: 16px;
    padding-top: 4px;
    -webkit-user-select: none;
    user-select: none;
}

.singleCheckBoxContainer.error i, .singleCheckBoxContainer.error p{
    color: var(--deniedColor);
}


.registrationSeriesHeader{
    margin: 18px 0 6px 0;
    font-weight: 600;
    line-height: 23px;
}

.doubleCheckBoxContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
    margin: 9px 0 18px 0;
    cursor: pointer;
}

.doubleCheckBoxContainer p{
    width: 60%;
    line-height: 23px;
}

.doubleCheckBoxContainer .innerDoubleContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 18px;
}

.doubleCheckBoxContainer .innerDoubleContainer .innerSingleContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5px;
}


.doubleCheckBoxContainer .innerDoubleContainer .innerSingleContainer p{
    width: auto;
    line-height: 16px;
    padding-top: 4px;
    -webkit-user-select: none;
    user-select: none;
}

.doubleCheckBoxContainer .innerDoubleContainer .innerSingleContainer i{
    font-size: 23px;
    transition: 0.4s;
    color: var(--secondaryColor);
    -webkit-user-select: none;
    user-select: none;
}
.doubleCheckBoxContainer .innerDoubleContainer .innerSingleContainer i.selected{
    color: var(--highlightColor);
}

.doubleCheckBoxContainer.courseGroupTypeSelection{
    align-items: flex-start;
}

.doubleCheckBoxContainer.courseGroupTypeSelection > p{
    padding-top: 7px;
}

.doubleCheckBoxContainer .innerDoubleContainer.courseGroupTypeRows{
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
}

.doubleCheckBoxContainer .innerDoubleContainer .courseGroupTypeOption{
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--registrationBorder);
    border-radius: 13px;
    background: var(--cardColor);
}

.doubleCheckBoxContainer .innerDoubleContainer .courseGroupTypeOption.selected{
    border-color: color-mix(in srgb, var(--primaryColor) 64%, var(--registrationBorder));
    background: color-mix(in srgb, var(--primaryColor) 10%, var(--cardColor));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--primaryColor) 12%, transparent);
}

.doubleCheckBoxContainer .innerDoubleContainer .courseGroupTypeOption p{
    flex: 1 1 auto;
    padding-top: 0;
}

.doubleCheckBoxContainer .innerDoubleContainer .courseGroupTypeOption span{
    flex: 0 0 auto;
    font-weight: 500;
    color: var(--writeColorParagraph1);
    white-space: nowrap;
}

.doubleCheckBoxContainer.error i, .doubleCheckBoxContainer.error p{
    color: var(--deniedColor);
}

.contentModal .mobileShoppingCart .contactData .doubleCheckBoxContainer.error span.noStyle,
.doubleCheckBoxContainer.error .innerDoubleContainer .courseGroupTypeOption span{
    color: var(--deniedColor);
}



.contentModal .mobileShoppingCart .contactData .tableContainer{
    overflow-y: hidden;
    overflow-x: auto;
    padding-right: 9px;
}

.contentModal .mobileShoppingCart .contactData .tableContainer::-webkit-scrollbar{
    display: block;
    height: 7px;
    width: 7px;
}

.contentModal .mobileShoppingCart .contactData .tableContainer::-webkit-scrollbar-thumb{ /* Foreground */
    background: var(--writeColorParagraph2);
    border-radius: 7px;
}
.contentModal .mobileShoppingCart .contactData .tableContainer::-webkit-scrollbar-track{ /* Background */
    background: transparent;
}