@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); 
html { height: 100%; }
body { background: #fff; font-size: 16px; font-family: 'Inter',sans-serif; position: relative; padding-bottom: 195px; min-height: 100%; }
a { color: #000; text-decoration: none; transition: all .3s; }
a:hover { text-decoration: none; color: #2936d5; }
.btn-link { color: #000; }
.btn-link:hover { color: #2936d5; text-decoration: none; }

body.template-login { padding-bottom: 0; }
body.template-register { padding-bottom: 0; }
body[class*='template-password-reset-'] { padding-bottom: 0; }
body.template-password-confirm { padding-bottom: 0; }
body.template-email-verify { padding-bottom: 0; }

select::-ms-expand { padding-right: 10px; right: 10px; }
::placeholder { font-family: Inter; font-weight: 400; color: #495057; }

#header { padding: 25px; }
#header .navbar-brand img { width: 175px; }
#header .navbar { margin-bottom: 0; border-radius: 0; padding: 0; justify-content: space-between; }
#header .user-dropdown { margin-left: 3rem; }
#header .user-dropdown .dropdown-menu { width: 300px; border: none; box-shadow: 3px 5px 22px 5px rgb(72 73 121 / 10%); border-radius: 15px; padding: 20px 25px 25px; }
#header .user-dropdown .dropdown-menu: before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid red; border-left: 7px solid transparent; content: ''; }
#header .user-dropdown .dropdown-menu-right: before { right: 15px; left: auto; }
#header .user-dropdown .dropdown-header { padding: 0 5px; font-weight: 600; color: #000; margin-bottom: 10px; font-size: 15px; }
#header .user-dropdown .dropdown-header .hello-name { text-overflow: ellipsis; overflow: hidden; width: 180px; display: inline-block; white-space: nowrap; }
#header .user-dropdown .dropdown-item { border-bottom: 1px solid #f2f2f2; font-size: 14px; padding: 10px 5px 2px; font-weight: 500; display: flex; justify-content: space-between; }
.dropdown-item:focus, .dropdown-item:hover { color: #2936d5; text-decoration: none; background-color: transparent; }
.dropdown-item.active, .dropdown-item:active { color: #2936d5; text-decoration: none; background-color: transparent; }
#header .user-dropdown .dropdown-item.logout { border: none; }
#header .user-dropdown .dropdown-item i { float: right; margin-top: 2px; }
#header .user-dropdown .dropdown-item svg { width: 18px; height: 18px; }
#header .user-dropdown .dropdown-item svg path { fill: #adb8c3; }
#header .user-dropdown .dropdown-item svg circle { fill: #adb8c3; }
#header .user-dropdown .dropdown-item svg rect { fill: #adb8c3; }
.navbar-nav.divider: : after { content: ' | '; padding: .6rem 1rem; }
.navbar-nav.ml-auto .nav-item .btn,.navbar-nav.ml-auto .nav-link { margin-left: .9rem; }

.left-menu .nav-item a { border-radius: 55px; font-size: 14px; font-weight: 600; padding: 7px 10px !important; }
.left-menu .nav-item a:hover { color: #2936d5; }
.left-menu .nav-item a.active { background: #f2f2f2; }

.right-menu { display: flex; align-items: center; }
.right-menu .right-icon { position: relative; }
.right-icon a.nav-link { font-size: 14px; font-weight: 600; padding: 0px 10px !important; }
.right-menu .right-icon img { width: 20px; }

.user-dropdown .dropdown-toggle::after { display: none; }
.user-dropdown .dropdown-toggle img { box-shadow: 3px 5px 22px 5px rgb(72 73 121 / 20%); width: 45px; height: 45px; border-radius: 50%; object-fit: cover; object-position: center; }

#app { min-height: 500px; }

.card { border: 10px solid #f2f2f2; padding: 10px; background: #f2f2f2; border-radius: 15px; }
.card-header { padding: 0 0 15px; background-color: #f2f2f2; border-bottom: 0; font-weight: 700; align-items: center; display: flex; }
.card-header img { width: 26px; height: 26px; margin: 0 10px; }
.card-header svg { width: 26px; height: 26px; margin: 0 10px; }
.card-header svg path { fill: #adb8c3; }
.card-header svg circle { fill: #adb8c3; }
.card-header a { border-radius: 55px; font-weight: 600; padding: 3px; font-size: 11px; border: 2px solid #2936d5; min-width: 70px; text-align: center; background: #2936d5; color: #fff; position: absolute; right: 10px; }
.card-header a:hover { border: 2px solid #9efd33; background: #9efd33; color: #000;}
.card-body { min-height: 55px; padding: 10px 20px !important; display: grid; align-items: center; background: #fff; border-radius: 15px; }
.card-body h3 { margin-bottom: 0; }
.card-body h6 { margin-bottom: 0; }
.card-body .form-group:last-child { margin-bottom: 0.5rem; }
.card-body-large { padding: 20px 20px 10px !important; }
.card-body-large .form-group:last-child { margin-bottom: 1rem; }
.card-body-banners { justify-items: center; }
.card-body-banners .form-group { width: 100%; }
.card-body-banners .form-group small { text-align: center; }

a.learn-more { font-size: 13px; margin-top: 10px; font-weight: 500; display: block; color: #7f8c98; }
a.learn-more:hover { color: #2936d5; }

.card-button { height: 100%; }
.card-button a { box-shadow: 0 1px 25px 0 #2936d5; color: #fff; font-size: 21px; font-weight: 600; padding: 10px; transition: all .3s; background-size: 200% auto; background: #2936d5; height: 100%; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.card-button a:hover { color: #8dcef6; background-position: right center; }
.card-button svg { width: 36px; height: 36px; margin-right: 10px; }
.card-button svg path { fill: #8dcef6; }
.card-button svg circle { fill: #8dcef6; }

.card-table .table { margin-bottom: 0; font-size: 14px; }
.card-table .table tbody tr:first-child td:first-child { border-top-left-radius: 15px; }
.card-table .table tbody tr:first-child td:last-child { border-top-right-radius: 15px; }
.card-table .table tbody tr:last-child td:first-child { border-bottom-left-radius: 15px; }
.card-table .table tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; }
.card-table .table tbody .card-total { font-weight: 600; }
.card-table .table tbody .card-total td:first-child { text-align: right; }
.card-table .table strong { font-weight: 600; display: flex; gap: 10px; align-items: center; }
.card-table .table img { min-width: 20px; max-width: 20px; border-radius: 2px; }
.card-table .table svg { min-width: 20px; max-width: 20px; border-radius: 2px; }
.card-table .table tr th { padding: 10px 20px; }
.card-table .table tr td { background: #fff; vertical-align: middle; padding: 10px 20px; border-top: 1px solid #f2f2f2; }
.card-table .table tr td: first-child,.card-table .table tr th: first-child { padding-left: 25px; }
.card-table .table tr td: last-child,.card-table .table tr th: last-child { padding-right: 25px; }
.card-table tr td a.link { text-decoration: none; color: inherit; }
.card-table tr td p { margin-bottom: 0px; }
.card-table .card-price img { width: 16px; height: 16px; margin-left: 5px; margin-top: -3px; }
.card-table .card-price svg { width: 16px; height: 16px; margin-left: 5px; margin-top: -3px; }
.card-table .card-price svg path { fill: #2936d5; }
.card-table .card-price svg circle { fill: #2936d5; }
.card-table .card-dot img { width: 8px; height: 8px; margin-right: 5px; margin-top: -3px; }
.card-table .card-dot svg { width: 8px; height: 8px; margin-right: 5px; margin-top: -3px; }
.card-table .card-dot .Approved svg path { fill: #2936d5; }
.card-table .card-dot .Pending svg path { fill: #adb8c3; }
.card-table .card-dot .Rejected svg path { fill: #ff001d; }
.card-table .card-dot .Completed svg path { fill: #000; }

.card-table .table tr.notification small { color: #adb8c3; }
.card-table .table tr.notification.unread { font-weight: 600; }
.card-table .table tr.notification.read { color: #adb8c3; }

.table-empty { min-height: 150px; text-align: center; }

.pagination { margin: 25px 0 0; display: flex; justify-content: center; font-size: 14px; }
.page-item.disabled .page-link { color: #000; border-color: #f2f2f2; }
.page-item.active .page-link { color: #fff; background-color: #000; border-color: #000; }
.page-link { color: #000; border: 1px solid #f2f2f2; }
.page-link:hover { color: #fff; background-color: #2936d5; border-color: #2936d5; }
.page-link:focus { box-shadow: 0 0 0 0.2rem #2936d5; }

.card-service { background-size: 200% auto; border: 0px; padding: 35px 15px 15px; transition: all 0.3s; color: #fff; height: 100%; }
.card-service:hover { background-position: right center; box-shadow: 3px 15px 22px 5px rgb(72 73 121 / 25%); }
.card-service a { height: 100%; width: 100%; display: block; color: #fff; }
.card-service a:hover { color: #fff; }
.card-service h2 { font-size: 30px; font-weight: 600; margin: 25px 15px 15px;}
.card-service p { margin-bottom: 0; opacity: .5;}
.card-service img { width: 135px; height: auto; }
.card-service svg { width: 135px; height: auto; }
.card-service svg path { fill: #ffffff55; }
.card-service svg circle { fill: #ffffff55; }

.steps { position: relative; text-align: center; }
.steps:before { content: ""; display: inline-block; width: 75%; height: 1px; position: absolute; top: 36px; border-bottom: 1px dashed #d6d6d6; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.steps .col { display: grid; justify-items: center; }
.steps h2 { border-radius: 100%; width: 68px; height: 68px; font-size: 22px; font-weight: 400; border: 2px solid #f2f2f2; background: #f2f2f2; transition: color .3s,background .3s,border-color .3s; display: flex; align-items: center; justify-content: center; }
.steps h2:hover { background: #2936d5; color: #fff; }
.steps .active h2 { background: #2936d5; color: #fff; }
.steps .active h2:hover { border: 2px solid #2936d5; }
.steps p { font-size: 15px; margin: 0; }

.two-buttons { display: flex; justify-content: space-between; }

.payment-methods { position: absolute; margin-top: -55px; }
.payment-methods img { width: 475px; }

.trial-days { background: #2936d5; color: #fff; padding: 2px 5px; border-radius: 5px; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.setup-fee { background: #62c805; color: #fff; padding: 2px 5px; border-radius: 5px; font-size: 9px; font-weight: 600; text-transform: uppercase; }

.home-services .card-service { padding: 35px 15px 25px; }
.home-services .card-service h2 { font-size: 18px; margin: 25px 5px 10px;}
.home-services .card-service p { font-size: 14px; }
.home-services .card-service img { width: 70px; height: auto; }
.home-services .card-service svg { width: 70px; height: auto; }

.google-dv360 { background-image: linear-gradient(135deg, #03ac48 0%, #005d26 100%); }
.ppc-advertising { background-image: linear-gradient(135deg, #3b84ff 0%, #14eadc 100%); }
.social-media-management { background-image: linear-gradient(135deg, #ffc53b 0%, #f44336 100%); }
.search-engine-optimization { background-image: linear-gradient(135deg, #c26fed 0%, #8419af 100%); }
.landing-page-design { background-image: linear-gradient(135deg, #f187fb 0%, #439cfb 100%); }
.banner-design { background-image: linear-gradient(135deg, #f4d941 0%, #ec8235 100%); }
.support-center { background-image: linear-gradient(135deg, #ff00dc 0%, #0001ff 100%); }
.setup-guide { background-image: linear-gradient(135deg, #1f923e 0%, #52e27b 100%); }
.copywriting { background-image: linear-gradient(135deg, #ff0f7b 0%, #f89b29 100%); }
.app-development { background-image: linear-gradient(135deg, #07f0f4 0%, #009688 100%); }
.web-development { background-image: linear-gradient(135deg, #07f49e 0%, #42047e 100%); }
.email-marketing { background-image: linear-gradient(135deg, #ff1b6b 0%, #45caff 100%); }

.btn { border-radius: 4px !important; font-weight: 600; padding: 7px 5px; font-size: 13px; border: 2px solid; min-width: 155px; }
.btnxs { min-width: 100px; }
.btnxl { min-width: 200px; font-size: 15px; }
.btnxxl { min-width: 250px; font-size: 18px; }
.btn-primary { color: #000; background-color: #fff; border-color: #000; }
.btn-primary:hover { color: #fff; background-color: #000; border-color: #000; }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):focus { color: #fff; background-color: #000; border-color: #000; box-shadow: 0 0 0 0.2rem #00000020; }
.btn-black { color: #fff; background-color: #000; border-color: #000; }
.btn-black:hover { color: #fff; background-color: #2936d5; border-color: #2936d5; }
.btn-black:not(:disabled):not(.disabled):active,
.btn-black:active,
.btn-black:focus,
.btn-black:not(:disabled):not(.disabled):focus { color: #fff; background-color: #000; border-color: #000; box-shadow: 0 0 0 0.2rem #00000020; }
.btn-dark { color: #2936d5; background-color: #fff; border-color: #2936d5; }
.btn-dark:hover { color: #fff; background-color: #2936d5; border-color: #2936d5; }
.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):focus { color: #fff; background-color: #2936d5; border-color: #2936d5; box-shadow: 0 0 0 0.2rem #2936d520; }
.btn-blue { color: #fff; background-color: #2936d5; border-color: #2936d5; }
.btn-blue:hover { color: #fff; background-color: #000; border-color: #000; }
.btn-blue:not(:disabled):not(.disabled):active,
.btn-blue:active,
.btn-blue:focus,
.btn-blue:not(:disabled):not(.disabled):focus { color: #fff; background-color: #000; border-color: #000; box-shadow: 0 0 0 0.2rem #2936d520; }
.btn-white { color: #2936d5; background-color: #fff; border-color: #fff; }
.btn-white:hover { color: #fff; background-color: #000; border-color: #000; }
.btn-white:not(:disabled):not(.disabled):active,
.btn-white:active,
.btn-white:focus,
.btn-white:not(:disabled):not(.disabled):focus { color: #fff; background-color: #000; border-color: #000; box-shadow: 0 0 0 0.2rem #2936d520; }
.btn-danger { color: #ff001d; background-color: #fff; border-color: #ff001d; }
.btn-danger:hover { color: #fff; background-color: #ff001d; border-color: #ff001d; }
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):focus { color: #fff; background-color: #ff001d; border-color: #ff001d; box-shadow: 0 0 0 0.2rem #ff001d20; }
.btn-success { color: #28a745; background-color: #fff; border-color: #28a745; }
.btn-success:hover { color: #fff; background-color: #28a745; border-color: #28a745; }
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:active,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):focus { color: #fff; background-color: #28a745; border-color: #28a745; box-shadow: 0 0 0 0.2rem #28a74520; }
.btn-light { color: #fff; background-color: #2936d5; border-color: #2936d5; }
.btn-light:hover { color: #2936d5; background-color: #fff; border-color: #fff; }
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:active,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):focus { color: #fff; background-color: #2936d5; border-color: #2936d5; box-shadow: 0 0 0 0.2rem #2936d520; }
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: none; }
.btn-black:not(:disabled):not(.disabled).active:focus, .btn-black:not(:disabled):not(.disabled):active:focus, .show>.btn-black.dropdown-toggle:focus { box-shadow: none; }
.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus { box-shadow: none; }
.btn-blue:not(:disabled):not(.disabled).active:focus, .btn-blue:not(:disabled):not(.disabled):active:focus, .show>.btn-blue.dropdown-toggle:focus { box-shadow: none; }
.btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show>.btn-white.dropdown-toggle:focus { box-shadow: none; }
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus { box-shadow: none; }
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus { box-shadow: none; }
.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus { box-shadow: none; }
.btn-delete { min-width: auto; border: none; }

.card-dropmenu .dropdown-menu { border-radius: 15px; border: none; background: #f2f2f2; font-size: 14px; }
.card-dropmenu .dropdown-item { font-weight: 600; }

.footer { color: #7f8c98; font-size: 13px; padding: 15px 0 45px; background: #f2f2f2; position: absolute; right: 0; bottom: 0; left: 0; }
.footer h3 { margin-bottom: 1rem; color: #000; text-transform: uppercase; font-size: 18px; }
.footer .links, .footer .social { margin: 0; padding: 0; list-style-type: none; display: block; }
.footer .links li { display: inline-block; margin-bottom: .75rem; }
.footer .left .links li: before { font-family: 'Font Awesome 5 Free'; font-weight: 600; content: "\f105"; margin-right: 5px; font-size: 16px; color: red; }
.footer .right { text-align: right; }
.footer .right .links li: after { font-family: 'Font Awesome 5 Free'; font-weight: 600; content: "\f104"; margin-left: 5px; font-size: 16px; color: red; }
.footer .social li { display: inline-block; margin-left: .75rem; }
.footer .social li a { font-size: 28px; color: red; }
.footer .social li.facebook a { color: #316ff1; }
.footer .social li.twitter a { color: #55acee; }
#footer { padding-top: 2rem; padding-bottom: 1rem; background-color: #f8f9fa!important; color: #000 !important; }
#footer .links { margin: 0; padding: 0; list-style-type: none; display: flex; }
#footer .links li { display: inline-block; margin-left: 7px; margin-right: 7px; }
#footer .links li a { color: red; }

.copyright .col-lg-12 { display: flex; justify-content: space-between; }
.copyright a { transition: all .3s; }
.copyright a:hover { align-self: end; color: #000; text-decoration: none; }
.copyright ul { margin: 0; padding: 0; list-style-type: none; display: flex; }
.copyright li { position: relative; padding-right: 20px; }
.copyright li:after { content: '\b7\a0'; position:absolute; right: 5px; }
.copyright li:last-child { padding-right: 0px; }
.copyright li:last-child { content: none; }
.copyright p { margin: 0px; }

.userpanel-header { margin-bottom: 15px; }
.userpanel-header h1 { color: #9efd33; font-size: 50px; line-height: 50px; font-weight: 600; margin-bottom: 0; }
.userpanel-header h3 { font-size: 26px; font-weight: 400; line-height: 26px; margin-bottom: 0; color: #fff; padding-top: 15px; }
.userpanel-header h3 a { text-decoration: underline; color: #ffffff70; }
.userpanel-header h3 a:hover { color: #fff; }
.userpanel-header h3 span { opacity: 0.4; font-weight: 400; color: #fff; padding: 0 8px; }
.userpanel-header p { margin: 10px 0 0; text-align: justify; }
.userpanel-header .container { position: relative; z-index: 1; }

.userpanel-header { margin-bottom: 50px; padding: 75px 0; background-color: #12138f; background-image: url(https://ppcmate.com/wp-content/uploads/2024/10/ppcmate-header.webp); background-position: bottom right; background-repeat: no-repeat; background-size: contain; text-align: center; }

h2.section-header { font-size: 24px; font-weight: 600; display: flex; align-items: center; }
h2.section-header img { min-width: 35px; max-width: 35px; margin-right: 15px; border-radius: 5px; }
h2.section-header a { border-radius: 55px; font-weight: 600; padding: 3px; font-size: 11px; border: 2px solid #f2f2f2; min-width: 85px; text-align: center; background: #f2f2f2; color: #000; margin-left: 10px; }
h2.section-header a:hover { border: 2px solid #2936d5; background: #2936d5; color: #fff; }

.page-content { border-radius: 25px; background: #f2f2f2; padding: 50px; }

.marketplace-features .desc { font-size: 16px; }
.thumbnail .pic { max-height: 142px; overflow: hidden; }
.dropdown-alerts .dropdown-toggle: : after { display: none; }
.dropdown-alerts .dropdown-header { padding: 0 0 5px; font-weight: 600; color: #000; font-size: 15px; }
.dropdown-alerts .dropdown-footer { border-bottom: 0px; padding: 15px 0 0; }
.dropdown-alerts .dropdown-menu { width: 325px; border: none; box-shadow: 3px 5px 22px 5px rgb(72 73 121 / 10%); border-radius: 15px; padding: 20px 25px 25px; }
.dropdown-alerts .dropdown-item { white-space: normal; word-wrap: break-word; font-size: 12px; line-height: 18px; padding: 10px 5px 2px !important; border-top: 1px solid #f2f2f2; }
.dropdown-alerts .dropdown-item p { margin: 0; }
.dropdown-alerts .dropdown-item p small { opacity: 0.55; }
.dropdown-alerts .dropdown-item.read_N { font-weight: 500; }
.dropdown-alerts .dropdown-item.read_Y { color: #adb8c3; }
.blue-bubble { position: absolute; top: -7px; display: flex; justify-content: center; align-content: center; align-items: center; right: 1px; font-size: 9px; line-height: 9px; font-weight: 500; width: 18px; height: 18px; color: #fff; background: #2936d5; border-radius: 100%; border: 2px solid #fff; }
.red-bubble { position: absolute; top: -7px; display: flex; justify-content: center; align-content: center; align-items: center; right: 1px; font-size: 9px; line-height: 9px; font-weight: 500; width: 18px; height: 18px; color: #fff; background: #ff001d; border-radius: 100%; border: 2px solid #fff; }
.progress .progress-requested { color: #828282 !important; }
.progress .progress-cancelled,.progress .progress-rejected { color: red !important; }
.progress .progress-text { display: flex; width: 100%; justify-content: center; text-align: center; color: #fff; white-space: nowrap; align-items: center!important; text-transform: uppercase; font-weight: 700; }
.progress .progress-text.progress-completed { background-color: #4caf50!important; }
.list-group-item: hover { background-color: #EEE; }
.font-size-lg { font-family: Play,sans-serif; font-size: 48px; }
.font-size-md { font-family: Play,sans-serif; font-size: 40px; }
.navbar-toggler { background-color: #EEE; border: 2px solid #000; }
.dropdown-toggle::after { display: none!important; }

.form-control { font-size: 15px; border-radius: 25px; border-color: #adb8c350; }
.form-check-label { font-size: 14px; }
.form-group label { padding: 0 0 15px; border-bottom: 0; font-weight: 500; padding-bottom: 0; margin-bottom: 5px; font-size: 15px; display: block; }
.form-group label .required { color: #fb004d; }
.form-group label span { color: #fb004d; }
.form-group label span.acceptance { color: #000; }
.form-group small { color: #adb8c3; font-size: 12px; }
.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label { color: #fb004d; }
.invalid-feedback { color: #fb004d; font-size: 12px; }
.form-check .invalid-feedback { display: none !important; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #fb004d; }
.text-muted { color: #adb8c3 !important; font-size: 13px; }
.select2-results__option--selectable, .select2-container--default .select2-selection--multiple .select2-selection__choice__display { font-size: 15px; }
.select2-container--default .select2-selection--multiple { border-radius: 25px; border-color: #adb8c350; min-height: calc(1.5em + 0.75rem + 2px); font-size: 15px; padding: 0.375rem 0.75rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #2936d5; }
.select2-container .select2-search--inline .select2-search__field { margin: 0; height: 22px; vertical-align: top; padding-left: 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 0 10px 0 0; border: 0; padding: 0 3px 0 20px; background-color: #f2f2f2; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { font-size: 13px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border-right: 1px solid #e1e1e1; }
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-top-left-radius: 15px; border-top-right-radius: 15px; }

.order-completed img { width: 125px; height: 125px; }
.order-completed svg { width: 125px; height: 125px; }
.order-completed svg path { fill: #2936d5; }
.order-completed svg circle { fill: #2936d5; }
.order-completed h3 { font-weight: 700; }

.empty-cart img { width: 175px; height: 175px; }
.empty-cart svg { width: 175px; height: 175px; }
.empty-cart svg path { fill: #adb8c350; }
.empty-cart svg circle { fill: #adb8c350; }

.login { height: 100vh; }
.login .left { align-items: center; display: grid; justify-content: center; position: fixed; width: 50%; left: 0; height: 100%; background: #2936d5; }
.register { height: 100vh; }
.register .left { align-items: center; display: grid; justify-content: center; position: fixed; width: 50%; left: 0; height: 100vh; background: #000; }
.login-header { align-self: end; margin-bottom: 47px; }
.login-header img { width: 250px; }
.login-content h2 { font-size: 28px; color: #fff; font-weight: 600; margin-bottom: 35px; }
.login-footer { align-self: end; font-size: 13px; color: rgba(255,255,255,0.4); display: grid; justify-items: center; }
.login-footer a { color: rgba(255,255,255,0.4); transition: all .3s; }
.login-footer a:hover { align-self: end; font-size: 13px; color: rgba(255,255,255,1); text-decoration: none; }
.login-footer ul { margin: 0; padding: 0; list-style-type: none; display: flex; }
.login-footer li { position: relative; }
.login-footer li:nth-child(2) { padding: 0 20px;  }
.login-footer li:nth-child(2):before { content: '\b7\a0'; position:absolute; left: 8px; }
.login-footer li:nth-child(2):after { content: '\b7\a0'; position:absolute; right: 5px; }
.login-footer p { margin-top: 10px; }
.login .right { align-items: center; display: flex; justify-content: center; position: absolute; right: 0; width: 50%; height: 100vh; }
.login .right-grid { align-items: center; display: grid; justify-content: center; position: absolute; right: 0; width: 50%; height: 100%; }
.register .right { height: 100vh; padding: 75px 0 100px; }
.reset .right .register-details { min-width: 340px; }

.login-carousel { width: 700px; position: relative; margin-top: 100px; margin-bottom: -65px; }
.carousel-content { position: absolute; top: 1.2%; right: 15.5%; bottom: 12.75%; left: 14.65%; border-radius: 3%/5%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; }
.carousel-content .carousel-cell img { width: 100%; object-fit: cover; height: 340px; object-position: left; }
.main-carousel { height: 100%; }
.flickity-viewport { height: 100% !important; }
.carousel-cell { width: 100%; height: 100%; counter-increment: gallery-cell; }

.carousel-logos { position: absolute; z-index: 999; position: relative; }
.logo-google { animation-name: speed-one; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 20px; top: -40px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-one { from { transform: translate(0,  0px); } 65% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-fb { animation-name: speed-two; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 65px; top: -50px; position: absolute; border-radius: 5px; }
@keyframes speed-two { from { transform: translate(0,  0px); } 45% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-gdv360 { animation-name: speed-three; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 15px; top: 165px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-three { from { transform: translate(0,  0px); } 65% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-youtube { animation-name: speed-four; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 205px; top: -45px; position: absolute; background: #ff0000; padding: 7px; border-radius: 5px; }
@keyframes speed-four { from { transform: translate(0,  0px); } 35% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-twitter { animation-name: speed-five; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 5px; top: 15px; position: absolute; background: #fff; border-radius: 5px; }
@keyframes speed-five { from { transform: translate(0,  0px); } 35% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-instagram { animation-name: speed-six; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 5px; top: 115px; position: absolute; border-radius: 5px; }
@keyframes speed-six { from { transform: translate(0,  0px); } 55% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-apple { animation-name: speed-seven; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 105px; top: -55px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-seven { from { transform: translate(0,  0px); } 35% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-bing { animation-name: speed-eight; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 15px; top: 0px; position: absolute; border-radius: 5px; }
@keyframes speed-eight { from { transform: translate(0,  0px); } 55% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-appstore { animation-name: speed-nine; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 185px; top: -55px; position: absolute; border-radius: 5px; }
@keyframes speed-nine { from { transform: translate(0,  0px); } 45% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-googleplay { animation-name: speed-ten; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; left: 20px; top: 65px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-ten { from { transform: translate(0,  0px); } 25% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-pinterest { animation-name: speed-eleven; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 5px; top: 60px; position: absolute; background: #e60023; padding: 7px; border-radius: 5px; }
@keyframes speed-eleven { from { transform: translate(0,  0px); } 65% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-snapchat { animation-name: speed-twelve; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 15px; top: 110px; position: absolute; border-radius: 5px; }
@keyframes speed-twelve { from { transform: translate(0,  0px); } 35% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-linkedin { animation-name: speed-thirteen; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 10px; top: 165px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-thirteen { from { transform: translate(0,  0px); } 55% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }
.logo-tiktok { animation-name: speed-fourteen; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; right: 140px; top: -55px; position: absolute; background: #fff; padding: 7px; border-radius: 5px; }
@keyframes speed-fourteen { from { transform: translate(0,  0px); } 35% { transform: translate(0, 5px); } to { transform: translate(0, -0px); } }

.login-account { text-align: center; }
.login-account h2 { font-size: 28px; color: #000; font-weight: 600; margin-bottom: 35px; }
.login-account p a { color: #000; }
.login-account label { font-size: 15px; font-weight: 500; padding-left: 5px; }
.login-account .form-control { border: none; background: #f2f2f2; }
.login-field { text-align: left; }
.login-link { display: block; font-size: 14px; color: #000; transition: all .3s; margin-top: 15px; }
.login-link:hover { color: #2936d5; text-decoration: none; }

.register-account { text-align: center; }
.register-account h2 { font-size: 28px; color: #000; font-weight: 600; margin-bottom: 35px; }
.register-account p a { color: #000; }
.register-account label { font-size: 15px; font-weight: 500; padding-left: 5px; }
.register-account .form-control { border: none; background: #f2f2f2; }
.register-field { text-align: left; }
.register-field .form-check { margin: 25px 0; }
.register-field .form-check-input { margin-top: 5px; }
.register-submit { text-align: left; }

.alert { font-size: 15px; border-radius: 15px; border: none; }

@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1270px; }
}

@media (max-width: 768px) {
body { padding-bottom: 265px; }
#header { padding: 25px 10px; }
#header .right-menu { flex-direction: initial; justify-content: center; }
#header .user-dropdown { margin-left: 1rem; }
#header .dropdown-notifications { right: -61px; top: 41px; }
#header .navbar-nav { text-align: center; margin: 15px 0; }
.navbar-nav .dropdown-menu { position: absolute; }
.userpanel-header h1 { font-size: 40px; line-height: 50px; }
.userpanel-header h3 { font-size: 22px; line-height: 30px; }
.home-services .card-service h2 { font-size: 26px; margin: 25px; }
.card-body h3 { text-align: center; }
.card-table .table thead { display: none; }
.card-table .table tbody tr { margin-bottom: 15px; display: block; }
.card-table .table tbody tr:last-child { margin-bottom: 0; }
.card-table .table tbody tr td { display: flex; align-content: end; align-items: center; width: 100%; }
.card-table .table tbody tr:first-child td:last-child { border-top-right-radius: 0px; }
.card-table .table tbody tr:last-child td:first-child { border-bottom-left-radius: 0; }
.card-table .table tbody tr td:first-child { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.card-table .table tbody tr td:last-child { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.steps:before { border-bottom: 0px; }
.steps .col { display: none; }
.steps .active.col { display: grid; margin-bottom: 0; }
.payment-methods { position: relative; margin-top: -52px; margin-bottom: 15px; text-align: center; }
.payment-methods img { width: 95%; }
.hide-last-td td:nth-child(2) { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.hide-last-td td:last-child { display: none !important; }
.table-empty tbody tr td { border-radius: 15px !important; min-height: 150px; justify-content: center; }
.card-body-banners { display: contents; text-align: center; }
.order-completed p.mb-5 br { content: ' '; }
.order-completed p.mb-5 br:after { content: ' '; }
.profile-photo { width: 100%; max-width: 100%; flex: 1; margin-bottom: 25px; margin-top: -25px; }
.btn { padding: 7px 25px; min-width: auto; }
.btn-delete { padding: 7px; }
.hide-mob { display: none !important; }
.filter div { margin-bottom: 10px; }
.filter .text-right { display: none; }
.col { margin-bottom: 25px; flex-basis: unset; }
.row .col:last-child { margin-bottom: 0; }
.login .left { position: relative; min-height: 375px; width: 100%; }
.login-footer { display: none; }
.login .right { position: relative; right: 0px; width: 100%; padding: 50px 50px 75px; }
.login .right-grid { position: relative; right: 0px; width: 100%; padding: 50px 50px 75px; }
.login-content h2 { font-size: 23px; }
.login-account h2 { font-size: 23px; }
.register-account h2 { font-size: 23px; }
.login-header { margin-bottom: 75px; margin-top: 75px; }
.login-carousel { width: auto; margin-bottom: 55px; }
.login-content { margin-bottom: 55px; }
.logo-apple { left: 82px; }
.card.card-table { overflow-y: auto; }
.copyright .col-lg-12 { display: grid; justify-content: center; text-align: center; }
.copyright ul { display: grid; margin-top: 20px; }
.copyright li { padding-right: 0px; }
.copyright li:after { content: ''; }
}