/* =========================================================
   1. BASE / GLOBAL
========================================================= */

:root {--header-height: 88px;--header-offset: 104px;}

html, body {height: 100%;}
body {margin: 0;background: #F0F8FF;font-family: 'Open Sans', sans-serif;}
body a {color: rgba(43, 81, 155, 1);}
header {background: #f0f8ff;}

.pt-50 {padding-top: 50px;}
.text-blue {color: #2b519b !important;}
#text-center {text-align: center;}

.text-center {display: flex;align-items: center;justify-content: center;gap: 16px;}
.text-center a {text-decoration: none;color: #2B519B;}

@font-face {font-family: "Quantify";src: url("/skins/default/fonts/Quantify.ttf") format("truetype");}
.quantify {font-family: 'Quantify', sans-serif !important;}

/* =========================================================
   2. INDEX / GENERIC UI
========================================================= */

#m_index {display: block;}
#m_index_a {height: 700px;}
#m_index_b {height: 700px;background: #2B519B;color: white;}
#m_index_c {height: 700px;}
#m_index_d {height: 700px;background: #2B519B;color: white;}
#m_index_e {height: 700px;}

.menu_plane {margin: 0;padding: 21px 0 21px 17px;border-radius: 5px;color: white;cursor: pointer;}
.menu_plane:hover {cursor: pointer;}

#hover_bt {cursor: pointer;}
#hover_bt:hover {opacity: 0.9;}

.s_load_spinner {width: 8px;height: 8px;margin: 0 0 3px 0;text-align: center;}

#button_s {padding: 0;border: none;background: none;cursor: pointer;}
#img_s:hover {background: #E5F1F9;}

#a_src_profile {text-decoration: none;color: black;}
#a_src_profile:hover {opacity: 0.7;}

.ghl-popup {position: absolute;z-index: 1000;margin: 73px 0 0 29px;padding: 0;background: white;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);opacity: 0;visibility: hidden;transform: translateY(10px);transition: opacity 0.3s ease, transform 0.3s ease;}
.ghl-popup.show {opacity: 1;visibility: visible;transform: translateY(0);}

.btn-state {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;}
.btn-icon {display: inline-block;}

.box {display: inline-block;width: 66px;height: 55px;margin: 0;border: 1px solid #ccc;text-align: center;vertical-align: middle;cursor: pointer;}
.status-1 {background-color: #2ca01cd9;}
.status-0 {background-color: #6c757d6e;}

.label {display: block;margin-top: 2px;font-size: 13px;text-align: center;}
.ref_status_col {padding: 10px 0 3px 1px;background: #f0f8ff;}

/* =========================================================
   3. DOCUMENT STYLES
========================================================= */

.doc-important-text {font-size: 22px !important;line-height: 32px !important;font-weight: 600 !important;color: rgba(88, 88, 88, 1) !important;}

.doc-body p,
.doc-body li {font-size: 18px !important;line-height: 28px !important;font-weight: 400 !important;color: #585858 !important;}

.doc-body li {display: flex;gap: 12px;margin-bottom: 0 !important;}

.definition-list {display: flex !important;flex-direction: column;gap: 12px;list-style: none;padding-left: 0;}
.definition-list li {display: flex !important;align-items: flex-start !important;gap: 8px !important;}
.definition-list li .label {flex: 0 0 25px;margin-top: 0 !important;font-size: 18px !important;}

.dashed-list {display: flex !important;flex-direction: column;gap: 14px !important;list-style: none;padding-left: 0;}
.dashed-list li {display: flex !important;align-items: flex-start !important;gap: 12px !important;}
.dashed-list li .dash {flex: 0 0 15px;}

.vidi-document .doc-header h1,
.vidi-document .doc-header h2 {font-size: 26px;line-height: 40px;}

.vidi-document .doc-body {font-size: 1px;line-height: 1.6;color: #1b2a49;}
.vidi-document .main-sub-header {display: flex;flex-direction: column;gap: 24px;padding: 40px 0 0 0;}
.vidi-document .sub-header {display: flex;flex-direction: column;gap: 16px;}
.vidi-document .sub-header2 {display: flex;flex-direction: column;gap: 24px;}
.vidi-document .sub-header3 {display: flex;flex-direction: column;gap: 16px;}
.vidi-document .sub-header4 {display: flex;flex-direction: column;gap: 16px;}

.vidi-document h3 {margin-bottom: 0 !important;font-size: 24px;line-height: 32px;font-weight: 600;color: #585858 !important;}
.vidi-document p {margin-bottom: 0 !important;font-size: 20px;line-height: 28px;font-weight: 600;}
.vidi-document .para {display: flex;flex-direction: column;gap: 16px;margin-top: 24px;}

.vidi-document .sub-header4 ul,
.vidi-document .sub-header3 ul {margin-bottom: 0 !important;}

.vidi-document .sub-header3 ul li {display: flex;gap: 12px;margin-bottom: 0 !important;}
.vidi-document .sub-header3 ul li a,
.vidi-document .sub-header3 p a {text-decoration: none !important;}

.vidi-document .doc-body .sub-head {font-size: 20px !important;line-height: 28px !important;font-weight: 600 !important;}

/* =========================================================
   4. AUTH PAGE
========================================================= */

.auth-page .m_main [class^="col-lg-10"] {background-color: #f8fbff !important;border: 1px solid rgba(43, 81, 155, 0.1);}

body.auth-page {position: relative;display: flex;flex-direction: column;min-height: 100vh;background-color: #F0F8FF;background-image: url(/skins/default/images/Group\ 684.png);background-repeat: no-repeat;background-position: center bottom;background-size: cover;}

.auth-hero {position: relative;display: flex;align-items: center;justify-content: center;flex: 1;min-height: calc(100vh - 80px - 180px);padding: 80px 0;overflow: hidden;}

.auth-card {position: relative;z-index: 11;width: 100%;max-width: 398px;padding: 32px 24px;text-align: center;background: linear-gradient(180deg, rgba(240, 248, 255, 0.8) 0%, rgba(234, 246, 255, 0.8) 100%);border: 1px solid rgba(255, 255, 255, 0.4);border-radius: 24px;backdrop-filter: blur(12px);box-shadow: 0 16px 32px 0 hsla(220, 57%, 39%, 0.12);}

.reset-password-form {position: relative;z-index: 11;width: 100%;max-width: 398px;height: 100%;padding: 32px 24px;text-align: center;background: #f0f7ff;border: 1px solid rgba(255, 255, 255, 0.4);border-radius: 24px;box-shadow: 0 20px 60px rgba(43, 81, 155, 0.12);}

.auth-logo {max-width: 100px;height: auto;}

.auth-card h1 {margin-bottom: 4px;font-size: 36px;line-height: 1.1;color: #355ba0;}
.reset-password-form h1 {margin-bottom: 4px;font-size: 42px;line-height: 1.1;color: #355ba0;}

.auth-card .sub-text {margin-bottom: 24px;font-size: 16px;font-weight: 600;color: #555;}
.reset-password-form .sub-text {margin-bottom: 24px;font-size: 14px;font-weight: 700;color: #555;}

.auth-card .form-control {color: #1b2a49;background: #ffffff;border: 1px solid rgba(215, 215, 215, 1);transition: all .2s ease-in-out;}
.reset-password-form .form-control {color: #1b2a49;background: #ffffff;transition: all .2s ease-in-out;}

.auth-card .form-padd {padding: 12px 14px 12px 42px;}
.auth-card .form-padd1 {padding: 12px 14px 12px 16px !important;}
.reset-password-form .form-padd {padding: 12px 14px 12px 42px;}

.auth-card .form-control:focus,
.reset-password-form .form-control:focus {background: #fff;border-color: #5b8dd9;box-shadow: 0 0 0 3px rgba(91, 141, 217, 0.1);}

.auth-card .form-control.is-invalid,
.reset-password-form .form-control.is-invalid {background-color: rgba(255, 244, 244, 1) !important;background-image: none !important;border-color: rgba(200, 65, 65, 1) !important;}

.auth-card .form-control.is-invalid:focus,
.reset-password-form .form-control.is-invalid:focus {box-shadow: 0 0 0 3px rgba(200, 65, 65, 0.1) !important;}

.auth-card .form-control.is-valid,
.reset-password-form .form-control.is-valid {background-color: rgba(241, 249, 240, 1) !important;background-image: none !important;border-color: rgba(58, 146, 46, 1) !important;}

.auth-card .form-control.is-valid:focus,
.reset-password-form .form-control.is-valid:focus {box-shadow: 0 0 0 3px rgba(58, 146, 46, 0.1) !important;}

.input-wrapper.has-error .bi {color: rgba(200, 65, 65, 1);}
.input-wrapper.has-success .bi {color: rgba(58, 146, 46, 1);}

.input-wrapper > .bi,
.input-wrapper > .form-icon-svg,
.input-field-wrapper .bi,
.input-field-wrapper .form-icon-svg {position: absolute;top: 26px;left: 14px;transform: translateY(-50%);font-size: 1.05rem;color: #2B519B;pointer-events: none;}

.input-field-wrapper .toggle-pw {position: absolute;top: 0;right: 20px;z-index: 10;display: flex;align-items: center;height: 100%;padding: 0 12px;font-size: 1.05rem;color: #2B519B;background: none;border: none;cursor: pointer;}

.remember-row .reset-link {color: #4b83c4;text-decoration: none;}
.remember-row .reset-link:hover {text-decoration: underline;}

.btn-signin {padding: 16px !important;color: rgba(227, 239, 255, 1);font-weight: 600;text-transform: uppercase;background: linear-gradient(90deg, #4584CC 23.67%, #2B519B 100%);border: none;border-radius: 10px !important;box-shadow: 0 10px 25px rgba(43, 81, 155, 0.2);transition: all 0.5s ease-in-out;}
.btn-signin:hover {color: #E3EFFF !important;background: linear-gradient(90deg, #4584CC 23.67%, #4584CC 100%);box-shadow: unset;opacity: .95;transform: translateY(-1px);}
.btn-signin:active,
.btn-signin:disabled {color: #fff !important;background: linear-gradient(90deg, #4584CC 23.67%, #4584CC 100%);}

.signup-note {margin-top: 8px;font-size: 16px;font-weight: 600;color: #585858;}
.signup-note a {display: block;margin-top: 8px;font-family: "Quantify", sans-serif;font-size: 18px;font-weight: 400 !important;color: #2b519b;text-decoration: none;}

.form-label {font-size: 1rem;font-weight: 500;color: #585858;}

/* Floating logos */
.float-logos {position: absolute;inset: 0;z-index: 5;pointer-events: none;}
.floating-logo {position: absolute;display: flex;align-items: center;justify-content: center;animation: floatBob 6s ease-in-out infinite;}
.bubble-shadow {background: #fff;border-radius: 50%;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);}
.bubble-shadow img {width: 60%;height: 60%;}

.float-qb {top: 12%;left: 10%;width: 130px;animation-delay: 0s;}
.float-cu {top: 34%;left: 24%;width: 80px;height: 80px;animation-delay: 1.2s;}
.float-bl {top: 52%;left: 17%;width: 65px;height: 65px;animation-delay: 0.6s;}
.float-xe {top: 20%;right: 22%;width: 75px;height: 75px;animation-delay: 0.8s;}
.float-zm {top: 12%;right: 8%;width: 70px;height: 70px;animation-delay: 1.6s;}
.float-sh {top: 38%;right: 12%;width: 60px;height: 60px;animation-delay: 0.4s;}
.float-hu {top: 62%;right: 18%;width: 130px;animation-delay: 2.1s;}

@keyframes floatBob {
  0%, 100% {transform: translateY(0) rotate(0deg);}
  50% {transform: translateY(-12px) rotate(1deg);}
}

/* Footer */
.auth-footer {position: relative;z-index: 10;min-height: 180px;padding-bottom: 2rem;background: transparent;    margin-top: 100px !important;}
.auth-footer .footer-links a {margin-right: 12px;font-size: 0.75rem;font-weight: 500;color: #64748b;text-decoration: none;}
.auth-footer .footer-links a:hover {color: #1b4b9b;}
.auth-footer .footer-copy {margin-top: 7px;font-size: 0.75rem;color: #585858;}
.auth-footer .footer-address {font-size: 0.78rem;line-height: 1.7;color: #64748b;}
.auth-footer .footer-phone-icons a {margin-left: 8px;font-size: 1.05rem;color: #64748b;text-decoration: none;transition: color .2s;}
.auth-footer .footer-phone-icons a:hover {color: #1b4b9b;}
.auth-footer .footer-social a {margin-right: 12px;font-size: 1.05rem;color: #64748b;text-decoration: none;transition: color .2s;}
.auth-footer .footer-social a:hover {color: #1b4b9b;}
.auth-footer .footer-reg {margin-top: 8px;font-size: 0.75rem;color: #94a3b8;}

.footer-text {max-width: 500px;margin-bottom: 0 !important;font-size: .785rem;line-height: 1.6;color: #585858;}

/* Modal */
.modal {background: rgba(240, 248, 255, 0.9);}
.modal-dialog {min-width: 580px !important;}

#OneModal .modal-content {background: rgba(240, 248, 255, 1);border: 1px solid rgba(255, 255, 255, 0.4);border-radius: 20px;backdrop-filter: blur(10px);box-shadow: 0 15px 35px rgba(47, 72, 117, 0.15);}
#OneModal .modal-header {padding: 24px 24px 8px;border-bottom: none;}
#OneModal .modal-title {font-family: 'Quantify', sans-serif;font-size: 1.5rem;font-weight: 400;color: #2b519b;}
#OneModal .btn-close {box-shadow: none;}
#OneModal .modal-body {padding: 0 24px 0 24px;font-size: 1rem;line-height: 1.6;color: #64748b;}
#OneModal .modal-footer {justify-content: flex-end;padding: 12px 24px 24px;border-top: none;}

#OneModal .btn-modal-reset {min-width: 100px;padding: 16px 30px;color: #fff;font-weight: 500;background: linear-gradient(90deg, #4584CC 23.67%, #2B519B 100%);border: none;border-radius: 8px;transition: all 0.2s;}
#OneModal .btn-modal-cancel {min-width: 100px;padding: 16px 30px;font-size: 14px;font-weight: 500;color: #2b519b;background: #eff6ff;border: 1px solid rgba(43, 81, 155, 1);border-radius: 8px;transition: all 0.2s;}
#OneModal .btn-modal-cancel:hover {background: #dbeafe;}

/* =========================================================
   5. HEADER + LK LAYOUT
========================================================= */

.site-header-wrap {position: fixed;top: 0;left: 0;z-index: 1050;width: 100%;background: #F0F8FF;border-bottom: 1px solid rgba(43, 81, 155, 0.08);}
.site-header {padding: 18px 0;background: #F0F8FF;}
.site-header img {display: block;max-width: 160px;height: auto;}

#main-content {padding-top: var(--header-offset) !important;}

.lk-layout {padding-bottom: 24px;overflow: visible !important;}
.lk-layout__row {align-items: flex-start;}
.lk-layout__row,
.lk-layout__row > div {min-height: 0;overflow: visible !important;}

.lk-sidebar-sticky,
#mobileConnectorsCollapse {overflow: visible !important;}

/* =========================================================
   6. CONNECTORS / LEFT MENU
========================================================= */

#connectors-list {width: 100%;max-width: 192px; margin: -1px 0px 0 1px;}
#connectors-list > a {display: flex;align-items: center;width: 100%;min-height: 56px;margin: 1px 0 7px 0;text-decoration: none;background-color: #E3EFFF;border: 1px solid transparent;border-radius: 8px;opacity: 1;transition: 0.2s ease;}
#connectors-list > a:hover {opacity: 0.9;}
#connectors-list > .active {background: #FFFFFF;border: 1px solid #E3EFFF;}

#connectors-list > a > p {width: 100%;margin: 0;padding: 16px 18px;font-size: 14px;line-height: 24px;font-weight: 600;color: #4584CC;}
#connectors-list > .active > p {color: #2B519B;}

/* =========================================================
   7. RIGHT PANEL / TABS AREA display: flex;height: calc(100vh - var(--header-offset));min-height: calc(100vh - var(--header-offset));overflow: visible;
========================================================= */

.lk-tabs-panel {flex-direction: column;}

#tabs-containe_ul {position: sticky;top: var(--header-offset);z-index: 1030;width: 100%;max-width: 1088px;background: #F0F8FF;flex: 0 0 auto;}

#tabs-container {flex: 1 1 auto;min-height: 0;height: 100%;overflow: hidden;}

#main_ul_nav {display: block;width: 100%;padding: 0 0 12px 0;background: #F0F8FF;}

#myTabs {overflow-x: auto;overflow-y: hidden;flex-wrap: nowrap;white-space: nowrap;scrollbar-width: thin;}
#myTabs .nav-item {flex: 0 0 auto;}
#myTabs .nav-link {white-space: nowrap;}

.lk-tab-content-wrap {height: 100%;min-height: 0;overflow: hidden;}
.lk-tab-content-wrap .tab-pane {height: 100%;overflow: hidden;}
.lk-tab-pane-inner {height: 100%; padding: 11px 0 0 0;border-radius: 12px;overflow-y: auto;overflow-x: hidden;overflow-y: auto;overflow-x: hidden;scrollbar-width: none;-ms-overflow-style: none;}

.lk-tab-pane-inner::-webkit-scrollbar {display: none;}

/* =========================================================
   8. DESKTOP STICKY
========================================================= */

@media (min-width: 992px) {
  .lk-layout__row > .col-lg-3,
  .lk-layout__row > .col-xl-2 {align-self: flex-start;}

  #mobileConnectorsCollapse {display: block !important;overflow: visible !important;}

  #connectors-list {position: sticky;top: var(--header-offset);max-height: calc(100vh - var(--header-offset) - 16px);padding-right: 4px;overflow-y: auto;overflow-x: visible;}
}

/* =========================================================
   9. PROFILE DROPDOWN
========================================================= */

.profile-btn {display: flex;justify-content: space-between;align-items: center;gap: 8px;width: 186px;height: 44px;padding: 0px 0 3px 25px;font-family: "Open Sans", Arial, sans-serif;font-size: 14px;font-weight: 600;line-height: 20px;color: #2B519B;background: transparent !important;border: none !important;border-radius: 8px;box-shadow: none !important;}
.profile-btn:hover,
.profile-btn:focus,
.profile-btn:active,
.profile-btn.show {color: #2B519B;background: rgba(43, 81, 155, 0.06) !important;}

.profile-btn svg,
.profile-dropdown svg {display: block;flex-shrink: 0;width: 16px;height: 16px;}

.profile-dropdown {width: 158px;min-width: 158px !important;margin-top: 10px !important;padding: 24px;background: #F0F8FF;border: none;border-radius: 16px;box-shadow: 0 16px 32px rgba(43, 81, 155, 0.12);}
.profile-dropdown li + li {margin-top: 16px;}

.profile-dropdown .dropdown-item {display: flex;align-items: center;gap: 8px;padding: 0;font-family: "Open Sans", Arial, sans-serif;font-size: 14px;font-weight: 400;line-height: 24px;color: #585858;background: transparent;border: none;}
.profile-dropdown .dropdown-item:hover,
.profile-dropdown .dropdown-item:focus,
.profile-dropdown .dropdown-item:active {color: #2B519B;background: transparent;}

.profile-dropdown .dropdown-item.text-danger {color: #C84141 !important;}
.profile-dropdown .dropdown-item.text-danger:hover,
.profile-dropdown .dropdown-item.text-danger:focus,
.profile-dropdown .dropdown-item.text-danger:active {color: #C84141 !important;background: transparent;}

/* =========================================================
   10. CONNECTOR PAGE / SUBSCRIPTION BLOCKS
========================================================= */

.connector-section {max-width: 1088px;margin: 0 auto;font-family: "Open Sans", Arial, sans-serif;color: #585858;}
 .connector-intro {margin: 7px 0 13px 0;font-family: "Open Sans", Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 18px; line-height: 28px; letter-spacing: 0;}
.connector-intro p {margin: 0;font-size: 18px;line-height: 28px;}

.connector-info-banner {max-width: 1088px; width: 100%; min-height: 76px; margin: 33px 0 0 0;padding: 0 68px 0 0px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #E3EFFF; border-radius: 12px;}
.connector-info-banner_2 {text-align: center; margin: 2px 0 0 0;padding: 15px 0 15px 0px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #E3EFFF; border-radius: 12px;}

.connector-info-text {margin: 0 0 0 3px; font-family: "Open Sans", Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; color: #585858;}
.connector-info-link {font-family: "Open Sans", Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; color: #2B519B; text-decoration: none;}
.connector-info-link:hover {color: #2B519B; text-decoration: underline;}
.connector-info-text-bold{font-family: "Open Sans", Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 18px; line-height: 28px; letter-spacing: 0;}

.connector-grid {display: flex;align-items: flex-start;gap: 32px;margin-bottom: 40px;}
.subscription-card,
.connector-info-card {flex: 1 1 0;min-width: 0;}

.section-title {margin: 1px 0 16px 0;font-family: "Quantify", "Open Sans", Arial, sans-serif;font-size: 20px;line-height: 32px;font-weight: 400;color: #2B519B;}

.subscription-price {display: flex;align-items: flex-start;gap: 12px;    margin: -5px 0 0 0;}
.price-value {font-size: 60px;line-height: 72px;font-weight: 600;color: #585858;}
.price-period {  font-family: 'Open Sans', sans-serif;font-size: 24px;letter-spacing: 0;line-height: 32px;font-weight: 600;color: #585858;}

  
.subscription-list {margin: 0 0 24px;padding: 13px 0 0 0;list-style: none;}
.subscription-list li {position: relative;margin-bottom: 12px;padding-left: 28px;font-size: 18px;line-height: 28px;}
.subscription-list li::before {content: "";position: absolute;top: 13px;left: 0;width: 16px;height: 1px;background: #2B519B;}


.connector-download-btn {    margin: 20px 0 0 0;max-width: 345px; width: 100%; min-height: 56px; padding: 16px 28px 16px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #2B519B; border-radius: 8px; background: transparent; text-decoration: none;}
.connector-download-btn-icon {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 24px;}
.connector-download-btn-icon svg {width: 24px; height: 24px; display: block;}
.connector-download-btn-text {font-family: "Open Sans", Arial, sans-serif; font-weight: 600; font-style: normal; font-size: 18px; line-height: 24px; letter-spacing: 0; text-align: center;}
.connector-download-btn:hover {background: #F5F9FF; text-decoration: none;}
.connector-download-btn:hover .connector-download-btn-text {color: #2B519B;}


.templates-note,
.connector-text p {margin: -9px 0 15px 2px;font-size: 18px;line-height: 28px;color: #585858;     font-family: "Open Sans", Arial, sans-serif;font-weight: 400;letter-spacing: 0;}
.connector-text p:last-child {margin-bottom: 0;}

.templates-text,

.subscription-note {font-family: 'Open Sans', sans-serif;font-weight: 600;font-size: 18px;line-height: 28px;letter-spacing: 0;}
.subscription-note_2{    margin: -4px 0 0 0;font-family: 'Open Sans', sans-serif;font-weight: 400;font-size: 18px;line-height: 28px;letter-spacing: 0;}

.templates-block {margin-bottom: 40px;}

.main-button {display: inline-flex;align-items: center;justify-content: center;min-height: 56px;margin: 8px 0 16px;padding: 16px 28px;font-size: 18px;line-height: 24px;font-weight: 600;color: #FFFFFF;text-decoration: none;background: #198754;border-radius: 8px;transition: opacity 0.2s ease;}
.main-button:hover {color: #FFFFFF;opacity: 0.9;}

.useful-links-list {margin: 0;padding-left: 20px;}
.useful-links-list li {margin-bottom: 12px;}
.useful-links-list a {font-size: 18px;line-height: 28px;color: #2B519B;text-decoration: none;}
.useful-links-list a:hover {text-decoration: underline;}

 
.useful-links-block {display: inline-block;max-width: 528px; width: 100%; gap: 8px; padding: 0;}
.useful-links-title {width: 100%; font-family: "Quantify", Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #2B519B;}
.useful-links-list {width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0;}
.useful-links-item {display: inline-flex; align-items: center; gap: 12px; padding: 0; text-decoration: none;}
.useful-links-bullet {width: 16px; min-width: 16px; height: 1px; background: #2B519B; display: block;}
.useful-links-text {font-family: "Open Sans", Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; color: #2B519B;}
.useful-links-item:hover .useful-links-text {text-decoration: underline;}


.connector-template-image {display: block; max-width: 100%; height: auto; margin: 7px 0 0 0;}
.connector-video-image {display: block; width: 100%; max-width: 528px; height: auto; border-radius: 12px; border: 4px solid #000; opacity: 1;}




.subscription-info-block {display:block;width:100%;max-width:100%;padding:0;margin:0;}
.subscription-info-title {width:100%;margin:0 0 12px 0;font-family:"Quantify", Arial, sans-serif;font-style:normal;font-weight:400;font-size:20px;line-height:32px;color:#2B519B;}

.subscription-table-wrap {display:block;width:100%;overflow:hidden;}
.subscription-table-head {display:grid;grid-template-columns:42px 1.2fr .9fr .9fr .9fr 160px;align-items:stretch;width:100%;}
.subscription-table-body {display:block;width:100%;}
.subscription-table-row {display:grid;grid-template-columns:42px 1.2fr .9fr .9fr .9fr 160px;align-items:stretch;width:100%;}
.subscription-table-row.subscription-table-row-canceled .subscription-col {background:#FFF3CD;}

.subscription-col {display:flex;align-items:center;padding:12px 16px;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;color:#000000;border-bottom:1px solid #B8D6FF;background:#E3EFFF;min-height:56px;word-break:break-word;overflow-wrap:anywhere;}
.subscription-table-head .subscription-col {font-weight:600;background:#F0F8FF;border-bottom:1px solid #2B519B;min-height:48px;padding:12px 16px;}
.subscription-table-body .subscription-table-row:nth-child(even) .subscription-col {background:#F0F8FF;}

.subscription-col-num {justify-content:flex-start;}
.subscription-col-action {display:flex;align-items:center;justify-content:center;padding:8px 12px;}
.subscription-col-label {display:none;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:600;font-size:12px;line-height:16px;color:#2B519B;}
.subscription-col-value {display:inline-flex;align-items:center;gap:6px;max-width:100%;}
.subscription-col-action .subscription-col-value {display:flex;align-items:center;justify-content:center;width:100%;}

.subscription-status {display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-family:"Open Sans", Arial, sans-serif;font-size:13px;line-height:20px;font-weight:600;text-transform:capitalize;max-width:100%;}
.subscription-status-active {background:#D1F3DF;color:#146C43;}
.subscription-status-canceled {background:#F8D7DA;color:#842029;}
.subscription-status-trialing {background:#DCEBFF;color:#2B519B;}
.subscription-status-incomplete {background:#FFF3CD;color:#856404;}
.subscription-status-past_due {background:#F8D7DA;color:#842029;}
.subscription-status-unpaid {background:#F8D7DA;color:#842029;}

.subscription-remove-btn {display:flex;justify-content:center;align-items:center;width:36px;height:36px;padding:6px;border:0;background:transparent;border-radius:8px;cursor:pointer;transition:background-color .2s ease;margin:0 auto;}
.subscription-remove-btn:hover {background:rgba(184,59,59,0.08);}
.subscription-remove-btn:focus {outline:none;box-shadow:0 0 0 3px rgba(43,81,155,0.15);}
.subscription-remove-btn svg {display:block;width:24px;height:24px;}
.subscription-empty-action {color:#585858;}

.subscription-renew-btn {display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:8px 12px;gap:4px;min-width:120px;height:32px;background:#198754;border:0;border-radius:8px;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:600;font-size:12px;line-height:16px;color:#F1F9F0;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s ease;white-space:nowrap;}
.subscription-renew-btn:hover {background:#157347;color:#F1F9F0;text-decoration:none;}
.subscription-renew-btn:focus {outline:none;box-shadow:0 0 0 3px rgba(25,135,84,0.18);}

/* invoices */
.invoice-info-block {display:block;width:100%;max-width:100%;padding:0;margin:32px 0 0 0;}
.invoice-info-title {width:100%;margin:0 0 12px 0;font-family:"Quantify", Arial, sans-serif;font-style:normal;font-weight:400;font-size:20px;line-height:32px;color:#2B519B;}

.invoice-table-wrap {display:block;width:100%;overflow:hidden;}
.invoice-table-head {display:grid;grid-template-columns:42px 1fr 1.2fr 1fr 1fr .9fr .9fr 1fr 80px;align-items:stretch;width:100%;}
.invoice-table-body {display:block;width:100%;}
.invoice-table-row {display:grid;grid-template-columns:42px 1fr 1.2fr 1fr 1fr .9fr .9fr 1fr 80px;align-items:stretch;width:100%;}

.invoice-col {display:flex;align-items:center;padding:12px 16px;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;color:#000000;border-bottom:1px solid #B8D6FF;background:#E3EFFF;min-height:56px;word-break:break-word;overflow-wrap:anywhere;}
.invoice-table-head .invoice-col {font-weight:600;background:#F0F8FF;border-bottom:1px solid #2B519B;min-height:48px;padding:12px 16px;}
.invoice-table-body .invoice-table-row:nth-child(even) .invoice-col {background:#F0F8FF;}

.invoice-col-label {display:none;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:600;font-size:12px;line-height:16px;color:#2B519B;}
.invoice-col-value {display:inline-flex;align-items:center;gap:6px;max-width:100%;}

.invoice-status {display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-family:"Open Sans", Arial, sans-serif;font-size:13px;line-height:20px;font-weight:600;text-transform:capitalize;max-width:100%;}
.invoice-status-paid {background:#D1F3DF;color:#146C43;}
.invoice-status-open {background:#DCEBFF;color:#2B519B;}
.invoice-status-draft {background:#E9ECEF;color:#495057;}
.invoice-status-void {background:#F8D7DA;color:#842029;}
.invoice-status-uncollectible {background:#F8D7DA;color:#842029;}

.invoice-download-btn {display:flex;flex-direction:row;justify-content:center;align-items:center;padding:6px;gap:8px;width:50px;height:24px;border:0;border-radius:8px;background:transparent;text-decoration:none;cursor:pointer;transition:background-color .2s ease;}
.invoice-download-btn:hover {background:rgba(43,81,155,0.08);}
.invoice-download-btn svg {display:block;width:43px;height:43px;}

/* laptop/tablet */
@media (max-width:1199.98px) {
.subscription-table-head,.subscription-table-row {grid-template-columns:42px 1.1fr .9fr .9fr .9fr 150px;}
.invoice-table-head,.invoice-table-row {grid-template-columns:36px .9fr 1fr .85fr .85fr .75fr .8fr .9fr 70px;}
.subscription-col,.invoice-col {padding:12px;font-size:13px;line-height:20px;}
.subscription-table-head .subscription-col,.invoice-table-head .invoice-col {padding:10px 12px;}
}

/* tablet */
@media (max-width:991.98px) {
.subscription-info-title,.invoice-info-title {font-size:18px;line-height:28px;}
.subscription-table-head,.subscription-table-row {grid-template-columns:36px 1fr .85fr .85fr .85fr 140px;}
.invoice-table-head,.invoice-table-row {grid-template-columns:32px .8fr .9fr .8fr .8fr .7fr .7fr .8fr 62px;}
.subscription-col,.invoice-col {padding:10px;font-size:12px;line-height:18px;}
.subscription-status,.invoice-status {font-size:12px;line-height:18px;padding:3px 8px;}
}

/* mobile */
@media (max-width:767.98px) {
.subscription-table-head,.invoice-table-head {display:none;}
.subscription-table-row {display:block;width:100%;margin-bottom:12px;border:1px solid #B8D6FF;border-radius:12px;background:#F0F8FF;overflow:hidden;}
.subscription-col {display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;border-bottom:1px solid #B8D6FF;gap:12px;}
.subscription-col:last-child {border-bottom:0;}
.subscription-col-label {display:block;min-width:90px;font-family:"Open Sans", Arial, sans-serif;font-weight:600;font-size:12px;line-height:16px;color:#2B519B;}
.subscription-col-value {flex:1;text-align:right;font-family:"Open Sans", Arial, sans-serif;font-size:13px;line-height:20px;color:#000;word-break:break-word;}
.subscription-col-num {display:none;}
.subscription-col-action .subscription-col-value {justify-content:flex-end;}

.invoice-table-row {display:block;width:100%;margin-bottom:12px;border:1px solid #B8D6FF;border-radius:12px;background:#F0F8FF;overflow:hidden;}
.invoice-col {display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;border-bottom:1px solid #B8D6FF;gap:12px;}
.invoice-col:last-child {border-bottom:0;}
.invoice-col-label {display:block;min-width:90px;font-family:"Open Sans", Arial, sans-serif;font-weight:600;font-size:12px;line-height:16px;color:#2B519B;}
.invoice-col-value {flex:1;text-align:right;font-family:"Open Sans", Arial, sans-serif;font-size:13px;line-height:20px;color:#000;word-break:break-word;}
.invoice-download-btn {margin-left:auto;}
}

/* small phones */
@media (max-width:479.98px) {
.subscription-col,.invoice-col {padding:10px 12px;gap:10px;}
.subscription-col-label,.invoice-col-label {min-width:75px;font-size:11px;line-height:14px;}
.subscription-col-value,.invoice-col-value {font-size:12px;line-height:18px;}
.subscription-renew-btn {min-width:auto;padding:8px 10px;font-size:11px;}
}


.subscription-refresh-btn {display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:16px 28px 16px 24px;gap:8px;width:224px;height:56px;background:linear-gradient(90deg,#4584CC 23.67%,#2B519B 100%);border:0;border-radius:8px;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:600;font-size:18px;line-height:24px;color:#F0F8FF;text-align:center;text-decoration:none;cursor:pointer;transition:opacity .2s ease,transform .2s ease;flex:none;order:2;flex-grow:0;}
.subscription-refresh-btn:hover {opacity:.95;color:#F0F8FF;text-decoration:none;}
.subscription-refresh-btn:focus {outline:none;box-shadow:0 0 0 3px rgba(43,81,155,0.18);}
.subscription-refresh-btn:active {transform:translateY(1px);}
.subscription-refresh-btn-icon {display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;order:0;flex-grow:0;}
.subscription-refresh-btn-icon svg {display:block;width:24px;height:24px;}
.subscription-refresh-btn-text {display:flex;align-items:center;text-align:center;font-family:"Open Sans", Arial, sans-serif;font-style:normal;font-weight:600;font-size:18px;line-height:24px;color:#F0F8FF;flex:none;order:1;flex-grow:0;}


/* =========================================================
   11. CUSTOM TABS STYLING
========================================================= */

#tabs-containe_ul .nav-tabs {display: flex;flex-wrap: nowrap;border-bottom: none;}
#tabs-containe_ul .nav-item {flex: 0 0 auto;margin: 0;}

#tabs-containe_ul .nav-link {box-sizing: border-box;display: flex;align-items: center;justify-content: center;height: 48px;margin: 0;padding: 12px 20px;font-family: "Open Sans", Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;line-height: 24px;text-align: center;white-space: nowrap;color: #2B519B !important;background: transparent !important;border: none !important;border-bottom: 2px solid #B8D6FF !important;border-radius: 0 !important;transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;}

#tabs-containe_ul .nav-link:hover,
#tabs-containe_ul .nav-link:focus:hover {color: #012F88 !important;background: #E3EFFF !important;border-bottom: 2px solid #71ABF8 !important;}

#tabs-containe_ul .nav-link.active,
#tabs-containe_ul .nav-link.active:hover,
#tabs-containe_ul .nav-link.active:focus {color: #585858 !important;background: transparent !important;border-bottom: 2px solid #2B519B !important;}

#tabs-containe_ul .nav-link:focus {outline: none !important;box-shadow: none !important;}

#tabs-containe_ul .nav-tabs::after {content: "";flex: 1 1 auto;min-width: 0;border-bottom: 2px solid #B8D6FF;}

#tabs-containe_ul .nav-item:nth-child(1) .nav-link {width: 121px;}
#tabs-containe_ul .nav-item:nth-child(2) .nav-link {width: 80px;}
#tabs-containe_ul .nav-item:nth-child(3) .nav-link {width: 146px;}
#tabs-containe_ul .nav-item:nth-child(4) .nav-link {width: 135px;}

/* =========================================================
   12. PAGE TITLE / LOADERS / ANIMATION
========================================================= */

.connector-title-block {display: flex;flex-direction: column;align-items: flex-start;gap: 8px;width: 100%;max-width: 1088px;min-height: 40px;padding: 0 0 21px 0;}
.connector-title {width: 100%;margin: 0;font-family: "Quantify", "Open Sans", Arial, sans-serif;font-style: normal;font-size: 26px;font-weight: 400;line-height: 40px;color: #2B519B;}

.ajax-spinner {display: flex;align-items: center;justify-content: center;width: 100%;min-height: 120px;}
.spinner-circle {width: 32px;height: 32px;border: 3px solid #B8D6FF;border-top: 3px solid #2B519B;border-radius: 50%;animation: spin 0.8s linear infinite;}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.fading-out {opacity: 0;transform: translateY(6px);transition: opacity 0.3s ease, transform 0.3s ease;}
.fading-in {opacity: 0;transform: translateY(6px);animation: fadeInBlock 0.3s ease forwards;}

@keyframes fadeInBlock {
  from {opacity: 0;transform: translateY(6px);}
  to {opacity: 1;transform: translateY(0);}
}

/* =========================================================
   13. MOBILE CONNECTORS BUTTON
========================================================= */

.lk-sidebar-sticky .btn-primary {display: flex;align-items: center;justify-content: center;height: 48px;padding: 0 16px;font-family: "Open Sans", Arial, sans-serif;font-size: 14px;font-weight: 400;line-height: 24px;color: #2B519B !important;background: transparent !important;border: 1px solid #B8D6FF !important;border-radius: 6px;transition: all 0.2s ease;}
.lk-sidebar-sticky .btn-primary:hover {color: #012F88 !important;background: #E3EFFF !important;border-color: #71ABF8 !important;}
.lk-sidebar-sticky .btn-primary:active {background: #D4E7FF !important;border-color: #2B519B !important;}
.lk-sidebar-sticky .btn-primary:focus {box-shadow: none !important;}

/* =========================================================
   14. RESPONSIVE
========================================================= */

@media screen and (max-width: 768px) {
  .float-logos {opacity: 0.15;}
  .reponsive {width: auto !important;}
  header {align-items: center;justify-content: space-between;}
  .py-3 {padding-bottom: .4rem !important;}
  .modal-dialog {min-width: auto !important;margin: 1rem;}

  #tabs-containe_ul .nav-tabs {overflow-x: auto;flex-wrap: nowrap;-webkit-overflow-scrolling: touch;scrollbar-width: thin;}
  #tabs-containe_ul .nav-tabs::after {display: none;}
  #tabs-containe_ul .nav-link,
  #tabs-containe_ul .nav-item:nth-child(1) .nav-link,
  #tabs-containe_ul .nav-item:nth-child(2) .nav-link,
  #tabs-containe_ul .nav-item:nth-child(3) .nav-link,
  #tabs-containe_ul .nav-item:nth-child(4) .nav-link {width: auto;flex: 0 0 auto;}

  .connector-info-card {padding: 0 0 0 0 !important;}
  .useful-links-block {padding: 0px 0 20px 0 !important;}
}

@media screen and (max-width: 430px) {
  .auth-card {max-height: 100%;}
}

@media screen and (max-width: 484px) {
  .nav-link {font-size: 12px;line-height: 16px;}
  .mb-2 {margin-bottom: 0 !important;}
  .reponsive {display: none;}
}

@media (max-width: 991.98px) {
  .lk-sidebar-sticky,
  #tabs-containe_ul {position: static;top: auto;}

  .lk-tabs-panel {height: auto;min-height: auto;overflow: visible;}
  .lk-tab-content-wrap {height: auto;min-height: auto;overflow: visible;}
  .lk-tab-content-wrap .tab-pane {height: auto;overflow: visible;}
  .lk-tab-pane-inner {height: auto;min-height: 260px;max-height: none;overflow: visible;padding: 20px;border-radius: 12px;}
  #tabs-container {height: auto;overflow: visible;}

  #mobileConnectorsCollapse {overflow: visible !important;}
  #connectors-list {position: static;max-width: 100%;max-height: none;padding: 0 10px;overflow: visible;}
  #connectors-list > a {width: 49%;display: inline-block;}

  #main_ul_nav {padding-bottom: 10px;}
  #myTabs .nav-link {padding: 10px 14px;font-size: 14px;line-height: 18px;}
}

@media (max-width: 992px) {
  .connector-grid {flex-direction: column;}
  .price-value {font-size: 48px;line-height: 58px;}
  .price-period {font-size: 22px;line-height: 30px;}
}

@media (max-width: 576px) {
  .section-title {font-size: 18px;line-height: 28px;}
  .price-value {font-size: 40px;line-height: 48px;}
  .price-period {margin-top: 6px;font-size: 20px;line-height: 28px;}

  .subscription-list li,
  .subscription-note,
  .templates-text,
  .templates-note,
  .connector-text p,
  .connector-intro p,
  .useful-links-list a {font-size: 16px;line-height: 24px;}

  .main-button {width: 100%;}
}

@media (max-width: 575.98px) {
  .lk-layout {padding-top: 12px;}
  .lk-tab-pane-inner {padding: 14px;border-radius: 10px;}
  #connectors-list > a > p {padding: 14px 16px;font-size: 13px;line-height: 20px;}
  .site-header img {max-width: 130px;}
}

/* =========================================================
   15. Refresh Settings
========================================================= */
.accordion-item.refresh-settings-card {margin:0 0 20px 0;border:1px solid #71ABF8;border-radius:12px;overflow:hidden;}
.accordion-item.refresh-settings-card .accordion-header {margin:0;}
.accordion-item.refresh-settings-card .accordion-button {background:none;display:flex;align-items:center;justify-content:space-between;padding:24px;color:#2B519B;border:0;box-shadow:none;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-size:20px;line-height:28px;}
.accordion-item.refresh-settings-card .accordion-button:not(.collapsed) {color:#2B519B;box-shadow:none;}
.accordion-item.refresh-settings-card .accordion-button:focus {box-shadow:none;border:0;}
.accordion-item.refresh-settings-card .accordion-button::after {filter:none;transform:rotate(180deg);}
.accordion-item.refresh-settings-card .accordion-button.collapsed::after {transform:rotate(0deg);}
.accordion-item.refresh-settings-card .accordion-collapse {}
.accordion-item.refresh-settings-card .accordion-body {padding:0 24px 40px;}

.refresh-settings-layout {display:flex;align-items:flex-start;gap:32px;}
.refresh-settings-left {flex:0 0 504px;max-width:504px;display:flex;flex-direction:column;gap:24px;}
.refresh-settings-right {flex:0 0 504px;max-width:504px;display:flex;flex-direction:column;gap:12px;padding-top:8px;}

.refresh-settings-note {padding-right: 16px;margin:0;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-style:Regular;font-size:18px;leading-trim:NONE;line-height:28px;letter-spacing:0%;color:#585858;}
.refresh-settings-note strong {font-weight:600;}
.refresh-settings-note.warning {color:#585858;}

.pricing-table {display:flex;flex-direction:column;width:504px;}
.pricing-table-head {display:grid;grid-template-columns:42px 75px 301px 86px;width:504px;height:48px;}
.pricing-table-row {display:grid;grid-template-columns:42px 75px 301px 86px;width:504px;height:56px;}
.pricing-col {box-sizing:border-box;display:flex;align-items:center;padding:16px;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-size:14px;line-height:24px;border-bottom:1px solid #B8D6FF;}
.pricing-col.center {justify-content:center;text-align:center;padding-left:8px;padding-right:8px;}

.pricing-table-head .pricing-col {padding:12px 16px;font-weight:600;background:transparent;border-bottom:1px solid #2B519B;}
.pricing-table-row.row-blue .pricing-col {background:#E3EFFF;}
.pricing-table-row.row-light .pricing-col {background:#F0F8FF;}

.pricing-col:nth-child(1) {justify-content:flex-start;}
.pricing-table-head .pricing-col:nth-child(1) {justify-content:flex-start;}
.pricing-table-head .pricing-col:nth-child(2),.pricing-table-head .pricing-col:nth-child(4) {justify-content:center;}
.pricing-table-row .pricing-col:nth-child(2),.pricing-table-row .pricing-col:nth-child(4) {justify-content:center;}

.btn-state {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;min-width:16px;min-height:16px;padding:0;margin:0;border:0 !important;background:transparent !important;box-shadow:none !important;font-size:0;line-height:0;color:transparent;}
.btn-state:hover,.btn-state:focus,.btn-state:active {background:transparent !important;box-shadow:none !important;color:transparent;}
.btn-state .btn-icon {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0;line-height:0;}
.btn-state .btn-icon i {display:none !important;}
.btn-state[data-state="check"] .btn-icon {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6667 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4067 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4067 2 12.6667 2ZM6.66667 11.3333L3.33333 8L4.27333 7.06L6.66667 9.44667L11.7267 4.38667L12.6667 5.33333L6.66667 11.3333Z' fill='%234584CC'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
.btn-state[data-state="none"] .btn-icon,.btn-state[data-state="cross"] .btn-icon {background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6667 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4067 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4067 2 12.6667 2Z' fill='white' stroke='%23D7D7D7'/%3E%3C/svg%3E\") center/16px 16px no-repeat;}

.preview-icon {display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:6px;gap:8px;width:28px;height:28px;border:0;border-radius:8px;background:transparent;text-decoration:none;cursor:pointer;transition:background-color .2s ease;}
.preview-icon:hover {background:rgba(43,81,155,.08);}
.preview-icon svg {display:block;width:16px;height:16px;}
.preview-icon svg path {stroke:#2B519B;}

.preview-icon,.preview-icon-clean {background:transparent !important;border:none !important;box-shadow:none !important;}
.preview-icon svg,.preview-icon-clean svg {background:transparent !important;}

#submitBtn {display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:16px 28px 16px 24px;gap:8px;width:212px;height:56px;border:0;border-radius:8px;background:#E3EFFF;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-size:18px;line-height:24px;text-align:center;color:#B8D6FF;box-shadow:none;}
#submitBtn:hover,#submitBtn:focus {background:#d8e8ff;color:#8fb8ef;box-shadow:none;}
#submitBtn:disabled {opacity:1;cursor:not-allowed;}

.refresh-settings-apply-wrap {display:flex;align-items:center;justify-content:flex-start;}

@media (max-width:1199.98px) {
.refresh-settings-layout {flex-direction:column;gap:24px;}
.refresh-settings-left,.refresh-settings-right {flex:1 1 100%;max-width:100%;}
.pricing-table {width:100%;}
.pricing-table-head,.pricing-table-row {width:100%;grid-template-columns:42px 75px minmax(180px,1fr) 86px;}
.refresh-settings-note {font-size:16px;line-height:26px;}
}

@media (max-width:767.98px) {
.accordion-item.refresh-settings-card .accordion-button {padding:18px 16px;font-size:18px;line-height:26px;}
.accordion-item.refresh-settings-card .accordion-body {padding:0 16px 24px;}
.refresh-settings-layout {gap:20px;}
.pricing-table-head,.pricing-table-row {grid-template-columns:36px 56px minmax(140px,1fr) 56px;}
.pricing-table-head {height:44px;}
.pricing-table-row {height:52px;}
.pricing-col {padding:10px 8px;font-size:13px;line-height:20px;}
.pricing-table-head .pricing-col {padding:10px 8px;font-size:13px;line-height:20px;}
#submitBtn {width:100%;max-width:212px;height:52px;padding:14px 20px;font-size:16px;}
.preview-icon {width:24px;height:24px;padding:4px;}
}


/* =========================================================
   16. INSTALL
========================================================= */

.form-switch-custom {display:flex;align-items:center;gap:10px;margin: 29px 0 0 0;padding: 0 0 4px 0;}
.form-switch-custom input {appearance:none;width:36px;height:14px;background:#585858;border-radius:20px;position:relative;cursor:pointer;transition:background .3s;}
.form-switch-custom input::before {content:"";position:absolute;width:20px;height:20px;background:#ffffff;border-radius:50%;top:-3px;left:-2px;transition:transform .3s;box-shadow:0 2px 5px rgba(0,0,0,.2);}
.form-switch-custom input:checked {background:#2B519B;}
.form-switch-custom input:checked::before {transform:translateX(20px);}
.vidi-note {background: #E3EFFF;border-radius:12px;padding:20px 24px;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-style:Regular;font-size:18px;leading-trim:NONE;line-height:28px;letter-spacing:0%;color:#585858;    margin: 9px 0 0 0;}
.vidi-note a {font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-style:SemiBold;font-size:18px;leading-trim:NONE;line-height:28px;letter-spacing:0%;color:#2B519B;text-decoration:none;}
.vidi-note a:hover {text-decoration:underline;}



#installButton {width:233px;height:56px;padding:0;border:none;border-radius:8px;background:url('/skins/default/images/lkn/installbtgr.svg') no-repeat center/cover;cursor:pointer;}
#installButton:hover {opacity:.95;}
#installButton:active {transform:scale(.98);}

.refresh-settings-apply-wrap button {display:block !important;width:198px !important;height:47px !important;padding:0 !important;border:none !important;border-radius:8px !important;background:url('/skins/default/images/lkn/ApplyChangesActive.svg') no-repeat center center !important;background-size:cover !important;box-shadow:none !important;outline:none !important;color:transparent !important;font-size:0 !important;line-height:0 !important;cursor:pointer !important;-webkit-appearance:none !important;appearance:none !important;}
.refresh-settings-apply-wrap button:hover {opacity:.95 !important;}
.refresh-settings-apply-wrap button:active {transform:scale(.98);}
.connector-install-wrap {font-family:"Open Sans",Arial,sans-serif;}
.connector-install-message {margin:4px 0 0 0;font-weight:400;font-style:Regular;font-size:18px;line-height:28px;letter-spacing:0%;color:#585858;}
.connector-install-message a {color:#C73E3E;cursor:pointer;text-decoration:underline;}
.connector-install-topbar {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin:0;}
.connector-install-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.connector-connect-img {display:block;height:44px;cursor:pointer;border-radius:0;}
.connector-add-company-btn {margin:0;padding:0 24px;height:45px;border:none;border-radius:12px;background:#2ca01c;color:white;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-style:SemiBold;font-size:14px;line-height:28px;letter-spacing:0%;cursor:pointer;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;}
.connector-add-company-btn:hover {opacity:.95;transform:translateY(-1px);box-shadow:0 8px 20px rgba(29,154,97,.18);}
.connector-secondary-btn {margin:0;padding:0 28px;height:45px;border:2px solid #2B519B;border-radius:12px;background:transparent;color:#2B519B;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-style:SemiBold;font-size:14px;line-height:28px;letter-spacing:0%;cursor:pointer;transition:opacity .2s ease,transform .2s ease,background .2s ease;}
.connector-secondary-btn:hover {background:rgba(43,81,155,.05);transform:translateY(-1px);}
.connector-status {display:flex;align-items:center;gap:14px;}
.connector-status-label {margin:0;font-weight:400;font-style:Regular;font-size:18px;line-height:28px;letter-spacing:0%;color:#585858;}
.connector-status-badge {display:inline-flex;align-items:center;justify-content:center;width:115px;height:32px;padding:4px 16px;border-radius:4px;gap:10px;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-style:Regular;font-size:14px;leading-trim:NONE;line-height:24px;letter-spacing:0%;vertical-align:middle;background:#2B519B;color:#ffffff;}
.connector-status-badge.running {background:#2B519B;color:#F0F8FF;}
.connector-status-badge.stopped {background:#DC3545;color:#F8FBFF;}
.connector-status-badge.published {background:rgb(17 202 240);color:#F8FBFF;}
.connector-status-badge.default {width:130px; background:#979797;color:#F8FBFF;}
.connector-install-table-wrap {width:100%;overflow-x:auto;margin-top: 20px;}
.connector-install-table {width:100%;border-collapse:collapse;background:transparent;}
.connector-install-table thead th {max-width:300px;height:48px;padding:12px 8px;border-bottom:1px solid #2B519B;text-align:left;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-style:SemiBold;font-size:14px;leading-trim:NONE;line-height:24px;letter-spacing:0%;vertical-align:middle;opacity:1;background:transparent;}
.connector-install-table tbody td,
.connector-install-table tbody th {padding:8px;border-bottom:1px solid #B8D6FF;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-style:Regular;font-size:14px;line-height:28px;letter-spacing:0%;color:#2F2F2F;vertical-align:middle;background:transparent;}
.connector-install-table tbody tr.is-active td,
.connector-install-table tbody tr.is-active th {background:#E3EFFF;}
.connector-install-table tbody th {width:56px;font-weight:400;text-align:left;}
.connector-install-table .col-disconnect {width:140px;text-align:center;}
.connector-install-table 
.connector-disconnect-btn {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:#D94A4A;font-size:20px;line-height:1;cursor:pointer;}
.connector-disconnect-btn:hover {opacity:.8;}
.connector-revoked {color:#8A8A8A;font-size:16px;line-height:24px;}
.connector-remove-wrap {margin-top:34px;}
.connector-remove-btn {display:inline-flex;align-items:center;justify-content:center;gap:12px;height:73px;padding:0 28px;border:none;border-radius:12px;background:#C74242;color:#F8FBFF;font-family:"Open Sans",Arial,sans-serif;font-weight:600;font-style:SemiBold;font-size:22px;line-height:32px;letter-spacing:0%;cursor:pointer;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;text-transform:none;}
.connector-remove-btn:hover {opacity:.95;transform:translateY(-1px);box-shadow:0 10px 24px rgba(199,66,66,.18);}
.connector-remove-btn-icon {font-size:30px;line-height:1;display:inline-flex;align-items:center;}
.ghl-popup {display:none;margin:0 0 20px 0;}
.ghl-popup.show {display:block;margin: 52px 0 0 0;}
#RM_responseMessage {margin-top:26px;}

.connector-remove-btn {width:200px;height:56px;background:url('/skins/default/images/lkn/remove_installation.svg') no-repeat center/contain;}
.connector-remove-btn:hover {opacity:.95;}
.connector-remove-btn:active {transform:scale(.98);}

@media (max-width:991.98px) {
.connector-install-topbar {flex-direction:column;align-items:stretch;}
.connector-status {justify-content:flex-start;padding-top:0;}

}

@media (max-width:767.98px) {
.connector-install-wrap {padding:0 12px;}
.connector-install-message {font-size:16px;line-height:24px;}
.connector-install-actions {flex-direction:column;align-items:flex-start;width:100%;}
.connector-connect-img {max-width:100%;height:auto;}
.connector-secondary-btn,.connector-add-company-btn {width:100%;}
.connector-status {flex-wrap:wrap;}
.connector-install-table thead th {padding:14px 12px;font-size:16px;line-height:24px;}
.connector-install-table tbody td,.connector-install-table tbody th {padding:14px 12px;font-size:16px;line-height:24px;}
.connector-remove-btn {min-width:100%;width:100%;height:60px;font-size:18px;line-height:28px;}
}

@media (max-width:575.98px) {
.connector-remove-btn {width:100%;height:48px;}
}



/* =========================================================
   16. PROFILE
========================================================= */
.profile-wrap {margin-top:100px;padding:0 20px;max-width:520px;margin-left:auto;margin-right:auto;font-family:"Open Sans",Arial,sans-serif;}
.profile-title {margin:0 0 32px 0;text-align:center;font-weight:600;font-style:SemiBold;font-size:28px;line-height:36px;letter-spacing:0%;color:#2B519B;}
.profile-field {margin-bottom:28px;text-align:left;}
.profile-label {margin:0 0 6px 0;font-weight:400;font-style:Regular;font-size:18px;line-height:28px;letter-spacing:0%;color:#7A7A7A;}
.profile-value {margin:0;font-weight:600;font-style:SemiBold;font-size:18px;line-height:28px;letter-spacing:0%;color:#2F2F2F;word-break:break-all;}
.profile-back {margin-top:30px;display:block;text-align:center;font-family:"Open Sans",Arial,sans-serif;font-weight:400;font-style:Regular;font-size:16px;line-height:24px;letter-spacing:0%;color:#7A7A7A;text-decoration:none;}
.profile-back:hover {text-decoration:underline;}

/* tablet */
@media (max-width:991.98px) {
.profile-wrap {margin-top:80px;max-width:460px;}
.profile-title {font-size:24px;line-height:32px;}
.profile-label,.profile-value {font-size:16px;line-height:24px;}
}

/* mobile */
@media (max-width:575.98px) {
.profile-wrap {margin-top:60px;padding:0 16px;max-width:100%;}
.profile-title {font-size:22px;line-height:30px;}
.profile-field {margin-bottom:22px;}
.profile-label,.profile-value {font-size:15px;line-height:22px;}
.profile-back {font-size:14px;}
}



.subscription-refresh-btn {width: 196px;height: 46px;padding:0;border:none;border-radius:8px;background:url('/skins/default/images/lkn/Refresh_All_Data.svg') no-repeat center/cover;cursor:pointer;color:transparent;font-size:0;line-height:0;}
.subscription-refresh-btn:hover {opacity:.95;}
.subscription-refresh-btn:active {transform:scale(.98);}