/* @override 
	http://localhost/gti/templates/default/styles/main.css
	http://10.4.1.196/gti/templates/default/styles/main.css
*/

html {
	height: 100%;
	font-size: 62.5% !important;
}

body {
	background-color: #EFF3F8;
    font-family: "Nunito Sans", serif;
	font-size: 1.6rem;
    color: #807763;
}


input[type="button"], a.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    background: none;
    text-decoration: none; /* For <a> */
    box-sizing: border-box; /* Ensure consistent sizing */
}


/* File upload */
.passport-check-wrap {
    width: 100%;
    max-width: 400px;
    border-radius: 3px;
    background: #edf1f6;
}

.passport-check-wrap-inner {
    padding: 1em;

    .title {
        width: 100%;
        text-align: center;
    }

    .title > h1 {
        margin-bottom: 0;
    }

    .dropzone {
        width: 100%;
        min-height: 200px;
        border: 1px dashed #999;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
        background: transparent;
        transition: all 0.25s ease-in-out;

    }

    .dropzone:hover {
        background: #fafafa;
    }

    .dropzone.hidden {
        display: none !important;
    }

    .upload-icon {
        display: block;
        width: 64px;
        height: auto;
        margin: 0 auto;
        margin-top: 4em;
    }

    .upload-input {
        position: relative;
        top: -62px;
        left: 0;
        opacity: 0;
    }

    .btn {
        display: block;
        text-align: center;
        width: 140px;
        margin-top: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        background: #27669d;
        color: #fff;
        border-radius: 3px;
        border: 0;
        box-shadow: 0 3px 0 0 #e9e9e9;
        transition: all 0.3s ease-in-out;
        font-size: 1.6rem;
        font-weight: 600;
        cursor: pointer;
    }

    .btn:hover {
        background: #2f7abb;
        box-shadow: 0 3px 0 0 #888;
    }
}




/* The rest of styles */
a:not(.action-button):link, a:not(.action-button):visited {
    color: #25659C;
    text-decoration: none;
}
a:not(.action-button):hover, a:not(.action-button):active, a:not(.action-button):focus {
    color: #25659C;
    text-decoration: underline;
}

h1 {
    font-size:2.4rem;
    font-weight: bold;
    color:#262421;
    margin-bottom: 20px;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.015em;
    color:#3276b1;
    margin-bottom: 20px;
}

h2.wings {
    text-align: center;
    background: url(../images/wings-bg.png) left 50% repeat-x;
}

h2.wings span {
    background: url(../images/wings-span-bg.png) center 50% repeat;
    padding: 0 10px;
}

span.wings {
    font-size: 2rem;
    color:#c48122;
    text-align: center;
    background: url(../images/wings-bg.png) left 50% repeat-x;
}

h3 {
    font-size: 1.8rem;
    font-weight: bold;
    color:#333;
    margin-bottom: 9px;
    line-height: 1.2em;
	border-bottom: 1px solid #bebebe;
	padding-bottom: 5px;
}

h4 {
    font-size: 1.5rem;
    color:#929189;
    margin-bottom: 0;
}

p,td {
    font-size: 1.6rem;
    line-height: 1.4em;
    margin: 0 0 15px;
}

#header_wrapper {
    margin: 0 auto;
    position: relative;
    width: 940px;
}
#header {
    color: #7B7771;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    height: 156px;
}
#header h1 {
    height: auto;
    margin: 0;
    padding: 12px 0 10px 75px;
    width: auto;
}
#admin-nav li {
    display: inline;
    font-size: 1.6rem;
    margin: 0 16px 0 0;
}
#admin-nav li#admin-nav-fb {
    margin: 0 7px 0 0;
}
#admin-nav li#admin-nav-twitter {
    margin: 0;
}
#admin-nav a:link, #admin-nav a:visited {
    color: #F5EBE3;
}
#admin-nav a:hover, #admin-nav a:active, #admin-nav a:focus {
    color: #F5EBE3;
}
#admin-nav a:link span, #admin-nav a:visited span, #admin-nav a:hover span, #admin-nav a:active span, #admin-nav a:focus span {
    color: #C2B59A;
}
#admin-nav li img {
    vertical-align: middle;
}
#admin-nav li#admin-nav-fb a:link img, #admin-nav li#admin-nav-fb a:visited img {
    background: url("../images/icon-social-sprite.png") no-repeat scroll 0 0 transparent;
}
#admin-nav li#admin-nav-fb a:hover img, #admin-nav li#admin-nav-fb a:active img, #admin-nav li#admin-nav-fb a:focus img {
    background: url("../images/icon-social-sprite.png") no-repeat scroll -23px 0 transparent;
}
#admin-nav li#admin-nav-twitter a:link img, #admin-nav li#admin-nav-twitter a:visited img {
    background: url("../images/icon-social-sprite.png") no-repeat scroll -46px 0 transparent;
}
#admin-nav li#admin-nav-twitter a:hover img, #admin-nav li#admin-nav-twitter a:active img, #admin-nav li#admin-nav-twitter a:focus img {
    background: url("../images/icon-social-sprite.png") no-repeat scroll -69px 0 transparent;
}
#nav {
    display: block;
    width: 590px;
}
#nav ul li {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2em;
    margin-left: 33px;
    width: 160px;
}
#nav a:link, #nav a:visited {
    color: #6995BB;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
#nav a:hover, #nav a:active, #nav a:focus {
    color: #25659C;
    text-decoration: none;
}

#nav a strong {
    display: block;
}

#nav a:link strong, #nav a:visited strong {
    color: #25659C;
    font-size: 1.6rem;
    letter-spacing: normal;
}

#nav a:hover strong, #nav a:active strong, #nav a:focus strong {
    color: #0E3D64;
}

#content_wrapper {
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 7px 29px 0 hsla(240,5%,41%,.2);
	margin: 0 auto;
	margin-top: 0.5em;
    padding-top: 5px;
    padding-bottom: 1em;
    width: 100%;
    max-width: 720px;
}

#content {
    display: flex;
    flex-direction: row;
    column-gap: 1em;
    row-gap: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

#column_left {
    width: calc(100% - 210px);
}

#content .full_width {
    width: auto;
}

#column_right {
    background: none repeat scroll 0 0 #FFFFFF;
    width: 100%;
    max-width: 190px;
}

#column_right hr {
	border-style: none;
	margin-bottom: 15px;
}

@media all and (max-width: 960px) {
    #content_wrapper {
        max-width: 100%;
    }

    #content {
        flex-direction: column;
    }

    #column_left {
        width: 100% !important;
        max-width: 100%;
    }

    #column_right {
        width: 100%;
        max-width: 100%;
    }

    .fieldset input[type='text'], .fieldset input[type='password'], .form input[type='text'], .form input[type='text'], .form input[type='password'] {
        width: 100% !important;
    }
}


.form {
	padding: 10px;	
}

#trip_summary {
	font-size: 1.4rem;
	line-height: 20px;
	margin-bottom: 10px;
}

#trip_summary .meta .name {
    color: #2a699f !important;
    font-weight: bold;
}

#trip_summary .meta .organizer {
    color: rgba(0, 0, 0, 0.54);
}

#trip_summary .meta {
	margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.54);
}

#trip_summary .cost {
	width: 100%;
	text-align: right;
	color: #c48121;
	font-weight: bold;
}

#trip_summary .cost span {
	margin-left: 0;
	color: #707070;
	font-weight: normal;
	font-style: normal;
}

#footer {
    color: #514E43;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

#footer p {
    font-size: 1.6rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
	font-weight: bold;
}

.app-logo {
	display: block;
	width: 64px;
	height: auto;
	margin: 0 auto;
}

.form label {
	font-size: 1.6rem;
	width: 100px;
	margin-right: 10px;
	display: inline-block;
	text-align: right;
	white-space: nowrap;
}

div.login-form {
    margin: auto;
}

.form.login-form label {
	width: 75px;
}

.form.create-account-form label {
	width: 115px;
}

.form .form-heading {
	margin-bottom: 14px;
	font-weight: bold;
	font-size: 1.8rem;
	color: #1e5a8d;
}

.form .form-field {
	margin-bottom: 5px;
}

.form .form-field.error {
	border: 1px solid #fec0c2;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #ea5151;
	background-color: #ffdfdf;
}

.form .error-string {
	margin-left: 114px;
	font-weight: bold;
	margin-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.form-button {
	margin-top: 10px;
}

.formtable th {
	padding: 5px;
}

.formtable tr td {
	border-top: 1px solid #dcd6c8;
}



.instructions {
	width: 190px;
	display: none;
	background-color: #f5f5f5;
	border: 1px solid #ebebeb;
	padding: 10px;
	font-style: italic;
}

li.focused .instructions {
	display: block;
}

.alert_success {
    box-sizing: border-box;
    border: 1px solid #008f51;
    font-weight: bold;
    color: #008f51;
    width: 100%;
	margin-bottom: 10px;
	line-height: 15px;
	padding: 10px 30px 10px 10px;
	background-color: #c1fcd1;
}

.error-message {
    border: 1px solid #fec0c2;
    padding: 10px 30px 10px 45px;
    background: #ffdfdf url(../images/error-icon.gif) no-repeat 10px 50%;
    font-weight: bold;
    color: #e10d0d;
	margin-bottom: 10px;
	line-height: 15px;
}

.fieldset {
    width: 100%;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px 5px 5px 8px;
	margin-left: -5px;
}

.fieldset.likert, .fieldset.references {
    width: 700px;
}

.fieldset.error {
    background-color: #FFDFDF !important;
    display: block !important;
}

.fieldset > span {
    display: inline-block;
}

.fieldset > span:not(:last-child) {
    margin-right: 1em;
}

.fieldset div.form-error-inline {
    background-color: #FFDFDF;
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    color: #ff1a26;
    border: 1px solid #edc9cd;
}

.fieldset label:not(.btn) {
    color: #444444;
    display: block;
    line-height: 10px;
    margin-top: 4px;
    margin-bottom: 12px;
    margin-left: 3px;
}

.fieldset .option {
    display: block;
    margin-right: 10px;
}

.fieldset .option label {
    color: #444444;
    display: inline;
    line-height: 15px;
}

.fieldset div.signature {
    padding-top: 15px;
}

.fieldset label.desc {
    color: #222222;
    display: block;
    font-weight: bold;
    line-height: 150%;
    margin: 0 0 0 1px;
    padding: 1px 0 3px;
}

.fieldset.error label.desc {
    color: #DF0000 !important;
}

.fieldset.error p {
	color: #DF0000;
	margin-bottom: 2px;
}

.fieldset p.error {
    color: #DF0000 !important;
    display: block;
    font-weight: bold;
    line-height: 16px !important;
    margin: 0 0 1px 2px !important;
}

.fieldset span.required {
    color: #DF0000 !important;
    margin-left: 2px;
    display: inline;
}

.fieldset input.xx-small {
    width: 100%;
    max-width: 30px;
}

.fieldset input.x-small {
    width: 100%;
    max-width: 40px;
}

.fieldset input.small {
    width: 100%;
    max-width: 90px;
}

.fieldset input.medium {
    width: 100%;
    max-width: 120px;
}

.fieldset input.large {
    width: 100%;
    max-width: 160px;
}

.fieldset input.x-large {
    width: 100%;
    max-width: 200px;
}

.fieldset input.xx-large {
    width: 100%;
    max-width: 255px;
}

.fieldset span.full {
    max-width: 100%;
}

.fieldset div {
    padding-bottom: 5px;
}

.fieldset input[type='text'], .fieldset input[type='password'], .form input[type='text'], .form input[type='text'] , .form input[type='password'] {
    display: inline-block;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid rgb(137, 151, 155);
    transition: border-color 150ms ease-in-out 0s;
    outline: none;
    color: rgb(33, 49, 60);
    background-color: rgb(255, 255, 255);

    &:hover{
        box-shadow: rgb(231 238 236) 0px 0px 0px 3px;
    }

}

.fieldset select {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}

.fieldset textarea {
    padding: 4px 0 2px 4px;
    border: 1px solid #dedede;
    height: 100px;
    width: 98%;
    background: url(../images/bg-textbox.gif) repeat-x #fff;
    margin-bottom: 5px;
}

.fieldset select, .form select {
    margin-bottom: 5px;
    margin-right: 5px;
}

/* Ajax Spinner */

.ajax-status {
	display: none;
	padding-top: 5px;
}

.ajax-status.show {
	display: block
}

.ajax-status .spinner {
	height: 24px;
	width: 24px;
	display: block;
	background: url('../images/spinner.gif') no-repeat;
	margin-right: 5px;
}

.ajax-status span {
	line-height: 24px;
}

#form_container > form > ul {
    list-style-type: none;
    padding: 0;
}

ul#registration_steps {
	margin: 10px -11px -20px;
    list-style-type: none;
    padding: 0;
}

ul#registration_steps li {

}

ul#registration_steps a {
	display: block;
	padding: 8px 8px 8px 52px;
	text-decoration: none;
	line-height: 24px;
	border-bottom: 1px solid #b9bbbb;
	text-indent: 0px;
	overflow: hidden;
	vertical-align: top;
}




ul#registration_steps a span {
	margin-left: -34px;
	margin-right: 10px;
	clear: none;
	display: inline-block;
	width: 24px;
	background: url(../images/step-index-bg.png) no-repeat 0 top;
	text-align: center;
	line-height: 22px;
	height: 24px;
	color: #707070;
}

ul#registration_steps a:hover span {
	background-position: 0 center;
	color: #fff;
} 

ul#registration_steps a:hover {
	background-color: #236298;
	color: #fff;
}


ul#registration_steps li.complete a span {
	text-indent: -9999px;
	background-position: 0 bottom;
	*text-indent:0; *font-size:0; *line-height:0; *overflow:hidden;
}

ul#registration_steps li.complete a {
	color: #365e13;
}

ul#registration_steps li.complete a:hover {
	color: #fff;
}

#ui-datepicker-div { display: none; }

#form_container h2 {
	margin-bottom: 0;
}

.totaladdons, .totalfees, .totaldiscounts, .totalscholarships {
	text-decoration: underline;
	cursor: pointer;
}

.ui-tooltip-content div {
	width: 100%;
	text-align: right;
	line-height: 16px;
}

.payment-schedule {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	background-color: #fff;
	padding: 15px;
	height: 600px;
}

.payment-schedule table {
	width: 100%;
}

.payment-schedule table thead {
	background-color: #1e5a8d;
	line-height: 23px;
	text-transform: uppercase;
	color: #fff;
}

.payment-schedule table th {
	padding: 5px;
}
.payment-schedule table thead th.registered {
	text-align: left;
	width: 140px;
}

.payment-schedule table thead th.cost, .payment-schedule table thead th.balance, .payment-schedule table thead th.amount-due {
	text-align: center;
	width: 100px;
}

#paymentamount {
	width: 100px;
	text-align: right;
	margin-left: 14px;
}

.payment-schedule p {
	margin-bottom: 10px;
}

.payment-schedule table tfoot {
	border-top: 1px solid #ededed;
	font-weight: bold;
}

.payment-schedule table tfoot td.totals {
	text-align: right;
}

.payment-schedule table td {
	padding: 5px;
}

.payment-schedule table td.cost, .payment-schedule table td.balance, .payment-schedule table td.amount-due {
	text-align: center;
}

.payment-schedule table td.due-date {
	text-align: center;
}

.payment-schedule table tr.details {
	display: none;
}


#payment-options {
	text-align: center;
	margin-top: 10px;
}

#credit-card-form strong {
	line-height: 36px;
}

#credit-card-form {
	display: none;
	border: 1px solid #d5d7d7;
	height: 215px;
	padding: 10px;
	margin-top: 15px;
}

#credit-card-form .column-1 {
	width: 277px;
	border-right: 1px solid #d5d7d7;
	height: 215px;
}

#credit-card-form .column-2 {
	width: 270px;
	height: 500px;
	margin-left: 10px;
}

#credit-card-form input {
    margin-right: 4px !important;
}

#credit-card-form select {
    margin-right: 4px !important;
}

#credit-card-form input[type='text'] {
    padding: 4px 4px 2px;
    border: 1px solid #dedede;
    height: 20px;
    background: url(../images/bg-textbox.gif) repeat-x #fff;
    margin-bottom: 2px;
}

#credit-card-form select {
    margin-bottom: 5px;
    margin-right: 5px;
}

#credit-card-form input.xx-small {
    width: 30px;
}

#credit-card-form input.x-small {
    width: 40px;
}

#credit-card-form input.small {
    width: 79px;
}

#credit-card-form input.medium {
    width: 120px;
}

#credit-card-form input.large {
    width: 160px;
}

#credit-card-form input.x-large {
    width: 200px;
}

#credit-card-form input.xx-large {
    width: 255px;
}


#credit-card-form div {
	margin-bottom: 5px;
}

input[type="text"].money {
	background: #fff url(../images/icon_money.png) no-repeat 6px 6px;
	padding-left: 25px;
	text-align: right;
	width: 70px;
}

input[type="text"].datepicker {
	background: #fff url(../images/icon_calendar.png) no-repeat 6px 6px;
	padding-left:30px;
	width: 85px;
}

input.default-value {
	color: #7f7f7f;
}

.mytrip-listing thead {
	text-decoration: underline;
	font-weight: bold;
}

.mytrip-listing tbody td {
	height: 60px;
}

.mytrip-listing .mytrip-name {
	font-weight: bold;
}

.mytrip-listing .mytrip-information-meta {
	line-height: 24px;
}

.trip-listing h3 {
	margin-bottom: 5px;
}

.trip-listing div {
	line-height: 18px;
}

.trip-listing li {
	min-height: 70px;
	margin-bottom: 20px;
}

.trip-listing .trip-meta {
	width: 350px;
	font-weight: bold;
}

.trip-listing .trip-cost {
	width: 100px;
	color: #C48122;
	line-height: 32px;
}

.trip-listing .trip-description {
	margin-top: 10px;
	width: 460px;
}

.trip-listing .trip-description p {
	line-height: 20px;
}

.trip-listing .trip-button {
	width: 125px;
	text-align: right;
}

h2.booktrip-tripname {
	margin-bottom: 5px;
}


/**
 * BUTTON STYLES
 */
.action-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #2f7abb;
    border: 1px solid #2f7abb;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.action-button:hover {
    background-color: rgb(43, 100, 150);
    border-color: rgb(43, 100, 150);
}

.action-button:active {
    background-color: rgb(40, 94, 142);
    border-color: rgb(40, 94, 142);
}

.action-button:disabled, .action-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

input[type="button"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}








.add-registration {

}

#registration-listing {
	margin-bottom: 15px;
}

.booking-form span {
	margin-bottom: 8px;
	margin-right: 10px;
}

.booking-form input[type='text'] {
    padding: 4px 4px 2px;
    border: 1px solid #dedede;
    height: 20px;
    background: url(../images/bg-textbox.gif) repeat-x #fff;
    margin-bottom: 2px;
	margin-top: 5px;
}

.booking-form select {
	margin-top: 5px;
}

.booking-form .remove-registration {
	background: url(../images/delete.png) no-repeat;
	height: 25px;
	text-indent: -9999px;
	font-weight: bold;
	width: 25px;
}

.booking-form div.error-string {
	border: 1px solid #fec0c2;
	padding-bottom: 5px;
	color: #ea5151;
	background-color: #ffdfdf;
	padding-left: 10px;
	padding-top: 5px;
}

.booking-form div.error-string p {
	margin: 0;
}

#registration-listing li {
	border: 1px solid #dad6d2;
	margin-bottom: 10px;
	padding: 10px;
}

#registration-listing li:nth-child(even) {
	background-color: #f4f6f6;
}

.booking-upgrade-registrations li {
	font-weight: bold;
	line-height: 24px;
	padding: 5px 0 5px 10px;
	border: 1px solid #dad6d2;
	margin-bottom: 10px;
}

.booking-upgrade-registrations li li {
	font-weight: normal;
	font-style: normal;
	line-height: 20px;
	padding: 4px 0 0 10px;
	border: none;
	margin: 0;
}

.booking-upgrade-registrations li li input {
	margin-right: 9px;
}

.booking-upgrade-registrations li:nth-child(even) {
	background-color: #f4f6f6;
}

.booking-upgrade-registrations li li:nth-child(even) {
	background: none;
}

.booking-addon-cost {
	color: #c48122;
	margin-left: 15px;
}

.booking-confirmation-registrations {
	margin-bottom: 20px;
}

.booking-confirmation-name-column {
	width: 430px;
	font-weight: bold;
}

.booking-confirmation-name-row td {
	border-top: 1px solid #e0d6c2;
	padding-top: 5px;
	padding-bottom: 5px;
}

.booking-confirmation-cost-label-column {
	text-align: right;
	line-height: 26px;
}

.booking-confirmation-cost-amount-column {
	text-align: right;
	width: 90px;
	color: #c48122
}

.booking-confirmation-total-label-column {
	text-align: right;
	line-height: 26px;
}

.booking-confirmation-total-amount-column {
	text-align: right;
	color: #c48122
}

.booking-confirmation-grandtotal-label-column {
	
	text-align: right;
	line-height: 26px;
	font-weight: bold;
	border-top: 3px double #e0d6c2;
}
.booking-confirmation-grandtotal-amount-column {
	text-align: right;
	color: #c48122;
	border-top: 3px double #e0d6c2;
}

.booking-confirmation-payment-schedule {
	margin-bottom: 20px;
}

.booking-confirmation-payment-schedule thead {
	font-weight: bold;
}

table.booking-confirmation-payment-schedule td {
	padding-bottom: 5px;
	padding-top: 5px;
}

table.booking-confirmation-payment-schedule tbody tr:nth-child(odd) {
	background-color: #f4f6f6;
}

table.booking-confirmation-payment-schedule .payment-label {
	font-weight: bold;
	padding-left: 10px;
}

table.booking-confirmation-payment-schedule .payment-amount {
	color: #c48122;
}

.booking-listing {
    margin-bottom: 20px;
    width: 100%;
}

.booking-listing-row td {
    border-top: 1px solid #e0d6c2;
    padding-top: 5px;
    padding-bottom: 5px;
}

.booking-listing-name-column {
    width: 80%;
    font-weight: bold;
}

.booking-listing-actions-column {
    width: 20%;
    text-align: right;
}

.booking-listing-actions-column a {
    margin-right: 10px;
}


.dropzone-outer {
    width: 100%;
}

.dropzone-outer.hidden {
    display: none;
}

.video-preview-outer {
    position: relative;
}

.video-preview {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

.plane-loader {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #5ca4e7;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px 10px rgba(92, 164, 231, 0.5); /* Adjust values as needed */
    transition: opacity 1s ease-in-out;
}

.plane-loader.visible {
    opacity: 1;
}

.plane-loader .loading {
    color: #fff;
    text-align: center;
    position: absolute;
    margin-bottom: 4em;
    text-shadow: 0px 0px 10px #004e95, 0px 0px 10px #004e95, 0px 0px 10px #004e95;
}

.plane {
    display: block;
    width: 128px;
    height: auto;
    animation: moveUpDown 2s ease-in-out infinite; /* 2s duration, smooth easing, infinite loop */
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px); /* Move the image up by 5px */
    }
    100% {
        transform: translateY(0); /* Return the image to the original position */
    }
}

/* Base styles for all puffs */
.puff {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    animation: puffMove 2s infinite;
}

/* Position puffs at left engine */
.puff-left {
    left: 180px; /* Adjust based on your plane image's engine position */
    top: 148px;
}

/* Position puffs at right engine */
.puff-right {
    left: 200px; /* Adjust based on your plane image's engine position */
    top: 150px;
}

/* Staggered animation delays for each puff */
.puff1 { animation-delay: 0s; }
.puff2 { animation-delay: -0.4s; }
.puff3 { animation-delay: -0.8s; }
.puff4 { animation-delay: -1.2s; }
.puff5 { animation-delay: -1.6s; }

/* Animation for puffs: move left and fade out */
@keyframes puffMove {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100px); /* Distance puffs travel to the left */
        opacity: 0;
    }
}

.passport-button-group.hidden {
    display: none !important;
}

.passport-photo-notice {
    padding: 1em;
    font-weight: bold;
}

.passport-photo-notice.success {
    color: green;
}

.passport-photo-notice.error {
    color: red;
}

.passport-video-preview-canvas {
    border-radius: 1em;
}

/* Checkbox animated */
.success-splash,
.warning-splash,
.error-splash {
    position: absolute;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1em;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.success-splash.visible,
.warning-splash.visible,
.error-splash.visible {
    opacity: 1;
}

.splash-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid black;
    display: block;
    margin: 0 auto;
    transform: scale(0);
    animation: popIn 0.3s ease-out forwards, fillBackground 0.5s ease-in-out 0.3s forwards;
}

.splash-warning {
    border-color: #F8BB86
}
.splash-warning .body {
    position: absolute;
    width: 5px;
    height: 36px;
    left: 50%;
    top: 16px;
    border-radius: 2px;
    margin-left: -2px;
    background-color: #F8BB86
}
.splash-warning.warning .dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3px;
    left: 50%;
    bottom: 16px;
    background-color: #F8BB86
}

.splash-heading {
    font-size: 2rem;
    font-weight: bold;
}

.splash-subheading {
    font-size: 1.6rem;
}

@keyframes popIn {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes fillBackground {
    to {
        background-color: lightgreen;
    }
}
.splash-checkbox svg {
    width: 100%;
    height: 100%;
}
.splash-checkbox svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.5s ease-in-out 0.3s forwards;
}
@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}


/* Error X */
.error-indicator {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    transform: scale(0);
    animation: errorPopIn 0.3s ease-out forwards;
}

@keyframes errorPopIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.x-line {
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: drawX 0.5s ease-in-out 0.1s forwards;
}

@keyframes drawX {
    to { stroke-dashoffset: 0; }
}


label[for="reg_passportagreement"] {
    background-color: yellow;
}