.confirmation .reservation_ak,
.confirmation .total_gross{
    border-top  : 1px solid var(--green-0);
    padding-top : 15px;
    font-size   : 1.3em;
}

.confirmation .container{
    min-width  : 610px;
    text-align : center;
}

p.dear{
    display         : flex;
    align-items     : center;
    justify-content : start;
    font-size       : 1.3rem;
}

p.dear span{
    margin-left  : 5px;
    margin-right : 5px;
}

.booking-datils{
    position      : relative;
    background    : #F1F3F4;
    border        : 1px solid #DDE5EB;
    border-radius : 10px;
    margin-top    : 2rem;
}

.booking-datils .tickets-details{
    -ms-flex  : 0 0 calc(100% - 165px);
    flex      : 0 0 calc(100% - 165px);
    max-width : calc(100% - 165px);
}

.booking-datils .owner-details{
    -ms-flex        : 0 0 165px;
    flex            : 0 0 165px;
    max-width       : 165px;
    padding         : 30px;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    align-items     : flex-start;
    background      : url(https://boscdn.vivaticket.com/dct/ada/dashed-line-vertical.svg) repeat-y bottom left;
}

.booking-datils .owner-details p{
    margin         : 0;
    flex-direction : column;
}

.booking-datils .owner-details img{
    width : 65px;
}

.booking-datils h2{
    font-size     : 1em;
    margin        : -15px auto -20px;
    padding       : 10px 15px 8px 15px;
    background    : #fff;
    border        : 1px dotted #7798AD;
    border-radius : 5px;
    width         : max-content;
}

.booking-datils .container-fluid .row{
    margin : 15px 0 15px;
}

.tickets-details-header{
    padding : 30px 25px;
}

.tickets-details-header .col-12{
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
}

.tickets-details-body{
    padding : 0 30px 15px 30px;
}

.tickets-details-performances{
    padding : 0 30px 30px 30px;
}

.booking-datils p{
    margin-bottom : 0 !important;
    display       : flex;
}

.booking-datils h3{
    margin-bottom : 30px;
    white-space   : nowrap;
}

.booking-datils h3,
.booking-datils p.product{
    text-align : left;
    font-size  : 1.1em;
}

.booking-datils p.product i{
    font-style   : normal;
    margin-right : 5px;
    margin-left  : 5px;
}

.booking-datils p.product span{
    margin-right : 7px;
}

.performance div{
    background    : #fff;
    border        : 1px solid #DDE5EB;
    border-radius : 5px;
    margin        : 5px auto 5px;
}

.performance div p{
    margin-bottom   : 0 !important;
    border-bottom   : 1px solid #F1F1F1;
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    font-size       : .9em;
    position        : relative;
    height          : 40px;
}

.performance div p:last-of-type{
    border-bottom : none;
}

.performance div p span{
    background      : #7798AD;
    height          : 100%;
    min-width       : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin-right    : 7px;
}

.performance div p span img{
    width : 15px;
}

.performance div p:first-of-type span{
    border-top-left-radius : 5px;
}

.performance div p:last-of-type span{
    border-bottom-left-radius : 5px;
}

.buttons{
    margin : 35px;
}

.total-order{
    font-size : .85em;
}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 812px)
and (orientation : portrait){
    .booking-datils h3{
        margin-bottom : 0px;
    }

    .booking-datils .tickets-details,
    .booking-datils .owner-details{
        -ms-flex  : 0 0 100%;
        flex      : 0 0 100%;
        max-width : 100%;
    }

    .booking-datils .owner-details{
        background     : url('https://boscdn.vivaticket.com/dct/ada/dashed-line.svg') repeat-x;
        flex-direction : initial;
    }

    .confirmation-message-details{
        margin-top : 2rem;
    }


    .buttons{
        position   : fixed;
        bottom     : 0;
        left       : 0;
        width      : 100%;
        background : #fff;
        padding    : 25px 0 25px 0;
        margin     : 0;
        box-shadow : 0px -5px 15px rgba(0, 0, 0, .3);
    }

    .buttons.backnext-buttons-mobile{
        display         : flex;
        align-items     : center;
        justify-content : space-between;
        position        : initial;
        background      : #fff;
        padding         : 25px;
        margin          : 0;
        box-shadow      : 0px -5px 15px rgba(0, 0, 0, .3);
    }
}


:root{
    --brown-0 : #8b642b;
    --red-0   : #e00300;
    --gold-0  : #bb933e;
    --green-0 : #008456;
    --grey-0  : #343a40;
}

html, body{
    font-family : "Source Sans Pro Regular", Calibri, Arial, Helvetica, sans-serif;
    margin      : 0;
    padding     : 0;
    color       : #000000;
    overflow-x  : hidden;
    overflow-y  : auto;
    font-size   : 14px;
    height      : 100vh;
    line-height : 1.6;
    position    : relative;
}

body main section:first-child{
    margin : 2rem auto;
}

h1{
    font-family    : "Source Sans Pro Black";
    text-transform : uppercase;
    font-size      : 4rem;
    line-height    : 5.5rem;
    color          : #000000;
}

h5{
    font-family    : "Source Sans Pro Black";
    text-transform : uppercase;
    font-size      : 2rem;
    line-height    : 2.5rem;
    color          : #000000;
}

a{
    color            : var(--green-0);
    text-decoration  : none;
    background-color : transparent;
}

a:hover{
    color           : var(--green-0);
    text-decoration : underline;
}

p{
    font-size : 1.3rem;
}

.btn-link:not(.collapsed) i,
.btn-link:not(.collapsed):hover i{
    transform : rotateX(
            180deg
    );
}

.accordion .card{
    border : 0px;
}

.accordion .card-header{
    border-bottom    : 1px solid var(--brown-0);
    background-color : transparent;
    padding-left     : 0px;
}

.accordion > .card > .card-header{
    margin-bottom : 0px;
}

.card-deck .card{
    border-radius : 6px;
    border        : none;
    overflow      : hidden;
    box-shadow    : 0 10px 15px rgba(0, 0, 0, 0.3);
    transition    : all 0.3s ease-in-out;
}

.card-deck .card:hover,
.no-hover-card{
    transform : scale(1.025);
}

.card__image-container{
    position      : relative;
    margin-bottom : 2rem;
    width         : 100%;
}

.card__image-container .card__svg{
    position : absolute;
    left     : 0px;
    bottom   : -2rem;
    width    : 100%;
}

.card-footer{
    background-color : transparent;
    border-top       : none;
}

#loader{
    position        : fixed;
    z-index         : 9999999999;
    width           : 100%;
    height          : 100%;
    top             : 0;
    left            : 0;
    background      : #E4E2E0;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

#loader h2{
    font-family : "Source Sans Pro Regular";
    text-align  : center;
    font-size   : 2em;
    margin-top  : 30px;
    color       : #000 !important;
}

.loader{
    width           : 150px;
    height          : 150px;
    margin          : auto;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.loader img{
    width : 90%;
}

/* Keyboard */
.sending {
    pointer-events : none;
}
.off{
    opacity        : .5;
    pointer-events : none;
}

.keyboard-container{
    display         : flex;
    justify-content : flex-end;
}

.keyboard-container .keyboard{
    max-width : 200px !important;
}

.keyboard{
    overflow        : hidden;
    height          : 40px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    border          : 1px solid #3c3c3c;
    border-radius   : 0px;
    width           : 100%;
    font-size       : .8em;
}

.keyboard .lbl_qty{
    width    : 33.333333%;
    overflow : hidden;
}

.keyboard .lbl_qty input{
    width         : 100%;
    height        : 40px;
    position      : static !important;
    text-align    : center !important;
    display       : inline-block;
    padding       : 0;
    margin        : 0;
    background    : transparent;
    border        : none;
    border-radius : 0px;
    font-weight   : 700;
    font-size     : 1.1em;
}

.keyboard .btn_qty{
    overflow            : hidden;
    width               : 33.333333%;
    height              : 40px;
    -webkit-transition  : all .3s;
    transition          : all .3s;
    background-size     : 10px auto;
    background-position : center center;
    background-repeat   : no-repeat;
    cursor              : pointer;
    background-color    : transparent;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    font-size           : .8em;
}

.keyboard .btn_qty.less:hover{
    background-color : var(--green-0);
    color            : #ffff;
}

.keyboard .btn_qty.plus:hover{
    background-color : var(--green-0);
    color            : #ffff;
}

/* Keyboard */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance : none;
    margin             : 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number]{
    -moz-appearance : textfield; /* Firefox */
}

/*  SMARTPHONES
    Portrait
*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)
and (orientation : portrait){
    .keyboard-container{
        flex-direction : column;
    }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 812px)
and (orientation : portrait){

    /*body main section:first-child{*/
    /*    margin : 3rem 15px;*/
    /*}*/
    h5{
        font-size   : 1.5rem;
        line-height : 1.5rem;
    }

    h1{
        font-size   : 2rem;
        line-height : 2.5rem;
    }

    .confirmation .container{
        min-width  : inherit;
    }

    .tickets_row_container{
        padding : 0px;
    }


}