/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 0px) {
    .pre-register {
        background-color: black;
        background-image: url("../images/IMG_4048.JPG");
        background-size: cover;
        object-fit: cover;
    }

    section.body {
        z-index: 2;
        /* position: absolute; */
        height: 100vh;
        padding: 30% 8%;
    }

    section.body h1 {
        font-family: Playfair Display;
        font-size: calc(54px / var(--to-sm));
        font-weight: 700;
        line-height: calc(65.31px / var(--to-sm));
        text-align: center;
    }

    section.body h2 {
        font-family: Playfair Display;
        font-size: calc(44px / var(--to-sm));
        font-weight: 700;
        text-align: center;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 10px;
    }

    section.body h4 {
        font-family: Lato;
        font-size: calc(25.12px / var(--to-sm));
        font-weight: 800;
        line-height: 20.14px;
        text-align: center;
        margin-top: calc(20px / var(--to-sm));
    }

    section.body h6 {
        font-family: Lato;
        font-size: calc(20.94px / var(--to-sm));
        font-weight: 400;
        line-height: 10.14px;
        text-align: center;
        margin-bottom: 20.14px;
    }

    section.body .form {
        width: 100%;
        height: auto;
        margin-top: 60px;
        left: calc(124px / var(--to-sm));
        gap: 0px;
        border-radius: 13.51px;
        border: var(--primary) solid 1.52px !important;
        background-color: rgba(0, 0, 0, .5);
        opacity: 0px;
        padding: calc(40px / var(--to-sm)) calc(47px / var(--to-sm));

    }

    section.body .form.form-success {
        padding: calc(155px / var(--to-sm)) calc(47px / var(--to-sm));
    }

    section.body .form img.logo {
        width: calc(143.2px / var(--to-sm));
        height: calc(143.2px / var(--to-sm));
        gap: 0px;
        border-radius: 50%;
        border: white solid 1.52px !important;
        opacity: 0px;
        text-align: center;
        object-fit: cover;
    }

    section.body .form input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=date]{
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        color: white;
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
        border-right: none !important;
    }

    input[type=date] {
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
    }


    section.body .form input[type=number]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=number]:focus {
        color: white;
    }

    section.body .form input[type=text]:focus {
        color: white;
    }

    section.body .form input[type=email]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=password]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=text]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=date]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form select {
        color: white;
        background-color: black;
    }

    section.body .form select option {
        color: white;
        background-color: black;
    }

    section.body .form .kotak-survey {
        text-align: left;
    }

    section.body .form .kotak-survey .survey{
        font-size: 14px;
        font-family: lato;
    }

    section.body .form .input-group-text {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary);
        font-size: 12px;
        border-left: none !important;
    }

    section.body .form .label {
        font-size: 10px;
        margin-right: 250px;
    }

    section.body .form .input-group-text-select {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        font-family: lato;
        font-size: 12px;
        height: 38px;
        width: 100%;
        
    }

    section.body .form .input-group-text-area {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: white;
        font-size: 12px;
        width: 100%;
    }

    section.body .form .term-condition input {
        width: 15px;
        height: 15px;
    }

    section.body .form .term-condition p {
        font-family: Lato;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        text-align: left;
        margin-left: 15px;
        letter-spacing: 0.075em;
    }

    section.body .form .term-condition p span {
        color: var(--primary);
    }

    section.body .form button {
        width: 100%;
        margin-top: calc(60.53px / var(--to-sm));
        padding: 12.21px 10.51px;
        border: var(--primary) solid 1.52px !important;
        color: white;

        font-size: calc(18.66px / var(--to-sm));
        font-weight: 700;
        line-height: calc(29.6px / var(--to-sm));
        letter-spacing: 0.075em;
    }

    section.body .form button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }

    section.body .form button img {
        width: calc(26.91px / var(--to-sm));
        height: calc(26.91px / var(--to-sm));
        margin-left: calc(10px / var(--to-sm));
        margin-top: calc(-2.5px / var(--to-sm));
        margin-bottom: 0px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .pre-register .background-1 {
        background-color: black;
        z-index: 1;
        /* height: 100%; */
    }

    .pre-register .background-1 .left {
        width: 20vw;
        height: calc(1080px / var(--to-tablet));
    }

    .pre-register .background-1 .right {
        background-image: url("../images/IMG_4048.JPG");
        background-size: cover;
        width: 80vw;
        height: calc(1080px / var(--to-tablet));
    }

    section.body {
        z-index: 2;
        position: absolute;
        height: 100vh;
        padding: 0 calc(123px / var(--to-tablet));
        top: 2.5%;
    }

    section.body h1 {
        font-family: Playfair Display;
        font-size: calc(54px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(65.31px / var(--to-tablet));
        text-align: left;
    }

    section.body h2 {
        font-family: Playfair Display;
        font-size: calc(44px / var(--to-tablet));
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 10px;
    }

    section.body h4 {
        font-family: Lato;
        font-size: calc(25.12px / var(--to-tablet));
        font-weight: 800;
        line-height: calc(30.14px / var(--to-tablet));
        text-align: center;
        margin-top: calc(20px / var(--to-tablet));
    }

    section.body h6 {
        font-family: Lato;
        font-size: calc(17.94px / var(--to-tablet));
        font-weight: 400;
        line-height: calc(21.53px / var(--to-tablet));
        text-align: center;
        margin-bottom: calc(30px / var(--to-tablet));
    }

    section.body .form {
        width: calc(573px / var(--to-tablet));
        height: auto;
        margin-top: calc(60px / var(--to-tablet));
        left: calc(124px / var(--to-tablet));
        gap: 0px;
        border-radius: 13.51px;
        border: var(--primary) solid 1.52px !important;
        opacity: 0px;
        padding: calc(40px / var(--to-tablet)) calc(67px / var(--to-tablet));

    }

    section.body .form.form-success {
        padding: calc(155px / var(--to-tablet)) calc(67px / var(--to-tablet));
    }

    section.body .form img.logo {
        width: calc(143.2px / var(--to-tablet));
        height: calc(143.2px / var(--to-tablet));
        gap: 0px;
        border-radius: 50%;
        border: white solid 1.52px !important;
        opacity: 0px;
        text-align: center;
        object-fit: cover;
    }

    section.body .form input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=date]  {
        padding: calc(14.86px / var(--to-tablet)) calc(18.91px / var(--to-tablet));
        color: white;
        border: var(--primary) solid 1.52px !important;
        font-size: calc(1rem / var(--to-xl));
        border-right: none !important;
    }

    input[type=date] {
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
    }

    section.body .form input[type=number]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=number]:focus {
        color: white;
    }

    section.body .form input[type=password]:focus {
        color: white;
    }

    section.body .form input[type=text]:focus {
        color: white;
    }

    section.body .form input[type=email]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=password]::-webkit-input-placeholder {
        color: white;
    }
    
    section.body .form input[type=text]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=date]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form textarea::-webkit-input-placeholder {
        color: white;
    }

    section.body .form select {
        color: white;
        background-color: black;
    }

    section.body .form select option {
        color: white;
        background-color: black;
    }

    section.body .form .input-group-text {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary);
        font-size: 12px;
        border-left: none !important;
    }

    section.body .form .label {
        font-size: 10px;
        margin-right: 261px;
    }



    section.body .form .input-group-text-select {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        font-family: lato;
        font-size: 12px;
        height: 38px;
        width: 100%;
    }

    section.body .form .term-condition input {
        width: calc(15px / var(--to-tablet));
        height: calc(15px / var(--to-tablet));
    }

    section.body .form .term-condition p {
        font-family: Lato;
        font-size: calc(14px / var(--to-tablet));
        font-weight: 400;
        line-height: calc(16.8px / var(--to-tablet));
        text-align: left;
        margin-left: calc(10px / var(--to-tablet));
        letter-spacing: 0.075em;
    }

    section.body .form .term-condition p span {
        color: var(--primary);
    }

    section.body .form button {
        width: 100%;
        margin-top: calc(60.53px / var(--to-tablet));
        padding: calc(12.21px / var(--to-tablet)) calc(10.51px / var(--to-tablet));
        border: var(--primary) solid 1.52px !important;
        color: white;

        font-size: calc(18.66px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(29.6px / var(--to-tablet));
        letter-spacing: 0.075em;
    }

    section.body .form button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }

    section.body .form button img {
        width: calc(26.91px / var(--to-tablet));
        height: calc(26.91px / var(--to-tablet));
        margin-left: calc(10px / var(--to-tablet));
        margin-top: calc(-2.5px / var(--to-tablet));
        margin-bottom: 0px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 992px) {
    .pre-register .background-1 {
        background-color: black;
        z-index: 1;
        /* height: 100%; */
    }

    .pre-register .background-1 .left {
        width: 20vw;
        height: calc(1080px / var(--to-md));
    }

    .pre-register .background-1 .right {
        background-image: url("../images/IMG_4048.JPG");
        background-size: cover;
        width: 80vw;
        height: calc(1080px / var(--to-md));
    }

    section.body {
        z-index: 2;
        position: absolute;
        height: 100vh;
        padding: 0 calc(123px / var(--to-md));
        top: 2.5%;
    }

    section.body h1 {
        font-family: Playfair Display;
        font-size: calc(54px / var(--to-md));
        font-weight: 700;
        line-height: calc(65.31px / var(--to-md));
        text-align: left;
    }

    section.body h2 {
        font-family: Playfair Display;
        font-size: calc(44px / var(--to-md));
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 10px;
    }

    section.body h4 {
        font-family: Lato;
        font-size: calc(25.12px / var(--to-md));
        font-weight: 800;
        line-height: calc(30.14px / var(--to-md));
        text-align: center;
        margin-top: calc(20px / var(--to-md));
    }

    section.body h6 {
        font-family: Lato;
        font-size: calc(17.94px / var(--to-md));
        font-weight: 400;
        line-height: calc(21.53px / var(--to-md));
        text-align: center;
        margin-bottom: calc(30px / var(--to-md));
    }

    section.body .form {
        width: calc(600px / var(--to-md));
        height: auto;
        margin-top: calc(60px / var(--to-md));
        left: calc(124px / var(--to-md));
        gap: 0px;
        border-radius: 13.51px;
        border: var(--primary) solid 1.52px !important;
        opacity: 0px;
        padding: calc(40px / var(--to-md)) calc(67px / var(--to-md));

    }

    section.body .form.form-success {
        padding: calc(155px / var(--to-md)) calc(67px / var(--to-md));
    }

    section.body .form img.logo {
        width: calc(143.2px / var(--to-md));
        height: calc(143.2px / var(--to-md));
        gap: 0px;
        border-radius: 50%;
        border: white solid 1.52px !important;
        opacity: 0px;
        text-align: center;
        object-fit: cover;
    }

    section.body .form input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=date] {
        padding: calc(14.86px / var(--to-md)) calc(18.91px / var(--to-md));
        color: white;
        border: var(--primary) solid 1.52px !important;
        font-size: calc(1rem / var(--to-md));
        border-right: none !important;
    }

    input[type=date] {
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
    }

    section.body .form input[type=number]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=number]:focus {
        color: white;
    }

    section.body .form input[type=text]:focus {
        color: white;
    }

    section.body .form input[type=password]:focus {
        color: white;
    }

    section.body .form input[type=email]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=password]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=text]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form select {
        color: white;
        background-color: black;
    }

    section.body .form select option {
        color: white;
        background-color: black;
    }

   /* section.body .form .tooltip {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 5;
    }

    section.body .form input[type=date]::focus + .tooltip {
        visibility: visible;
    }*/

    section.body .form input[type=date]  {
        color: white;
    }

    section.body .form .input-group-text {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary);
        font-size: 12px;
        border-left: none !important;
    }

    section.body .form .label {
        font-size: 10px;
        margin-right: 261px;
    }

    section.body .form .input-group-text-select {   /* disini style laptop bayu */
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        font-family: lato;
        font-size: 12px;
        height: 38px;
        width: 100%;
    }

    section.body .form .term-condition input {
        width: calc(15px / var(--to-md));
        height: calc(15px / var(--to-md));
    }

    section.body .form .term-condition p {
        font-family: Lato;
        font-size: calc(14px / var(--to-md));
        font-weight: 400;
        line-height: calc(16.8px / var(--to-md));
        text-align: left;
        margin-left: calc(10px / var(--to-md));
        letter-spacing: 0.075em;
    }

    section.body .form .term-condition p span {
        color: var(--primary);
    }

    section.body .form button {
        width: 100%;
        /* margin-top: calc(60.53px / var(--to-md)); */
        padding: calc(12.21px / var(--to-md)) calc(10.51px / var(--to-md));
        border: var(--primary) solid 1.52px !important;
        color: white;

        font-size: calc(18.66px / var(--to-md));
        font-weight: 700;
        line-height: calc(29.6px / var(--to-md));
        letter-spacing: 0.075em;
    }

    section.body .form button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }

    section.body .form button img {
        width: calc(26.91px / var(--to-md));
        height: calc(26.91px / var(--to-md));
        margin-left: calc(10px / var(--to-md));
        margin-top: calc(-2.5px / var(--to-md));
        margin-bottom: 0px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1367px) {
    .pre-register .background-1 {
        background-color: black;
        z-index: 1;
        /* height: 100%; */
    }

    .pre-register .background-1 .left {
        width: 20vw;
        height: calc(1080px / var(--to-xl));
    }

    .pre-register .background-1 .right {
        background-image: url("../images/IMG_4048.JPG");
        background-size: cover;
        width: 80vw;
        height: calc(1080px / var(--to-xl));
    }

    section.body {
        z-index: 2;
        position: absolute;
        height: 100vh;
        padding: 0 calc(123px / var(--to-xl));
        top: 2.5%;
    }

    section.body h1 {
        font-family: Playfair Display;
        font-size: calc(52px / var(--to-xl));
        font-weight: 700;
        line-height: calc(65.31px / var(--to-xl));
        text-align: left;
    }

    section.body h2 {
        font-family: Playfair Display;
        font-size: calc(42px / var(--to-xl));
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 10px;
    }

    section.body h4 {
        font-family: Lato;
        font-size: calc(25.12px / var(--to-xl));
        font-weight: 800;
        line-height: calc(30.14px / var(--to-xl));
        text-align: center;
        margin-top: calc(20px / var(--to-xl));
    }

    section.body h6 {
        font-family: Lato;
        font-size: calc(17.94px / var(--to-xl));
        font-weight: 400;
        line-height: calc(21.53px / var(--to-xl));
        text-align: center;
        margin-bottom: calc(30px / var(--to-xl));
    }

    section.body .form {
        width: calc(563px / var(--to-xl));
        height: auto;
        margin-top: calc(60px / var(--to-xl));
        left: calc(124px / var(--to-xl));
        gap: 0px;
        border-radius: 13.51px;
        border: var(--primary) solid 1.52px !important;
        opacity: 0px;
        padding: calc(40px / var(--to-xl)) calc(67px / var(--to-xl));
    }

    section.body .form.form-success {
        padding: calc(155px / var(--to-xl)) calc(67px / var(--to-xl));
    }

    section.body .form img.logo {
        width: calc(143.2px / var(--to-xl));
        height: calc(143.2px / var(--to-xl));
        gap: 0px;
        border-radius: 50%;
        border: white solid 1.52px !important;
        opacity: 0px;
        text-align: center;
        object-fit: cover;
    }

    section.body .form input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=date] {
        padding: calc(14.86px / var(--to-xl)) calc(18.91px / var(--to-xl));
        color: white;
        border: var(--primary) solid 1.52px !important;
        font-size: calc(1rem / var(--to-xl));
        border-right: none !important;
    }

    input[type=date] {
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
    }
    

    section.body .form input[type=number]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=number]:focus {
        color: white;
    }

    section.body .form input[type=password]:focus {
        color: white;
    }

    section.body .form input[type=text]:focus {
        color: white;
    }

    section.body .form input[type=date]:focus {
        color: white;
    }

    section.body .form input[type=email]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=password]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=text]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=date]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form select {
        color: white;
        background-color: black;
    }

    section.body .form select option {
        color: white;
        background-color: black;
    }

    section.body .form .input-group-text {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary);
        font-size: 12px;
        border-left: none !important;
    }

    section.body .form .label {
        font-size: 10px;
        margin-right: 261px;
    }

    section.body .form .input-group-text-select {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        font-family: lato;
        font-size: 12px;
        height: 38px;
        width: 100%;
    }

    section.body .form .term-condition input {
        width: calc(15px / var(--to-xl));
        height: calc(15px / var(--to-xl));
    }

    section.body .form .term-condition p {
        font-family: Lato;
        font-size: calc(14px / var(--to-xl));
        font-weight: 400;
        line-height: calc(16.8px / var(--to-xl));
        text-align: left;
        margin-left: calc(10px / var(--to-xl));
        letter-spacing: 0.075em;
    }

    section.body .form .term-condition p span {
        color: var(--primary);
    }

    section.body .form button {
        width: 100%;
        /* margin-top: calc(60.53px / var(--to-xl)); */
        padding: calc(12.21px / var(--to-xl)) calc(10.51px / var(--to-xl));
        border: var(--primary) solid 1.52px !important;
        color: white;

        font-size: calc(18.66px / var(--to-xl));
        font-weight: 700;
        line-height: calc(29.6px / var(--to-xl));
        letter-spacing: 0.075em;
    }

    section.body .form button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }

    section.body .form button img {
        width: calc(26.91px / var(--to-xl));
        height: calc(26.91px / var(--to-xl));
        margin-left: calc(10px / var(--to-xl));
        margin-top: calc(-2.5px / var(--to-xl));
        margin-bottom: 0px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1519px) {
    .pre-register .background-1 {
        background-color: black;
        z-index: 1;
    }

    .pre-register .background-1 .left {
        width: 20vw;
        height: 1080px;
    }

    .pre-register .background-1 .right {
        background-image: url("../images/IMG_4048.JPG");
        background-size: cover;
        width: 80vw;
        height: 1080px;
    }

    section.body {
        z-index: 2;
        position: absolute;
        height: 100vh;
        padding: 0 123px;
        top: 2.5%;
    }

    section.body h1 {
        font-family: Playfair Display;
        font-size: 50px;
        font-weight: 700;
        line-height: 65.31px;
        text-align: left;
    }

    section.body h2 {
        font-family: Playfair Display;
        font-size: 38px;
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: white;
        text-underline-offset: 10px;
    }

    section.body h4 {
        font-family: Lato;
        font-size: 25.12px;
        font-weight: 800;
        line-height: 30.14px;
        text-align: center;
        margin-top: 20px;
    }

    section.body h6 {
        font-family: Lato;
        font-size: 17.94px;
        font-weight: 400;
        line-height: 21.53px;
        text-align: center;
        margin-bottom: 30px;
    }

    section.body .form {
        width: 523px;
        height: auto;
        margin-top: 60px;
        left: 124px;
        gap: 0px;
        border-radius: 13.51px;
        border: var(--primary) solid 1.52px !important;
        opacity: 0px;
        padding: 40px 67px;

    }

    /* section.body .form.form-success {
        padding: 155px 67px;
    } */

    section.body .form img.logo {
        width: 143.2px;
        height: 143.2px;
        gap: 0px;
        border-radius: 50%;
        border: white solid 1.52px !important;
        opacity: 0px;
        text-align: center;
        object-fit: cover;
    }

    section.body .form input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    input[type=date]  {
        padding: 14.86px 18.91px;
        color: white;
        border: var(--primary) solid 1.52px !important;
        font-size: 1rem;
        border-right: none !important;
    }

    input[type=date] {
        padding: calc(30.86px / var(--to-sm)) calc(38.91px / var(--to-sm));
        border: var(--primary) solid 1.52px !important;
        font-size: 0.75rem;
    }

    section.body .form input[type=number]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=number]:focus {
        color: white;
    }

    section.body .form input[type=text],
    :focus {
        color: white;
    }

    section.body .form input[type=password]:focus {
        color: white;
    }

    section.body .form input[type=email]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=password]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=text]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form input[type=date]::-webkit-input-placeholder {
        color: white;
    }

    section.body .form select {
        color: white;
        background-color: black;
    }
    section.body .form select option {
        color: white;
        background-color: black;
    }

    section.body .form .input-group-text {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary);
        font-size: 12px;
        border-left: none !important;
    }

    section.body .form .label {
        font-size: 10px;
        margin-right: 261px;
    }

    section.body .form .input-group-text-select {
        background-color: transparent;
        border: var(--primary) solid 1.52px !important;
        font-family: lato;
        font-size: 12px;
        height: 38px;
        width: 100%;

    }

    section.body .form .term-condition input {
        width: 15px;
        height: 15px;
        border: var(--primary) solid 1.52px !important;
        color: var(--primary) !important;
        background-color: var(--primary) !important;
    }

    section.body .form .term-condition p {
        font-family: Lato;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        text-align: left;
        margin-left: 10px;
        letter-spacing: 0.075em;
    }

    section.body .form .term-condition p span {
        color: var(--primary);
    }

    section.body .form button {
        width: 100%;
        /* margin-top: 60.53px; */
        padding: 12.21px 10.51px 12.21px 10.51px;
        border: var(--primary) solid 1.52px !important;
        color: white;
        font-size: 18.66px;
        font-weight: 700;
        line-height: 29.6px;
        letter-spacing: 0.075em;
    }

    section.body .form button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }

    section.body .form button img {
        width: 26.91px;
        height: 26.91px;
        margin-left: 10px;
        margin-top: -2.5px;
        margin-bottom: 0px;
    }
}

section.body .form button.button-primary {
    background: var(--primary) !important;
}

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

.form-control {
    background: transparent !important
}

.date_input::-webkit-calendar-picker-indicator {
/*    filter: brightness(0) invert(1);*/
background-color: goldenrod;
}

input[type=checkbox]:checked+label::before {
    background-color: var(--primary);
    border: var(--primary) solid 1.52px !important;
}

input[type=checkbox] {
    accent-color: var(--primary);
}

section.body .form p a{
    color: var(--primary);
    text-decoration: none;
}