/* 
*  CSS TABLE OF CONTENTS
*   
*   1.0 - CSS Reset
*   2.0 - General
*   3.0 - Booking Course Selection Page
*   4.0 - Event Selection Page 
*   5.0 - Booking Page
*   6.0 - Footer
*/

/*** 1.0 - Reset ***/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*** 1.0 - General ***/

:root {
    --primary-color: #F78D1E;
    --secondary-color: #243445;
    --primary-word-color: #243445;
    --canvas-color: #F9F2EB;

    --zetta-blue: #519ACF;
}

* {
    font-family: "Poppins", sans-serif;
    color: var(--primary-word-color);
}

.content_wrapper {
    background-color: var(--canvas-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    height: 100%;
}

.company_logo {
    height:auto;
    width: 400px;
}

.title {
    font-size: 1.5rem;
}

.container_title {
    font-size: 1.5rem;
    font-weight: 600;
}

.update_timing_title {
    font-size: 0.75rem;
    font-weight: 200;
    width: 100%;
    text-align: center;
}

.main_content,
.events_main_content,
.booking_main_content {
    display: flex;
    gap: 20px;
    max-width: 800px;
    width: 100%;
}

.main_content {
    flex-direction: row;
}

.events_main_content,
.booking_main_content {
    flex-direction: column;
}

@media (max-width: 428px) {
    .main_content,
    .events_main_content {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }
}

/*** 3.0 - Booking Course Selection Page ***/

.booking_type_container {
    position: relative;
    border-radius: 12px;
    transition: all 0.5s ease;
}

.booking_type_container:hover {
    box-shadow: 2px 2px 8px var(--secondary-color);
}

.booking_type_container img {
    position: relative;
    text-align: center;
    border-radius: 12px;
    filter: brightness(30%);
    overflow: hidden;
    height: 100%;
}

@media (max-width: 428px) {
    .booking_type_container {
        height: 200px;
        width: 100%;
    }

    .booking_type_container img {
        width: 100%;
        object-fit:cover;
    }
}

.booking_details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 20px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.booking_type_title,
.booking_type_description {
    text-shadow: 4px 4px 10px var(--secondary-color);
    color: white;
}

.booking_type_container:hover .booking_details .booking_type_title,
.booking_type_container:hover .booking_details .booking_type_description {
    text-shadow: 2px 2px 6px var(--secondary-color);
}

.booking_type_container:hover img {
    filter: brightness(50%);
}

.booking_type_title {
    font-weight: 800;
    font-size: 2rem;
}

.booking_type_description {
    font-weight: 100;
}

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

    .booking_type_title {
        font-size: 1rem;
    }

    .booking_type_description {
        font-size: 0.7rem;
    }
}

.button_action,
#button_select_payment,
.paymBtn {
    border-radius: 6px;
    text-decoration: none;
    color: white;
    border: none;
    cursor: pointer;
}

.button_action {
    background-color: var(--primary-color);
    height: 60px;
    width: 200px;
}

.booking_form_details #button_select_payment, .paymBtn {
    background-color: var(--secondary-color);
    height: 40px;
    width: 120px;
}

.button_action:hover,
#button_select_payment:hover, .paymBtn {
    box-shadow: 2px 2px 8px var(--secondary-color);
}

.paymBtn {
    width: 120px !important;
    height: auto !important;
    padding: 0px !important;
}

@media (max-width: 428px) {
    .button_action {
        flex-grow: 1;
    }

    .events_main_content .action_content .button_action {
        height: 40px;
        width: 30%;
    }
}

/*** 4.0 - Event Selection Page ***/

/* Drop Down List */
.action_content {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

#event_courses_dropdown {
    width: 100%;
    border-right: 10px solid transparent;
    border: none;
    padding: 10px;
    border-radius: 6px;
}

#event_courses_dropdown:hover {
    box-shadow: 2px 2px 8px var(--secondary-color);
}

.event_container, .event_message {
    background-color: white;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

.event_container {
    justify-content: space-between;;
}

.event_details_container {
    width: 100%;
    margin-top: 20px;
    font-weight: 200;
    transition: all 0.5s ease;

}

.event_container:hover {
    box-shadow: 2px 2px 8px var(--secondary-color);
}

.event_details_container tr td:first-child {
    text-align: right;
    width: 138px;
}

.event_details_container tr td span {
    color: var(--primary-color);
}

.event_title {
    font-size: 1.2rem;
    font-weight: 600;
}

.event_description {
    font-weight: 200;
}

.event_action {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
}

.event_action .button_action {
    height: 40px;
}

.event_pricing {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    gap: 5px;
}

.event_pricing_wrapper {
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
}

.event_price_GST {
    font-size: 0.75rem;
    font-weight: 300;
}

.event_price {
    font-size: 2rem;
}

.event_remainder {
    font-weight: 400;
    color: black;
}

@media (max-width: 650px) {

    .event_description {
        font-size: 0.8rem;
    }

    .event_details_container tr td:first-child {
        width: 50%;
    }

    .event_details_container {
        font-size: 0.8rem;
    }

    .event_container {
        flex-direction: column;
    }
    
    .event_action .button_action {
        width: 100%;
        margin-top: 20px;
    }

    .event_pricing_wrapper {
        text-align: center;
    }

    .event_pricing {
        justify-content: center;
    }
}

/*** 5.0 - Booking Page ***/

/*form styles*/
#booking_multistep_form {
	width: 100%;
	position: relative;
}

.booking_form_heading_container {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: baseline; */
    text-align: center;
    margin-top: 10px;
}

#booking_multistep_form fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	margin-top: 20px;
	/*stacking fieldsets above each other*/
	position: relative;
}

#booking_multistep_form fieldset .booking_form_details {
    padding: 20px 10%;
}

#booking_multistep_form fieldset .booking_form_details > label,
.booking_form_details .unselected-field label {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 700;
    margin-top: 10px;
}

#booking_multistep_form fieldset .booking_form_details > label.error,
.booking_form_details .unselected-field label.error {
    display: block;
    color: red;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 10px;
}

#tnc-error {
    color: red
}

.booking_form_details div:not(.datepicker, .booking_form_sub_heading, .booking_form_sub_heading_description, .unselected-field, #main_datetimepicker, .bootstrap-datetimepicker-widget) {
    font-weight: 200;
    margin-left: 10px;
}

.booking_form_details .booking_form_sub_heading {
    font-weight: 600;
    margin-top: 15px;
    margin-left: 0;
}

.booking_form_details .booking_form_sub_heading_description, .safra-footnote {
    font-size: 0.75rem;
    margin-left: 0;
}

.booking_form_details table {
    width: 100%;
    margin-top: 15px;
    font-weight: 200;
}

.booking_form_details table tr:not(:first-child) td {
    width: 50%;
}


.booking_form_details table tr:not(:first-child) td:first-child {
    text-align: right;
    color: var(--primary-color);
    font-weight: 600;
}

.booking_form_details table:not(.table-condensed) tr:first-child {
    text-align: center;
    text-decoration: underline;
    font-weight: 400;
}

/*Hide all except first fieldset*/
#booking_multistep_form fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
.form-input,
.select-input,
#booking_multistep_form input,
#booking_multistep_form textarea,
.booking_form_details .unselected-field .course_selection,
.booking_form_details .unselected-field .age_selection {
	padding: 6px;
	border: 1px solid var(--canvas-color);
	border-radius: 6px;
	width: 100%;
	box-sizing: border-box;
	font-size: 1rem;
    font-weight: 200;
}

.booking_form_details .unselected-field {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    width: 100%;
}
.booking_form_details .unselected-field .course_selection {

}

/*buttons*/
.booking_form_details .booking_form_container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-left: 0;
}

#booking_multistep_form .action-button {
	width: 50%;
	background: var(--primary-color);
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
    border-radius: 6px;
}

#booking_multistep_form .action-button-back {
    background: var(--secondary-color);
}

#booking_multistep_form .action-button:hover, #booking_multistep_form .action-button:focus {
    box-shadow: 2px 2px 8px var(--secondary-color);
}

/*headings*/

/*form_progressbar*/
#form_progressbar {
	overflow: hidden;
    display: flex;
	/*CSS counters to number the steps*/
	counter-reset: step;
    padding: 0;
    text-align: center;
}
#form_progressbar li {
	list-style-type: none;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#form_progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 30px;
    line-height: 30px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 50%;
	margin: 0 auto 5px auto;
    z-index: 2;
    position: relative;
}

/*form_progressbar connectors*/
#form_progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 14px;
	z-index: 1; /*put it behind the numbers*/
}

#form_progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}

/*marking form_progress_bar_active/completed steps green*/
/*The number of the step and the connector before it = green*/
#form_progressbar li.form_progress_bar_active:before,  #form_progressbar li.form_progress_bar_active:after{
	background: var(--primary-color);
	color: white;
}

/* Terms and condition */
.tnc_container {
    margin-top: 10px;
    text-align: center;
}

.tnc_container #tnc {
    width: auto;
}

/*** 6.0 - Footer ***/

.footer {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.footer a {
    text-decoration: none;
    color: var(--zetta-blue);
    margin-left: 3px;
}


.footer img {
    width: 70px;
}

.hide {
    display: none !important;
}

.activity_message {
    font-size: 75%; 
    margin-top: 10px;
}

#activity_message li, .text-danger {
    color: #a94442;
}

.text-danger {
    font-size: 0.8rem;
}

.bac-session  {
    margin-bottom: 20px;
}

.bac-timeslot-error {
    margin-top: 10px;
    margin-bottom: 10px;
}

.checkbox {
    width: auto !important;
}

#check_voucher, #cancel_voucher, .remove_voucher {
    float: left;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 38px;
    color: white;
    border: 0px none;
    cursor: pointer;
    font-weight: 200;
    font-size:0.85rem;
}

#check_voucher {
    background-color: #4285F4;
} 

#cancel_voucher, .remove_voucher {
    background-color: #ff4444;
}

#app_voch_code, .selected_voucher_code {
    width: 70% !important;
    float: left;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0%;
    left: 0px;
    opacity: 1;
    filter: alpha(opacity=50);
}

.overlay span {
    color: var(--primary-word-color);
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff #cb8b2c #fff #cb8b2c;
  animation: lds-dual-ring 1.2s linear infinite;
}

.time-btns {
    margin-top: 2em;
    margin-bottom: 2em;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}
.btn-group>.btn:first-child {
    margin-left: 0;
}
.btn-group>.btn, .btn-group-vertical>.btn {
    position: relative;
    /* float: left; */
}
.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    /* float: left; */
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-secondary {
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 5px;
}

.btn-secondary.active, .btn-secondary.focus {
    background-color: #337ab7;
    color: #fff;
}

[data-toggle=buttons]>.btn input[type=radio], [data-toggle=buttons]>.btn-group>.btn input[type=radio], [data-toggle=buttons]>.btn input[type=checkbox], [data-toggle=buttons]>.btn-group>.btn input[type=checkbox] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
[data-toggle=buttons]>.btn input[type=checkbox], [data-toggle=buttons]>.btn input[type=radio], [data-toggle=buttons]>.btn-group>.btn input[type=checkbox], [data-toggle=buttons]>.btn-group>.btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
input[type=radio], input[type=checkbox] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}
input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}
input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

#timeslots {
    text-align: center;
}

.non-bac-time {
    text-align: center;
}

.non-bac-age-label {
    font-weight: bold !important;
    margin-left: 0px !important;
    margin-top: 5px;
}

.btn-secondary.active, .btn-secondary.focus {
    background-color: #337ab7;
    color: #fff;
}

.pt-0 {
    padding-top: 0px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.event-error {
    text-align: center;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.is-invalid {
    border-color: #a94442 !important;
}

/*
Bootstrap css in order for bootstrap datepicker to works
*/

body {
    background-color: var(--canvas-color);
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    text-align: center !important;
    border-radius: 0px;
    width: 13% !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    cursor: pointer;
}

.bootstrap-datetimepicker-widget ul,
.bootstrap-datetimepicker-widget ol {
  list-style: none;
}

.bootstrap-datetimepicker-widget {
    /* background-color: #F9F2EB; */
}

.list-unstyled {
    padding: 0px !important;
}

.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
    display: table-cell;
    vertical-align: inherit;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-chevron-left:before {
    content:"\e079"
}

.glyphicon-chevron-right:before{
    content:"\e080"
}

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(fonts/glyphicons-halflings-regular.eot);
    src:url(fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
    url(fonts/glyphicons-halflings-regular.woff2) format('woff2'),
    url(fonts/glyphicons-halflings-regular.woff) format('woff'),
    url(fonts/glyphicons-halflings-regular.ttf) format('truetype'),
    url(fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')

}
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td{
    padding:5px
}

.pull-left {
    float:left !important;
}
.pull-right {
    float:right !important;
}

.dropdown-menu {
    position:absolute;
    top:100%;
    left:0;
    z-index:1000;
    display:none;
    float:left;
    min-width:160px;
    padding:5px 0;
    margin:2px 0 0;
    font-size:14px;
    text-align:left;
    list-style:none;
    background-color:#fff;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;
    border:1px solid #ccc;
    border:1px solid rgba(0,0,0,.15);
    border-radius:4px;
    -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
    box-shadow:0 6px 12px rgba(0,0,0,.175)
}

.dropdown-menu.pull-right {
    right:0;
    left:auto
}

.dropdown-menu .divider {
    height:1px;
    margin:9px 0;
    overflow:hidden;
    background-color:#e5e5e5
}

.dropdown-menu>li>a{
    display:block;
    padding:3px 20px;
    clear:both;
    font-weight:400;
    line-height:1.42857143;
    color:#333;
    white-space:nowrap
}

.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{
    color:#262626;
    text-decoration:none;
    background-color:#f5f5f5
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover {
    color:#fff;
    text-decoration:none;
    background-color:#337ab7;
    outline:0
}

.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{
    color:#777
}

.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{
    text-decoration:none;
    cursor:not-allowed;
    background-color:transparent;
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.open>.dropdown-menu{
    display:block
}

.open>a{
    outline:0
}

.dropdown-menu-right{
    right:0;
    left:auto
}

.dropdown-menu-left{
    right:auto;left:0
}

.dropdown-header{
    display:block;
    padding:3px 20px;
    font-size:12px;
    line-height:1.42857143;
    color:#777;
    white-space:nowrap
}

.dropdown-backdrop{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:990
}

.pull-right>.dropdown-menu{
    right:0;
    left:auto
}

.input-group{
    position:relative;
    display:table;
    border-collapse:separate;
    width: 100%;
}

.disable-booking-type {
    pointer-events: none; 
    opacity: 0.2;
}

.payment-selected {
    border: 3px solid var(--primary-color) !important;
}