KOKINIO - MANAGER
Edit File: basic_checkout_mercadopago.css
.mp-pt-20 { padding-top: 20px !important; } .mp-pt-5 { padding-top: 5px !important; } .mp-pt-15 { padding-top: 15px !important; } .mp-pt-10 { padding-top: 10px !important; } .mp-pt-0 { padding-top: 0px !important; } .mp-pt-30 { padding-top: 30px !important; } .mp-pb-15 { padding-bottom: 15px !important; } .mp-pb-20 { padding-bottom: 20px !important; } .mp-pb-30 { padding-bottom: 30px !important; } .mp-pl-10 { padding-left: 10px !important; } .mp-pr-10 { padding-right: 10px !important; } .mp-pr-15 { padding-right: 15px !important; } .mp-mt-5 { margin-top: 5px !important; } .mp-mt-03rem { margin-top: 0.3rem !important; } .mp-mt-04rem { margin-top: 0.4rem !important; } .mp-mt-05rem { margin-top: 0.5rem !important; } .mp-mt-06rem { margin-top: 0.6rem !important; } .mp-mb-0 { margin-bottom: 0px !important; } .mp-mb-20 { margin-bottom: 20px !important; } .mp-mb-30 { margin-bottom: 30px !important; } .mp-mt-20 { margin-top: 20px !important; } .mp-display-inherit { display: inherit !important; } .mp-pointer { cursor: pointer!important; } .mp-text-center { text-align: center !important; } .mp-text-justify { text-align: justify !important; } .mp-min-hg { min-height: 40px !important; } .mp-row-checkout { width: 100%; display: inline-block; } .mp-col-md-12 { width: 100%; display: inline-block; padding-left: 0px; padding-right: 0px; text-align: left !important; } .mp-col-md-9 { flex: 0 0 75%; width: 75%; float: left; } .mp-col-md-8 { flex: 0 0 66.666667%; width: 66.666667%; float: left; } .mp-col-md-6 { width: 50%; float: left; padding-left: 0px; padding-right: 0px; text-align: left !important; } .mp-col-md-4 { flex: 0 0 33.333333%; width: 33.333333%; float: left; } .mp-col-md-3 { flex: 0 0 25%; width: 25%; float: left; } .mp-pix-right { border-left: solid 1px #e5e5e5; } .mp-pix-left { padding: 0 0 0 32px; } .mp-img-fluid { max-width: 100%; height: auto; } .mp-panel-checkout { background-color: #fff; padding: 10px 15px 25px; } .mp-title-checkout { padding: 15px 0 0px; font-family: sans-serif; font-size: 1.20rem !important; font-weight: 600 !important; font-style: normal; font-stretch: normal; line-height: 1.25 !important; letter-spacing: normal; color: #04204c; margin: 0 !important; } .mp-title-checkout::before { content: "" !important; width: 0 !important; height: 0 !important; margin: 0 !important; } .submp-title-checkout { font-size: 14px !important; font-family: sans-serif !important; color: #7a7a7a; font-weight: 400; padding: 20px 0px 0px; margin: 0px 0 5px !important; text-transform: uppercase; } .mp-subtitle-basic-checkout { font-size: 14px !important; font-family: sans-serif !important; color: #7a7a7a; font-weight: 400; padding: 0.625em 0px 0px; margin: 0px 0 5px !important; text-transform: uppercase; } .mp-badge-checkout { font-size: 15px !important; font-family: sans-serif !important; padding: 5px 10px; margin-left: 5px; display: inline-block; background-color: #2ec74b; color: #fff; text-transform: none; border-radius: 2px; } .mp-img-tarjetas { padding: 8px !important; max-height: 35px !important; width: auto !important; /* adaptation for all themes */ float: none !important; position: relative !important; right: 0px !important; border: inherit !important; display: inline-block !important; } .mp-img-redirect { padding: 8px !important; max-height: 6.250em !important; width: auto !important; /* adaptation for all themes */ float: none !important; position: relative !important; right: 0px !important; border: inherit !important; display: inline-block !important; } .mp-img-ticket { padding: 0px 8px !important; max-height: 35px !important; width: auto !important; /* adaptation for all themes */ float: left !important; position: relative !important; right: 0px !important; border: inherit !important; } .mp-redirect-frame { width: 100%; text-align: center; background-color: #f5f5f5; padding: 25px 20px 20px; display: inline-block; } .mp-redirect-frame img { max-width: 160px !important; } .mp-redirect-frame p { padding-top: 15px !important; margin-top: 0px !important; font-family: sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: normal !important; font-stretch: normal !important; line-height: 1.71 !important; letter-spacing: normal !important; text-align: center !important; color: #333333 !important; } /* ----- Custom Checkout ----- */ .mp-panel-custom-checkout { background-color: #fff; padding: 20px 15px 0px; } .mp-subtitle-custom-checkout { font-size: 17px !important; font-family: sans-serif !important; color: #04204c; font-weight: 600; padding: 20px 0px 0px; margin: 0px 0 5px !important; } .mp-subtitle-ticket-checkout { font-size: 16px !important; font-family: sans-serif !important; color: #04204c; font-weight: 600; padding: 0px 0px 0px; margin: 0px 0 5px !important; } .mp-form-control { font-family: sans-serif !important; width: 100%; height: 40px !important; border-radius: 5px !important; font-size: 13px !important; padding: 0 10px !important; background-color: #fff !important; border: 1px solid #d1d1d1 !important; margin-bottom: 0 !important; } .mp-form-control-error { border: 2px solid #f04449 !important; } .mp-form-control-check { margin: 0px 10px 0 0 !important; font-family: sans-serif !important; border-radius: 5px !important; font-size: 13px !important; padding: 0 10px !important; background-color: #fff !important; border: 1px solid #d1d1d1 !important; float: left; } .mp-button { width: 100%; height: 40px; border-radius: 5px !important; color: #fff !important; background-color: #3483fa !important; text-transform: none !important; font-size: 15px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1 !important; letter-spacing: normal !important; text-align: center !important; } .mp-button:hover { opacity: 0.8; } .mp-error { font-family: sans-serif !important; font-size: 12px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: normal; color: #f04449 !important; display: none; } .mp-desc { font-family: sans-serif !important; font-size: 12px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: normal; color: rgba(0, 0, 0, 0.45) !important; } .mp-label-form-check { font-family: sans-serif !important; font-size: 14px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1; letter-spacing: normal; color: rgba(0, 0, 0, 0.8) !important; vertical-align: baseline !important; } .mp-label-form { font-family: sans-serif !important; font-size: 13px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1; letter-spacing: normal; color: rgba(0, 0, 0, 0.7) !important; } .mp-label-form em { font-size: 18px !important; color: #f04449 !important; font-family: "Merriweather, Georgia"; position: absolute; margin: -3px 0 0 3px; } .mp-obrigatory { font-family: sans-serif !important; font-size: 12px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: normal; color: #f04449 !important; padding-top: 10px; } .mp-obrigatory em { font-size: 18px !important; color: #f04449 !important; margin: -2px 5px 0 0px; font-family: "Merriweather, Georgia"; float: left; } .mp-frame-links { display: inline-flex; padding-top: 10px; text-align: left; } .mp-checkout-link { font-family: sans-serif !important; font-size: 14px; text-decoration: none !important; vertical-align: middle; box-shadow: none !important; cursor: pointer; } .mp-frame-payments { display: none; background-color: #f5f5f5; margin-top: 10px; padding: 10px 10px 10px; width: 100%; } .submp-title-checkout-custom { font-size: 13px !important; font-family: sans-serif !important; color: #7a7a7a; font-weight: 400; padding: 00px 0px 0px; margin: 0px 0 5px !important; text-transform: uppercase; } .mp-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .mp-tooltip .mp-tooltiptext { visibility: hidden; background: #3483fa; color: #fff; padding: 5px 0; position: absolute; width: 250px; text-align: center; margin: -20px 0 0 100px; font-size: 12px; } .mp-tooltip .mp-tooltiptext:before { border: 6px solid transparent; border-right-color: #3483fa; content: ""; left: -12px; position: absolute; top: 5px; } .mp-tooltip:hover .mp-tooltiptext { visibility: visible; } /* ----- Ticket ----- */ .mp-erro_febraban, .mp_error_docnumber { font-family: sans-serif !important; font-size: 12px !important; font-weight: normal !important; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: normal; color: #f04449 !important; margin-top: 5px; display: none; } .mp-subtitle-ticket-checkout { font-size: 16px !important; font-family: sans-serif !important; color: #04204c; font-weight: 600; margin: 0px 0 5px !important; } .mp-ticket-name { font-weight: bold; color: rgba(0, 0, 0, 0.8); padding-left: 5px; font-size: 13px; } .mp-ticket-payments { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 10px; } #mp-box-input-tax-cft { margin-top: 4px; } #mp-tax-tea-text { color: #797979; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: normal; } #mp-tax-cft-text { font-size: 27px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: normal; color: #868686; } #mp_socialname_label { display: none; } #mp_cnpj_label { display: none; } #mp-doc-div { display: none; } #mp-doc-type-div { display: none; } #mp-doc-number-div { display: none; } #mp-issuer-div { display: none; } #mp-card-holder-div { display: none; } .mp-discount { border-style: solid; border-width: thin; border-color: #009EE3; padding: 8px 8px 8px 8px; margin-top: 20px; text-transform: uppercase; font-size: 12px; color: #333333; display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; clear: both; float: left; } /* ----- PIX Checkout ----- */ .mp-redirect-frame-pix { width: 100%; text-align: center; background-color: #f5f5f5; padding: 25px 20px 20px; display: inline-block; } .mp-redirect-frame-pix img { max-width: 170px !important; } .mp-redirect-frame-pix p { margin: 24px 0 0 !important; font-family: sans-serif !important; font-size: 16px !important; font-weight: normal !important; font-stretch: normal !important; font-style: normal !important; line-height: normal !important; letter-spacing: normal !important; text-align: center !important; color: #787878 !important; } .mp-pix-checkout-title-badge { margin: 2px 0 0 8px; padding: 5px 10px; background-color: rgba(65, 137, 230, 0.1); font-family: sans-serif; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #3483fa; border-radius: 16px; text-transform: uppercase } .mp-row-checkout-pix { width: 100%; } .mp-details-title { width: 100%; margin: 32px 358px 32px 0px; font-family: sans-serif; font-size: 28px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #333333; } .mp-col-flex-2 { width: 100%; display: block; } .mp-col-flex-10 { width: 100%; display: block; } .mp-details-pix { width: 100%; height: auto; display: inline-block; border-radius: 6px; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff; margin-bottom: 30px; } .mp-details-pix-title { width:100%; opacity: 0.8; font-family: sans-serif; font-size: 18px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; color: rgba(0, 0, 0, 0.8); display: block; margin: 40px 0 0 0; padding: 0 0 0 32px; } .mp-details-list { display: flex; } .mp-details-pix-number-p { border-radius: 100%; width: 26px; height: 26px; border: solid 1px #009ee3; color: #009ee3; text-align: center; font-size: 16px; margin: 0 13px 0 0; font-family: sans-serif; } .mp-details-list-description { font-family: sans-serif; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: rgba(0, 0, 0, 0.8); display: block; width: 70%; } .mp-details-pix-img { width: 190px; height: 56px; object-fit: contain; display: block; margin: 64px 0 0 0; padding: 0 0 0 32px; } .mp-details-pix-description { margin: 24px 0 21px 13px; font-family: sans-serif; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: rgba(0, 0, 0, 0.8); } .mp-details-pix-qr { padding: 0 4px 0 0; } .mp-details-pix-qr-value { font-weight: bold; } .mp-details-pix-qr-title { margin: 24px 0 0 0; font-family: sans-serif; font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.88; letter-spacing: normal; text-align: center; color: rgba(0, 0, 0, 0.8); } .mp-details-pix-qr-img { width: 168px; height: 168px; display: block; margin: 16px auto 0 auto; } .mp-details-pix-qr-subtitle { margin: 12px 0 32px 0; font-family: sans-serif; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.29; letter-spacing: normal; text-align: center; color: rgba(0, 0, 0, 0.45); } .mp-details-pix-qr-description { margin: 32px 15px 16px 16px; font-family: sans-serif; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.25; letter-spacing: normal; text-align: center; color: rgba(0, 0, 0, 0.8); } .mp-qr-input { width: 70%; height: 48px; padding: 6.3px 0 5.7px 12px; border-radius: 6px; border: solid 1px rgba(0, 0, 0, 0.2); background-color: #ffffff; margin: 0 12px 0 0; } .mp-details-pix-button { width: 30%; height: 48px; padding: 16px 24px; border-radius: 6px; background-color: #009ee3; font-family: sans-serif; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; color: #ffffff; } .mp-steps-congrats { margin: 24px 0 16px 0 !important; list-style-type: none; } .mp-row-checkout-pix-container { width: 100%; display: flex; padding: 16px 47px 48px 47px; } .mp-details-pix-amount { margin: 32px auto 0; text-align: center; width: 100%; color: rgba(0, 0, 0, 0.8); font-size: 18px; font-family: sans-serif; } .mp-wallet-button { background: #FFFFFF; border: 1px solid #DCDCDC; box-sizing: border-box; box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.110659); border-radius: 10px; padding: 1em 3em 1em 1em; margin-bottom: 20px; max-width: 362px; } .mp-wallet-button-header { margin-bottom: 30px; display: flex; } .mp-wallet-button-circle { width: 48px; height: 48px; border-radius: 50%; position: absolute; background-color: rgba(71, 154, 209, 0.1); left: 50%; top: 50%; transform: translate(-50%, -50%); } .mp-wallet-button-logo { width: 35%; position: relative; } .mp-wallet-button-logo img { float: inherit !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mp-wallet-button-info { width: 65% } .mp-wallet-button-info-header { font-size: 0.9em; } .mp-wallet-button-info-description { font-size: 0.8em; } .mp-wallet-button-pay { width: 100%x; padding-left: 35%; } .mp-wallet-button-pay button { padding: 0.5em 0.7em; background-color: #009EE3; border-radius: 5px; color: #fff; width: 100%; font-size: 0.9em; } @media (max-width: 767.98px) { .mp-col-md-4 { width: 100%; flex: none; } .mp-col-md-8 { width: 100%; flex: none; } .mp-pix-right { border-right: none; border-top: solid 1px #e5e5e5; margin-bottom: 32px; } .mp-qr-code { width: 100%; margin: 0 0 24px 0; } .mp-details-pix-button { width: 100%; height: auto; display: inline-block; } .mp-row-checkout-pix-container { display: block; } .mp-details-pix-img { margin: 64px auto 0; padding: 0; } .mp-details-pix-title { margin: 40px auto 0; text-align: center; padding: 0; } } @media (max-width: 1040px) { .mp-wallet-button { padding: 1em; } .mp-wallet-button-pay { width: 100%x; padding-left: 0; } }