#buyTravelVouchers.container, footer {
    position: relative
}

#containerRecipients, .container .col-12, .container .col-3, .container .col-6, .container .col-9, .container .col-sm-3, .container .col-sm-6, .container .col-xs-12, .container .row {
    padding-left: 0;
    padding-right: 0
}

#rowVoucher1::before, .row-voucher-recip::before {
    content: "";
    height: 0;
    display: block
}

.panel-category, .widget-summary {
    font-family: var(--secundary-font)
}

footer {
    z-index: 0
}

.carousel {
    display: block
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, ol, p, ul {
    margin-bottom: 0
}

    h4.font-20.lineh-20.monserrat-semibold.mb-11 {
        height: 24px
    }

#FormBuyTravelVoucher input:not(input#input-expiration-date):not(input#icon-order-date):not(input[type=checkbox]), #newRecipientEmail, #newRecipientFirstName, #newRecipientLastName {
    border: solid 1px var(--color-0)
}

.dw-usage button {
    padding: 14px 0 17px 16px !important
}

.dropdown-menu {
    min-width: 6rem !important;
    box-shadow: 0 3px 6px #00000029;
    border-radius: 10px;
    opacity: 1
}

label.checkbox-title {
    font-size: 16px;
    line-height: 18px;
    color: var(--color-0)
}

    label.checkbox-title input[type=checkbox], label.checkbox-title input[type=radio] {
        margin-right: 6px;
        width: 17px;
        height: 17px
    }

.text-gray2 {
    color: #707070
}

.btn-check:focus + .btn, .btn:focus {
    box-shadow: none
}

#dropdownAmt1, #dropdownAmt2, #dropdownAmt3 {
    background-color: #f0f0f0
}

.dropdown-toggle {
    border: solid 1px var(--color-0) !important;
    border-radius: 5px
}

.widget-summary {
    background-color: var(--color-1);
    width: 369px;
    padding: 45px 45.5px;
    position: fixed;
    top: 85px;
    left: 75%;
    transform: translateX(-50%);
    font-size: 16px;
    z-index: 3;
    border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    color: var(--tertiary-color);
    overflow: hidden;
    overflow-x: hidden;
    max-height: 862px;
    display: initial
}

.toogle-button, .toogle-button-summary {
    color: var(--secundary-color);
    cursor: pointer
}

.widget-summary * {
    font-size: 16px
}

#divTotalVoucher, #totalAmountSummary, .toogle-button-summary {
    font-size: 18px;
    margin: 20px 0
}

.widget-summary .img-partial {
    margin: 0;
    overflow: hidden
}

    #carouselBuyTravelVoucher .img-partial img.carousel-image, .dropdown .dropdown-menu, .input-group.v-details .dropdown-menu, .widget-summary .img-partial img {
        width: 100%
    }

.widget-summary .add-recipient {
    border-top: solid 1px var(--color-0);
    border-bottom: solid 1px var(--color-0)
}

    .widget-summary .add-recipient i {
        margin-right: 7.55px;
        vertical-align: middle;
        font-size: 20px
    }

#containerRecipients {
    width: 278px;
    min-height: 20px
}

    #containerRecipients .border-top {
        border-top: 1px solid var(--color-0) !important
    }

#activity1, #divVoucher1.toogle-button-summary, #rowVoucher1::before {
    border-top: none !important
}

.container-scroll {
    max-height: 555px;
    overflow: auto;
    overflow-x: hidden;
    padding: 0;
    scrollbar-width: thin;
    width: 295px !important
}

.toogle-button-summary {
    opacity: 1;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.row-voucher-recip::before {
    width: 476px;
    border-top: solid 1px var(--color-0)
}

::-webkit-scrollbar {
    height: 12px;
    width: 8px;
    background: #eeeff1
}

::-webkit-scrollbar-thumb {
    background: #d7d7d7;
    -webkit-border-radius: 1ex
}

.toogle-button-summary .bi-caret-down-fill, .toogle-button-summary .bi-caret-right-fill {
    margin-right: 5px;
    font-size: 11px
}

.toogle-button-summary .bi-pencil-fill {
    margin-left: 5px;
    font-size: 13px
}

#currentPaymentSpan, #totalAmountSummary, .add-recipient, .btn-submit-order-summary {
    display: none
}

.img-ccv {
    max-width: 150px !important;
    width: 100%
}

.toogle-button {
    display: inline-block;
    height: 20px;
    font-style: italic;
    font-size: 20px
}

.panel-title {
    position: relative;
    margin-top: 21px;
    width: 290px
}

    .panel-title::after {
        margin-left: 5px;
        content: "\f107";
        top: 0;
        right: auto !important;
        position: absolute;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-style: normal;
        color: #82a0bc;
        padding: 2px 0 0 6px
    }

    .panel-title[aria-expanded=true]::after {
        content: "\f106"
    }

#grid-videos .col-12 {
    margin: 43px auto 52px;
    padding: 0 !important
}

.panel-heading {
    margin-top: 8px;
    border-bottom: solid 1.5px var(--color-0);
    width: 299px;
    opacity: .5
}

#collapseVideo {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    overflow: hidden
}

.panel-category {
    height: 24px;
    margin: 45px auto 9px;
    font-size: 20px;
    line-height: 20px;
    color: var(--primary-color);
    opacity: 1
}

.multiple .carousel-inner .carousel-item-next, .multiple .carousel-inner .carousel-item-prev, .multiple .carousel-inner .carousel-item.active {
    display: flex;
    padding-bottom: 16px
}

.btn-crr {
    margin-top: -2rem
}

#carouselBuyTravelVoucher {
    max-width: 555px
}

.carousel-control-next, .carousel-control-prev {
    height: auto
}

.carousel-fade .carousel-item {
    opacity: 1;
    transition-property: none
}

.carousel-div-item {
    min-width: 195px;
    max-width: 195px;
    -webkit-transform: scale(.82);
    -ms-transform: scale(.82);
    transform: scale(.82);
    transition: transform 1s;
    text-align: center;
    box-shadow: 2px 2px 3px var(--color-0)
}

    .carousel-div-item * {
        font-family: var(--tertiary-font)
    }

.slick-center {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    color: #e67e22;
    opacity: 1;
    transform: scale(1.2);
    transition: transform 1s
}

#carouselBuyTravelVoucher .col-3 small {
    font-size: .5rem !important;
    line-height: 100% !important
}

#carouselBuyTravelVoucher .img-partial {
    height: 119.8px;
    overflow: hidden
}

.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
    opacity: 1
}

.voucher-desciption {
    background: -webkit-radial-gradient(circle farthest-side,var(--bg-voucher-gradiant),var(--bg-voucher));
    background: -moz-radial-gradient(circle farthest-side,var(--bg-voucher-gradiant),var(--bg-voucher));
    background: radial-gradient(circle farthest-side,var(--bg-voucher-gradiant),var(--bg-voucher));
    padding: 36.3px 16px 6.44px;
    border-top: solid 4.5px var(--color-1);
    color: var(--color-1)
}

.bg-light {
    width: 43px;
    height: 43px
}

.voucher-qr {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%) !important;
    width: 53.8px;
    height: 58.8px
}

.voucher-price {
    height: 84px;
    font-family: BebasNeue-ProBold;
    font-size: 70px
}

.voucher-label {
    margin-bottom: 14.28px;
    font-size: 13px
}

.voucher-buttons button {
    height: 19.1px;
    margin-bottom: 13.32px;
    font-size: 5px;
    width: 67.9px !important
}

.voucher-valued {
    margin-bottom: 5.51px;
    font-size: 8px;
    line-height: 10px
}

.voucher-validity {
    margin-bottom: 6.93px;
    font-size: 8px;
    line-height: 11px
}

.voucher-use {
    font-family: var(--primary-font);
    font-size: 6.6px;
    line-height: 8px
}

.voucher-footer {
    background: var(--color-1);
    padding-top: 15.79px;
    padding-bottom: 15.17px
}

    .voucher-footer img {
        width: auto;
        height: 26px;
        margin: auto
    }

.voucher-qr img {
    max-width: 62px;
    width: 100% !important;
    height: 100% !important
}

.dropdown {
    width: 100%;
    height: 55px;
    color: var(--color-0) !important;
    resize: none
}

    .dropdown .dropdown-toggle {
        text-transform: capitalize;
        text-align: left;
        font-size: 16px;
        color: var(--color-0);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

        .dropdown .dropdown-toggle::after {
            position: absolute;
            right: 10px;
            top: 45%
        }

        .dropdown .dropdown-toggle.text-center {
            padding: 8px
        }

.dropdown-menu, .dropdown-menu.show {
    transform: translate3d(0,57px,0) !important
}

.dropdown .dropdown-menu li a {
    color: var(--color-0);
    color: var(--primary-color);
    font-size: 16px;
    white-space: normal;
    word-wrap: break-word
}

.select-icon {
    position: absolute;
    top: 33%;
    left: 12px
}

.input-group.v-details .input-group-text {
    height: 55px;
    padding: 5px 10px 5px 0;
    border-radius: 5px;
    border: solid 1px var(--color-0);
    color: var(--color-0)
}

    .input-group.v-details .input-group-text i {
        font-size: 16px;
        color: var(--color-0);
        border: 0
    }

    .input-group.v-details .input-group-text.icon-right {
        border-right: solid 1px var(--color-0);
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-left: 0
    }

        .input-group.v-details .input-group-text.icon-right i {
            font-size: 12px
        }

.input-group.v-details input.form-control {
    padding-left: 20px;
    border: 1px solid var(--color-0);
    border-right: 0;
    border-radius: 5px
}

.input-group.v-details .dropdown-menu a {
    color: var(--primary-color)
}

.input-group.v-calendary .input-group-text {
    height: 55px;
    padding: 5px 0 5px 10px;
    border-radius: 5px;
    border: solid 1px var(--color-0);
    color: var(--color-0)
}

    .input-group.v-calendary .input-group-text i {
        font-size: 18px;
        font-weight: bolder;
        color: var(--primary-color);
        border: 0
    }

.input-group.v-calendary input.form-control {
    background-color: var(--color-1);
    padding-left: 12px;
    border: 1px solid var(--color-0);
    border-left: 0;
    border-radius: 5px;
    color: var(--color-0)
}

.img-pay {
    width: 60px;
    height: 41px;
    margin: 0 5px 20px 0
}

.dw-usage, .pt-45 .col-md-4 {
    width: 240.5px !important
}

.bg-qty-error {
    background-color: #ff0 !important
}

::placeholder {
    color: var(--color-0) !important
}

form input:not(input[type=radio]):not(input[type=checkbox]), input:not(input[type=radio]):not(input[type=checkbox]) {
    background: var(--color-1);
    height: 55px;
    font-size: 16px;
    border-radius: 5px;
    color: var(--primary-color)
}

#MessageId textarea {
    height: 200px;
    padding: 5px 10px;
    font-size: 16px;
    border: solid 1px var(--color-0);
    resize: none
}

#textarea_feedback {
    margin: 9px auto 20px
}

#travelVoucherCharacters {
    max-width: 629px
}

.pt-19 {
    padding-top: 10px
}

.pt-20 {
    padding-top: 15px !important
}

.pt-20b {
    padding-top: 20px !important
}

.pt-23 {
    padding-top: 23.9px
}

.pt-25 {
    padding-top: 25px
}

.pt-35 {
    padding-top: 35px
}

.pt-45 {
    padding-top: 45px
}

.pt-55 {
    padding-top: 55px
}

.pt-72 {
    padding-top: 72px
}

.pt-80 {
    padding-top: 70px
}

.pt-80-org {
    padding-top: 80px
}

.pt-153 {
    padding-top: 153.5px
}

.pb-12 {
    padding-bottom: 12px
}

.pb-17 {
    padding-bottom: 17px
}

.pb-20 {
    padding-bottom: 20.5px
}

.pb-22 {
    padding-bottom: 22px
}

.pb-88 {
    padding-bottom: 29px
}

.pb-135 {
    padding-bottom: 168px
}

.mt-11 {
    margin-top: 11px
}

.mt-9 {
    margin-top: 9px
}

.mb-9 {
    margin-bottom: 9px
}

.mb-12 {
    margin-bottom: 12px
}

.mb-13 {
    margin-bottom: 13px
}

.mb-16 {
    margin-bottom: 6px
}

.mb-18, .mb-28 {
    margin-bottom: 18px
}

.mb-23b {
    margin-bottom: 23.9px
}

.mb-23 {
    margin-bottom: 23px
}

.mb-25 {
    margin-bottom: 25px
}

.mb-27, .mb-27b {
    margin-bottom: 27.3px
}

.mb-56 {
    margin-bottom: 56px
}

.input-billing, .mb-20 {
    margin-bottom: 20px
}

.ms-35 {
    margin-left: 25px
}

.dw-usage {
    margin-bottom: 9px
}

.btn-submit-order {
    font-family: var(--tertiary-font);
    font-size: 14px
}

#groupDate, .input-order {
    width: 230.5px
}

.icon-order-date {
    position: absolute;
    top: 17px;
    left: 10px;
    cursor: pointer;
    font-size: 18px
}

.labelFormatDate {
    margin-bottom: -50px !important;
    padding-left: 35px;
    padding-top: 20px;
    position: absolute;
    text-align: left;
    font: medium 12px / 67px Montserrat;
    letter-spacing: 0;
    color: var(--primary-color);
    opacity: 1
}

#input-activation-date, #input-expiration-date {
    background-color: transparent !important;
    text-align: left;
    cursor: pointer;
    padding-top: 6px;
    color: transparent;
    border-radius: 5px;
    opacity: 1
}

.datepicker-orient-bottom {
    margin-top: -58px
}

.input-group-text {
    padding-right: 11px
}

#labelActivation, #labelExpiration {
    height: 55px;
    width: 233px;
    padding-left: 45px !important
}

.icon-order-date {
    padding-left: 2px;
    z-index: 1
}

.col-limit {
    max-width: 739px
}

.select-94 {
    width: 120.2px !important
}

.select-293, .select-293-orig {
    width: 293px !important
}

.g-2, .gy-2 {
    --bs-gutter-y: 10px
}

.g-2, .gx-2 {
    --bs-gutter-x: 10px
}

.btn-submit-order {
    width: 278px !important
}

.modal-dialog {
    max-width: 650px !important
}

.modal-header .close {
    background-color: transparent;
    border: 0;
    float: right;
    font-weight: 700;
    line-height: 1;
    color: var(--color-0);
    text-shadow: 0 1px 0 var(--color-1);
    margin: -1rem 0 -1rem auto
}

.l-white {
    width: 75%
}

.form-control:disabled {
    background-color: #e9ecef !important
}

#ulCategory, #ulPayment, #ulRecipient {
    overflow: auto;
    max-height: 343px
}

.activity {
    padding: 16px 0 6px !important;
    text-align: right;
    height: 39px;
    margin: 6px 0 0 10px
}

.activity2 {
    padding-top: 40px !important
}

.div-recip-name {
    display: flex
}

.bi-pencil-fill {
    padding-left: 5px !important
}

.sum-line1, .sum-line2, .sum-line3 {
    margin: 20px 0
}

.sum-price, .sum-price-end, .sum-price-fees {
    margin-bottom: 20px !important
}

.widget-summary .add-recipient {
    padding: 20px 0
}

.title-sumary {
    font-size: 20px !important;
    margin-bottom: 0
}

#btnSubmitOrderSumary {
    font-family: var(--tertiary-font) !important
}

.sum-icon.bi-caret-right-fill::before {
    transform: matrix(2.2,0,0,1.3,0,0)
}

.sum-icon.bi-caret-down-fill::before {
    transform: matrix(-1.3,0,0,2.2,0,0)
}

.carrusel-title {
    width: 60%
}

.carousel-inner {
    display: flex !important
}

.slick-slide {
    width: 195px
}

@media (max-width:575.98px) {
    #buyTravelVouchers.container {
        background: var(--color-1);
        padding-top: 50px !important;
        padding-bottom: 50px !important
    }

    .col-limit {
        max-width: 100% !important;
        width: 100% !important
    }

    .widget-summary {
        width: 99%;
        margin-top: 0;
        padding: 45px 0;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        max-height: auto !important
    }

        .widget-summary .img-partial img {
            width: auto;
            max-width: 300px
        }

    .activity {
        margin: 6px 0 0 12px
    }

    .widget-summary .img-partial {
        width: 100%;
        margin: 0
    }

    .sum-line1, .sum-line2 {
        margin: 20px 0
    }

    .title-sumary {
        font-size: 25px !important;
        margin-bottom: 0;
        line-height: normal
    }

    #containerRecipients {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }

    .container-scroll {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100%
    }

    .sum-act-date, .sum-price, .sum-price-end, .sum-price-fees {
        margin-bottom: 20px !important
    }

    h4.font-20.lineh-20.monserrat-semibold.mb-11 {
        height: auto
    }

    .voucher-footer img {
        max-width: 100%
    }

    .row.gx-2.pt-55.pb-88 {
        --bs-gutter-x: 0
    }

    .pt-20c, .pt-22 {
        padding-top: 20px !important
    }

    .pt-35 {
        padding-top: 10px
    }

    .pt-72 {
        padding-top: 66px
    }

    .pt-80 {
        padding-top: 61px
    }

        .pt-80.resume-subtitle-space {
            padding-top: 0
        }

    .pt-153 {
        padding-top: 80px
    }

    .pb-22 {
        padding-bottom: 0
    }

    .mb-56 {
        margin-bottom: 54px
    }

    .mb-61 {
        margin-bottom: 60.7px
    }

    .ms-35 {
        margin-left: 0;
        padding-left: 0
    }

    .pt-45 .col-md-4, .select-94 {
        width: 50% !important
    }

    .act-date, .btn-submit-order, .dw-usage, .select-293 {
        width: 100% !important
    }

    .select-293 {
        padding-left: 5px
    }

    #groupDate, .row-voucher-recip::before {
        width: 100%
    }

    .act-date {
        padding: 0 5px
    }

    .carousel-control-next, .carousel-control-prev {
        display: none
    }

    #carouselBuyTravelVoucher {
        max-width: 100%;
        margin-left: 0
    }

    .div-carrusel {
        width: 100%;
        margin-left: 0
    }

    .carousel-item {
        margin: 0
    }

    .carousel-div-item {
        margin-right: 0
    }

    .toogle-button-summary {
        margin: 20px 0 !important
    }

    .activity {
        padding: 16px 0 6px 5px !important
    }

    .activity2 {
        padding-top: 39px !important
    }

    #divTotalVoucher, #totalAmountSummary {
        margin: 20px 0 0
    }

    .dw-usage {
        margin-bottom: 9px
    }

    .widget-summary .add-recipient {
        padding: 20px 0
    }

    #cvvCode {
        max-width: 92%
    }

    .container-carousel {
        margin-left: -20px;
        margin-right: -20px
    }

    @media (max-width:479.98px) {
        h3 .font-25.lineh-25 {
            line-height: 30px !important
        }

        #containerRecipients, .widget-summary, .widget-summary .img-partial {
            width: 100%
        }

        .container-scroll, .pt-45 .col-md-4, .select-293-orig {
            width: 100% !important
        }

        .container-scroll {
            max-width: 100% !important;
            max-height: 100%
        }

        .div-carrusel {
            width: 100%;
            margin-left: 0
        }

        #cvvCode {
            max-width: 89%
        }

        .panel-heading {
            max-width: 299px !important
        }

        .pt-20b {
            padding-top: 45px !important
        }
    }

    @media (max-width:307.98px) {
        .panel-title::after {
            top: 50%;
            right: 0 !important
        }

        .panel-title {
            max-width: 273px !important
        }
    }
}

@media (min-width:576px) and (max-width:767.98px) {
    #buyTravelVouchers.container {
        background: var(--color-1);
        padding-top: 60px !important;
        padding-bottom: 60px !important
    }

    .col-limit {
        max-width: 100% !important;
        width: 100% !important
    }

    .carrusel-title {
        width: 77%;
        text-align: left;
        padding-left: 0
    }

    .widget-summary {
        width: 99%;
        margin-top: 0;
        padding: 45px 0 0;
        margin-left: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        max-height: auto !important;
        scroll-padding-right: 8px
    }

        .widget-summary .img-partial img {
            width: auto
        }

    .sum-line1, .sum-line2 {
        margin: 20px 0
    }

    #carouselBuyTravelVoucher, .ms-35 {
        margin-left: 0
    }

    .title-sumary {
        font-size: 25px !important;
        margin-bottom: 0
    }

    #containerRecipients {
        width: 100%;
        padding-right: 0;
        padding-left: 0
    }

    .container-scroll {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100%
    }

    .sum-act-date {
        margin-bottom: 17.3px !important
    }

    .div-carrusel {
        display: flex;
        justify-content: center !important;
        width: 100%
    }

    .voucher-footer img {
        max-width: 100%
    }

    .pt-20c, .pt-22 {
        padding-top: 20px !important
    }

    .pt-35 {
        padding-top: 10px
    }

    .pt-45 {
        padding-top: 45px
    }

    .pt-72 {
        padding-top: 66px
    }

    .pt-80 {
        padding-top: 61px
    }

        .pt-80.resume-subtitle-space {
            padding-top: 0
        }

    .pt-153 {
        padding-top: 75px
    }

    .pb-22 {
        padding-bottom: 0
    }

    .mb-56 {
        margin-bottom: 54px
    }

    .mb-61 {
        margin-bottom: 60.7px
    }

    .ms-35 {
        padding-left: 0
    }

    .pt-45 .col-md-4, .select-94 {
        width: 50% !important
    }

    .act-date, .btn-submit-order, .dw-usage, .select-293 {
        width: 100% !important
    }

    .select-293 {
        padding-left: 5px
    }

    #groupDate, .row-voucher-recip::before {
        width: 100%
    }

    .act-date {
        padding: 0 5px
    }

    .sum-subtitle2-row {
        margin: 15px 25px 24px 0 !important
    }

    .toogle-button-summary {
        margin: 20px 0 !important
    }

    .activity {
        padding: 16px 0 6px 5px !important
    }

    .activity2 {
        padding-top: 39px !important
    }

    #divTotalVoucher, #totalAmountSummary {
        margin: 20px 0 0
    }

    .dw-usage {
        margin-bottom: 9px
    }

    .sum-price, .sum-price-end, .sum-price-fees {
        margin-bottom: 20px !important
    }

    .widget-summary .add-recipient {
        padding: 20px 0
    }

    #cvvCode {
        max-width: 89% !important
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    #MessageId textarea {
        height: 156px
    }

    .col-limit, .voucher-footer img {
        max-width: 100%
    }

    #buyTravelVouchers.container {
        background: var(--color-1);
        padding-top: 75px !important;
        padding-bottom: 75px !important
    }

    .dw-aux1 {
        display: none !important
    }

    .act-date {
        width: 240.5px
    }

    .widget-summary {
        width: 100%;
        margin-top: 0;
        padding: 45px 0 0;
        margin-inline: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        max-height: auto !important
    }

    .btn-submit-order, .container-scroll {
        width: 100% !important
    }

    .widget-summary .img-partial img {
        width: auto
    }

    .sum-line1, .sum-line2 {
        margin: 20px 0
    }

    .title-sumary {
        font-size: 25px !important;
        margin-bottom: 0
    }

    #containerRecipients {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }

    .container-scroll {
        max-width: 100% !important;
        max-height: 100%
    }

    .sum-act-date, .sum-price, .sum-price-end, .sum-price-fees {
        margin-bottom: 20px !important
    }

    .pt-35 {
        padding-top: 10px
    }

    .pt-72 {
        padding-top: 66px
    }

    .pt-80 {
        padding-top: 56px
    }

        .pt-80.resume-subtitle-space {
            padding-top: 0
        }

    .pt-88 {
        padding-top: 62px
    }

    .pt-153 {
        padding-top: 146.5px
    }

    .pb-22 {
        padding-bottom: 0
    }

    .ms-35 {
        margin-left: 0;
        padding-left: 35px
    }

    .row-voucher-recip::before {
        width: 100%
    }

    .toogle-button-summary {
        margin: 20px 0 !important
    }

    .activity {
        padding: 16px 0 6px 5px !important
    }

    .activity2 {
        padding-top: 39px !important
    }

    #divTotalVoucher, #totalAmountSummary {
        margin: 20px 0 0
    }

    .widget-summary .add-recipient {
        padding: 20px 0
    }

    .cvv-tool i {
        margin-left: 1px !important
    }

    #carouselBuyTravelVoucher {
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    #buyTravelVouchers.container {
        background: var(--color-1);
        padding-top: 110px !important;
        padding-bottom: 75px !important
    }

    #MessageId textarea {
        height: 156px
    }

    .row-main {
        max-width: 734px
    }

    .widget-summary {
        width: 724.6px;
        margin-top: 0;
        padding: 45px 0 0;
        margin-left: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        max-height: auto !important
    }

        .widget-summary .img-partial img {
            width: auto;
            height: 100%
        }

    .sum-line1, .sum-line2 {
        margin: 20px 0
    }

    .title-sumary {
        font-size: 25px !important;
        margin-bottom: 0
    }

    #containerRecipients {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }

    .container-scroll {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100%
    }

    .sum-act-date, .sum-price, .sum-price-end, .sum-price-fees {
        margin-bottom: 20px !important
    }

    .btn-submit-order {
        width: 278px !important
    }

    .pt-80 {
        padding-top: 58px
    }

        .pt-80.resume-subtitle-space {
            padding-top: 0
        }

    .pt-153 {
        padding-top: 143.5px
    }

    .pb-22 {
        padding-bottom: 0
    }

    .ms-35 {
        margin-left: 0;
        padding-left: 35px
    }

    .row-voucher-recip::before {
        width: 100%
    }

    .toogle-button-summary {
        margin: 20px 0 !important;
        width: 100%
    }

    .activity {
        padding: 16px 0 6px 5px !important
    }

    .activity2 {
        padding-top: 39px !important
    }

    #divTotalVoucher, #totalAmountSummary {
        margin: 20px 0 0
    }

    .widget-summary .add-recipient {
        padding: 20px 0
    }
}

@media (min-width:1200px) and (max-width:1399.98px) {
    .img-ccv {
        max-width: 131px !important
    }

    #MessageId textarea {
        height: 156px
    }

    #buyTravelVouchers.container {
        padding-top: 143px !important;
        padding-bottom: 63px !important;
        background: var(--color-1)
    }

    .l-white, .row-voucher-recip::before {
        width: 100%
    }

    .row-main {
        max-width: 734px
    }

    .widget-summary {
        width: 724.6px;
        margin-top: 0;
        padding: 45px 0 0;
        margin-left: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        max-height: auto !important
    }

        .widget-summary .img-partial img {
            width: auto;
            height: 100%
        }

    .sum-line1, .sum-line2 {
        margin: 20px 0
    }

    .title-sumary {
        font-size: 25px !important;
        margin-bottom: 0 !important
    }

    #containerRecipients {
        width: 724.6px;
        padding-left: 0;
        padding-right: 0
    }

    .container-scroll {
        width: 740px !important;
        max-width: 100% !important;
        max-height: 100%
    }

    .sum-act-date, .sum-price, .sum-price-end, .sum-price-fees {
        margin-bottom: 20px !important
    }

    .panel-heading {
        width: 41.66666667% !important
    }

    .btn-submit-order {
        width: 278px !important
    }

    .pt-80 {
        padding-top: 58px
    }

        .pt-80.resume-subtitle-space {
            padding-top: 0
        }

    .pt-153 {
        padding-top: 143.5px
    }

    .pb-22 {
        padding-bottom: 0
    }

    .ms-35 {
        margin-left: 0;
        padding-left: 35px
    }

    .toogle-button-summary {
        margin: 20px 0 !important
    }

    .activity {
        padding: 16px 0 6px 5px !important
    }

    .activity2 {
        padding-top: 39px !important
    }

    #divTotalVoucher, #totalAmountSummary {
        margin: 20px 0 0
    }

    .widget-summary .add-recipient {
        padding: 20px 0
    }
}

@media (min-width:1400px) {
    #MessageId textarea {
        height: 156px
    }
}