:root {
    --container-width: clamp(300px, 65vw, 3000px);
    --container-flexdirection: row;
    --divleft-width: 40%;
    --divright-width: 50%;
    --divright-marginleft: 5%;
    --input-height: calc(12px + 0.8vw);
}

@media screen and (max-width: 1150px) {
    :root {
        --container-width: 80vw;
    }
}

@media screen and (max-width: 875px) {
    :root {
        --container-width: clamp(300px, 90vw, 750px);
        --container-flexdirection: column;
        --divleft-width: 100%;
        --divright-width: 95%;
        --divright-marginleft: 0%;
        --input-height: 30px;
    }
}

@media screen and (min-width: 875px) and (max-width: 975px) {
    :root {
        --divleft-width: 45%;
        --divright-width: 45%;
    }
}

@media screen and (min-width: 2500px) {
    :root {
        --input-height: calc(25px + 0.9vw);
    }
}

/* general */
.flashMsg br + br {
    display: none;
}

.flashMsg{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #FB7474;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 5px rgba(0,0,0,0.1);
}

.flashSuccessfulMsg{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #abe894;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 5px rgba(0,0,0,0.1);
}

h1,
h2 {
    width: fit-content;
}

h1,
.readmoreBtn,
td:last-child button:not(.disabledBtn),
.submitBtn {
    background-color: var(--color1);
}

h1 {
    font-size: calc(var(--h1-fontsize) * 0.8);
    line-height: var(--h1-fontsize);
    padding: var(--mp1) var(--mp6);
    margin-left: calc(var(--h1-fontsize) / 2 * -1);
}

li:not(.sectioncontainer > div:first-child li, #paymentDetails li) {
    margin: calc(var(--mp1) * 0.5) auto;
}

a:not(nav a, .backBtn, .backBanderol, footer a) {
    font-weight: 600;
}

li,
.readmoreBtn,
td,
.submitBtn,
td:last-child button,
i {
    font-size: var(--p-fontsize);
}

#coursePackage li,
#travelarrangements li {
    list-style-type: disc;
    list-style-position: inside;
}

.readmoreBtn,
td:last-child button {
    width: 100%;
    padding: calc(var(--mp11) / 2) var(--mp11);
}


tr:not(tr:last-child),
tr:only-child,
.bb,
#paymentDetails ul:nth-child(3) li:not(:last-child){
    border-bottom: solid 1.2px var(--color1);
}

/* course desc */
.sectioncontainer {
    display: flex;
    flex-direction: var(--container-flexdirection);
    margin-top: var(--mp7);
}

.sectioncontainer>div {
    height: fit-content;
}

.coursedesc h2 {
    padding: var(--mp1);
    background-color: var(--color2);
}

.coursedesc h3 {
    margin: 0;
}

.sectioncontainer>div:first-child {
    width: var(--divleft-width);
    margin-right: var(--divright-marginleft);
}

.sectioncontainer>div:first-child li {
    padding: 1px 0;
}

.sectioncontainer div:nth-child(2) {
    width: var(--divright-width);
}

.sectioncontainer>div>img {
    height: 60%;
}

.sectioncontainer>div:nth-child(2) li {
    list-style-type: decimal;
    list-style-position: inside;
}

.registrationConfirmed .coursedesc span, .paynow span:not(:nth-child(2),.nobold){
  font-weight: 600;
}

.registrationConfirmed .coursedesc p:nth-child(2),
.paynow .coursedesc p:nth-child(1),
#paymentDetails > p:nth-child(5) {
  margin-top: var(--mp7);
  margin-bottom: calc(var(--mp6) - 10px);
}

.registrationConfirmed .coursedesc p:last-child{
  margin-top: calc(var(--mp6) - 10px);
}

#paymentDetails > ul:last-child{
  margin-bottom: calc(var(--mp6) - 10px);
}

/* tables */
table {
    width: 100%;
    position: relative;
    text-align: center;
}

tr {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    transition: top 2s;
}

td, #paymentDetails ul:nth-child(3) li {
    padding: var(--p-fontsize);
}

.anteriorcourse td:first-child {
    width: 20%;
}

.anteriorcourse td:nth-child(2) {
    width: 35%;
}

.anteriorcourse td:nth-child(3) {
    width: 5%;
}

.anteriorcourse td:nth-child(4) {
    width: 25%;
}

.anteriorcourse td:nth-child(5) {
    width: 15%;
}

td:first-child:not(.anteriorcourse td:first-child) {
    width: 30%;
}

td:nth-child(2):not(.anteriorcourse td:nth-child(2)) {
    width: 20%;
}

td:nth-child(3):not(.anteriorcourse td:nth-child(3)) {
    width: 40%;
}

td:nth-child(4):not(.anteriorcourse td:nth-child(4)) {
    width: 10%;
}

/* forms */
#mainformcontainer,
#mainWaitList {
    overflow: hidden;
    transition: all 1s;
}

input:not(#confirmedPolicy, .submitBtn),
#professionaladdress {
    height: var(--input-height);
    padding: calc(5px + 0.6vw);
    margin-top: 5px;
    border: solid 0.5px #70707052;
    background-color: #f3f3f352;
}

#confirmedPolicyLabel {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

#confirmedPolicy {
    margin-right: 3px;
}

input,
textarea {
    font-size: calc(var(--p-fontsize) - 0.15vw);
}

#formreg div:nth-child(7),
.registrationMsg {
    margin-top: var(--mp2);
}

.fullwidth {
    width: 100%;
}

.formcontainer {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr;
    column-gap: var(--mp11);
}

.formgroup {
    display: inline-grid;
    margin-top: var(--mp11);
}

form label {
    font-size: calc(var(--p-fontsize) - 0.1vw);
}

form div.field-error {
    font-size: calc(var(--p-fontsize) - 0.1vw);
    font-weight: bold;
    color: var(--color5);
    padding-bottom: var(--mp11);
}

form input.field-error {
    border: solid 1px var(--color5) !important;
}

#professionaladdress {
    height: calc(60px + 0.8vw);
    resize: none;
    overflow: hidden;
}

.submitGroup {
    width: 40%;
    margin-top: calc(25px + 0.5vw);
    margin-left: 60%;
}

.submitBtn {
    padding: var(--mp11);
    border: none;
}

#paymentDetails li span:nth-child(2),
#formreg .backBtn,
#mainWaitList .backBtn {
    float: right;
}

#formreg .backBtn,
#mainWaitList .backBtn {
    margin-right: 0.4vw;
    margin-bottom: 0.4vw;
}


@media screen and (max-width: 875px) {

    /* general */
    #desc1,
    #desc2,
    #mainformcontainer,
    #mainWaitList {
        height: 100dvh !important;
        width: 100vw;
        max-height: 100vh;
        overflow-y: auto;
        position: fixed;
        z-index: 5;
        top: 0;
        transition: all 0.7s ease-in-out;
        ,
    }

    .flex {
        min-height: calc(100dvh - 50px);
    }

    #mainformcontainer td:first-child {
        font-weight: 600;
    }

    #mainformcontainer>div:nth-child(2) {
        min-height: calc(100vh - 50px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #mainformcontainer>div:nth-child(2) tr,
    #mainformcontainer>div:nth-child(2) #formreg {
        margin-top: 0;
        margin-bottom: 0;
    }

    td:last-child button,
    .readmoreBtn {
        width: calc(250px + 5vw);
        margin: var(--mp2);
        padding: 10px 20px;
    }

    table tr td:first-child,
    #mainformcontainer tr td:first-child {
        padding-top: 20px;
    }

    table tr,
    #mainformcontainer tr {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    #mainformcontainer button:not(.backBtn),
    .backBtn {
        display: none;
    }

    #mainformcontainer tr,
    #formreg,
    #desc1 .flex,
    #desc2 .flex {
        width: 80%;
        margin: auto;
    }

    #desc1 .flex,
    #desc2 .flex {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #mainformcontainer {
        padding-bottom: 50px;
    }

    .submitGroup,
    .formgroup {
        width: 100%;
    }

    h1:not(.registrationConfirmed h1, .paynow h1) {
        margin-left: 0;
    }

    .registrationConfirmed h1{
      margin-left: calc(var(--h1-fontsize) / 3.5 * -1);
    }

    h2:not(.registrationConfirmed .coursedesc h2){
        text-align: center;
        margin: auto;
    }

    /* desc */
    .coursedesc {
        position: relative;
        overflow: hidden;
    }

    .coursedesc h2:not(.registrationConfirmed h2) {
        width: 100%;
        position: absolute;
        bottom: 222px;
        z-index: 1;
        background-color: #d5d5d5f0;
    }

    .sectioncontainer>div:first-child {
        text-align: center;
    }

    .sectioncontainer {
        align-items: center;
    }

    .sectioncontainer>div>img {
        height: clamp(275px, 38vw, 315px);
    }

    /* table */
    table tr td:last-child,
    .registrationMsg {
        padding-bottom: 20px;
    }

    td {
        width: 100% !important;
        padding: 5px 0;
    }

    /* form */
    #mainformcontainer tr {
        position: relative;
        top: 0px !important;
    }

    #formreg {
        margin: auto;
    }

    .submitGroup {
        margin-left: 0;
    }

    /*waitlist*/
    #mainWaitList>div:nth-child(2) {
        height: calc(100vh - 50px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media screen and (max-width: 450px) {
  .registrationConfirmed h1, .paynow h1{
    margin-left: -5px;
  }
}

/* animations */
.novisible {
    opacity: 0;
    visibility: hidden;
}

.disabledBtn {
    background-color: var(--color2)!important;
    cursor: auto;
}

.trAnimation {
    top: 0px !important;
}