<?php
/**
 * Mageplaza
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Mageplaza.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageplaza.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Mageplaza
 * @package     Mageplaza_Osc
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */

/** @var \Mageplaza\Osc\Block\Design $block */
$design = $block->getDesignConfiguration();
$headingBackground = '#' . trim((string)$design['heading_background'], '#');
$headingText = '#' . trim((string)$design['heading_text'], '#');
$placeOrder = '#' . trim((string)$design['place_order_button'], '#');
?>
<?php if ($block->isEnableGoogleApi() && $block->getGoogleApiKey()): ?>
    <script type="text/javascript"
            src="//maps.googleapis.com/maps/api/js?key=<?= /* @noEscape */ $block->getGoogleApiKey() ?>&libraries=places"></script>
<?php endif; ?>
<?php if ($design['text_font']): ?>
    <?php
    $fontNameArr = explode(' ', $design['text_font']);
    $fontName = '';
    foreach ($fontNameArr as $name) {
        if ($fontName !== '') {
            $fontName .= '+';
        }
        $fontName .= $name;
    }
    ?>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=<?= /* @noEscape */ $fontName ?>" />
<?php endif; ?>

<style type="text/css">
    /*===================================================================
    |                            CONFIGUARATION STYLE                    |
    ====================================================================*/
    .message.warning{
        display: flex;
    }
    .table-checkout-shipping-method tbody td{
        border-top: none;
        padding-bottom: 10px;
        padding-top: 0;
    }

    .actions-toolbar .primary .action{
        margin: 0;
    }
    .opc-wrapper .step-content {
        margin: unset;
    }

    .abs-field-tooltip input, .field .control._with-tooltip input {
        margin-right: 0;
    }

    .order-summary .opc-block-summary table.data.table.table-totals{
        border-bottom: unset;
    }

    .opc-block-summary .product-item .product-item-inner{
        margin: 0 0 2px
    }
    .checkout-payment-method .payment-option-title{
        padding: 12px 0;
    }
    #checkout-review-table{
        border: unset;
    }
    .opc-wrapper .step-title{
        margin-bottom: 6px;
    }

    .opc-block-summary.step-content,
    #checkout-step-shipping_method.step-content,
    #checkout-step-payment.step-content {
        padding-top: 0 !important;
    }

    .opc-wrapper .form-shipping-address,
    .opc-wrapper .form-login{
        margin-top: 8px;
        margin-bottom: 0;
    }

    .osc-place-order-block.checkout-comment-block {
        margin-bottom: 8px;
    }
    .col-mp.hoverable,
    .address-information .hoverable,
    .osc-addition-content-wrapper,
    .order-summary.hoverable,
    #checkoutSteps .row-mp > .hoverable {
        margin-bottom: 20px;
        border-radius:10px;
    }

    .checkout-payment-method .payment-option-content .form-discount .actions-toolbar .primary .action:hover,
    .checkout-payment-method .payment-option-content .form-discount .actions-toolbar .primary .action{
        border: unset;
    }

    .action.action-apply,
    .action.action-cancel,
    input[type="text"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    input[type*="date"],
    input[type="email"],
    select{
        height: 36px;
    }
    body, input {
        color: <?= /* @noEscape */ $design['body_text'] ?>;
    }
    .opc-block-summary .grand.totals .price{
        color: <?= /* @noEscape */ $design['order_total'] ?> ;
    }
    <?php if ($design['text_font']): ?>
    body, select, textarea, input, .action.primary, .action-primary,
    input[type="text"], input[type="password"], input[type="url"], input[type="tel"],
    input[type="search"], input[type="number"], input[type*="date"], input[type="email"], button {
        font-family: '<?= /* @noEscape */ $design['text_font'] ?>';
    }
    <?php endif; ?>
    <?php if (in_array($design['page_layout'], ['2columns', '2columns-floating'])) { ?>
    .col-mp.osc-addition-content-wrapper, .col-mp.osc-place-order-wrapper {
        margin-left: 0;
        width: 100%;
    }

    <?php } ?>
    <?php switch ($design['page_design']):
     case 'flat':?>
    .popup-authentication button.action,
    .popup-gift-message-item button.action,
    .checkout-container button:not(.primary):not(.action-show):not(.action-close):not(.edit-address-link):not(.ui-datepicker-trigger) {
        background-color: <?= /* @noEscape */ $headingBackground ?> !important;
        border-color: <?= /* @noEscape */ $headingBackground ?> !important;
        box-shadow: none !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
    }
    .action.primary.action-save-address {
        background-color: <?= /* @noEscape */ $headingBackground ?> !important;
        border-color: <?= /* @noEscape */ $headingBackground ?> !important;
        box-shadow: none !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
    }

    .gift-message-item-content .fa-gift {
        color: <?= /* @noEscape */ $headingBackground ?> !important;
    }

    .step-title {
        background-color: <?= /* @noEscape */ $headingBackground ?>;
        padding: 12px 10px 12px 12px !important;
        font-weight: bold !important;
        font-size: 16px !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
        line-height: 1.1;
    }

    .step-title .fa {
        display: inline-block !important;
        font-size: 24px;
        margin-right: 12px;
        vertical-align: text-bottom;
    }

    .one-step-checkout-container .osc-geolocation {
        color: <?= /* @noEscape */ $headingBackground ?>;
    }
    <?php break; ?>
    <?php case 'material':?>

    .fieldset > .field {
        margin: 0 0 12px;
    }
    .row-mp {
        margin: unset;
    }

    .checkout-agreement.field.choice label {
        position: inherit !important;
    }

    .osc-addition-content-wrapper,
    .opc-block-summary.step-content,
    .opc-wrapper .step-content {
        padding: 12px !important;
    }
    .popup-authentication button.action,
    .popup-gift-message-item button.action,
    .checkout-container button:not(.primary):not(.action-show):not(.action-close):not(.edit-address-link):not(.ui-datepicker-trigger) {
        background-color: <?= /* @noEscape */ $headingBackground ?> !important;
        border-color: <?= /* @noEscape */ $headingBackground ?> !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
    }
    .action.primary.action-save-address {
        background-color: <?= /* @noEscape */ $headingBackground ?> !important;
        border-color: <?= /* @noEscape */ $headingBackground ?> !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
    }

    .gift-message-item-content .fa-gift {
        color: <?= /* @noEscape */ $headingBackground ?> !important;
    }

    .step-title {
        background-color: <?= /* @noEscape */ $headingBackground ?>;
        padding: 12px 10px 12px 12px !important;
        font-weight: bold !important;
        font-size: 16px !important;
        color: <?= /* @noEscape */ $headingText ?> !important;
        line-height: 1.1;
    }

    .one-step-checkout-container .osc-geolocation {
        color: <?= /* @noEscape */ $headingBackground ?>;
    }

    .fieldset > .field{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fieldset > .field:not(.choice) > .control {
        position: relative;
    }
    .control.input-field{
        position: relative;
    }
    .field-error, div.mage-error{
        margin-top: 0;
    }

    #comments:placeholder-shown + label,
    #discount-code:placeholder-shown + label,
    #discount-code:placeholder-shown + label{
        display: none;
    }
    input[type="text"]:disabled + label,
    div#discount-code-error + label,
    #comments + label,
    .input-text:valid + label ,
    .input-text:focus + label,
    #customer-email-error + label,
    #osc-password-error + label,
    #osc-password-confirmation-error + label,
    button + label,
    select + label {
        font-size: 1rem;
        left: 12px !important;
        top: 0 !important;
        transform: translateY(-50%) !important;
        background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> ;
        transform-origin: left top;
        pointer-events: none;
    }
    textarea + label,
    .opc-wrapper .fieldset > .field > .label, .field .control.input-field .label{
        position: absolute;
        left: 10px;
        top: 6px;
    }
    .field.street .field:first-child .label {
        height: 100%;
    }
    #discount-form label.label,
    .field.street label.label{
        clip: unset !important;
        width: unset !important;
        height: unset !important;
    }

    .field.street .field:first-child .label {
        height: 100%;
    }

    .field.street label.label{
        clip: unset !important;
        width: unset !important;
        height: unset !important;
    }

    .checkout-agreements.fieldset > .field.required >.label:after{
        content: '';
        margin: 0;
    }

    .fieldset > .field.required > .label button:after{
        content: '*';
        color: #e02b27;
        font-size: 1.2rem;
        margin: 0 0 0 5px;
    }
    .opc-wrapper .step-title{
        border-radius: 8px 8px 0 0 ;
    }
    /*  Get material color from config */
    <?php $color = $design['material_color'] ?>

    /* icon */
    .fa-stack.fa-2x > i, .fa.fa-gift.fa-2x, .fa.fa-check-circle {
        color: <?= /* @noEscape */ $color ?>
    }

    .fa-stack.fa-2x > i {
        display: block;
    }
    /*!* address *!*/
    ._keyfocus *:focus, input:not([disabled]):focus, textarea:not([disabled]):focus, select:not([disabled]):focus {
        box-shadow: none;
    }

    .required-entry {
        color: #e02b27;
        font-size: 1.2rem
    }

    fieldset.street.required legend.label {
        display: none
    }


    /* Check width devices */
    @media only screen and (max-width: 1024px) {
        #checkout-step-shipping_method > .co-shipping-method-form {
            margin: 0;
            padding: 0
        }

        .osc-place-order-block .payment-option-inner .control {
            width: 100%;
            float: left;
            margin-bottom: 10px;
        }

        #create-account-form .osc-password, #create-account-form .confirmation {
            padding: 0 6px
        }
    }

    @media (max-width: 991px) and (min-width: 768px) {
        .mp-sm-6 {
            width: 46% !important;
        }

        div[data-bind="scope: 'checkout.sidebar'"] {
            float: right;
        }
    }

    @media only screen and (max-width: 766px) {
        form#co-shipping-method-form {
            padding: 0;
            margin: 0;
        }

        .one-step-checkout-wrapper .step-title {
            font-size: 2.6rem;
        }

        .opc-wrapper .form-login, .opc-wrapper .form-shipping-address, .opc-wrapper .methods-shipping {
            background: none !important;
        }

        #payment .step-title {
            border-bottom: none;
        }

        form#create-account-form .confirmation {
            margin-top: 20px
        }
    }

    /* hoverable box  */
    .opc-wrapper .step-title, #opc-sidebar .order-summary.hoverable .step-title {
        padding-top: 10px;
    }

    @media (min-width: 1020px) {
        .mp-4 {
            width: 30.3333333333% !important;
        }

        #maincontent {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
    .osc-addition-content-wrapper,
    .one-step-checkout-wrapper .hoverable {
        transition: box-shadow .25s;
        box-shadow: 1px 1px 4px 0 #00000026;

    }

    #opc-sidebar .order-summary.hoverable {
        margin-top: 0;
        background: #f0f0f0;
    }

    [type=radio]:checked, .one-step-checkout-wrapper [type=radio]:not(:checked) {
        position: absolute;
        left: -9999px;
        opacity: 0
    }

    [type=radio]:checked + label, .one-step-checkout-wrapper [type=radio]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
    }

    [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio].with-gap:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after {
        border: 2px solid<?= /* @noEscape */ $color ?>
    }

    [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio].with-gap:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:before, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:after, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:before {
        border-radius: 50%
    }

    [type=radio]:checked + label:before {
        border: 2px solid transparent
    }

    [type=radio] + label:after, .one-step-checkout-wrapper [type=radio] + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        margin: 3px;
        width: 13px;
        height: 13px;
        z-index: 0;
        transition: .28s ease
    }

    [type=radio].with-gap:checked + label:after {
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }

    [type=radio].with-gap:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:after {
        background-color: <?= /* @noEscape */ $color ?>
    }

    [type=radio]:checked + label:after {
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }

    [type=radio]:not(:checked) + label:after, .one-step-checkout-wrapper [type=radio]:not(:checked) + label:before {
        border: 2px solid #5a5a5a;
    }

    [type=radio]:not(:checked) + label:after {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    /* radio button - width-wrap */
    <?php if ($design['radio_button_style'] == 'with_gap'): ?>
    [type=radio]:checked + label:after {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    [type=radio]:checked + label:after, .one-step-checkout-wrapper [type=radio]:checked + label:before, .one-step-checkout-wrapper [type=radio]:checked + label:after {
        border: 2px solid<?= /* @noEscape */ $color ?>;
    }

    <?php endif; ?>

    .fieldset > .field.downloads .field.choice {
        padding-left: 0;
    }

    /* ripple affect css*/
    button {
        border: 0;
        outline: 0;
        border-radius: 0.15em;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

    button .ripple {
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.7);
        position: absolute;
        transform: scale(0);
        animation: ripple 0.8s linear;
        opacity: 0.4;
    }

    @keyframes ripple {
        to {
            transform: scale(2.5);
            opacity: 0;
        }
    }

    <?php break; ?>
    <?php case 'default':?>
    .modal-inner-wrap, header.modal-header, .modal-content, .opc-wrapper .step-title {
        border-radius: unset;
        margin-bottom: 4px;
        font-weight: 600;
    }
    <?php break; ?>
    <?php default:?>
    .checkout-payment-method .step-title, #shipping .step-title, #opc-shipping_method .step-title, .order-summary .step-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
    }
    .opc-wrapper .form-shipping-address,
    .opc-wrapper .form-login{
        margin-top: 4px;
        margin-bottom: 0;
    }
    .checkout-comment-block .control.input-field.input-box{
        display: flex;
        flex-direction: column-reverse;
    }
    <?php endswitch; ?>
    <?php switch ($design['page_layout']):
    case '1column':?>
    #co-place-order-area{
        display: flex;
        flex-direction: column;
    }

    .one-step-checkout-container > .mp-6 {
        width: 50% !important;
        margin: 0 16px;
    }

    .mp-lg-6 {
        width: 100%;
    }

    #checkoutSteps .row-mp > .hoverable {
        margin-top: unset !important;
    }

    .opc-wrapper .form-login, .opc-wrapper .form-shipping-address {
        max-width: 100% !important;
    }

    .osc-place-order-block .payment-option-inner .control {
        width: 100% !important;
    }

    <?php if ($block->isVirtual()) : ?>
    div[data-bind="scope: 'checkout.steps.shipping-step'"] {
        display: none
    }

    @media only screen and (max-width: 1024px) {
        div[data-bind="scope: 'checkout.sidebar'"] {
            margin-top: 0 !important;
        }
    }
    <?php endif; ?>
    <?php break; ?>
    <?php case '2columns': ?>
    <?php case '2columns-floating': ?>
    .opc-wrapper .form-login, .opc-wrapper .form-shipping-address {
        max-width: 100% !important;
    }

    strong.product-item-name {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fieldset > .field:not(.choice) > .control{
        margin-top: 4px;
    }
    .osc-place-order-block .payment-option-inner .control {
        width: 100% !important;
    }
    .row-mp {
        width: 100% ;
    }

    @media (min-width: 768px), print {
        .one-step-checkout-container > .mp-6 {
            width: 46% !important;
            margin: 0 20px 0 0;
        }

    <?php if ($design['page_layout'] === '2columns'): ?>
        div[data-bind="scope: 'checkout.steps.billing-step'"] {
            margin-top: 0 !important;
        }
    <?php endif; ?>
    }

    <?php if ($block->isVirtual()): ?>
    @media only screen and (max-width: 766px) {
        div[data-bind="scope: 'checkout.steps.shipping-step'"] {
            margin-top: 0px !important;
        }
    }
    <?php endif ?>
    <?php break; ?>
    <?php case '3columns': ?>
    .row-mp{
        width: 94%;
    }
    @media  only screen and (min-width: 1020px) {
        .mp-4 {
            width: 33.333333% !important;
        }
    }
    .mp-col-2.mp-4 {
        margin: 0 2% 0;
    }

    strong.product-item-name {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .minicart-items .product-item-name {
        padding-top: 0;
    }

    <?php if ($block->isVirtual()): ?>
    div[data-bind="scope: 'checkout.steps.billing-step'"] {
        margin-top: 0px !important;
    }
    <?php endif ?>
    <?php break; ?>
    <?php case '3columns-colspan': ?>
    .mp-lg-6{
        width: 100%;
    }

    .mp-right{
        padding-left: 8px;
        width: 50%;
    }

    .mp-left{
        padding-right: 8px;
        width: 50%;
    }

    .mp-col-1.mp-4{
        padding-right: 20px;
    }

    .minicart-items .product-item-name {
        padding-top: 0;
    }
    strong.product-item-name {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    div#co-place-order-area{
        display: flex;
        flex-direction: column;
    }

    .row-mp{
        width: 97%;
    }
    @media (min-width: 991px), print {
        .hoverable.only-colspan {
            width: 45%;
            margin-left: 15px;
        }
    }

    @media only screen and (max-width: 766px) {
        .hoverable.only-colspan {
            margin-top: 25px
        }
    }

    .checkout-agreements-block {
        margin-bottom: 20px !important;
    }

    .payment-method .checkout-agreements-block {
        margin-bottom: 0 !important;
    }
    <?php if ($block->isVirtual()): ?>
    @media (min-width: 1024px), print {
        .hoverable.only-colspan {
            width: 100% !important;;
            margin-left: initial;
        }
    }

    @media only screen and (max-width: 766px) {
        div[data-bind="scope: 'checkout.steps.shipping-step'"] {
            margin-top: 0px !important;
        }
    }
    <?php endif ?>
    <?php break; ?>
    <?php endswitch; ?>
    .osc-place-order-wrapper .place-order-primary button.primary.checkout {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: <?= /* @noEscape */ $placeOrder ?> !important;
        border-color: <?= /* @noEscape */ $placeOrder ?> !important;
    }

    .order-summary, #checkout-review-table {
        background-color: <?= /* @noEscape */ $design['order_summary_background'] ?> !important;
    }
    <?php if ($design['page_design'] === 'material'): ?>
    .opc-block-summary .table-totals tbody .mark, .opc-block-summary .table-totals tbody tr{
        background-color: <?= /* @noEscape */ $design['order_summary_background'] ?> !important;
    }
    <?php endif; ?>

    #maincontent, .page-header .header.content, .opc-estimated-wrapper,.modal-header,.modal-content,
    .osc-new-address-popup .modal-inner-wrap, .popup-authentication .modal-inner-wrap, input,select,textarea{
        background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> !important;
    }

    @media (max-width: 639px) {
        .opc-wrapper .form-login, .opc-wrapper .form-shipping-address, .opc-wrapper .methods-shipping {
            background-color: <?= /* @noEscape */ $design['osc_page_background'] ?> !important;
        }
    }

    .page-title-wrapper .page-title {
        color: <?= /* @noEscape */ $design['page_title_color'] ?> !important;
    }
    .page-title-wrapper .checkout-description {
        color: <?= /* @noEscape */ $design['description_color'] ?> !important;
    }

    /*===================================================================
    |                           Custom STYLE                             |
    ====================================================================*/
    <?= /* @noEscape */ isset($design['custom_css']) ? $design['custom_css'] : ''; ?>

    /*===================================================================
    |                      Compatible Themes                             |
    ====================================================================*/
    /** Etheme_yourstore  **/
    <?php if ($block->getCurrentTheme() === 'Etheme/yourstore') { ?>
    .create-account-block {
        border: none;
        padding: 0;
    }

    .product-image-container {
        display: initial;
    }

    .content {
        margin-top: 0px !important
    }

    .product-item .product-item-name-block a {
        background-color: #f0f0f0 !important
    }

    .product-image-wrapper {
        height: initial;
    }

    .qty-wrapper .qty-wrap .input-text.update {
        top: -2px
    }

    .popup-authentication .modal-content {
        padding-top: 0
    }

    .osc-payment-after-methods .opc-payment-additional .field .control {
        border-bottom: none;
    }

    dd.ui_tpicker_second, dd.ui_tpicker_millisec, dd.ui_tpicker_microsec {
        display: none
    }

    .ui-timepicker-div dl dd {
        padding-bottom: 0
    }

    .ui-timepicker-div dl dt {
        font-size: 14px
    }

    aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap header.modal-header {
        margin-top: -17px;
    }

    aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap header.modal-header button.action-close {
        padding: 10px 20px 10px 10px !important;
    }

    div#social-login-popup .social-login.block-container.authentication div#social-login-authentication {
        width: initial;
    }

    aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show {
        z-index: 9999999 !important;
    }

    div#social-login-authentication {
        width: 58.3333333333% !important;
    }

    @media (min-width: 768px) {
        aside.modal-popup.osc-social-login-popup.modal-slide._inner-scroll._show .modal-inner-wrap {
            top: 200px;
        }
    }

    @media only screen and (max-width: 767px) {
        .navigation, .breadcrumbs, .page-header .header.panel, .header.content, .footer.content, .page-main, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    /** Sm_agood  **/
    <?php } elseif ($block->getCurrentTheme() === 'Sm/agood') { ?>
    .create-account-block label[for="create-account-checkbox"], .billing-address-same-as-shipping-block label[for="billing-address-same-as-shipping"], .opc-payment label, .checkout-addition-block label {
        padding-left: 20px !important
    }

    .one-step-checkout-wrapper [type=checkbox] + label:before, .one-step-checkout-wrapper [type=checkbox]:not(.filled-in) + label:after {
        margin-top: 5px
    }

    .minicart-items .product > .product-image-container {
        float: none;
    }

    .product-item .product-item-name-block a {
        background-color: #f0f0f0 !important
    }

    header.modal-header {
        border: none
    }

    .modal-content {
        border: none;
        box-shadow: none;
    }

    <?php } elseif ($block->getCurrentTheme() === 'Smartwave/porto') { ?>

    ._has-datepicker ~ .ui-datepicker-trigger > span {
        display: none;
    }

    ._has-datepicker ~ .ui-datepicker-trigger:before {
        content: '\f865';
        font-family: 'porto-icons';
        font-size: 23px;
        color: #7d7d7d;
    }

    .field ._has-datepicker {
        display: inline-block;
        margin-right: 10px;
        width: calc(100% - 33px);
    }

    ._has-datepicker ~ .ui-datepicker-trigger {
        line-height: inherit;
        background: none;
        border: 0;
        padding: 0;
    }

    <?php } ?>


    /*===================================================================
    |                        Hide the Header and Footer                 |
    ====================================================================*/
    <?php if (!$block->getHelperConfig()->isShowHeaderFooter()) { ?>
    .onestepcheckout-index-index .page-wrapper .page-header, .onestepcheckout-index-index .page-footer {
        display: none;
    }

    <?php } ?>
    .abs-field-tooltip input, .form.form-login .field .control._with-tooltip input {
        width: 100% !important;
    }
    .field-tooltip{
        right: 2% !important;
    }
    hr{
        display: none;
    }
    .field.additional {
        padding-top: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 0 !important;
    }
    .field.additional .input-field {
        width: 100%;
    }
    .field.additional .control {
            width: 100%;
    }
    .opc-wrapper .form-login .fieldset .field input:not(:placeholder-shown) + label {
        font-size: 1rem;
        left: 12px !important;
        top: 0 !important;
        transform: translateY(-50%) !important;
        background-color: #FFFFFF;
        transform-origin: left top;
        pointer-events: none;
    }
    #shipping-new-address-form {
        margin-top: 12px;
    }
</style>

