/***********************************************************/


/************************* General *************************/


/***********************************************************/

.hide {
    display: none;
}

.spacer {
    margin: 10px 0;
}

h1.styled,
h2.styled,
h3.styled,
h4.styled,
h5.styled,
h6.styled {
    border-left: 5px solid #fe6c16;
    padding-left: 10px;
}

.my-shadow {
    -moz-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
}

.input-group-prepend .icon {
    width: 14px;
}

.secondary {
    color: #999;
}

.btn svg {
    position: relative;
    top: 1px;
}

.well {
    border: 1px solid #DDDDDD;
    padding: 15px;
    background: #F5F5F5;
    margin-bottom: 20px;
}

.primary-color {
    color: #fe6c16;
}

input:disabled {
    -webkit-text-fill-color: #880000;
    opacity: 1;
    /* required on iOS */
}


/***********************************************************/


/************************** FORMS **************************/


/***********************************************************/

.form-icon img {
    width: 16px;
}


/* Loader - https://loading.io/css/*/

.spinner {
    margin: 0px auto 0;
    width: 70px;
    text-align: center;
}

.spinner>div {
    width: 18px;
    height: 18px;
    background-color: #fe6c16;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/***********************************************************/


/************************* Buttons *************************/


/***********************************************************/

.btn-primary {
    background-color: #fe6c16!important;
    border-color: #fe6c16!important;
}

.btn-primary:hover {
    background-color: #c7530f!important;
    border-color: #c7530f!important;
}

.btn-outline-primary {
    color: #fe6c16;
    background-color: transparent!important;
    border-color: #fe6c16!important;
}

.btn-outline-primary:hover {
    background-color: #c7530f!important;
    border-color: #c7530f!important;
}


/* Genral Layout */

.page-container {
    margin: 20px 0;
}

.alert.page {
    margin: 15px 0;
}


/***********************************************************/


/************************* Pagination *************************/


/***********************************************************/

.list-inline li {
    display: inline-block;
}

.pagination li a {
    display: inline-block;
    padding: 5px 8px;
    color: #fe6c16;
    font-weight: bold;
    transition: all 0.3s;
}

.pagination li.current {
    display: inline-block;
    padding: 5px 10px;
    color: white;
    background-color: #fe6c16;
    font-weight: bold;
}

.pagination li a:hover {
    text-decoration: none;
    color: white;
    background-color: #fe6c16;
}

.pagination li {
    display: inline-block;
    border: 1px solid #fe6c16;
    margin: 0 8px 0 0;
}

.pagination .link.current {
    border: 2px solid #fe6c16;
    color: #fe6c16;
}


/***********************************************************/


/************************* Header **************************/


/***********************************************************/

.navbar {
    border-bottom: 1px solid #CCC;
    padding: 0 10px;
    -webkit-box-shadow: 0px 8px 6px -6px #ccc;
    -moz-box-shadow: 0px 8px 6px -6px #ccc;
    box-shadow: 0px 8px 6px -6px #ccc;
}

.navbar-brand img {
    width: 160px;
}

.navbar-collapse {
    position: relative;
    top: 5px;
}

.navbar-collapse .nav-item {
    text-transform: uppercase;
    font-size: 14px;
}

.navbar-toggler-icon {
    background: url("../../img/svg/menu.svg") no-repeat!important;
    background-size: 25px 25px!important;
}

.impersonate {
    width: 100%;
    background: #fe6c16;
    color: white;
    position: fixed;
    z-index: 99999;
}

.impersonate .image {
    width: 80px;
}

.impersonate-spacer {
    height: 90px;
}

.dropdown-menu {
    font-size: 0.85rem;
}


/***********************************************************/


/*************************** ADS ***************************/


/***********************************************************/

.carousel {
    margin: 0 0 25px 0;
}


/***********************************************************/


/************************** Manage *************************/


/***********************************************************/

.manage-tabs {
    margin: 0 0 20px 0;
}

.request-table.table td,
.table th {
    padding: .6em
}


/***********************************************************/


/************************ Register *************************/


/***********************************************************/

.form-register [name="dob_month"] {
    width: 105px;
    display: inline-block;
}

.form-register [name="dob_day"] {
    width: 60px;
    display: inline-block;
}

.form-register [name="dob_year"] {
    width: 90px;
    display: inline-block;
}


/***********************************************************/


/************************ Users Edit ***********************/


/***********************************************************/

.form-user-edit [name="dob_month"] {
    width: 80px;
    display: inline-block;
}

.form-user-edit [name="dob_day"] {
    width: 70px;
    display: inline-block;
}

.form-user-edit [name="dob_year"] {
    width: 90px;
    display: inline-block;
}


/***********************************************************/


/************************* Events **************************/


/***********************************************************/

.event-list {
    margin-top: 20px;
    margin-bottom: 20px;
}

.event-list-month {
    color: #999;
    text-transform: uppercase;
}

.event-list-item {
    border-bottom: 2px solid #EFEFEF;
    padding: 20px 10px;
}

.event-list-item:hover {
    background-color: #EFEFEF;
    border-bottom: 5px solid #fe6c16;
    cursor: pointer;
    padding: 20px 10px 17px 10px;
}

.media.event-list-item {
    color: inherit!important;
}

.media.event-list-item.current {
    border-left: 5px solid #fe6c16;
}

.media.event-list-item:hover {
    text-decoration: none;
}

.media.event-list-item img {
    width: 100px;
}

.event-list-item .secondary {
    color: #999;
}

.price-holder .icon {
    width: 10%;
    height: 10%;
    fill: #CDCDCD;
    margin-right: 10px;
}

.ticket-count {
    width: 60px!important;
    display: inline-block!important;
}


/***********************************************************/


/************************** Event **************************/


/***********************************************************/

.event-header {
    padding: 10px 15px;
    background-color: #EEE;
    border-left: 5px solid #fe6c16;
    margin: 10px 0 20px 0;
}

.event-header .title h1 {
    color: #fe6c16;
    font-weight: 300;
    font-size: 30px;
}

.details-header h4 {
    font-weight: 300!important;
    border-bottom: 1px solid #E0DEDE;
    padding-bottom: 5px;
}

.details-header.no-border h4 {
    border-bottom: none!important;
}

.sub-header {
    font-weight: bold;
    border-bottom: 1px solid #E0DEDE;
}

.details-header.first {
    margin: 0;
}

.details-header.no-border h4 {
    border: none;
}

.details-header {
    margin: 20px 0 0 0;
}

.details-header .info,
p.info {
    color: #9a9696;
}

.details-header .info.alert {
    color: black;
}

.details-spacer {
    margin: 15px 0;
}

.event-about p {}

.option {
    margin: 0 0 10px 0;
}

.event-sharing {
    border: 1px solid #DDDDDD;
    padding: 15px;
    background: #F5F5F5;
    margin-bottom: 20px;
}

.event-venue h5 {
    color: #fe6c16;
}

.event-image {
    margin: 0 0 20px 0;
    -webkit-box-shadow: 0px 0px 35px -10px rgba(0, 0, 0, 0.58);
    -moz-box-shadow: 0px 0px 35px -10px rgba(0, 0, 0, 0.58);
    box-shadow: 0px 0px 35px -10px rgba(0, 0, 0, 0.58);
}

ul.event-prices {
    list-style-type: none;
    padding: 0 0 0 0px;
}

ul.event-prices .price {
    color: #fe6c16;
}

ul.event-prices li {
    padding: 10px;
    border-bottom: 1px solid #E0DEDE;
}

ul.event-prices li .price-details {
    font-size: 14px;
}

.event-actions {
    margin: 15px 0 15px 0;
}

.fixed-month {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    background: white;
}

.fixed-month>div {
    display: inline-block;
    text-align: left;
}


/***********************************************************/


/************************* Tickets *************************/


/***********************************************************/

.can_download {
    border-left: 5px solid #fe6c16;
}


/***********************************************************/


/*************************** User **************************/


/***********************************************************/

.profile-actions {
    margin: 20px 0;
}

.whatsapp {
    background-color: #455a64;
    padding: 10px 0;
    cursor: pointer;
}

.whatsapp img {
    cursor: pointer;
}

.whatsapp:hover {
    background-color: #3a464d;
}


/***********************************************************/


/************************* Footer **************************/


/***********************************************************/

#footer {
    font-size: 13px;
    margin-top: 40px;
}

#footer p {
    margin-bottom: 65px;
}

#footer .sticky {
    position: absolute;
    width: 100%;
    bottom: 0;
}


/***********************************************************/


/************************* Company *************************/


/***********************************************************/

.company-header {
    height: 500px;
    background-position: top;
    background-attachment: local;
    display: inline-block;
    width: 100%;
}

.company-header .media-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

.video-container video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%;
    min-height: 100%;
    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: auto;
    height: auto;
    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-container {
    z-index: 20;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/***********************************************************/


/************************** BADGE **************************/


/***********************************************************/


/* https://www.cssportal.com/blog/create-css-notification-badge/ */

.nav-link {
    position: relative;
}

.badge-notify[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    top: 0px;
    right: -5px;
    font-size: .7em;
    background: red;
    color: white;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
    font-weight: bold;
}


/***********************************************************/


/************************** DEBUG **************************/


/***********************************************************/

.debug {
    border: 1px sooid red;
    position: fixed;
    background: #fe6c16;
    color: white;
    font-weight: bold;
    padding: 10px;
    bottom: 20px;
    right: 20px;
    display: none;
}


/***********************************************************/


/************************** Stripe *************************/


/***********************************************************/


/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */

.StripeElement {
    background-color: white;
    height: 40px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}


/***********************************************************/


/******************* Onboard Steps *************************/


/***********************************************************/

.step {
    background-color: transparent;
}

.step-1:before {
    content: "1";
}

.step-2:before {
    content: "2";
}

.step-3:before {
    content: "3";
}

.step:before {
    margin: 0;
    position: absolute;
    color: #EFEFEF;
    top: -90px;
    left: 0;
    z-index: -1;
    font-size: 280px;
}

#overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* Black background with opacity */
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}