@font-face { font-family: 'almoni-neue'; font-weight: 400; /*(light)*/ font-style: normal; src: url('../fonts/almoni-neue-regular-aaa.woff2') format('woff2'), url('../fonts/almoni-neue-regular-aaa.woff') format('woff'); }
/*@font-face { font-family: 'almoni-neue'; font-weight: 500; font-style: normal; src: url('../fonts/almoni-neue-aaa-500.woff2') format('woff2'), url('../fonts/almoni-neue-aaa-500.woff') format('woff'); }*/
@font-face { font-family: 'almoni-neue'; font-weight: 600; /*(demibold)*/ font-style: normal; src: url('../fonts/almoni-neue-demibold-aaa.woff2') format('woff2'), url('../fonts/almoni-neue-demibold-aaa.woff') format('woff'); }
/*@font-face { font-family: 'almoni-neue'; font-weight: 700; font-style: normal; src: url('../fonts/almoni-neue-bold-aaa.woff2') format('woff2'), url('../fonts/almoni-neue-bold-aaa.woff') format('woff'); }*/
@font-face { font-family: 'CeraGR'; font-weight: 900; /*(black)*/ font-style: normal; src: url('../fonts/CeraGRBlack-Richkid.woff2') format('woff2'), url('../fonts/CeraGRBlack-Richkid.woff') format('woff'); }

body { width: 100%; min-height: 100vh; font-size: 16px; font-family: 'almoni-neue'; font-weight: 400; color: #001730; text-align: right; direction: rtl; }
img { max-width: 100%; }
a, a:hover, a:active, a:focus, button { text-decoration: none; color: #001730; }
h1, h2, h3, h4, h5, h6, p, ul { padding: 0; margin: 0; }
ul { list-style: none; }
button { background: no-repeat; border: none; padding: 0; }

body.stage-open .site-header, body.inner-page .site-header { background-image: url(../images/mainBG.jpg); background-size: cover; background-position: right bottom; background-repeat: no-repeat; }

.app-btn { max-width: 430px; min-height: 140px; text-align: center; border-radius: 20px; padding: 15px 30px; margin: 15px; }
.app-btn.app-btn-primary { position: relative; background-color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 6px 10px 20px 0 rgba(0, 0, 0, 0.16); box-shadow: 6px 10px 20px 0 rgba(0, 0, 0, 0.16); }
.app-btn.app-btn-light { color: #fff; background-color: rgba(0, 0, 0, 0.3); -webkit-box-shadow: 6px 10px 20px 0 rgba(0, 0, 0, 0.16); box-shadow: 6px 10px 20px 0 rgba(0, 0, 0, 0.16); }

.btn { border-radius: 5px; border: none; white-space: nowrap; }
.btn.btn-underline { padding: 0; border-bottom: 1px solid; border-radius: 0; line-height: 0.9; }
.btn.btn-primary { background-color: #001730; min-width: 190px; height: 50px; font-size: 22px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.btn.btn-warning { min-width: 240px; height: 50px; font-weight: 600; font-size: 22px; background-color: #ffbf30; }
.btn.btn-link { color: #fff; font-weight: 400; font-size: 120%; }
.btn.btn-white { background-color: #fff; font-weight: 400; border-radius: 3px; }
.btn.btn-default { background-color: #fff; height: 50px; font-size: 22px; border: solid 1px #001730; }
.btn.disabled, .btn:disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .2; }
.btn-red-color { font-size: 18px; color: #973654; font-weight: 600; }

.app-btn h4 { font-size: 190%; font-weight: 600; }
.app-btn p { font-size: 113%; line-height: 1.2; margin-top: 3px; }

hr.bold-hr { border-top: 1px solid #001730; }

.wrapper { background-image: url(../images/mainBG.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh; width: 100%; position: absolute; top: 0; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; z-index: 1; }

.main-buttons-wrapper.main-first-step-buttons > * { width: 100%; }
.main-buttons-wrapper.main-second-step-buttons > * { width: calc(33.333% - 30px); }

.main-buttons-wrapper.main-second-step-buttons .app-btn h4 { font-size: 175%; }

.btn-socials-icons { position: absolute; left: 10px; top: 10px; direction: ltr; }
.btn-socials-icons > * { width: 15px; height: 15px; display: inline-block; background-position: center; background-size: contain; background-repeat: no-repeat; }
.btn-socials-icons > *:not(:last-child) { margin-right: 5px; }
.btn-socials-icons .btn-icon-facebook { background-image: url(../images/FB.png); }
.btn-socials-icons .btn-icon-instagram { background-image: url(../images/IG.png); }

.main-app-view { text-align: center; margin-top: 80px; margin-bottom: 40px; }
.main-app-view h2 { color: #fff; font-size: 250%; font-weight: 600; }
.main-app-view h3 { color: #fff; font-size: 175%; margin-bottom: 10px; }

.pagingAnimation { position: relative; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: all .8s ease; transition: all .8s ease; }
.pagingAnimation.in { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: all; visibility: visible; }

.main-step { position: relative; top: 0; width: 100%; display: none; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all .8s ease; transition: all .8s ease; }
.main-step.active { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translateY(0); transform: translateY(0); }

.form-checkbox { width: 100%; position: relative; margin-top: 30px; margin-bottom: 0; padding-right: 21px; margin-right: 5px; display: inline-block; font-weight: normal; font-size: 107%; cursor: pointer; }
.form-checkbox input[type="checkbox"] { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 16px; height: 16px; border: solid 1px #aab4be; background-color: #f3f8fb; -webkit-appearance: none; }
.form-checkbox input[type=checkbox] + span { position: absolute; width: 16px; height: 16px; top: 4px; right: 0px; text-align: center; display: none; border: solid 1px #d8e3eb; background-color: #62b44b; }
.form-checkbox input[type=checkbox]:checked + span { display: block; }
.form-checkbox input[type=checkbox] + span > svg { width: 9px; height: 9px; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

@keyframes animate {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(220deg) }
}

@keyframes animate2 {
    0% { box-shadow: inset #C46A45 0 0 0 17px; transform: rotate(-140deg); }
    50% { box-shadow: inset #441597 0 0 0 2px; }
    100% { box-shadow: inset #C46A45 0 0 0 17px; transform: rotate(140deg); }
}

.loader-animation { position: absolute; left: 50%; top: 20%; height: 100px; width: 100px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.mood-dropdown { width: 100%; height: 52px; display: inline-block; background-color: #f3f8fb; border: none; border-bottom: 2px solid rgba(0, 23, 48, 0.3); transition: all .5s ease; position: relative; text-align: right; }
.mood-dropdown:after { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; /*background-image: url(../images/dropdown_arrow.png);*/ background-repeat: no-repeat; background-size: contain; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.mood-dropdown .mood-select { /*cursor: pointer;*/ height: 100%; padding: 10px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
.mood-dropdown .mood-select > span { display: block; font-size: 120%; }
.mood-dropdown .mood-select > i { font-size: 13px; color: #888; cursor: pointer; transition: all .3s ease-in-out; float: right; line-height: 20px }
.mood-dropdown:active { background-color: #f8f8f8 }
.mood-dropdown.active .select > i { transform: rotate(-90deg) }
.mood-dropdown .mood-dropdown-menu { position: absolute; background-color: #fff; width: 100%; left: 0; margin-top: 1px; box-shadow: 0 1px 2px rgb(204, 204, 204); border-radius: 0 1px 5px 5px; overflow: hidden; display: none; max-height: 144px; overflow-y: auto; z-index: 9 }
.mood-dropdown .mood-dropdown-menu li { padding: 10px; transition: all .2s ease-in-out; cursor: pointer }
.mood-dropdown .mood-dropdown-menu { padding: 0; list-style: none }
.mood-dropdown .mood-dropdown-menu li:hover { background-color: #f2f2f2 }
.mood-dropdown .mood-dropdown-menu li:active { background-color: #e2e2e2 }

.mood-dropdown.credit-card-select { outline: 0; }
.mood-dropdown.credit-card-select:after { left: 20px; }
.mood-dropdown.credit-card-select .mood-dropdown-menu { max-height: 75px; }
.mood-dropdown.credit-card-select .mood-dropdown-menu li { font-size: 17px; padding: 5px 15px; transition: all .2s ease-in-out; cursor: pointer; }
.mood-dropdown.credit-card-select .mood-select > span { font-size: 18px; display: inline-block; max-width: 50%; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }
.credit-card-select_logo { padding: 0 15px; margin-left: 15px; border-left: 1px solid #d8e3eb; }
.credit-card-select_logo img { max-width: 45px; }
.mood-dropdown.credit-card-select .mood-dropdown-menu li:before { content: ""; width: 25px; height: 25px; margin-left: 5px; display: inline-block; background-position: center; background-size: contain; background-repeat: no-repeat; }
.mood-dropdown.credit-card-select .mood-dropdown-menu li.mood-dropdown-visa:before { background-image: url(../images/credit_cards/visa.png); }
.mood-dropdown.credit-card-select .mood-dropdown-menu li.mood-dropdown-mastercard:before { background-image: url(../images/credit_cards/Mastercard-logo.png); }
.mood-dropdown.credit-card-select .mood-dropdown-menu li.mood-dropdown-american:before { background-image: url(../images/credit_cards/Amex.png); }

.notification-strip { background-color: #fff; text-align: center; padding: 8px 0; z-index: 0; position: relative; }
.notification-strip p { font-size: 114%; font-weight: 600; }
.notification-strip a.btn { height: 34px; font-size: 16px; margin-left: 15px; padding: 5px; }

.floating-input-wrapper > div label:not(.error) { width: 100%; font-size: 18px; font-weight: 400; pointer-events: none; margin-bottom: 0; position: absolute; right: 10px; top: 10px; transition: .3s ease; z-index: 1; }
.floating-input-wrapper > div.focus label:not(.error) { top: -25px; right: 0; font-size: 90%; }
label.error { position: absolute; top: -20px; left: 0; color: #f15a55; font-size: 14px; }

.months-paging-wrapper { float: left; padding: 0 5px; width: 170px; height: 32px; border-radius: 30px; box-shadow: 6px 5px 21px 0 rgba(0, 0, 0, 0.06); background-color: #f3f8fb; }
.months-paging-wrapper .months-arrow { width: 22px; height: 22px; background-color: #001730; border-radius: 50%; }
.months-paging-wrapper .months-arrow svg { vertical-align: middle; width: 7px; }
.months-paging-wrapper .months-arrow.month-prev svg { margin-left: 2px; }
.months-paging-wrapper .months-arrow.month-disabled { opacity: 0.2; pointer-events: none; }
.months-paging-text { max-width: 65%; font-size: 107%; text-align: center; white-space: nowrap; overflow: hidden; }


@media(max-width: 991px) {
    .wrapper { background-position: right bottom; }
    .main-app-view { margin-bottom: 20px; }
    .main-buttons-wrapper { padding-bottom: 30px; }
    .main-buttons-wrapper.main-second-step-buttons > * { width: 100%; }
}

@media(max-width: 767px){
    .main-app-view { text-align: right; margin-top: 40px; }
    .main-app-view h2 { font-size: 24px; font-weight: 400; font-weight: 400;}
    .main-app-view h3 { font-size: 20px; margin-bottom: 5px; font-weight: 400; }

    .btn.btn-warning { font-size: 18px; height: 46px; padding: 10px; }

    .main-buttons-wrapper { padding-bottom: 45px; }
    .app-btn { min-height: 120px; text-align: right; margin: 10px 0; padding: 15px 25px; }
    .app-btn h4 { font-size: 24px; }
    .app-btn p { font-size: 16px; }
    .btn.btn-primary { min-width: 175px; height: 46px; font-size: 20px; padding: 8px 20px; }
    .main-buttons-wrapper.main-second-step-buttons .app-btn h4 { font-size: 22px;  }
}

@media(max-width: 375px){
    .app-btn h4 { font-size: 6.25vw; }
}

/** Bootstrap */

.container-fluid { padding: 0 40px; }
.container { max-width: 1230px; padding: 0 30px; }
.form-control { height: 50px; font-size: 18px; background-color: #fff; border: none; border-bottom: 2px solid rgba(0, 23, 48, 0.3); box-shadow: none; border-radius: 0; }
textarea.form-control { overflow: hidden; resize: none; }
.form-control:disabled, .form-control[readonly] { background-color: #dedede; }
.white-box-input.form-control { background-color: #f3f8fb; }

@media(max-width: 991px) {
    .container-fluid { padding: 0 20px; }
}

@media(max-width: 767px) {
    .container { padding: 0 15px; }
    .white-box-input.form-control { background-color: #fff; }
}

/** Header Styles */
.site-header { position: relative; -webkit-transition: all 1s ease; transition: all 1s ease; z-index: 10; }
.site-header:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.15); z-index: -1; }
.site-header .header-desktop { height: 100px; z-index: 1; }
.site-header .header-desktop .site-logo { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.header-right { position: relative; height: 100%; width: 33%; }
.header-right .initial-header-controls, .header-right .app-restart-control { position: absolute; top: 50%; right: 0; width: 100%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.header-right .app-restart-control { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translate(-25px, -50%); transform: translate(-25px, -50%); }
.header-right .initial-header-controls { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
body.stage-open .header-right .app-restart-control { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
body.stage-open .header-right .initial-header-controls { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translate(-25px, -50%); transform: translate(-25px, -50%); }

.mobile-header-left { position: relative; height: 100%; width: 50%; }
.mobile-header-left .site-logo, .mobile-header-left .app-restart-control { position: absolute; top: 50%; left: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.mobile-header-left .site-logo { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.mobile-header-left .app-restart-control { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translate(25px, -50%); transform: translate(25px, -50%); }
.mobile-header-left .app-restart-control .btn.btn-link { font-size: 100%; padding: 0; white-space: nowrap; }

body.stage-open .mobile-header-left.show-restart .app-restart-control { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
body.stage-open .mobile-header-left.show-restart .site-logo { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translate(25px, -50%); transform: translate(25px, -50%); }

.header-left .dropdown-menu { width: 100%; text-align: right; padding: 30px 20px 20px; border-radius: 5px; transform: translate3d(0, 45px, 0px) !important; }
.header-left .user-menu-block { padding-bottom: 20px; }
.header-left .devide-drop-menu { border-bottom: 1px solid #eaeef2; margin-bottom: 20px; }
.header-left .user-menu-block:not(.no-border) { /*border-bottom: 1px solid #d8e3eb;*/ margin-bottom: 20px; }
.header-left .user-menu-block .user-menu-title { font-size: 18px; font-weight: 600; color: #001730; margin-bottom: 8px; }
.header-left .user-menu-links > li { margin-bottom: 8px; line-height: 1.4; }
.header-left .user-menu-links > li a { color: #63696e; }
.header-left .user-menu-links-chosen { border-bottom: solid 2px #ffbf30; }

#businessList.user-menu-links > li.active { font-weight: 600; }
#businessList.user-menu-links > li.active > a:after { content: ""; position: relative; top: -1px; margin-right: 5px; width: 16px; height: 16px; display: inline-block; vertical-align: middle; background-image: url(../images/selectedBusiness.png); background-size: contain; background-position: center; background-repeat: no-repeat; }

.initial-header-controls .btn.btn-warning { min-width: 0; font-size: 18px; font-weight: 600; border-radius: 5px; padding: 3px 20px; height: 34px; }
.initial-header-controls a:not(.btn) { color: #fff; font-size: 120%; font-weight: 600; }
.initial-header-controls > div > *:not(:last-child) { margin-left: 20px; }

.user-logged-box { height: 40px; padding-left: 15px; border-left: 1px solid rgba(255,255,255,0.3); cursor: pointer; }
.site-header .user-logged-box .user-logged-thumb { width: 40px; height: 40px; margin-left: 10px; font-size: 20px; font-weight: 600; text-transform: uppercase; border-radius: 50%; background-color: #eaeef2; background-size: cover; background-position: center; background-repeat: no-repeat; }

.user-logged-info { color: #fff; }
.user-logged-info > * { line-height: 1; }
.user-logged-info .user-logged-name { font-size: 100%; margin-bottom: 3px; }
.user-logged-info .user-logged-business { width: 140px; }
.user-logged-info .user-logged-business .logged-business-name { letter-spacing: 0.5px; display: inline-block; max-width: 90%; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }
.user-logged-info .user-logged-business .business-drop-icon { line-height: 1; vertical-align: top; }

.user-header-notifications { margin-right: 15px; }
.notifications-button { background: #fff; border-radius: 50%; width: 40px; height: 40px; position: relative; vertical-align: middle; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.notifications-button svg { fill: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.header-mobile .mobile-header-top { height: 60px; font-size: 160%; color: #fff; background-color: rgba(0,0,0,0.15); }
.header-mobile .mobile-header-top .business-drop-icon svg { width: 10px; height: 8px; margin-right: 5px; }
.header-mobile .mobile-header-main { height: 80px; }
.header-mobile .mobile-header-main .user-logged-box { height: auto; margin-left: 0; border: none; padding-left: 0; }
.header-mobile .mobile-header-main .user-logged-box .user-logged-thumb { width: 50px; height: 50px; }
.header-mobile .mobile-header-main .site-logo > a > svg { height: 28px; width: 110px; }
.header-mobile .mobile-header-main .user-logged-info .user-logged-business { width: 100%; }
.header-mobile .mobile-header-main .user-logged-info .user-logged-business .logged-business-name { max-width: 100%; font-size: 120%; color: rgba(255,255,255,0.7); }
.header-mobile .mobile-header-main .user-logged-info .user-logged-name { font-size: 160%; }

.user-mobile-menu { width: 520px; height: 100vh; position: fixed; top: 0; right: -520px; padding: 15px; background-color: #fff; z-index: 105; }
.user-mobile-menu .mobile-menu-header { height: 38px; }
.user-mobile-menu .mobile-menu-header .btn-close-menu { width: 60px; height: 60px; border: none; border-radius: 50%; float: left; color: #001730; background-color: #f3f8fb; }
.user-mobile-menu .mobile-menu-header .btn-close-menu svg { width: 18px; height: 18px; vertical-align: middle; }
.user-mobile-menu .mobile-menu-footer { position: fixed; bottom: 0; height: 100px; padding-right: 15px; }
.user-mobile-menu .mobile-menu-footer .logout-btn { width: 150px; height: 45px; border-radius: 3px; font-size: 120%; padding: 8px; border: solid 2px #ccd0d5; }
.user-mobile-menu .mobile-menu-content { height: calc(100% - 60px); padding-right: 15px; padding-left: 15px; }
.user-mobile-menu .mobile-menu-content .user-logged-box { height: auto; margin-top: 15px; padding-bottom: 40px; border-bottom: 2px solid #d8e3eb; }
.user-mobile-menu .mobile-menu-content .user-menu-links > li { padding: 20px 0; border-bottom: 2px solid #d8e3eb; }
.user-mobile-menu .mobile-menu-content .user-menu-links > li.user-menu-links-chosen { border-bottom: solid 2px #ffbf30; }
.user-mobile-menu .mobile-menu-content .user-menu-links > li a { font-size: 135%; color: #001730; }
.user-mobile-menu .mobile-menu-content .user-menu-links > li a svg { width: 40px; margin-left: 15px; vertical-align: middle; }
.user-mobile-menu .mobile-menu-content .user-logged-thumb { width: 70px; height: 70px; text-transform: uppercase; background-color: #eaeef2; background-size: cover; background-position: center; border-radius: 50%; }
.user-mobile-menu .mobile-menu-content .user-logged-thumb img { max-height: 100%; border-radius: 50%; }
.user-mobile-menu .mobile-menu-content .user-logged-info { margin-right: 15px; color: #001730; }
.user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-name { font-size: 180%; font-weight: 600; }
.user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-business { width: 240px; font-size: 140%; }


@media(max-width: 767px) {
    .container-fluid { padding: 0 15px; }
    .header-mobile .mobile-header-top { height: 50px; font-size: 147%; }
    .header-mobile .mobile-header-main { height: 70px; }
    .header-mobile .mobile-header-main .user-logged-info .user-logged-name { font-size: 147%; }
    .header-mobile .mobile-header-main .user-logged-box .user-logged-thumb { width: 50px; height: 50px; }
    .user-mobile-menu { width: 80vw; right: -80vw; }
    .user-logged-info .user-logged-business .logged-business-name { max-width: 100%; width: 100%; display: block; }
    .user-mobile-menu .mobile-menu-header .btn-close-menu { width: 40px; height: 40px; }
    .user-mobile-menu .mobile-menu-header .btn-close-menu svg { width: 14px; height: 14px; }
    .user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-name { font-size: 160%; }
    .user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-business { width: 100%; font-size: 120%; }
    .user-logged-box { padding-left: 0; margin-left: 0; }
    .user-mobile-menu .mobile-menu-content .user-logged-thumb { width: 50px; height: 50px; }
    .user-mobile-menu .mobile-menu-content .user-menu-links > li a svg { width: 30px; height: 30px; margin-left: 10px; }
    .user-mobile-menu .mobile-menu-footer { height: 75px; }
    .user-mobile-menu .mobile-menu-footer .logout-btn { width: 110px; height: 36px; font-size: 100%; padding: 5px; }
    .user-mobile-menu .mobile-menu-content .user-menu-links > li { padding: 15px 0; }
    .user-mobile-menu .mobile-menu-content .user-menu-links > li a { font-size: 134%; }
    .mobile-header-left { width: 35%; }
    .header-mobile .mobile-header-main .user-logged-info .user-logged-business { width: 100%; }
}

@media(max-width: 480px) {
    .header-mobile .mobile-header-main .user-logged-box .user-logged-thumb { width: 40px; height: 40px; }
    .header-mobile .mobile-header-main .site-logo > a > svg { height: 22px; width: 90px; }
    .header-mobile .mobile-header-main .user-logged-info .user-logged-name { font-size: 5vw; }
    .header-mobile .mobile-header-main .user-logged-info .user-logged-business .logged-business-name { font-size: 4vw; }
    .user-mobile-menu .mobile-menu-content .user-logged-info { width: calc(100% - 11vw); }
    .user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-name { font-size: 6vw; }
    .user-mobile-menu .mobile-menu-content .user-logged-info .user-logged-business { font-size: 4.5vw; }
    .user-mobile-menu .mobile-menu-content .user-menu-links > li a { font-size: 5vw; }
    .user-mobile-menu .mobile-menu-content .user-logged-thumb { width: 11vw; height: 11vw; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; }
    .user-mobile-menu .mobile-menu-content .user-logged-box { padding-bottom: 30px; }
    .header-mobile .mobile-header-top { font-size: 6vw; }
    .user-mobile-menu .mobile-menu-content { padding-left: 10px; padding-right: 10px; overflow-y: scroll; padding-bottom: 50px; }
    .user-mobile-menu .mobile-menu-content .user-menu-links > li a svg { width: 25px; height: 25px; margin-left: 8px; }
}

/** Popups */

.bg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; background-color: rgba(0,0,0,0.7); -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; z-index: -1; }
body.overlay .bg-overlay { opacity: 1; visibility: visible; pointer-events: all; z-index: 100; }
.bottom-popup { position: fixed; bottom: -110vh; width: 100%; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch; background-color: #fff; z-index: 1000; }
.bottom-popup-content.approval-content { max-width: 480px; padding: 20px 15px 0; margin: 0 auto; text-align: center; }
.bottom-popup-content.approval-content lottie-player { width: 145px; height: 145px; }
.bottom-popup-content.campaign-review-content { max-width: 650px; padding: 0 15px; margin: 0 auto; text-align: center; }
.bottom-popup-content.campaign-cancel-approval-content { max-width: 300px; padding: 0 15px; margin: 0 auto; text-align: center; }
.order-approval-message h3 { font-size: 32px; font-weight: 600; margin-bottom: 15px; }
.order-approval-message h4 { font-size: 22px; font-weight: 400; }
.order-approval-message p { font-size: 18px; margin-top: 20px; margin-bottom: 30px; }
.order-approval-message p a { text-decoration: underline; }
.bottom-popup-content.campaign-cancel-confirmed-content { max-width: 460px; padding: 0 15px; margin: 0 auto; text-align: center; }
.pop-preview-text-placeholder > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.pop-preview-img-placeholder { width: 120px; height: 120px; }
.pop-preview-img-placeholder .post-strip-gallery { height: 120px; max-height: 100%; }
.pop-preview-title-placeholder { font-size: 20px; font-weight: 600; line-height: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.popup-close-btn { width: 32px; height: 32px; border-radius: 50%; background-color: #f3f8fb; }
.bottom-popup-pricing { font-size: 18px; margin-top: 20px; }
.order-billing-title { font-size: 20px; }

/*.order-approval-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 10; }
.order-approval-block.active { opacity: 1; visibility: visible; pointer-events: all; }
.order-approval-block_inner { max-width: 300px; height: 100%; margin: 0 auto; }
.order-approval-block_inner h3 { font-weight: 600; }
.order-approval-block_inner p { font-size: 18px; }*/

.popup-loader-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,1); opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 10; }
.popup-loader-wrapper.active { opacity: 1; visibility: visible; pointer-events: all; }
.popup-loader-wrapper_inner { max-width: 300px; height: 100%; margin: 0 auto; }
.popup-loader-wrapper_inner .loader-animation { top: 20%; }
.popup-loader-wrapper_inner h3 { font-weight: 600; }
.popup-loader-wrapper_inner p { font-size: 18px; }

.campaign-review-thumb { flex: 0 0 260px; width: 260px; height: 260px; border-radius: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.campaign-review-detials h3 { font-size: 22px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.campaign-review-detials p { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.campaign-review-detials a { font-size: 16px; color: #8d9ba7; position: relative; padding-right: 22px; }
.campaign-review-detials a:before { content: ""; position: absolute; right: 0; top: 50%; width: 16px; height: 16px; background-image: url(../images/link_icon.png); background-size: contain; background-position: center; background-repeat: no-repeat; transform: translateY(-50%); }
.campaign-preview-links {display:block;}
.campaign-preview-links > button { font-size: 14px; text-decoration: underline; white-space: nowrap; }
/*.campaign-preview-links > button:not(:first-child) { margin-right: 15px; }
.campaign-preview-links > button:before { content: ""; width: 16px; height: 16px; display: inline-block; margin-left: 5px; vertical-align: middle; background-size: contain; background-position: center; background-repeat: no-repeat; }
.campaign-preview-links > button.facebook-link:before { background-image: url(../images/FB.png); }
.campaign-preview-links > button.instagram-link:before { background-image: url(../images/IG.png); }*/

.campaign-preview-links > label:before { content: ""; width: 16px; height: 16px; display: inline-block; margin-left: 5px; vertical-align: middle; background-size: contain; background-position: center; background-repeat: no-repeat; }
.campaign-preview-links > label.facebook-link:before { background-image: url(../images/FB.png); }
.campaign-preview-links > label.instagram-link:before { background-image: url(../images/IG.png); }

.campaign-preview-performance { padding: 20px 0; margin-top: 30px; border-top: 1px solid #d8e3eb; }
.campaign-preview-performance label, .campaign-preview-info label { font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-left: 3px; white-space: nowrap; }
.campaign-preview-performance span, .campaign-preview-info span { font-size: 18px; }

.campaign-preview-info { padding: 20px 0; border-top: 1px solid #d8e3eb; border-bottom: 1px solid #d8e3eb; }
.campaign-preview-info ul.campaign-preview-list > li { position: relative; padding-right: 15px; }
.campaign-preview-info ul.campaign-preview-list > li:before { content: ""; position: absolute; width: 10px; height: 10px; top: 50%; right: 0; background-image: url(../images/check.png); background-repeat: no-repeat; background-size: contain; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.campaign-review-stop-btn, .campaign-review-stop-btn:hover { padding: 0; text-decoration: underline; }

.ad-preview-popup { position: fixed; top: 0; right: -600px; width: 600px; height: 100vh; padding: 60px; background-color: #fff; overflow-y: auto; z-index: 105; }
.ad-preview-popup .btn-close-menu { width: 32px; height: 32px; border-radius: 50%; background-color: #f3f8fb; }

/* copy popup from ad-preview*/
.ads-generator-popup { position: fixed; top: 0; right: -740px; width: 740px; max-width: 100%; height: 100vh; padding: 60px; background-color: #fff; overflow-y: auto; z-index: 105; }
.ads-generator-popup .btn-close-menu { width: 32px; height: 32px; border-radius: 50%; background-color: #f3f8fb; }

.campaign-cancel-approval-content lottie-player { width: 130px; height: 130px; }
.campaign-cancel-approval-content h3 { font-size: 30px; font-weight: 600; }

.campaign-cancel-confirmed-content lottie-player { width: 150px; height: 150px; }
.campaign-cancel-confirmed-content p { font-size: 18px; }
.campaign-cancel-confirmed-content h3 { font-size: 30px; font-weight: 600; }

.commission-note { margin-bottom: 25px; margin-top: 8px; text-align: right; color: #63696e; font-size: 88%; line-height: 1.25; }

@media(max-width: 767px) {
    .bottom-popup { max-height: calc(100vh - 150px); }
    .bottom-popup-pricing { font-size: 16px; }
    .order-billing-title { font-size: 18px; }
    .pop-preview-text-placeholder { line-height: 1.25; }

    .campaign-review-thumb { margin: 0 auto; }
    .campaign-preview-performance span { display: block; text-align: center; padding: 0 15px; }
    .campaign-preview-performance label { font-size: 16px; }
    .campaign-preview-mobile-title { font-size: 20px; font-weight: 600; }
    .campaign-preview-mobile-label { font-size: 20px; }
    .campaign-preview-mobile-sublabel { color: #63696e; }

    .campaign-cancel-approval-content h3 { font-size: 22px; }
    .bottom-popup-content.campaign-cancel-approval-content { max-width: 265px; }
    .campaign-cancel-approval-content lottie-player { width: 115px; height: 115px; }

    .campaign-cancel-confirmed-content h3 { font-size: 26px; }
    .campaign-cancel-confirmed-content p { font-size: 16px; }

    .bottom-popup-content.campaign-cancel-confirmed-content { max-width: 320px; }
    .ad-preview-popup { width: 100%; height: 100%; padding: 30px; }

    .ads-generator-popup { padding: 30px; }
}

/** Images Upload Box */
.images-upload-box { width: 100%; max-width: 450px; height: 450px; margin: 0 auto; background-color: #fff; border-radius: 10px; }
.images-upload-box .images-input { position: absolute; width: 100%; height: 100%; cursor: pointer; opacity: 0; z-index: 1; }
.images-upload-box h4 { font-size: 18px; font-weight: 400; }
.images-upload-box p { font-size: 14px; color: #8d9ba7; }
.upload-plus-icon { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 10px; background-color: #f3f8fb; }

.image-crop-wrapper { max-width: 450px; margin: 0 auto; }
.file-upload-wrapper, .cropper_container { width: 450px; height: 450px; margin: 0 auto; background-color: #fff; border-radius: 10px; position: relative; }
.cropper-crop-box { border-radius: 10px; outline: none; }
#CropperSlider { direction: ltr; width: 100%; height: 100%; }
.cropper-slider-item { position: absolute; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.cropper-slider-item.current { opacity: 1; visibility: visible; pointer-events: all; }
.cropper-slider-item:first-child { display: block; }
.cropper-slider-item > img { position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; top: 50%; left: 50%; border-radius: 10px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.crop-slider-dots { direction: ltr; margin-top: 15px; overflow: hidden; text-align: left; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }
.crop-slider-dots.dots-disabled { pointer-events: none; opacity: 0.2; }
.crop-slider-dots .image-dot, .crop-slider-dots .upload-more { margin-right: 12px; min-width: 18px; display: inline-block; font-size: 120%; vertical-align: middle; }
.crop-slider-dots .upload-more button { background: no-repeat; border: none; padding: 0; vertical-align: middle; }
.crop-slider-dots .image-dot.active > button { font-weight: 600; }
.upload-more-icon { display: block; width: 28px; height: 28px; background-image: url(../images/upload-more.png); background-repeat: no-repeat; background-size: contain; background-position: center; }

.crop-action-btn { position: absolute; top: 15px; width: 36px; height: 36px; z-index: 10; }
.crop-action-btn button { width: 100%; height: 100%; background-color: #f3f8fb; border-radius: 50%; position: relative; }
.crop-action-btn button svg { height: 18px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.crop-action-btn.crop-edit-btn { left: 15px; }
.crop-action-btn.crop-remove-btn { right: 15px; }

.crop-save-mode, .crop-replace { position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.crop-save-mode button { height: 32px; width: 80px; border-radius: 5px; background-color: #ffbf30; }
.crop-save-mode button > * { vertical-align: middle; }

.cropper_container .crop-action-btn.crop-edit-btn, .cropper_container.crop-disabled .crop-save-mode, .cropper_container .crop-drag-message, .crop-replace { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.cropper_container.crop-disabled .crop-action-btn.crop-edit-btn, .cropper_container .crop-save-mode, .cropper_container.show-drag-message .crop-drag-message, .cropper_container.crop-disabled .crop-replace { opacity: 1; visibility: visible; pointer-events: all; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.cropper-crop-box .cropper-center { display: none; }

.crop-drag-message { position: absolute; top: 50%; left: 50%; padding: 5px 10px; white-space: nowrap; border-radius: 4px; color: #fff; border: solid 2px #fff; background-color: rgba(0, 0, 0, 0.7); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.crop-drag-message svg { vertical-align: middle; margin-left: 5px; }

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { cursor: unset; }
.cropper-view-box { outline: none !important; }

.sicu-stage { position: relative; top: 0; width: 100%; min-height: 100%; display: none; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all .8s ease; transition: all .8s ease; }
.sicu-stage.active { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translateY(0); transform: translateY(0); }
.sicu-title { font-size: 32px; font-weight: 600; }

@media(max-width: 767px){
    .images-upload-box { height: calc(100vw - 30px); }
    .file-upload-wrapper, .cropper_container { width: 100%; max-width: 450px; height: calc(100vw - 30px); }
    .crop-slider-dots .image-dot, .crop-slider-dots .upload-more { font-size: 18px; }
}

/** Error Popup */
.bottom-popup-content.error-content { max-width: 450px; margin: 15px auto; text-align: center; }
.bottom-popup-content.error-content h2 { font-weight: 600; }
.bottom-popup-content.error-content h3 { font-size: 22px; font-weight: 400; }
.bottom-popup-content.error-content p { font-size: 18px; line-height: 1.5; }
.error-popup-graphics { width: 80px; height: 80px; margin: 45px auto 15px; }
.error-popup-graphics svg { width: 100%; height: 100%; }

/** inner Pages */

body::-webkit-scrollbar { display: none; }

body.inner-page { overflow: hidden; position: fixed; top: 0; z-index: -1; }
body.inner-page .wrapper { overflow: hidden; }
.inner-page-wrapper { width: 100%; height: calc(100vh - 100px); background-color: #eaeef2; position: absolute; padding: 70px 0; text-align: right; -webkit-overflow-scrolling: touch; overflow-y: scroll; -ms-overflow-style: none; overflow: -moz-scrollbars-none; }
.inner-page-wrapper::-webkit-scrollbar { display: none; }
.inner-page-title h2 { font-size: 42px; font-weight: 600; }

.account-page-wrapper { max-width: 800px; margin: 0 auto; padding: 0 30px; }
.account-page-wrapper .heading-with-upload { padding-bottom: 10px; border-bottom: 2px solid #f3f8fb; }
.account-page-wrapper .account-logo { display: block; width: 90px; height: 90px; border-radius: 50%; position: relative; background-color: #fff; }
.account-page-wrapper .logo-upload-box { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; }

.account-page-wrapper .account-image-thumb { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.account-page-wrapper .account-upload-link { width: 30px; height: 30px; position: absolute; right: -5px; bottom: 0; border-radius: 50%; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.09); background-color: #ffffff; z-index: 25; }
.account-page-wrapper .account-upload-link svg { fill: #7d8a97; }

.account-form-wrapper .change-password-btn { position: absolute; top: -20px; left: 0; font-size: 14px; }

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: transparent; }
.nav-tabs { border-bottom: 2px solid #f3f8fb; }
.nav-tabs .nav-link { position: relative; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link { height: 42px; /*width: 160px;*/ color: #001730; font-size: 125%; padding: 5px; background-color: transparent; margin-bottom: -2px; border: none; border-bottom: 4px solid transparent; opacity: 0.5; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; }
.nav-tabs .nav-link.active { border-color: #ffbf30; font-weight: 600; opacity: 1; }
.nav-tabs .nav-link > span { white-space: nowrap; }
/*.nav-tabs .nav-link > span { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }*/

.campaigns-dates-filter-container { display: flex; position: absolute; left: 0%; top: 0%; bottom: 100%; /*height:2rem;*/ grid-gap:3px;}
.campaigns-dates-filter-inputcontainer { display: flex; flex-direction: column; background-color: #eaeef2; min-width: 5vw; }
.campaigns-dates-filter-inputcontainer label { margin-bottom:0;margin-right:0.7rem; }
.campaigns-dates-filter-inputcontainer select { width: 100%; height: 100%; background-color: #ffbf30; }
/*.campaigns-dates-filter-inputcontainer .ui-selectmenu-button { width: 100%; }*/
.ui-selectmenu-icon { float: left; text-align: right; }
.ui-selectmenu-button.ui-button.ui-widget.ui-selectmenu-button-open, .ui-selectmenu-button.ui-button.ui-widget.ui-selectmenu-button-closed { border: 0px; background: #f6f6f6;text-align:right; padding:5px;}
.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s { border: 0px; float:left; }
.ui-selectmenu-menu.ui-front.ui-selectmenu-open { height: 200px; overflow-y: scroll; }
/*.selectmenu-button.ui-button.ui-widget.ui-selectmenu-button-closed.ui-corner-all span.ui-selectmenu-text, .selectmenu-button.ui-button.ui-widget.ui-selectmenu-button-open.ui-corner-top*/ span.ui-selectmenu-text { margin-right: 5px !important; }
/* width */
.ui-selectmenu-menu.ui-front.ui-selectmenu-open::-webkit-scrollbar { width: 3px; }
/* Track */
.ui-selectmenu-menu.ui-front.ui-selectmenu-open::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #b1b1b1; border-radius: 10px; }
/* Handle */
.ui-selectmenu-menu.ui-front.ui-selectmenu-open::-webkit-scrollbar-thumb { background: #959595; border-radius: 10px; }
/* Handle on hover */
.ui-selectmenu-menu.ui-front.ui-selectmenu-open::-webkit-scrollbar-thumb:hover { background: #7f7f7f; }

@media(max-width: 991px) { .inner-page-wrapper { height: calc(100vh - 80px); }
}

@media(max-width: 767px){
    .inner-page-wrapper { height: calc(100vh - 70px); }
    .inner-page-title h2 { font-size: 32px; }
    .inner-page-wrapper { padding: 45px 0 120px; }

    .account-page-wrapper { padding: 0; }
    .account-page-wrapper .heading-with-upload { border: none; padding: 0; }
    .account-page-wrapper .account-logo { width: 35vw; height: 35vw; margin: 0 auto; }
    .account-page-wrapper .account-upload-link { width: 10vw; height: 10vw; }
    .account-page-wrapper .account-upload-link svg { width: 50%; height: 50%; }

    .nav-tabs .nav-link.active, .nav-tabs .nav-link { height: 50px; font-size: 18px; }
    .nav-tabs > li > a, .nav-tabs > li > a.active, .nav-tabs > li:hover > a, .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { font-size: 18px; }
    .nav-tabs .nav-item { width: 50%; margin: 0; }

    .inner-page-wrapper.billing-page-wrapper { padding-top: 0; }
    .billing-page-wrapper .nav.nav-tabs { margin: 0 -15px; border: none; background-color: #fff; }
    .campaigns-dates-filter-container { margin: 0 -15px; position: relative; display: flex; align-items: stretch; width: calc(100% + 30px); flex-direction: row; grid-gap: 0vw; }
    .campaigns-dates-filter-inputcontainer { display:flex; flex-direction:column; flex: 1; padding: 0px; }
    .campaigns-dates-filter-inputcontainer select { width: 100%; background-color: #ffbf30; }
    /*.campaigns-dates-filter-inputcontainer .ui-selectmenu-button { width: 50%; }*/

}

/** Performance Page */


.performance-table-title > h3 { margin-top: 40px; font-size: 22px; font-weight: normal; margin-bottom: 12px; }
table.performance-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.performance-table thead tr th { height: 40px; font-size: 16px; color: #4c5c6d; font-weight: 400; padding: 8px 10px; background-color: #f3f8fb; text-align: center; }
table.performance-table thead tr th:first-of-type, table.performance-table tbody tr td:first-of-type { width: 280px; color: #001730; border-radius: 0 5px 5px 0; text-align: right; }
table.performance-table tbody tr.table-spacer { height: 10px; }
table.performance-table tbody tr td { height: 80px; font-size: 16px; padding: 10px; background-color: #fff; text-align: center; line-height: 28px; }
table.performance-table tbody tr td .table-preview-display { cursor: pointer; }
table.performance-table tbody tr td .table-preview-sub { color: #63696e; font-size: 81%; line-height: 1; }
table.performance-table tbody tr td .table-preview-image { width: 60px; height: 60px; border-radius: 4px; background-size: cover; background-position: center; background-repeat: no-repeat; }
table.performance-table tbody tr td .table-preview-content { width: 200px; max-height: 60px; padding-right: 12px; overflow: hidden; text-decoration: underline; }
.table-source-icon { width: 20px; height: 20px; margin: 0 2px; display: inline-block; vertical-align: middle; background-size: contain; background-position: center; background-repeat: no-repeat; }
.table-source-icon.source-f-icon { background-image: url(../images/FB.png); }
.table-source-icon.source-i-icon { background-image: url(../images/IG.png); }

.reactivate-campaign-btn.btn.btn-warning { min-width: 0; width: 70px; height: 28px; padding: 0; font-size: 14px; }

.table-tooltip { cursor: pointer; position: relative; }
.table-tooltip.tooltip-dashed { border-bottom: 1px dashed #63696e; }
    .table-tooltip:after, .table-tooltip:before { opacity: 0; visibility: hidden; pointer-events: none; -webkit-box-shadow: 6px 5px 8px -3px rgba(0,0,0,0.1); box-shadow: 6px 5px 8px -3px rgba(0,0,0,0.1); -webkit-transition: all .3s ease; transition: all .3s ease; }
.table-tooltip:before { content: ""; background: #fff; transform: translateY(15px) rotate(45deg); width: 15px; height: 15px; top: -24px; position: absolute; right: 0; z-index: 2; }
.table-tooltip:after { content: attr(data-tooltip); display: block; position: absolute; right: -15px; width: 180px; transform: translateY(15px); color: #4c5c6d; background: #fff; padding: 12px; border-radius: 4px; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12); bottom: 33px; text-align: right; font-size: 15px; line-height: 1.3; }
.table-tooltip.tooltip-right:after { right: unset; left: -15px; }
.table-tooltip:hover:after, .table-tooltip:hover:before { opacity: 1; visibility: visible; pointer-events: all; }
.table-tooltip:hover:after { transform: translateY(0); }
.table-tooltip:hover:before { transform: translateY(0) rotate(45deg); }

.switch { position: relative; display: block; width: 46px; height: 23px; margin: 0 auto; border-radius: 18px; cursor: pointer; }
.switch-input { position: absolute; top: 0; left: 0; opacity: 0; box-sizing: content-box; }
.switch-label { position: relative; display: block; height: inherit; font-size: 10px; background: #d8e3eb; border: solid 1px #d8e3eb; border-radius: inherit; }
.switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; box-sizing: content-box; }
.switch-label:before { content: attr(data-off); right: 7px; color: rgba(99, 105, 110, 0.8); font-weight: 400; font-size: 120%; }
.switch-label:after { content: attr(data-on); left: 12px; font-size: 120%; font-weight: 400; color: #fff; opacity: 0; }
.switch-input:checked ~ .switch-label { background: #62b44b; }
.switch-input:checked ~ .switch-label:before { opacity: 0; }
.switch-input:checked ~ .switch-label:after { opacity: 1; }
.switch-handle { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background-color: #fff; border-radius: 100%; }
.switch-input:checked ~ .switch-handle { left: 27px; }
.switch-label, .switch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; }

.performance-campaign-item { background-color: #fff; margin-bottom: 15px; padding: 12px; border-radius: 5px; font-size: 14px; }
.performance-campaign-item_thumbnail { width: 85px; }
.performance-campaign-item_img { width: 100%; padding-bottom: 100%; border-radius: 4px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.performance-campaign-item_bottom { padding: 12px 0 0; margin-top: 12px; border-top: 1px solid #d8e3eb; line-height: 1.3; }
.performance-campaign-item_bottom p { font-size: 13px; color: #63696e;}
.performance-campaign-item_bottom > *:not(:last-child) { border-left: 1px solid #d8e3eb; }
.performance-campaign-item_title { font-size: 16px; height: 45px; margin-bottom: 10px; }
.performance-campaign-item_title span { display: block; height: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.performance-campaign-item_details p { color: #63696e; padding-left: 5px; margin-left: 5px; border-left: 1px solid #d8e3eb; line-height: 1.2; }
.performance-campaign-item_details .table-source-icon:not(:last-child) { margin-left: 10px !important; }

.performance-empty-campaigns-list { background-color: #fff; border-radius: 4px; padding: 0 20px; }
.empty-campaigns-list_message h3 { font-size: 24px; font-weight: 600; }
.empty-campaigns-list_message p { font-size: 18px; }
.empty-campaigns-list_message a.btn { min-width: 130px; font-size: 18px; height: 38px; }

.performance-alert { display: inline-block; margin-top: 5px; border-radius: 4px; border: 2px dashed #fff; background-color: #d8e3eb; font-size: 88%; padding: 6px 15px; }
.campaign-canceled { display:block; }
@media(max-width: 991px){
    table.performance-table thead tr th:first-of-type, table.performance-table tbody tr td:first-of-type { width: 45%; }
    table.performance-table tbody tr td .table-preview-content { width: calc(100% - 100px); }
}

@media(max-width: 767px){
    .performance-page-wrapper .inner-page-title { display: none; }
    .performance-page-wrapper .nav.nav-tabs { margin: 0 -15px; border: none; background-color: #fff; }
    .inner-page-wrapper.performance-page { padding-top: 0; }
    .performance-page-wrapper .nav-tabs .nav-link.active, .performance-page-wrapper .nav-tabs .nav-link { height: 50px; }
    .performance-table-title h3 { font-weight: 600; }
    .empty-campaigns-list_message a.btn { padding: 5px; }
    .empty-campaigns-list_message h3 { font-size: 22px; }
    .empty-campaigns-list_message p { font-size: 16px; }
}

/** Billing Page */

.account-credits-counter { font-size: 22px; font-weight: 600; border-bottom: 1px solid #d8e3eb; }

.credit-cards { margin-top: 25px; }
.billing-section-title { font-size: 22px; font-weight: 400; }
.main-credit-card { width: 350px; }
.main-credit-card > a { display: block; }
.main-credit-card:hover > a { color: #001730; }
.main-credit-card .main-card-item { height: 180px; position: relative; border-radius: 10px; box-shadow: 3px 3px 19px 0 rgba(0, 0, 0, 0.04); background-color: #fff; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.main-credit-card:hover .main-card-item { background-color: #d8e3eb; }
.credit-card-line { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; position: absolute; width: 100%; left: 0; padding: 15px; line-height: 1; }
.main-card-top { top: 0; }
.main-card-top .card-type { color: #63696e; font-size: 13px; }
.main-card-top .card-logo > img { max-width: 125px; max-height: 28px; }
.main-card-bottom { bottom: 0; }
.main-card-bottom .card-holder { font-size: 18px; }
.main-card-bottom .card-expiry { font-size: 16px; }
.main-card-center { width: 100%; text-align: center; font-size: 22px; letter-spacing: 3px; }

.secondary-cards-grid { overflow: hidden; }
.secondary-cards-column { width: 165px; float: right; }
.secondary-card-item { position: relative; width: 100%; height: 80px; border-radius: 6px; background-color: #fff; box-shadow: 3px 3px 19px 0 rgba(0, 0, 0, 0.04); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.secondary-card-item:first-child { margin-bottom: 20px; }
.secondary-card-item a { display: block; width: 100%; height: 100%; }
.secondary-card-item:hover { background-color: #d8e3eb; }
.secondary-card-item:hover a { color: #001730; }
.secondary-card-top.credit-card-line { -ms-flex-pack: end; justify-content: flex-end; padding: 10px; }
.secondary-card-bottom.credit-card-line { bottom: 0; padding: 10px; }
.secondary-card-top.credit-card-line .card-logo > img { max-height: 14px; }
.secondary-card-bottom.credit-card-line .card-number { font-size: 18px; }
.secondary-card-item.add-new-card { background-color: transparent; position: relative; }
.secondary-card-item.add-new-card > a { position: absolute; width: 100%; height: 100%; border: 2px dashed #fff; font-size: 18px; background-color: #d8e3eb; border-radius: 6px; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.secondary-card-item.add-new-card:hover > a { background-color: #ffbf30; }

.billing-receipts-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.billing-receipts-table thead tr th { width: 11%; height: 40px; font-size: 16px; color: #4c5c6d; font-weight: 400; padding: 8px 10px; background-color: #f3f8fb; text-align: center; }
.billing-receipts-table thead tr th:first-of-type, .billing-receipts-table tbody tr td:first-of-type { width: 30%; color: #001730; border-radius: 0 5px 5px 0; text-align: right; }
.billing-receipts-table thead tr th:first-of-type { padding: 5px 20px; }
.billing-receipts-table tbody tr.table-spacer { height: 10px; }
.billing-receipts-table tbody tr td { height: 70px; padding: 5px 20px; background-color: #fff; text-align: center; font-size: 16px; line-height: 28px; }
.billing-receipts-table tbody tr td:first-of-type { font-size: 18px; }
.download-icon { width: 18px; height: 18px; display: inline-block; background-image: url(../images/download_icon.png); background-size: contain; background-repeat: no-repeat; vertical-align: middle; }
.billing-receipts-table tbody tr td .billing-receipts-amount { font-size: 14px; line-height: 1; }
.billing-receipts-table tbody tr td .billing-receipts-amount > span { font-size: 142%; font-weight: 600; display: block; margin-bottom: 3px; }

.billing-receipts-top { margin-bottom: 30px; }
.billing-receipts-top .months-paging { padding: 0; overflow: visible; }
.all-reciepts-download > a { color: #63696e; font-size: 16px; }

.white-box-wrapper { max-width: 550px; margin: 0 auto; background-color: #fff; border-radius: 5px; padding: 50px 100px; }
.payment-edit-actions { max-width: 300px; margin: 0 auto; }
.payment-edit-actions .btn { font-size: 18px; height: 45px; padding: 10px; }
.payment-edit-actions .or-seperator { margin: 18px 0; position: relative; }
.payment-edit-actions .or-seperator:before { content: ""; position: absolute; top: 50%; left: 0; height: 1px; width: 100%; background-color: rgba(0, 23,48,0.5); }
.payment-edit-actions .or-seperator > span { position: relative; padding: 0 10px; background-color: #fff; display: inline-block; z-index: 1; }

#CreatePaymentTokenIframe { width: 100%; height: 600px; max-width: 300px; margin: 0 auto; display: block; }

@media(max-width: 767px) {
    .white-box-wrapper { padding: 0; background-color: transparent; }
    .payment-edit-actions .or-seperator > span { background-color: #eaeef2; }
    .main-credit-card { width: 100%; }
    .secondary-cards-column { width: 100%; padding-right: 0; }
    .secondary-card-item { width: calc(50% - 10px); }
    .secondary-card-item.add-new-card { width: 100%; height: 50px; }

    .account-credits-counter { font-size: 18px; }
    .billing-section-title { font-size: 20px; }

    .billing-mobile-item { background-color: #fff; border-radius: 5px; margin-bottom: 15px; padding: 15px; }
    .billing-mobile-item_info h3 { font-size: 18px; }
    .billing-mobile-item_info p { font-size: 14px; }
    .billing-mobile-item_amount { line-height: 1; }
    .billing-mobile-item_amount h2 { font-size: 22px; font-weight: 600; }
    .billing-mobile-item_amount span { font-size: 14px; }

    .billing-mobile-item_bottom { border-top: 1px solid #d8e3eb; }
}

/** ======= Submit animation ========= */

.submit-rotate, .btn.btn-primary.submit-rotate { width: 40px; height: 40px; min-width: 0px; padding: 0; background-color: transparent; border: 1px solid #bbbbbb; border-radius: 50%; border-width: 3px; font-size: 0; border-left-color: #1ECD97; -webkit-animation: rotating 2s 0.25s linear infinite; animation: rotating 2s 0.25s linear infinite; }
.submit-success, .btn.btn-primary.submit-success { font-size: 0; background-color: green; position: relative; }
.submit-success:after, .btn.btn-primary.submit-success:after { content: ""; position: absolute; font-size: 12px; width: 14px; height: 14px; color: #fff; left: 50%; top: 50%; background-image: url(../images/checked-white.png); background-position: center; background-size: contain; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.submit-fail, .btn.btn-primary.submit-fail { font-size: 0; background-color: #f15a55; position: relative; }
.submit-fail:after, .btn.btn-primary.submit-fail:after { content: ""; position: absolute; font-size: 12px; width: 14px; height: 14px; color: #fff; left: 50%; top: 50%; background-image: url(../images/X-white.png); background-position: center; background-size: contain; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.save-error { margin-top: 10px; }

@-webkit-keyframes rotating {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotating {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/** Customer Service Page */
.customer-server-wrapper h3 { font-size: 22px; }
.customer-server-wrapper h4 { font-size: 18px; }
.customer-server-wrapper p { font-size: 18px;  }
.customer-server-wrapper hr { border-top: 1px solid rgba(0, 23,48, 0.5); }