/*
    Theme Name: Synergistiq Booking 
    Author: StartCreative
    Author URI: https://startcreative.com.au
    Description: ...
    Version: 1.0
*/

* {
    outline: none;
}
html {
    overflow-x: hidden !important;
}
html, body {
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    font-family: "open sans", arial, sans-serif;
    color: #363636;
    font-size: 14px;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
h4 {
    font-size: 16px;
}
a {
    cursor: pointer;
    outline: medium none !important;
    text-decoration: none;
}
p {
    font-size: 14px;
}
ul, li {
    list-style: outside none none;
    margin: 0px;
    padding: 0px;
}
h1 {
    color: #33274c;
    font-size: 28px;
    font-weight: 200;
    margin: 15px 0;
}
.padding {
    padding: 20px !important;
}
select {
    color: #363636;
}
option {
    color: #363636;
    font-size: 12px;
    padding: 2px 5px;
}
option:first-child {
    color: #ccc !important;
}
input[type="text"],
input[type="password"],
textarea {
   -webkit-appearance: none;
   appearance: none;
}
input:focus, textarea:focus, select:focus {
    border: 1px solid #a7a5a5 !important;
}
label {
    margin-bottom: 5px;
}
.custom-control-label {
    font-size: 15px !important;
}

.form-control {
    height: 42px;
    font-weight: 400;
}
.tall-field {
    height: 55px;
    font-size: 16px;
}
.tt-input,
.tt-hint {
    background: transparent !important;    
}
.hide {
    display: block !important;
    height: 0;
    opacity: 0;
    position: absolute !important;
    visibility: hidden;
}

label.checkbox {
    position: relative;
    width: 100%;
    text-align: left;
    display: none;
    float: right;
    clear: both;
    max-width: 400px;

}
label.checkbox input {
    margin-top: 4px;
}
label.checkbox span {
    font-size: 13px;
    font-weight: 500;
}
.form-submit-group {
    margin-top: 40px;
    border-top: 1px solid #ced4da;
    padding-top: 20px;
}
.btn-primary {
    margin: 0 !important;
    clear: both;
}
.btn-group {
    overflow: hidden;
}
/****  Common  ****/

span.badge {
    background-color: #4b306a;
    padding: 4px 12px;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    margin-right: 4px !important;
    font-weight: 400;
    margin: 2px 0;
}


.inner {
    height: 100%;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0;
    position: relative;
    width: 100%;
}
.purple-bg {
    background-color: #33274c;
    color: #fff;
}
.btn {
    background-color: #a6d274;
    border: 0 none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    width: 100%;
    float: left;
}

.btn-primary {
    background-color: #a6d274;
    float: right;
    border: 0 none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 300;
    height: 65px;
    margin: 20px 0;
    width: 150px;
}
.btn-sm {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0;
}

/* Bootstrap mods */
button.close {
    position: absolute !important;
    right: 15px !important;
    top: 5px !important;
}
.modal-header {
    padding-top: 32px !important;
}

.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td {
    text-align: left;
}

/****  Login / Registration  ****/

.login-container,
.login-header {
    position: relative;
    display: inline;    
}
.login-header {
    background-color: #fff;
    color: #363636;
    padding: 20px;
    text-align: center;  
    margin-bottom: 40px;
    width: 100%;
    float: left;
}
.login-header:after {
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 13px 12.5px 0;
    bottom: -13px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -12.5px;
    position: absolute;
    transition: all 550ms ease-in-out 0s;
    width: 0;
}
.login-header img {
    max-width: 150px;
    width: 100%;
    margin: 10px;
}
.log-reg-inner {
    margin: 0 auto;
    float: none;
    display: table;
    width: 100%;
}
.log-reg-inner h3 {
    font-weight: 200;    
}
.form-hold {
    height: 100%;
    width: 100%;
    position: relative;
}
.login-form,
.registration-form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-weight: 300;
    margin: 0 auto;
    padding: 0 25px;
    height: 100%;
    float: none;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    -ms-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;     
}
.login-form,
.registration-form {
    display: none;
}
.login-form.active,
.registration-form.active  {
    display: block;
}
.login-content h3,
.registration-content h3 {
    text-align: center;
    padding-bottom: 15px;
}
.switch {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    clear: both;
    float: left;
    margin-bottom: 0;
    margin-top: 35px;
    width: 100%;
}
.switch p {
    border: 2px solid #fff;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    float: none;
    font-size: 16px;
    margin: auto;
    max-width: 400px;
    padding: 10px 20px;
    text-transform: uppercase;
}
.switch:hover p {
    background-color: rgba(255,255,255, 0.2);
}
.login-content input,
.registration-content input {
    border: 0 none;
}
.btn:enabled:hover, 
.btn:enabled:active, 
.btn-primary:enabled:hover,
.btn-primary:enabled:active,
.btn-primary:enabled:focus  {
    background: #8eb95d !important;
    color: #fff;
}

.btn-primary:disabled {
    background-color: #999;
    color: #fff;
}
.btn-primary:disabled:hover {
    background-color: #777;
    color: #fff;
}

.input-group-addon:not(:first-child):not(:last-child), 
.input-group-btn:not(:first-child):not(:last-child), 
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0 4px 4px 0 !important;
    border: 0 none !important;
}


/****  User Dashboard  ****/
.dashboard a { 
    color: #33274c;
}
.dashboard {
    background-color: #f1f4f9;
}
hr {
    margin-top: 0 !important;
}
/** header **/
.dashHeader {
    background-color: #fff;
}
.dashHeader .row {
    padding: 10px 15px;
}
.dashHeader .sect {
    height: 90px;   
    padding: 0 !important;
}
.user-info {
    display: table;
    padding: 0px;
}
.user-info h3 {
    float: left;
    padding-right: 6px;
    font-size: 18px;
    font-weight: 400 !important;
    padding-top: 13px;
}
.user-info small {
    float: left;
    clear: both;
}
.user-info .profile-info {
    display: table-cell;
}
.user-info .profile-info a {
    font-size: 12px;
}
.user-info .profile-info span {
    font-size: 14px;
    font-weight: 300;
}
.log-out {
    display: table;
    height: 100%;
    font-size: 14px;
    float: right;
}
.log-out li {
    display: table-cell;
    vertical-align: middle;
}
.event-title {
    width: 100%;
}

.dashboard h2,
.dashboard h3 {
    font-weight: 200;
    color: #33274c;
}
.dashboard h2 {
    margin: 30px 0 10px;
    text-align: center;
}

.dashHeader ul {
    margin: 0;
}

/* Modal */
#SelectTime {
    display: table;
    width: 100%;
}
#time-form select {
    width: 35%;
    margin: 0 4px;
}
#time-form .remove {
    float: right;
    color: #c00000;
    cursor: pointer;
}
#time-form .inputs {
    border-bottom: 1px solid #ebebeb; 
    padding: 15px 0;
}
.legend {
    display: inline-block;
    padding: 10px 0 0;
    text-align: right;
    width: 100%;  
}   
input#add {
    float: right;
    margin: 5px 0;
}
.modal h4.set-time-title {
    float: left;
    margin: 5px 10px 0 0;
    text-shadow: none;
}
#currDate {
    border: 0 none;
    background-color: #fff;
    font-size: 18px;
    color: #91b866;
}
button#removetime {
    display: none;
    float: left;
}
button#updatetime {
    display: none;  
    float: right;
}
.success-resp {
    background-color: rgba(0,166,81, 0.6);
    color: #fff; 
    border-radius: 4px; 
    padding: 7px 15px; 
    margin-right: 10px;
}
.error-resp {
    background-color: rgba(192,0,0, 0.6); 
    color: #fff; 
    border-radius: 4px; 
    padding: 7px 15px; 
    margin-right: 10px;
}
.btn-group, .btn-group-vertical {
    display: block;
}
.btn {
    white-space: normal !important;
}
.half {
    width: 50%;
    float: left;
}

#hasSchool {
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    -ms-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;  
}
#noSchool {
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    -ms-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;  
}
.feedback {
    float: none;
    height: auto;
    margin: auto;
    text-align: center;
}
.feedback input[type="submit"] {
    background-color: #a6d274;
    border: 0 none;
    border-radius: 3px;
    color: #fff;
    font-weight: 400;
    margin: 15px 0;
    padding: 10px 30px;
}
.err-msg {
    font-size: 14px;
}
.err-msg ul {
    padding: 0;
}
.err-msg ul li {
    list-style: inside;
}
.success-msg {
    display: block;    
    color: #a6d274;
    font-size: 18px;
    font-weight: 200;
    padding: 30px 0;
}
.log-err-msg {
    display: block;
    color: #ff9696;
    font-size: 18px;
    font-weight: 200;
    padding: 30px 0;
}
.success-msg-event {
    background-color: #a6d274;
    border-radius: 4px;
    font-weight: 200;
    margin-bottom: -20px;
    margin-top: 20px;
    text-align: center;
}
.success-msg-event p {
    color: #fff;
    font-size: 20px;    
}
.err-msg-event {
    background-color: #be0000;
    border-radius: 4px;
    font-weight: 200;
    margin-bottom: -20px;
    margin-top: 20px;
    text-align: center;
    float: right;
    padding: 0 85px;
}
.err-msg-event span {
    color: #fff;
    font-size: 20px;    
}
img.field-loading {
    height: 40px;
    position: absolute;
    right: 4px;
    top: 7px;
    width: 40px;
    z-index: 999;
}
.error {
    border: 1px solid #c30101 !important;
    -webkit-box-shadow: inset 0px 0px 9px 0px rgba(201,0,0,0.36);
    -moz-box-shadow: inset 0px 0px 9px 0px rgba(201,0,0,0.36);
    box-shadow: inset 0px 0px 9px 0px rgba(201,0,0,0.36);
}


#selected-date {
    font-size: 16px;
    margin-top: 15px;
}
#selected-date small {
    font-size: 12px;
    display: block;
    color: #33274c;
}

#toast-container > div {
    padding: 15px !important;
    border-radius: 4px !important;
    box-shadow: 4px 4px 15px rgba(0,0,0,.3) !important;
    border: 0 none !important;
    font-size: 16px;
    width: 340px !important;
    font-weight: 300;
    background-color: #20b354;
}

#toast-container > .toast {
    background-image: none !important;
}


/*** Select2 Mods ***/
#booking {
    max-width: 720px;
    margin: auto;
}
.select2 {
    width: 100% !important;
}
.select2-container {

}
.select2-container .select2-selection--single { 
    height: 42px !important;
    display: table !important;
    width: 100% !important;
    vertical-align: middle;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: table-cell !important;
    vertical-align: middle;
    line-height: 1.3 !important;
    font-size: 14px;
    float: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px !important;
}
.select2-results__option {
    font-size: 13px;
    line-height: 1.2;
    padding: 12px !important;
}
.select2-results__option small {
    font-size: 11px;
}
.select2-container--default .select2-selection--single {
    border-color: #ced4da !important;
}

/* Step Cards */
ul.event-menu {
    padding: 15px;
    width: 100%;
}
ul.event-menu > li {
    background-color: #fff;
    box-shadow: 2px 2px 14px rgba(0,0,0,.1);
    text-align: center;
    padding: 0;
    border-radius: 6px;
}
ul.event-menu > li .event-title {
    border-radius: 6px 6px 0 0;
    text-align: center;
    padding: 60px 0 20px 0;
    position: relative;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    -ms-transition: all 0.15s ease-out 0s;
    -o-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;     
}
ul.event-menu > li i {
    font-size: 42px;
}

/* Step Cards -> Complete state */
ul.event-menu > li.complete {
    border: 1px solid #a6d274;
}
ul.event-menu > li.complete .event-title {
    background-color: #a6d274;
}
ul.event-menu > li.complete .event-title h3 {
    color: #fff;
}
ul.event-menu > li.complete .event-title:before {
    color: #fff;
    content: '\e812';
    font-family: entypo;
    font-size: 32px;
    left: 0;
    margin: 10px auto;
    position: absolute;
    right: 0;
    top: 0; 
}

/* Step Cards -> Active state */
ul.event-menu > li.active .event-title {
    background-color: #33274c
}
ul.event-menu > li.active .event-title h3 {
    color: #fff;
}
ul.event-menu > li.active .event-title:before {
    color: #fff;
    content: '\e887';
    font-family: entypo;
    font-size: 32px;
    left: 0;
    margin: 10px auto;
    position: absolute;
    right: 0;
    top: 0; 
}


.check-in-confirmation {
    padding: 25px;
    text-align: left;
    border-bottom: 1px solid #ced4da;
}
.check-in-confirmation small {
    font-size: 12px;
    color: #33274c;
}
.check-in-confirmation h4 {
    margin-bottom: 30px;
}


.add-attendee {
    margin-top: 15px;
}
.add-attendee .card {
    padding: 10px;
    padding-top: 15px;
    background-color: #f1f4f9;
}


/* Select From Screen*/
.select-form-screen {
    display: table;
    width: 100%;
    height: 90vh;
    margin: 0;
    padding: 0;
}
.select-form-screen .panel {
    display: table-cell;
    float: none;
    margin: auto;
    vertical-align: middle;
    text-align: center;
}

.select-form-screen .panel .btn-wrap {
    max-width: 320px;
    margin: auto;
    margin-top: -60px;
}
.select-form-screen .panel .btn-wrap h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.mb50 {
    margin-bottom: 50px;
}

.select-form-screen .panel .btn-primary {
    padding: 15px 15px 15px 15px;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    clear: unset;
    float: none;
    min-width: 100%;
    text-decoration: none !important;
    line-height: 1.5;
    height: auto;

}
.select-form-screen .panel .btn-primary small {
    display: block;
    clear: both;
    font-size: 12px;
}


/* Feedback Form */

.feedback-form {
    padding: 0 15px;
    margin: 0;
    list-style: none;
}

.feedback-form .question-section {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

.feedback-form .question-section .question {
    float: left;
    width: 100%;
    margin: 25px 0;
    position: relative;
}

.feedback-form .question-section .question .number {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    background-color: #33274D;
    color: #fff;
    padding: 6px 0px;
    float: left;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    text-align: center;
    margin-top: -4px;
}
.feedback-form .question-section .question p {
    font-size: 16px;
    padding-left: 40px;
}

.feedback-form .question-section-title {
    font-size: 26px;
    font-weight: bold;
    float: left;
    margin-top: 25px;
    color: #33274D;
}

.feedback-form .question-section .options .opt {
    display: inline-block;
    font-size: 13px;
    background-color: #e7ebf5;
    width: 100%;
    float: left;
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 8px;
    line-height: 1.4;
    cursor: pointer;
}

.feedback-form .question-section .options input[type="radio"],
.feedback-form .question-section .options input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.feedback-form .question-section .options input[type="radio"]:checked + label,
.feedback-form .question-section .options input[type="checkbox"]:checked + label {
    background-color: #a6d274;
    font-weight: bold;
    color: #fff;
}

.feedback-form .question-section .options textarea {
    min-height: 180px;
}

.hasOtherOption,
.hasOtherOption + label {
    position: relative;
    z-index: 1;
}
.other_option_input {
    margin-top: 15px;
    visibility: hidden;
    -webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
    transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    opacity: 0;
    display: inline-block;
    width: 100%;
    z-index: 0;
}

.other_option_input.active {
    visibility: visible;
    transform: translate(0);
    opacity: 1;
}


/* Step 2: Location Date Lists */

ul.location-dates-list {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

ul.location-dates-list > li {
    padding: 10px;
    background-color: #a6d274;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    border: 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,.1);
    margin-bottom: 8px;
    position: relative;
}
ul.location-dates-list > li:after {
    font-family: "entypo";
    position: absolute;
    content: '\e879';
    font-size: 18px;
    color: #90bd5c;
    left: 0;
    right: 0;
    margin-left: -120px;
}
ul.location-dates-list > li:hover,
ul.location-dates-list > li:active {
    background-color: #90bd5c;
}



/* Step 2: Event selection */
.form-group #timeDisplay {
    font-size: 18px;
    font-weight: 200;    
}



/* Step 3: School picker */
.school-picker-group {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 40px;
}
.school-picker-group label {
    display: block;
    float: none;
}


/* ---- Typeahead ---- */

.twitter-typeahead {
    background-color: #fff;
    border-radius: 0 5px 5px 0;
    float: left;
    width: 100%;
}
.tt-menu,
.gist {
  text-align: left;
}
.typeahead {
  background-color: #fff;
}
.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
  color: #999
}
.tt-menu {
    color: #333 !important; 
    max-width: 300px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
       -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
          -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
               box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    width: 100%;
}
.tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 20px;
    float: left;
    width: 100%;
}
.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}
.tt-notice p {
    font-size: 14px;
    padding: 5px 0;
}
.tt-notice .btn {
    background-color: #2d96cb;
    color: #fff !important;
    margin-top: 15px;
}
.tt-notice:hover {
    background-color: #fff;
    color: #5b5b5b;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}
.tt-suggestion p {
  margin: 0;
}
.gist {
  font-size: 14px;
}



/* ---- Training ---- */

.training input {
    font-size: 14px;
}
.training .brief {
    text-align: left;
    padding: 30px 0px 0px 0px;
}
.training .brief h4 {
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: 900;
}
.training .brief p.below {
    padding-top: 30px;
    padding-bottom: 5px;
}



.step-body {
    padding: 0 25px;
    display: inline-block;
    width: 100%;
}
.step-brief {
    display: block;
    padding: 25px;
    text-align: center;
    width: 100%;
}
.step-brief p {
    color: #33274c;
    font-size: 14px;
    font-weight: 300;
    padding: 3px 0;
}





/*  ---- ENTER SCHOOL ---- */

#enter .hidden{
    display: none;
}
#enter .active{
    display: block;
}
#add-list {
    overflow: hidden;
}
#add-list .sAdd {   
    padding-left: 0px;   
    padding-right: 7px;
}
#add-list .sState {    
    padding-left: 0;  
    padding-right: 7px;
}
#add-list .sPost {   
    padding-left: 7px;   
    padding-right: 0;
}
#add-list .sSub {    
    padding-left: 7px;  
    padding-right: 0px;
}
#add-list .col-sm-12 {
    padding: 0px;
}
#add-list input {
    width: 100%;
    padding: 6px 12px;
    color: #555;
    margin-bottom: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#add-list select {
    font-size: 14px;
    width: 100%;
    padding: 7px 12px;
    color: #555;
    margin-bottom: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;    
}

/* active states */  
#individual, #cluster {
    background: #a6d274 none repeat scroll 0 0 !important;
    display: table;
    height: 65px;
}
#individual span, #cluster span {
    display: table-cell;
    float: none;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
#individual.active, #cluster.active{
    background: #8eb95d !important;
}
#individual:hover , #cluster:hover {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}


.note span {
    display: block;
    float: left;
    margin-bottom: 20px;
}


/* ---- Invite participant ---- */

.invite {
  overflow: hidden;
}
.invite .inputs {
  overflow: hidden;
  width: 100%;
  padding: 30px 0px  0px 0px;
  border-bottom: 1px solid #ccc;
}
.invite .inputs .member-type {
    color: #333;
    text-align: left;
    font-size: 12px;
    float: left;
    padding-left: 15px;
    margin-bottom: 3px;
    font-weight: 800;
}

.invite .inputs:nth-child(1) {
    padding-top: 0px;
}
.invite .inputs .one {
    padding-bottom: 5px;
}

.invite .inputs label,
.invite .inputs input {
  background: transparent;
  outline: 0;
  border: 0;
}
.invite .inputs label {
  font-size: 14px;
  padding-left: 15px;
  color: #1A1E2D;
  font-weight: 900;
  width: 100%;
  text-align: left;
  position: relative;
}
.invite .inputs p.remove {
    clear: both;
    color: #f04848;
    cursor: pointer;
    display: block;
    float: right;
    font-size: 13px;
    font-weight: 400;
    padding: 15px 0 5px;
    text-align: right;
}
.invite .inputs label p.remove:hover {
  opacity: 1;
}
.invite .inputs input {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  font-weight: 500;
  border-radius: 3px;
  padding: 5px 10px;
  background-color: #fff;
}

.end .np {
  padding: 0;
}
.end .sub .cirlce {
  height: 42px;
  width: 42px;
  border-radius: 50px;
  border: 1px solid #1A1E2D;
}
.end .sub .cirlce:hover {
  background: #1A1E2D;
}
.end .sub {
  text-align: right;
}
.end .sub input {
  background: transparent;
  border: 0;
  outline: 0;
}


.end .sub .btn {
    background-color: #33274c;
    color: #ffffff;
    font-weight: 500;
    border-radius: 50px;
    font-size: 13px;
    width: auto;
    margin-top: 10px;
    margin-left: 5px;
    float: right;
}
.end .sub .btn:hover {
  background: #1A1E2D;
  color: #fff;
}



.number {
  height: 100%;
  text-align: center;
}
.number p.grey {
  display: block;
  font-size: 11px;
  font-family: 'Open Sans', sans-serif;
}
.number .counter {
  font-size: 22px;
  color: #1A1E2D;
  font-weight: 900;
}
.sub {
    padding: 0px;
}
#add.btn {
    display: block;
    width: 32px;
    height: 32px;
    float: right;
    margin-right: 0px !important;
}
/** error **/
.error-list {
    width: 425px;
    margin: 0 auto;
    border-radius: 3px;
    background: #EF4836;
    padding: 30px;
    position: absolute;
    top: 110px;
    right: 30px;
    z-index: 9999;
}
.error-list li {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    text-align: left;
    list-style: circle;
}
.error-list li.top {
    font-weight: 900;
    list-style: none;
    padding-bottom: 15px;
}
.error-list li:last-of-type {
    padding: 0px;
}
#footer {
    padding-bottom: 15px;
    display: block;
    text-align: center;
}
.clear {
    clear: both;
}
/*** submit ***/
.sub-form {
    float: left;
    margin-bottom: 60px;
    padding-top: 20px;
}

/** scheduled bookings **/
.booked {
    margin-top: 30px;
    width: 100%;
}

.booked .title, .booked .book-head  {
    background-color: #33274c;
    color: #fff;
    overflow: hidden;
    padding: 15px 0px;
    text-align: left;
    width: 100%;
    display: flex;
}
.booked .title {
    background-color: transparent;
    padding: 30px 0px;
    text-align: left;
    display: block;
    width: 100%;
}
.booked .title h3 {
    font-size: 30px;
    font-weight: 200;
    text-align: center;
}
.book-details .list-row {
    background-color: #fff;
    overflow: hidden;
    padding: 15px 0px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    width: 100%;
    display: flex;
}
.book-details .list-row:last-of-type {
    border-bottom: 0;
}



@media (max-width: 940px) {
    .col-sm-4 {
        width: 100%;
    }
}

@media (max-width: 840px) {
    h1 {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    #add-list .sAdd,
    #add-list .sSub,
    #add-list .sState,
    #add-list .sPost {
        padding: 0;
    }
    .end .np {
        padding: 0 15px;
    }
    .invite .inputs p.remove {
        padding: 15px 15px 5px;

    }
    .number {
        float: none;
        margin: auto;
        max-width: 100px;
        text-align: center;
    }
    .sect-title {
        border-bottom: 1px dashed #453567;
        padding: 8px 0;
    }     
}
@media (max-width: 500px) {
    .half {
        width: 100%;
    }
    .btn-primary {
        border-radius: 4px !important;
        margin: 2px 0 !important;
    }
    .training .brief {
        text-align: center;
    }
    .switch p {
        margin-bottom: 40px;
        font-size: 20px !important;
    }
    .btn-primary {
        width: 100%;
    }
   
}