.rounded-btn { border-radius: 40px; } .blue-btn { font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; text-align: center; background-color: #009B9A; padding: 13px 10px; border-radius: 40px; border: 0 !important; color: #fff !important; width: 340px; max-width: 100%; box-shadow: none !important; } .gray-btn { font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; text-align: center; background-color: #D6DEE9; padding: 13px 10px; border-radius: 40px; border: 0 !important; color: #364257 !important; width: 340px; max-width: 100%; box-shadow: none !important; } .red-btn { font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; text-align: center; background-color: #9B0025; padding: 13px 10px; border-radius: 40px; border: 0 !important; color: #fff !important; width: 340px; max-width: 100%; box-shadow: none !important; } .yellow-btn { font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; text-align: center; background-color: #F3CF5D; padding: 13px 10px; border-radius: 40px; border: 0 !important; color: #364257 !important; width: 340px; max-width: 100%; box-shadow: none !important; } .grey-btn { font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; text-align: center; background-color: #D6DEE9; padding: 13px 10px; border-radius: 40px; border: 0 !important; color: #364257 !important; width: 340px; max-width: 100%; box-shadow: none !important; } .blue-text { color: #2C21FE !important; } .sky-blue-text { color: #009B9A !important; } .red-text { color: #9B0025 !important; } .gray-text { color: #364257 !important; } .green-text { color: #06AE25 !important; } .text-underline { text-decoration: underline; } .fw-600 { font-weight: 600 !important; } .fw-800 { font-weight: 800 !important; } .fs-20 { font-size: 20px !important; } .fs-32 { font-size: 32px !important; } .modal-740px { max-width: 740px; } .mb-30 { margin-bottom: 30px !important; } .mr-50 { margin-right: 50px !important; } .py-20 { padding: 20px !important; } .br-0 { border-radius: 0 !important; } .flex-direction-column { flex-direction: column !important; } .validation-modal .modal-content { border-radius: 40px; overflow: hidden; padding: 50px; text-align: center; width: fit-content; } .validation-modal .modal-content .error-message, .validation-modal .modal-content .message-title { font-size: 26px; font-weight: 600; line-height: 44px; letter-spacing: 0em; margin-bottom: 35px; color: #364257; } .validation-modal .modal-content .error-message, .validation-modal .modal-content .message { font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: 0em; text-align: center; margin-bottom: 35px; color: #364257; } .validation-modal .modal-content button { color: #fff; border-radius: 40px; padding: 12px; font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: 0em; text-align: center; width: 100%; border: 0; } .validation-modal.style1 .modal-content button { background: #009B9A; } .validation-modal.style2 .modal-content button { background: #9B0025; } .custom-modal .modal-content { border-radius: 40px; overflow: hidden; padding: 50px; } .custom-modal .modal-content .modal-title { margin-bottom: 50px; color: #364257; font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; text-align: center; } /* Header */ .main-dashboard-navigation { background: linear-gradient(90deg, #E7E63B 0%, #C6E6D7 77%); } .main-dashboard-navigation .h2-title.black { color: #000; } .main-dashboard-navigation ul li a { color: #000; } .main-dashboard-navigation .user-selection .btn { color: #fff; } .main-dashboard-navigation .user-selection .btn:hover { color: #fff; } .main-dashboard-navigation .user-selection li { position: relative; } .main-dashboard-navigation .user-selection li.active::after { content: url('/themes/tailwind/images/check.png'); position: absolute; top: calc(50% - 10px); right: 15px; } .main-dashboard-navigation .notification-selection .dropdown-list a { color: #009B9A; font-weight: 500; font-size: 16px; line-height: 21.82px; } .main-dashboard-navigation .main-dashboard-buttons .dropdown { top: 65px; } /* Sidebar */ .sidebar-list-navigation li:hover a { display: block; background: #E3E64A; border-radius: 100px; } .sidebar-list-navigation li:hover a img { filter: invert(1); } /* Body */ .main-section-dashboard .main-content { background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; } .main-inside-content { height: 100%; } .main-inside-content .title-wrapper { display: flex; align-items: center; justify-content: space-between; margin-bottom: 31px; flex-wrap: wrap; } .main-inside-content .title-wrapper .page-title { color: #364257; font-weight: 600; font-size: 26px; line-height: 43.65px; margin-bottom: 0; } .main-inside-content .title-wrapper .title-actions-wrapper { display: flex; align-items: center; flex-wrap: wrap; } .main-inside-content .title-wrapper .title-actions-wrapper button:first-child { margin-right: 25px; } .main-inside-content .card-wrapper { background-color: #fff; border-radius: 40px; overflow: hidden; } .main-inside-content .card-wrapper .card-title-wrapper { background: linear-gradient(90deg, #7DB979 0%, #26BBAA 100%); padding: 33px; text-align: center; } .main-inside-content .card-wrapper .card-title-wrapper2 { background: linear-gradient(90deg, #7DB979 0%, #26BBAA 100%); padding: 15px 33px; display: flex; justify-content: space-between; align-items: center; } .main-inside-content .card-wrapper .card-title-wrapper .card-main-title { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: 0em; color: #fff; } .main-inside-content .card-wrapper .card-title-wrapper2 .card-main-title { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: 0em; color: #fff; } .main-inside-content .card-wrapper .card-body { padding: 39px; } .main-inside-content .card-wrapper .card-body .card-body-title { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: 0em; text-align: center; color: #364257; margin-bottom: 30px; } .main-inside-content .card-wrapper .card-body .card-body-desc { font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; text-align: center; color: #364257; } .main-inside-content .card-wrapper .card-title { margin-bottom: 25px; font-size: 22px; color: #009B9A; font-weight: 600; line-height: 30px; letter-spacing: 0px; } .custom-nav-tabs .nav-tabs { padding-bottom: 3px; overflow: hidden; border-top-right-radius: 50px; border-top-left-radius: 50px; } .custom-nav-tabs .nav-tabs .nav-item { padding-right: 6px; } .custom-nav-tabs .nav-tabs .nav-item:last-child { padding-right: 0; } .custom-nav-tabs .nav-tabs .nav-item .nav-link { padding: 19px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; box-shadow: 0px 4px 8px 0px #15785440; background: #364257; border: 0; } .custom-nav-tabs .nav-tabs .nav-item .nav-link.active { background: #fff; color: #364257; } .custom-nav-tabs .nav-tabs .nav-item .nav-link img { margin-right: 39px; height: 40px; width: auto; } .custom-nav-tabs .nav-tabs .nav-item .nav-link.active img { filter: invert(1); } .custom-nav-tabs .nav-tabs .nav-item .nav-link .tab-count { font-size: 20px; font-weight: 600; line-height: 27px; letter-spacing: 0em; text-align: center; color: #364257; background: #EBEBE4; border-radius: 50px; margin-left: 25px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .custom-nav-tabs .tab-content { border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; overflow: hidden; background-color: #fff; padding: 0; padding-bottom: 31px; } .custom-table thead tr { box-shadow: 0px -3px 5px 0px #B5B5B580 inset; } .custom-table thead tr th { border-right: 1px solid; border-bottom: 0; padding: 10px 20px; font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: 0em; color: #364257; } .custom-table thead tr th:last-child { border-right: 0; } .custom-table tbody tr td { padding: 10px 20px; color: #364257; font-family: Nunito; font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: 0em; vertical-align: middle; } .custom-table tbody tr.red-highlight { background: #F5AE97; } .custom-table tbody tr.yellow-highlight { background: #FFEFBD; } .theme-form label.col-form-label { font-size: 18px; line-height: 25px; letter-spacing: 0px; color: #364257; } .theme-form input[type="text"], .theme-form input[type="number"], .theme-form input[type="tel"], .theme-form select, .theme-form input[type="password"], .theme-form input[type="email"], .theme-form textarea { padding: 15px 20px; border-radius: 50px; background-color: #FFFFFF; border: 1px solid #6D7581; color: #364257; font-size: 18px; line-height: 25px; letter-spacing: 0em; } .theme-form select { background-color: #EBEBE4; } .theme-form input[type="text"]:disabled, .theme-form input[type="number"]:disabled, .theme-form input[type="tel"]:disabled, .theme-form select:disabled, .theme-form input[type="password"]:disabled, .theme-form input[type="email"]:disabled { color: #000000; background-color: #6D7581; } .theme-form .date-field-wrapper { display: flex; align-items: center; flex-wrap: nowrap; } .theme-form .date-field-wrapper .date-field-separator { font-size: 18px; font-weight: 500; line-height: 25px; letter-spacing: 0px; margin: 0 10px; } .theme-form .password-wrapper { position: relative; } .theme-form .password-wrapper input { padding-right: 42px; } .theme-form .password-wrapper .password-hide-show { cursor: pointer; position: absolute; top: 0; right: 0; top: 18px; right: 18px; } .theme-form .form-separator { border: 1px solid #D6DEE9; } .file-upload-wrapper { position: relative; padding: 36px 20px 56px 20px; border: 2px dashed #6D7581; text-align: center; border-radius: 18px; } .file-upload-wrapper img { margin-bottom: 8px; } .file-upload-wrapper .file-upload-desc { display: block; font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0em; color: #009B9A; margin-bottom: 10px; } .file-upload-wrapper .file-upload-btn { } .file-upload-wrapper input[type="file"] { opacity: 0; position: absolute; z-index: -1; } /* custom checkbox */ .custom-radio-checkbox { position: relative; width: fit-content; } .custom-radio-checkbox [type="radio"]:checked, .custom-radio-checkbox [type="radio"]:not(:checked), .custom-radio-checkbox [type="checkbox"]:checked, .custom-radio-checkbox [type="checkbox"]:not(:checked) { position: absolute; left: 0; opacity: 0; margin: 0; } .custom-radio-checkbox [type="radio"]:checked + label, .custom-radio-checkbox [type="radio"]:not(:checked) + label, .custom-radio-checkbox [type="checkbox"]:checked + label, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label { position: relative; padding-left: 30px; cursor: pointer; display: inline-block; color: #364257; font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: 0px; min-height: 20px; } .custom-radio-checkbox [type="radio"]:checked + label:before, .custom-radio-checkbox [type="radio"]:not(:checked) + label:before, .custom-radio-checkbox [type="checkbox"]:checked + label:before, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label:before { content: ''; position: absolute; left: 0px; top: 3px; width: 20px; height: 20px; border: 1.25px solid #051433; background: #F9F9FF; box-shadow: 0px 1.25px 2.5px 0px #0000000D; } .custom-radio-checkbox [type="checkbox"]:checked + label:before, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label:before { border-radius: 5px; } .custom-radio-checkbox [type="radio"]:checked + label:before, .custom-radio-checkbox [type="radio"]:not(:checked) + label:before { border-radius: 50px; } .custom-radio-checkbox [type="radio"]:checked + label:after, .custom-radio-checkbox [type="radio"]:not(:checked) + label:after, .custom-radio-checkbox [type="checkbox"]:checked + label:after, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label:after { content: ''; width: 11px; height: 6px; position: absolute; top: 8px; left: 4px; transform: rotate(-45deg); } .custom-radio-checkbox [type="radio"]:not(:checked) + label:after, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label:after { opacity: 0; } .custom-radio-checkbox [type="radio"]:checked + label:after, .custom-radio-checkbox [type="checkbox"]:checked + label:after { opacity: 1; } .custom-radio-checkbox [type="radio"]:checked + label:after, .custom-radio-checkbox [type="radio"]:not(:checked) + label:after, .custom-radio-checkbox [type="checkbox"]:checked + label:after, .custom-radio-checkbox [type="checkbox"]:not(:checked) + label:after { border: 2px solid #051433; border-top: none; border-right: none; } .custom-radio-checkbox [type="radio"]:checked + label:before, .custom-radio-checkbox [type="checkbox"]:checked + label:before { /* background: #009B9A; */ } .empty-state-wrapper { padding: 100px 20px 60px 0; } .empty-state-wrapper .empty-text { font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; color: #6D7581; margin-top: 35px; } .search-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .search-wrapper .search-title { font-size: 22px; font-weight: 500; line-height: 33px; letter-spacing: 0px; color: #364257; } .search-wrapper .search-input-wrapper { position: relative; width: 584px; max-width: 100%; margin: 0 20px; } .search-wrapper .search-input-wrapper input { padding-left: 70px; } .search-wrapper .search-input-wrapper .filter-modal { position: absolute; left: 0; top: 0; height: 100%; padding-left: 20px; display: flex; align-items: center; } .search-wrapper .search-input-wrapper .filter-modal img { width: 34px; height: 34px; } /* Date Picker */ .date-picker-wrapper { position: relative; } .date-picker-wrapper img { position: absolute; left: 32px; top: 50%; transform: translate(0, -50%); width: 24px; height: 24px; } .date-picker-wrapper input { padding-left: 55px !important; } /* Toggle Switch */ .toggle-switch { --width: 190px; --height: 40px; position: relative; display: inline-block; width: var(--width); height: var(--height); border-radius: 50px; cursor: pointer; box-shadow: 0px 0px 1px 0px #00000026; } .toggle-switch input { display: none; } .toggle-switch .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--height); background-color: #FFFFFF; transition: all 0.4s ease-in-out; } .toggle-switch .slider::before { content: url('/themes/tailwind/images/toggle-switch-icon.png'); position: absolute; top: 5px; left: 5px; width: 50px; height: calc(var(--height) - 10px); border-radius: 50px; background-color: #009B9A; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.4s ease-in-out; display: flex; align-items: center; justify-content: center; } .toggle-switch input:checked+.slider::before { transform: translateX(calc(var(--width) - var(--height) - 20px)); } .toggle-switch .labels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 12px; transition: all 0.4s ease-in-out; } .toggle-switch .labels::after { content: attr(data-off); position: absolute; right: 10px; color: #009B9A; opacity: 1; transition: all 0.4s ease-in-out; font-size: 26px; line-height: 1; letter-spacing: 0em; text-align: left; top: 50%; transform: translate(0, -50%); font-weight: 500; } .toggle-switch .labels::before { content: attr(data-on); position: absolute; left: 10px; color: #009B9A; opacity: 0; transition: all 0.4s ease-in-out; font-size: 26px; line-height: 1; letter-spacing: 0em; text-align: left; top: 50%; transform: translate(0, -50%); font-weight: 500; } .toggle-switch input:checked~.labels::after { opacity: 0; } .toggle-switch input:checked~.labels::before { opacity: 1; } /* Toggle Switch 2 */ .toggle-switch2 { padding: 0 10px; display: flex; height: 27px; align-items: center; } .toggle-switch2 input[type="checkbox"] { display: none; } .toggle-switch2 label { color: #4FBCA1; position: relative; font-family: FontAwesome; } .toggle-switch2 input[type="checkbox"] + label::before{ content: ' '; display: block; height: 19px; width: 49px; border: 1px solid #9B9B9B; border-radius: 9px; background: #9B9B9B; cursor: pointer; } .toggle-switch2 input[type="checkbox"] + label::after{ content: "\f00d"; height: 27px; width: 27px; border: 1px solid #fff; border-radius: 50%; position: absolute; top: -4px; left: -10px; background: #fff; transition: all 0.3s ease-in; box-shadow: -1px 1px 1px 0px #33333340; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #009B9A; } .toggle-switch2 input[type="checkbox"]:checked + label::before{ border: 1px solid #D6DEE9; background: #D6DEE9; } .toggle-switch2 input[type="checkbox"]:checked + label::after{ content: "\f00c"; left: 29px; transition: all 0.3s ease-in; border: 1px solid #009B9A; background: #009B9A; color: #fff; } /* Packages */ .package-list { } .package-list .package-box { position: relative; height: 100%; display: flex; flex-direction: column; } .package-list .package-box .package-box-header { position: relative; background-color: #F3CF5D; padding: 50px 25px 80px; text-align: center; } .package-list .package-box .package-box-header .header-title { font-size: 54px; font-weight: 600; line-height: 87px; letter-spacing: 0em; margin-bottom: 20px; color: #364257; } .package-list .package-box .package-box-header .header-title span { font-size: 32px; line-height: 44px; font-weight: 500; } .package-list .package-box .package-box-header .header-desc { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: 0em; margin-bottom: 0; color: #364257; } .package-list .package-box .package-box-price { position: absolute; padding: 14px 20px; width: calc(100% - 48px); margin: 0 24px; background-color: rgb(214 222 233 / 50%); border-radius: 80px; bottom: -68px; left: 0; } .package-list .package-box .package-box-price .package-box-price-inner { border-radius: 80px; padding: 20px; text-align: center; font-size: 2vw; font-weight: 600; line-height: 49px; letter-spacing: 0em; background-color: #009B9A; color: #fff; } .package-list .package-box .package-box-price .package-box-price-inner .bigger-text { line-height: 65px; } .package-list .package-box .package-box-body { padding-top: 90px; background-color: #fff; margin-bottom: 43px; height: 100%; } .package-list .package-box .package-box-body .package-box-body-content { padding: 30px 15px; } .package-list .package-box .package-box-body .package-box-body-separator { border-bottom: 1px solid #D6DEE9; opacity: 1; } .package-list .package-box .package-box-body .package-box-body-title { display: block; font-size: 30px; font-weight: 600; line-height: 41px; letter-spacing: 0em; color: #364257; margin-bottom: 20px; } .package-list .package-box .package-box-body .package-box-body-list { list-style-image: url('/themes/tailwind/images/check-yellow.png'); font-size: 24px; font-weight: 400; line-height: 37px; letter-spacing: 0em; text-align: left; color: #364257; margin-bottom: 20px; } .package-list .package-box .package-box-body .package-box-body-list.without-style { list-style-image: none; } .package-list .package-box .package-box-body .package-box-body-list li { margin-left: 37px; } .package-list .package-box .btn-get-started { display: flex; align-items: center; justify-content: center; border: 3px solid #F3CF5D; border-radius: 40px; color: #364257; background-color: #F4F7FA; padding: 20px; font-size: 24px; font-weight: 700; line-height: 33px; letter-spacing: 0em; width: 300px; max-width: 100%; } .package-list .package-box .package-box-body .package-box-body-desc { font-size: 24px; font-weight: 500; line-height: 33px; letter-spacing: 0em; text-align: left; color: #364257; margin-bottom: 0; } .package-list .package-box .package-box-body .package-box-body-optional-list { } .package-list .package-box .package-box-body .package-box-body-optional-list .optional-list-row { display: flex; align-items: center; justify-content: space-between; opacity: .5; margin-bottom: 20px; } .package-list .package-box .package-box-body .package-box-body-optional-list .optional-list-row.selected { opacity: 1; } .package-list .package-box .package-box-body .package-box-body-optional-list .optional-list-row .optional-list-row-title { font-size: 24px; font-weight: 400; line-height: 37px; letter-spacing: 0em; color: #364257; width: 100%; } .package-list .package-box .package-box-body .package-box-body-optional-list .optional-list-row .optional-list-row-price { font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: 0em; color: #009B9A; width: 100%; } .package-list .package-box .package-box-body .package-box-body-optional-list .optional-list-row .optional-list-row-price span { font-size: 24px; line-height: 37px; } .package-list .package-box .btn-get-started:focus { box-shadow: none; } .package-list .package-box .btn-get-started img { margin-right: 26px; } /* Dashboard */ .dashboard-page .page-title { color: #000000; font-weight: 700; font-size: 32px; line-height: 43.65px; margin-bottom: 60px; } .dashboard-page .dashboard-boxes { } .dashboard-page .dashboard-boxes .dashboard-box { display: block; width: 100%; padding: 50px 20px; background-color: #fff; width: 500px; border-radius: 40px 0px 40px 0px; text-align: center; margin-bottom: 60px; } .dashboard-page .dashboard-boxes .dashboard-box .box-title { color: #364257; font-weight: 400; font-size: 18px; } /* General Information */ .general-information-page .card-wrapper { border-top-right-radius: 0px; border-top-left-radius: 0px; } .general-information-page .all-members .title-wrapper { display: flex; margin-bottom: 25px; width: fit-content; align-items: center; } .general-information-page .all-members .title-wrapper .title { margin-bottom: 0; font-size: 20px; color: #009B9A; font-weight: 600; line-height: 27px; letter-spacing: 0px; white-space: nowrap; margin-right: 20px; } .general-information-page .all-members .body-wrapper { padding: 10px; background-color: #F4F7FA; } .general-information-page .all-members .body-wrapper .all-copy-of-documents { padding-left: 20px; font-size: 18px; line-height: 27px; letter-spacing: 0em; font-weight: 500; } .general-information-page .all-members .body-wrapper .all-copy-of-documents .non-empty-state { display: flex; align-items: center; } .general-information-page .all-members .body-wrapper .all-copy-of-documents .non-empty-state .file-name { margin-right: 30px; } .general-information-page .all-members .body-wrapper .all-copy-of-documents .non-empty-state .action-separator{ font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0em; color: #364257; margin: 0 10px; } /* Book Keeping / Account Overview Page */ .bk-account-overview-page { width: 100%; max-width: 1700px; margin: auto; } .bk-account-overview-page .page-title { color: #000000; font-weight: 700; font-size: 32px; line-height: 43.65px; margin-bottom: 40px; } .bk-account-overview-page .payment-gateways { margin-bottom: 60px; } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button { background: linear-gradient(274.98deg, #6D7581 7.35%, rgba(217, 217, 217, 0) 101.68%); position: absolute; display: block; height: calc(100% - 40px); width: fit-content; z-index: 10; top: 20px; transform: none; } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button.slick-disabled { display: none !important; } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button::before { display: none; } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button img { left: unset; right: unset; width: 72px; height: 72px; position: relative; top: 50%; transform: translate(0, -50%); } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button.prev-button { left: 19px; padding-right: 42px; } .bk-account-overview-page .payment-gateways.slick-slider .next-prev-button.next-button { right: 19px; padding-left: 42px; } .bk-account-overview-page .payment-gateways .payment-gateway-box { border-radius: 40px 0px 40px 0px; overflow: hidden; border: 2px solid #FFFFFFB2; box-shadow: 0px 12px 16px 0px #06111A17; margin: 20px; outline: 0; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-header { border-bottom: 2px solid #F3CF5D; padding: 23px; background-color: #fff; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-header .box-title { display: block; font-size: 42px; font-weight: 700; line-height: 65px; letter-spacing: 0em; text-align: center; color: #364257; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-body { text-align: center; background-color: #F4F4F4; padding-top: 42px; padding-bottom: 28px; padding-right: 20px; padding-left: 20px; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-body .box-body-price-wrapper { margin-bottom: 30px; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-body .box-body-price-wrapper:last-child { margin-bottom: 0; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-body .box-body-price-wrapper .box-body-title { display: block; font-size: 24px; font-weight: 400; line-height: 33px; letter-spacing: 0em; color: #364257; margin-bottom: 10px; } .bk-account-overview-page .payment-gateways .payment-gateway-box .box-body .box-body-price-wrapper .box-body-price { display: block; font-size: 42px; font-weight: 700; line-height: 65px; letter-spacing: 0em; color: #58C2B1; } .bk-account-overview-page .apply-booking-service-btn { display: flex; justify-content: center; padding: 40px !important; background: linear-gradient(90deg, #7DB979 0%, #26BBAA 100%); border: 0; border-radius: 40px; } .bk-account-overview-page .apply-booking-service-btn .btn-title { margin: 0 30px; font-size: 28px; font-weight: 600; line-height: 38px; letter-spacing: 0em; color: #fff; } /* Book Keeping > Document Library */ .document-library-page .card-wrapper { border-top-right-radius: 0px; border-top-left-radius: 0px; } /* Book Keeping > Packages Page */ .bk-packages-page .page-title { font-weight: 500 !important; margin-right: 30px; } /* Book Keeping > checkout Page */ .bk-checkout-page .card-wrapper { border-radius: 0; } .cart-summary-wrapper { width: 1363px; max-width: 100%; } .cart-summary-wrapper .summary-computations-wrapper { padding: 30px 40px; border-radius: 40px; background-color: #EBEBE4; border-radius: 40px; overflow: hidden; box-shadow: 0px 4px 8px 0px #15785440; margin-bottom: 30px; } .cart-summary-wrapper .summary-computations-wrapper .summary-row { margin-bottom: 20px; display: flex; justify-content: space-between; font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; color: #364257; } .cart-summary-wrapper .summary-computations-wrapper .summary-row ul { list-style-type: initial; margin-left: 20px; } .cart-summary-wrapper .summary-computations-wrapper .summary-row-separator { margin-bottom: 20px; border-top: 1px dashed #364257; background-color: transparent; } .cart-summary-wrapper .summary-form-box { margin-bottom: 30px; background-color: #F4F7FA; padding: 30px 20px 0; } .cart-summary-wrapper .summary-form-box .summary-form-box-title { font-size: 24px; font-weight: 600; line-height: 33px; letter-spacing: 0em; color: #364257; margin-bottom: 30px; } /* Company Service Page */ .cs-main-page .button-row .btn { background: linear-gradient(90deg, #7DB979 0%, #26BBAA 100%); display: flex; align-items: center; justify-content: center; padding: 25px 20px !important; color: #FFFFFF; font-size: 24px !important; font-weight: 600; line-height: 38px; letter-spacing: 0em; border-radius: 40px; border: 0; box-shadow: none; } .cs-main-page .button-row { margin-bottom: 60px; } .cs-main-page .button-row .btn .count-circle { font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: 0em; display: flex; align-items: center; justify-content: center; color: #364257; width: 39px; height: 39px; background-color: #F3CF5D; border-radius: 50px; } .cs-main-page .cs-main-page-body { max-width: 1650px; margin-left: auto; margin-right: auto; } .box-action-row .box-action-wrapper { background-color: #FFFFFF; box-shadow: 0px 4px 8px 0px #15785440; border-radius: 40px 0px 40px 0px; padding: 24px; text-align: center; display: block; color: initial; height: 100%; } .box-action-row .box-action-title { font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: 0em; display: block; max-width: 260px; margin-left: auto; margin-right: auto; } /* Company Service > Limited Company Page */ .cs-limited-company-page { height: 100%; } .cs-limited-company-page .card-wrapper { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: flex; flex-direction: column; height: 100%; } .cs-limited-company-page .card-wrapper .card-header { background: url('/themes/tailwind/images/Vector 4.png'); background-size: 100% 100%; background-repeat: no-repeat; border: 0; padding: 0; } .cs-limited-company-page .card-wrapper .card-header.no-bg-img { background: linear-gradient(90deg, #7DB979 0%, #26BBAA 100%); padding: 8px 0; } .cs-limited-company-page .card-wrapper .card-header .card-header-top { display: flex; justify-content: space-between; align-items: center; padding-right: 43px; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .top-title { font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: 0em; color: #000000; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper { display: flex; align-items: center; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step { background-color: #F4F7FA; width: 24px; height: 24px; border-radius: 50%; position: relative; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step.active, .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step.done { background-color: #F3CF5D; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step.active::after { content: ''; position: absolute; top: 5px; left: 5px; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step.done::after { content: ''; background-image: url('/themes/tailwind/images/check-black.png'); background-repeat: no-repeat; background-size: 10px 7px; background-position: center; position: absolute; top: 0; width: 100%; height: 100%; } .cs-limited-company-page .card-wrapper .card-header .card-header-top .progress-wrapper .progress-step-separator { border: 2px solid #F4F7FA; margin: 0 10px; width: 29px; border-radius: 50px; } .cs-limited-company-page .card-wrapper .card-header .card-header-bottom { padding-top: 73px; padding-bottom: 146px; text-align: center; padding-left: 20px; padding-right: 20px; } .cs-limited-company-page .card-wrapper .card-header .card-header-bottom .bottom-title { font-size: 32px; font-weight: 600; line-height: 44px; letter-spacing: 0em; color: #fff; } .cs-limited-company-page .card-wrapper .form-steps { height: 100%; display: flex; flex-direction: column; } .cs-limited-company-page .card-wrapper .card-body { width: 100%; margin-left: auto; margin-right: auto; max-width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .cs-limited-company-page .card-wrapper .card-body.card-body-s { width: 794px; } .cs-limited-company-page .card-wrapper .card-body.card-body-l { width: 1100px; } .cs-limited-company-page .card-wrapper .card-body.card-body-xl { width: 1500px; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; justify-content: space-around; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection .radio-select { position: relative; border: 3px solid #009B9A; background-color: #F4F7FA; border-radius: 40px; display: flex; align-items: center; justify-content: center; min-width: 304px; cursor: pointer; padding: 20px; color: #009B9A; margin: 10px 0; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection .radio-select.checked { background-color: #009B9A; color: #fff; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection .radio-select [type="radio"]:checked, .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection .radio-select [type="radio"]:not(:checked) { position: absolute; left: 0; opacity: 0; margin: 0; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection .radio-select span { font-size: 24px; font-weight: 700; line-height: 33px; letter-spacing: 0em; cursor: pointer; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper { width: 372px; max-width: 100%; border: 1px solid #6D7581; background-color: #fff; border-radius: 50px; position: relative; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper .number-input-btn { background-color: #F4F7FA; border-radius: 50px; position: absolute; width: 103px; height: 100%; top: 0; border: 0; color: #364257; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper .number-input-btn .fa { font-size: 30px; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper .number-input-btn.minus { left: 0; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper .number-input-btn.plus { right: 0; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper .number-input-btn:hover { background-color: #009B9A; color: #fff; text-align: center; } .cs-limited-company-page .card-wrapper .card-body .number-input-wrapper input { width: 100%; border: none; } .cs-limited-company-page .package-list .package-box .package-box-body { background-color: #F4F7FA; } .cs-limited-company-page .package-list .package-box .package-box-body .package-box-body-content { width: 600px; max-width: 100%; margin-left: auto; margin-right: auto; } .digital-bookkeeping-section { } .digital-bookkeeping-section .digital-bookkeeping-section-box { background-color: #F4F7FA; border-radius: 40px; padding: 30px 20px 10px; text-align: center; box-shadow: 0px 4px 8px 0px #15785440; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-title { font-size: 28px; font-weight: 600; line-height: 44px; letter-spacing: 0em; color: #364257; margin-bottom: 40px; display: block; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select { display: flex; align-items: center; padding: 12px 25px; border: 3px solid #F3CF5D; background-color: #F4F7FA; border-radius: 40px; margin-bottom: 20px; cursor: pointer; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select.active, .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select:hover { background-color: #F3CF5D; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select img { width: 18px; margin-right: 33px; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select .digital-bookkeeping-section-box-select-title { font-size: 32px; line-height: 50px; font-weight: 600; line-height: 37px; letter-spacing: 0em; color: #364257; } .digital-bookkeeping-section .digital-bookkeeping-section-box .digital-bookkeeping-section-box-select .digital-bookkeeping-section-box-select-title span { font-size: 24px; line-height: 37px; } .sc-overflow { overflow-y: auto; } .scstyle-15::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } .scstyle-15::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } .scstyle-15::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#c6e6d7), to(#e7e63b)); } *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } input:focus, select:focus, textarea:focus, button:focus { outline: none; } .drop { width: 90%; height: 220px; border: 3px dashed #DADFE3; border-radius: 15px; overflow: hidden; text-align: center; background: transparent; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: 10px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .drop .cont { width: 500px; height: 170px; color: #8E99A5; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .drop .cont i { font-size: 40px; color: #787e85; position: relative; } .drop .cont .tit { font-size: 12px; color: #009B9A; font-weight: 500; } .drop .cont .desc { color: #787e85; font-size: 18px; } .drop .cont .browse { margin: 10px 25%; color: white; padding: 8px 16px; border-radius: 4px; background: #00c993; } .drop input { width: 100%; height: 100%; cursor: pointer; background: red; opacity: 0; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #list { width: 100%; text-align: left; position: absolute; left: 0; top: 0; } .dashed_upload { height: 200px; } .drop { text-align: center; } .image-container { display: flex; justify-content: center; align-items: center; height: 70px; /* Adjust the height as needed */ margin-bottom: 10px; /* Optional margin adjustment */ } .modals { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(106, 95, 84, 0.7); } .modals-content { margin: 10% auto; position: relative; } #webcamVideo { width: 100%; /* Set the video width to 100% */ max-height: 50vh; /* Limit the video height */ } #scanGuide { position: absolute; border: 2px solid green; /* Change the border style and color as needed */ width: 20%; /* Adjust the width of the guide rectangle */ height: 50%; /* Adjust the height of the guide rectangle */ top: 25%; /* Adjust the top position to center vertically */ left: 40%; /* Adjust the left position to center horizontally */ pointer-events: none; /* Make the rectangle non-interactive */ } #scanText { position: absolute; background: rgba(0, 0, 0, 0.7); padding: 20px; color: white; /* Change the text color as needed */ font-size: 18px; /* Adjust the font size as needed */ top: 50%; /* Center vertically */ left: 50%; /* Center horizontally */ transform: translate(-50%, -50%); /* Center the text within its container */ } /* Company Service > checkout Page */ .cs-checkout-page .card-wrapper { border-radius: 0; } /* Chat */ .chat-wrapper { width: fit-content; position: fixed; bottom: 24px; right: 19px; z-index: 10; } .chat-wrapper .chat-icon-button { cursor: pointer; width: fit-content; margin-left: auto; } .chat-wrapper .chat-icon-button img { width: 107px; height: 107px; } .chat-wrapper .chat-box-wrapper { width: 390px; height: 661px; max-height: calc(100vh - 155px); padding: 30px 15px 30px 15px; border-radius: 40px; box-shadow: 1px 4px 4px 0px #00000040; background-color: #009B9A; overflow: auto; } .chat-wrapper .chat-box-wrapper .chat-form-steps { display: flex; flex-direction: column; height: 100%; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-form-header { max-width: 320px; margin: 0 auto; text-align: center; width: 100%; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-form-header .chat-form-title { margin-left: 20px; font-size: 28px; font-weight: 700; line-height: 38px; letter-spacing: 0em; color: #EBEBE4; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-form-header .chat-form-desc { margin-top: 25px; margin-bottom: 30px; font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: 0em; color: #EBEBE4; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-service-list .chat-service-box { width: 100%; height: 85px; padding: 15px; border-radius: 40px 0px 40px 0px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0px 4px 8px 0px #15785440; background-color: #FFFFFF; cursor: pointer; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-service-list .chat-service-box .chat-service-box-icon { margin-right: 24px; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-service-list .chat-service-box .chat-service-box-title { font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: 0em; color: #000000; margin-right: 10px; } .chat-wrapper .chat-box-wrapper .chat-form-steps.step2 .chat-form-header { max-width: 100%; } .chat-wrapper .chat-box-wrapper .chat-form-steps.step2 .chat-form-header .chat-form-title { margin-left: 13px; margin-right: 13px; font-size: 20px; } .chat-wrapper .chat-box-wrapper .chat-form-steps.step2 .chat-form-header .chat-form-desc { font-size: 14px; margin-bottom: 20px; max-width: 200px; margin-left: auto; margin-right: auto; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper { border-radius: 20px; background-color: #fff; padding: 16px 10px 8px; height: 100%; display: flex; flex-direction: column; max-height: calc(100% - 135px); } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body { height: 100%; overflow: auto; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-date { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; line-height: 17px; letter-spacing: 0em; text-align: center; color: #364257; margin-bottom: 14px; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box { width: 210px; max-width: 100%; margin-left: auto; margin-bottom: 5px; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box .chat-messages-bubble { padding: 8px; border-radius: 10px 10px 0px 10px; margin-bottom: 4px; font-size: 12px; font-weight: 400; line-height: 16px; color: #FFFFFF; background-color: #009FEF; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box .chat-messages-bubble a { color: #FFFFFF; text-decoration: underline; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box .chat-messages-timespan { font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 400; line-height: 14px; letter-spacing: 0em; text-align: right; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box.from-sender { margin-left: initial; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box.from-sender .chat-messages-bubble { border-radius: 10px 10px 10px 0px; background-color: #F5F5F5; color: #000000; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-body .chat-messages-box.from-sender .chat-messages-bubble a { color: #0d6efd; text-decoration: none; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-bottom { display: flex; align-items: center; justify-content: space-between; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-bottom .chat-messages-input-wrapper { width: 100%; border-radius: 13px; border: 1.5px solid #EEEEEE; padding: 10px 15px; display: flex; align-items: center; margin-right: 15px; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-bottom .chat-messages-input-wrapper textarea { margin-left: 12px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0em; color: #000000; padding: 6px 12px; border: none; border-left: 1px solid #CCCCCC; width: 100%; box-shadow: none; resize: none; } .chat-wrapper .chat-box-wrapper .chat-form-steps .chat-messages-wrapper .chat-messages-bottom .chat-messages-send { cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 10px; background-color: #009FEF; padding: 14px 17px; } @media screen and (max-width: 768px) { .mobile-flex-column { flex-direction: column; } .cs-limited-company-page .card-wrapper .card-body .custom-radio-selection { flex-wrap: wrap; } }