body{background-color:#f8f8f8}
main{background-color:#fff;display:flex;margin: 0 auto;max-width:1200px;width:100%;padding:0 24px;}

section{padding-bottom:24px}
section a{
    background-color:green;border:1px solid green;border-radius:2px;box-shadow:0 1px 2px 0 rgba(17,34,68,0.4);color:#fff;display:inline-block;font-size:20px;font-weight:400;line-height:30px;margin:16px;padding:8px 24px 8px 32px;transition:border-radius .3s,box-shadow .3s;user-select:none
}
section a:hover{ box-shadow: 0 0 11px rgba(33,33,33,.2) }
section a i { margin-left: 15px }
section h1{border-bottom:1px solid #bcd;color:#444;font-size:32px;font-weight:700;line-height:58px;margin:16px 0;padding:0}
section h2{color:#124;font-size:20px;font-weight:400;line-height:30px;margin:16px 16px 0 16px;padding:0}
section h3{color:#124;font-size:16px;font-weight:400;line-height:24px;margin:16px 16px 0 16px;padding:0}
section img{margin:16px;max-width:calc(100% - 32px)}
section p{color:#124;font-size:16px;font-weight:100;line-height:24px;padding:0}
section li{color:#124;font-size:16px;font-weight:100;line-height:24px;margin:0 16px;padding:0}
section ul{margin:0 16px 16px 16px;padding:0}

section form{margin:0;padding:0}
section fieldset{border:0;border-top:1px solid #bcd;margin:32px 0 0 0}
section input[type="email"],section input[type="number"],section input[type="text"],section select{appearance:none;background-color:#fff;border:1px solid #bcd;border-radius:2px;caret-color:#567;font-weight:100;height:42px;padding:8px}
section input[type="email"]:focus,section input[type="number"]:focus,section input[type="text"]:focus{border-color:#567;outline:none}
section input[type="submit"]{
    background-color:green;border:1px solid green;border-radius:2px;color:#fff;cursor:pointer;display:inline-block;font-size:20px;font-weight:400;line-height:30px;padding:8px 24px 8px 32px;transition:box-shadow .3s;user-select:none
}
section input[type="submit"]:hover{
    box-shadow: 0 0 11px rgba(33,33,33,.2)
}
section label{color:#124;display:block;margin:8px 0 0 0;position:relative;width:100%}
section label:after{content:"\E919";display:inline-block;font-family:LaSourisIcons;font-weight:400;position:absolute;top:12px;visibility:hidden}
section legend{color:#124;font-size:20px;font-weight:400;margin:0;text-align:left}
section textarea{appearance:none;background-color:#fff;border:1px solid #bcd;border-radius:2px;caret-color:#567;font-weight:100;height:168px;margin:0 168px 0 12px;padding:8px;width:496px}


#tabs{margin-top:64px}
#tabs a{border-bottom:1px solid #bcd;color:#124;display:flex;padding:14px 16px;position:relative}
#tabs a:hover{color:#f9aa33;text-decoration:underline}
#tabs a::after{content:"\f138";display:inline-block;font-family:"bootstrap-icons";position:absolute;right:16px;top:16px}
#tabs h3{border-bottom:1px solid #bcd;color:#124;font-size:20px;font-weight:700;line-height:30px;margin:24px 0 3px 0;padding:0 0 4px 0}

@media screen and (max-width: 1023px){
    main{flex-flow:column}
    section{width:100%}
    #tabs{width:100%}
}

@media screen and (max-width: 767px){
    section fieldset{padding:0}
    section input[type="email"],section input[type="number"],section input[type="text"],section select{margin:0 auto;width:100%}
    section input[type="submit"]{margin:16px auto;width:100%}
    section label{padding:0}
    section label:after{right:12px}
    section legend{padding:0 16px 16px 0}
    section p{margin:0 0 16px 0}
    section textarea{margin:0 auto;width:100%}
}

@media screen and (min-width: 768px){
    section fieldset{padding:0 0 0 32px}
    section form{text-align:right}
    section input[type="email"],section input[type="number"],section input[type="text"],section select{margin:0 0 0 12px;width:328px}
    section input[type="submit"]{margin:16px 168px 16px 0;width:328px}
    section label{padding:0 168px 0 0}
    section label:after{right:180px}
    section legend{padding:16px}
    section p{margin:0 16px 16px 16px}
    section textarea{}
}

@media screen and (min-width: 1024px){
    section{flex:0 0 66%}
    #tabs{flex:1 1 auto;margin-left:24px}
}

@media screen and (min-width: 1200px){
    main{border-radius:2px;box-shadow:0 1px 2px 0 rgba(17,34,68,0.4)}
}
fieldset input.error{border-color:#f55}

/* timeslots */
.timeslot-container {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
}

.timeslot-label {
    width: calc(20% - 10px);
    margin: 5px;
    padding: 10px;
    text-align: center;
    background-color: #eee;
    border-radius: 10px;
    cursor: pointer;
}

.timeslot-label.selected {
    background-color: green;
    color: white;
}

@media (max-width: 768px) {
    .timeslot-label {
        width: calc(33.33% - 10px);
    }
}
/* form */

#filter-page-form {
    font-family: Arial, sans-serif;
    /* padding: 20px; */
    border-radius: 5px;
    width: 500px;
    margin-top: -1.1%;
}

#filter-page-form h2 {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
    color: #444;
}

#filter-page-form h1 {
    border-bottom: 1px solid #bcd;
    color: #444;
    font-size: 32px;
    font-weight: 700;
    line-height: 58px;
    margin: 16px 0;
    padding: 0;
}

#filter-page-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #444;
}

#filter-page-form input,
#filter-page-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    margin-bottom: 15px;
    font-size: 16px;
    color: #555;
}

#filter-page-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-position: right 10px center;
    background-repeat: no-repeat;
}

#filter-page-form select::-ms-expand {
    display: none;
}
#filter-page-form fieldset{
    border: none;
}

#filter-page-form button[type="button"],
#filter-page-form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 10px;
    width: 100%;
    margin-top: 2%;
}

#filter-page-form button[type="button"]:hover,
#filter-page-form button[type="submit"]:hover {
    background-color: #3e8e41;
}

#filter-page-form fieldset {
    display: none;
}

#filter-page-form fieldset:first-of-type {
    display: block;
}

#filter-page-form input[type="text"],input[type="email"],input[type="phone"]{
    background-color: #dddddd63;;
}


/*
  LABELS
 */
.valid-input{
    color:green;
}
.valid-label{
    border: 1px solid green !important;
}

.invalid-input{
    color:red;
}
.invalid-label{
    border: 1px solid red !important;
}

@media screen and (max-width: 450px){
    #filter-page-form {
        font-family: Arial, sans-serif;
        width: 110%;
        padding: 0;
        border-radius: 5px;
        margin-bottom: 10%;
        margin-top: 3%;
        margin-left: -4%;
    }
    #filter-page-form h1 {
        font-size:25px;
    }

    section h1 {
        font-size:25px;
    }

    .add-to-calender {
        color: #444;
        font-weight: bold;
        font-size: 17px;
    }
}


/** input fields css**/
.firstname-div{
    float:left;width:45%;height: 75px;
}
.lastname-div{
    float: right;width: 52%;
}

.error-message {
    border: 2px solid red;
    color: red;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    display:none;
}

a.facebook-share {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #3b5998;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border: 0px;
    text-align: center;
}

a.facebook-share:hover {
    background-color: #2d4373;
}

.instagram-share-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: #C13584;
    color: #fff;
    font-size: 16px;
    font-weight: bold !important;
    text-decoration: none;
    border-radius: 5px;
    border: 0px;
    text-align: center;
}

.instagram-share-button i {
    margin-left: 5px;
}

.instagram-share-button:hover {
    background-color: #E1306C;
    cursor: pointer;
}


.tiktok-share-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: 0px;
    font-weight: bold !important;
}

.tiktok-share-button i {
    margin-right: 8px;
}

.tiktok-share-button:hover {
    background-color: #69c9d0;
    color: #000;
}



@media screen and (max-width:450px){
    .instagram-share-button {
        width: 85%;
    }
    .tiktok-share-button{
        width: 85%;
    }
    .facebook-share{
        width: 85%;
    }
}


.normal_hyperlink {
    text-decoration: none;
    background-color: transparent;
    border: none;
    border-radius: inherit;
    box-shadow: none;
    color: blue;
    font-weight: bold;
    display: block;
    line-height: 0px;
    margin: auto;
    padding: inherit;
    transition: none;
    user-select: none;
    font-size: inherit;
    text-decoration: underline;
}