File manager - Edit - /home/linknsbh/rassudr.online/public/assets/frontend/css/base.css
Back
/* ----------------------------------------- Variables CSS ----------------------------------------- */ :root { --font-heading: "Fira Sans", sans-serif; --font-body: "Poppins", sans-serif; --font-icon: "Font Awesome 5 Pro"; --font-base: 16px; --font-sm: 14px; --font-xsm: 12px; --font-lg: 18px; --font-normal: 400; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; --font-size--h1: 64px; --font-size--h2: 48px; --font-size--h3: 32px; --font-size--h4: 24px; --font-size--h5: 20px; --font-size--h6: 18px; --color-primary: #FF0037; --color-secondary: #FF4870; --color-blue: #0061DF; --color-red: #EB4C4C; --color-green: #00B67A; --color-white: #ffffff; --color-black: #000000; --color-dark: #121212; --color-light: #dcdcdc; --color-medium: #747474; --color-primary-rgb: 255, 0, 55; --color-secondary-rgb: 255, 72, 112; --color-red-rgb: 235, 76, 76; --color-green-rgb: 0, 182, 122; --color-blue-rgb: 0, 97, 223; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; --color-dark-rgb: 18, 18, 18; --color-medium-rgb: 141, 141, 141; --color-light-rgb: 242, 242, 242; --border-color: #e8e8e8; --border-color-2: #a7a7a7; --text-dark: var(--color-dark); --text-medium: var(--color-medium); --text-white: var(--color-white); --text-light: var(--color-light); --btn-color: var(--text-white); --btn-hover-color: var(--text-white); --bg-1: #F3F3F3; --bg-2: #F8F8F8; --bg-white: var(--color-white); --bg-dark: var(--color-dark); --bg-primary-light: rgba(var(--color-primary-rgb), .05); --gradient-1: linear-gradient(145deg, var(--color-primary) 0%, var(--color-secondary) 100%); --shadow-md: 0 5px 30px -5px rgba(8, 0, 42, .1); --shadow-round: 0 15px 30px -15px rgba(8, 0, 42, .5); --radius-sm: 5px; --radius-md: 10px; --radius-lg: 15px; --radius-xl: 20px; } /* ----------------------------------------- Reset CSS ----------------------------------------- */ :focus { outline: none; } img { max-width: 100%; } .form-control:focus { box-shadow: none; } ul { padding: 0; } figure, blockquote, ul { margin-bottom: 0; } table, th, td { vertical-align: middle; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background-color: var(--bg-light); } ::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } /* ----------------------------------------- Typography CSS ----------------------------------------- */ body { font-family: var(--font-body); font-size: var(--font-base); font-weight: var(--font-normal); color: var(--text-medium); overflow-x: hidden; background-color: var(--bg-white); } a { color: var(--text-dark); text-decoration: none; outline: 0 !important; transition: all 0.3s ease-out; } a:hover { color: var(--color-primary); } a.hover-primary:hover { color: var(--color-primary) !important; } .color-primary a { color: inherit; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a { color: inherit; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:hover { color: var(--color-primary); } :focus { outline: 0 !important; box-shadow: none !important; } :is(.h1, .h2, .h3, .h4, .h5, .h6) { display: block; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--font-heading); color: var(--text-dark); font-weight: var(--font-semi-bold); line-height: 1.3; } :is(h4, h5, h6, .h4, .h5, .h6) { font-weight: var(--font-medium); } h1, .h1 { font-size: var(--font-size--h1); } h2, .h2 { font-size: var(--font-size--h2); } h3, .h3 { font-size: var(--font-size--h3); } h4, .h4 { font-size: var(--font-size--h4); } h5, .h5 { font-size: var(--font-size--h5); } h6, .h6 { font-size: var(--font-size--h6); } p, .text, .card-text { color: var(--text-medium); line-height: 1.6; margin-bottom: 15px; } p:last-child, .text:last-child, .card-text:last-child { margin-bottom: 0; } p:last-child { margin-bottom: 0 !important; } .font-lg { font-size: var(--font-lg) !important; } .font-sm { font-size: var(--font-sm) !important; } .font-xsm { font-size: var(--font-xsm) !important; } .font-medium { font-weight: var(--font-medium); } .font-bold { font-weight: var(--font-bold); } b { font-weight: 500; } /* margin CSS*/ .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-25 { margin-top: 25px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-50 { margin-top: 50px !important; } /* Padding CSS*/ .pt-10 { padding-top: 10px !important; } .pt-15 { padding-top: 15px !important; } .pt-20 { padding-top: 20px !important; } .pt-25 { padding-top: 25px !important; } .pt-30 { padding-top: 30px !important; } .pt-40 { padding-top: 40px !important; } .pt-60 { padding-top: 60px !important; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pt-120 { padding-top: 120px; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-25 { padding-bottom: 25px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-45 { padding-bottom: 45px !important; } .pb-60 { padding-bottom: 60px !important; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-120 { padding-bottom: 120px; } .px-60 { padding-inline: 60px; } .px-30 { padding-inline: 20px; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .ptb-120 { padding-top: 120px; padding-bottom: 120px; } .ptb-90 { padding-top: 90px; padding-bottom: 90px; } .ptb-80 { padding-top: 80px; padding-bottom: 80px; } .ptb-70 { padding-top: 70px; padding-bottom: 70px; } .ptb-60 { padding-top: 60px; padding-bottom: 60px; } .ptb-30 { padding-top: 30px; padding-bottom: 30px; } .p-15 { padding: 15px !important; } .p-20 { padding: 20px !important; } .p-25 { padding: 25px !important; } .p-30 { padding: 30px !important; } .p-40 { padding: 40px !important; } .pb-0 { padding-bottom: 0 !important; } .spacer-x { margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); } .spacer-x .swiper-slide { padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); } .pxy-center { align-items: center; justify-content: center; margin-left: auto; margin-right: auto; } /* Border */ .border, .border-top, .border-bottom, .border-end, .border-start { border-color: var(--border-color) !important; } /* Border Radius */ .radius-0 { border-radius: 0 !important; } .radius-sm { border-radius: var(--radius-sm) !important; } .radius-md { border-radius: var(--radius-md) !important; } .radius-lg { border-radius: var(--radius-lg) !important; } .radius-xl { border-radius: var(--radius-xl) !important; } .shadow-md { box-shadow: var(--shadow-md); } .shadow-round { box-shadow: var(--shadow-round); } .opacity-1 { opacity: 1 !important; } .opacity-65 { opacity: 0.65 !important; } .opacity-80 { opacity: 0.8 !important; } .opacity-85 { opacity: 0.85 !important; } .opacity-90 { opacity: 0.9 !important; } .mw-75 { max-width: 75%; } .mw-80 { max-width: 80%; } .z-1 { z-index: 1 !important; } .z-2 { z-index: 2 !important; } .z-3 { z-index: 3 !important; } :is(.lc-1, .lc-2, .lc-3) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .lc-1 { -webkit-line-clamp: 1 !important; line-clamp: 1 !important; } .lc-2 { -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .lc-3 { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } .gap-15 { gap: 15px !important; } .gap-20 { gap: 20px !important; } .gap-25 { gap: 25px !important; } /* Tooltip CSS */ .tooltip { --bs-tooltip-bg: var(--color-dark); --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 5px; --bs-tooltip-font-size: var(--font-xsm); } .no-animation { transform: none; animation: none; } /* Badge CSS */ .badge { padding: 8px 14px; font-size: var(--font-xsm); font-weight: var(--font-medium); } .badge.bg-success { color: var(--color-green); background: rgba(var(--color-green-rgb), 0.2) !important; } .badge.bg-info { color: var(--color-blue); background: rgba(var(--color-blue-rgb), 0.2) !important; } .badge.bg-danger { color: var(--color-red); background: rgba(var(--color-red-rgb), 0.2) !important; } /* Card CSS */ .card { --bs-card-bg: var(--bg-white); border: none; border-radius: 10px; } .card .card-title { margin-bottom: 20px; } .card .card-text { color: var(--text-medium); } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-black); opacity: 0.4; z-index: -1; } .bg-shape { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; } .bg-shape.h-auto img { vertical-align: bottom; } .bg-shape img { vertical-align: top; } .hidden { overflow: hidden; display: none; visibility: hidden; } .progress { height: 10px; border-radius: 30px; } .progress .progress-bar { border-radius: 30px; background: var(--color-primary); } .click-show .show-content { position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; } .click-show .show-content * { margin-bottom: 0; } .click-show .read-more-btn { color: var(--color-primary); cursor: pointer; font-size: 14px; font-weight: 500; } .click-show .read-more-btn span:last-child { display: none; } .click-show.show .show-content { line-clamp: 100; -webkit-line-clamp: 100; } .click-show.show .read-more-btn span:first-child { display: none; } .click-show.show .read-more-btn span:last-child { display: block; } ul.list-bullet { list-style-type: disc !important; } ul.list-bullet li { list-style-type: disc !important; } @media (min-width: 576px) { .border-sm-end { border-inline-end: 1px solid var(--border-color); } } @media (max-width: 991.98px) { .fluid-left { padding-inline: 0; } .fluid-right { padding-inline: 0; } } @media (min-width: 992px) { .img-left { margin-inline-start: -60px; } .img-right { margin-inline-end: -60px; } .fluid-left { padding-inline-start: calc((100vw - 960px) / 2); padding-inline-end: 0; } .fluid-right { padding-inline-end: calc((100vw - 960px) / 2); padding-inline-start: 0; } .position-lg-absolute { position: absolute !important; } .border-lg-end { border-inline-end: 1px solid var(--border-color); } .container-lg-fluid { max-width: 100%; } } @media (min-width: 1200px) { .fluid-left { padding-inline-start: calc((100vw - 1140px) / 2); } .fluid-right { padding-inline-end: calc((100vw - 1140px) / 2); } .container-custom { max-width: 1440px; } } @media (min-width: 1400px) { .fluid-left { padding-inline-start: calc((100vw - 1320px) / 2); } .fluid-right { padding-inline-end: calc((100vw - 1320px) / 2); } .col-xxl-5th { width: 20%; } .img-left { margin-inline-start: -100px; } .img-right { margin-inline-end: -100px; } } .bg-s-contain { background-repeat: no-repeat; background-size: contain !important; } .bg-a-fixed { background-attachment: fixed; } .quantity-input { display: flex; align-items: center; flex-wrap: wrap; } .quantity-input .btn { padding: 0; width: 35px; height: 35px; line-height: 35px; border: 1px solid var(--border-color); color: var(--text-dark); } .quantity-input .h3, .quantity-input .h2, .quantity-input .h4 { line-height: 1; margin-bottom: 0; } .quantity-input input { height: 40px; width: 60px; text-align: center; border: 1px solid var(--border-color); background-color: transparent; } .bg-cover { background-size: cover; background-repeat: no-repeat; background-position: center center; } .mfp-bg { background: rgba(var(--color-dark-rgb), 0.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 1; } /* ----------------------------------------- Color CSS ----------------------------------------- */ /* Theme Color CSS */ .theme-color-1 { --color-primary: #FF0037; --color-primary-rgb: 255, 0, 55; } .theme-color-2 { --color-primary: #0072FF; --color-secondary: #00C6FF; --color-primary-rgb: 0, 114, 255; --gradient-1: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%); } .theme-color-3 { --color-primary: #FF512F; --color-secondary: #F09819; --color-primary-rgb: 255, 81, 47; --gradient-1: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); } /* Color CSS */ .color-primary { color: var(--color-primary) !important; } .color-white { color: var(--text-white) !important; } .color-light { color: var(--text-light) !important; } .color-dark { color: var(--color-dark) !important; } .color-medium { color: var(--text-medium) !important; } .color-blue { color: var(--color-blue) !important; } .color-green { color: var(--color-green) !important; } .color-red { color: var(--color-red) !important; } .color-yellow { color: var(--color-yellow) !important; } .color-purple { color: var(--color-primary) !important; } .color-orange { color: var(--color-orange) !important; } .bg-primary { background-color: var(--color-primary) !important; } .bg-primary-light { --bg-primary-light: rgba(var(--color-primary-rgb), .05); background-color: var(--bg-primary-light) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-secondary-light { --bg-secondary-light: rgba(var(--color-secondary-rgb), .05); background-color: var(--bg-secondary-light) !important; } .bg-white { background-color: var(--bg-white) !important; } .bg-light { background-color: var(--bg-1) !important; } .bg-light-2 { background-color: var(--bg-2) !important; } .bg-dark { background-color: var(--color-dark) !important; } .bg-gradient { background-image: var(--gradient-1) !important; } .border-primary { border-color: var(--color-primary) !important; } .text-gradient { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stroke-gradient { -webkit-text-fill-color: transparent; -webkit-text-stroke-color: var(--gradient-1); -webkit-text-stroke-width: 1px; } .bg-none { background-color: transparent !important; background: transparent !important; } .fill-primary { fill: var(--color-primary) !important; } .stroke-primary { stroke: var(--color-primary) !important; } .fill-primary-light { fill: var(--color-primary) !important; filter: contrast(30%); } .fill-dark { fill: var(--color-primary) !important; filter: brightness(50%); } /* ----------------------------------------- Button CSS ----------------------------------------- */ button, .btn { cursor: pointer; border: none; background: inherit; } button:focus, button:active, .btn:focus, .btn:active { outline: none; box-shadow: none; } button:hover, .btn:hover { outline: none; } .btn { position: relative; overflow: hidden; font-size: 16px; text-transform: capitalize; border-radius: 0; letter-spacing: 0.05em; font-weight: var(--font-medium); z-index: 1; transition: all 0.3s ease-out; } .icon-start i { margin-inline-end: 5px; } .icon-end i { margin-inline-start: 5px; } .btn-lg { padding: 14px 34px; border-radius: 7px; } .btn-md { padding: 10px 24px; font-size: var(--font-sm); border-radius: 5px; } .btn-sm { padding: 6px 14px; font-size: var(--font-xsm); border-radius: 5px; } .btn-sm.btn-icon { width: 30px; height: 30px; font-size: 12px; } .btn-primary { color: var(--btn-color); background-color: var(--color-primary); transition: all 0.3s ease-out; box-shadow: 0 10px 30px -7px rgba(var(--color-primary-rgb), 0.5); } .btn-primary::before { position: absolute; top: 0; left: 0; width: 100%; height: 200%; content: ""; background: var(--bg-dark); border-radius: 50%; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1); z-index: -1; } .btn-primary:hover { color: var(--btn-hover-color); background-color: var(--color-primary); transform: translateY(-3px); } .btn-primary:hover::before { transform: translateY(0) scale(2); } .btn-gradient { background-image: var(--gradient-1); } .btn-fancy { border-radius: 15px 0 15px 0; } .btn.no-animation { transform: none; animation: none; background-color: var(--color-primary); } .btn.no-animation::before, .btn.no-animation::after { content: none; } .btn-danger { border: 1px solid var(--color-red); background-color: var(--color-red); transition: background 0.3s ease-out; } .btn-danger:hover { border-color: var(--color-red); background-color: var(--color-red); } .btn-outline { color: var(--color-primary); transition: all 0.3s ease-out; border: 1px solid var(--color-primary); } .btn-outline::before { position: absolute; top: 0; left: 0; width: 100%; height: 200%; content: ""; background: var(--color-primary); border-radius: 50%; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); z-index: -1; } .btn-outline:hover { color: var(--btn-color); transform: translateY(-3px); border-color: var(--color-primary); } .btn-outline:hover::before { transform: translateY(0) scale(2); } .btn-outline-2 { color: var(--text-dark); background: var(--bg-white); border: 1px solid var(--border-color); } .btn-outline-2:hover { color: var(--color-primary); } .btn-img { padding: 0; border: 1px solid var(--border-color-2); background-color: transparent !important; } .btn-img img { max-width: 150px; } .btn-img.size-sm img { max-width: 120px; } .btn-img:hover { border-color: var(--border-color-2) !important; } .btn-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; } .btn-remove { padding: 0; width: 35px; height: 35px; line-height: 35px; padding: 0; background: rgba(var(--color-primary-rgb), 0.12) !important; color: var(--color-primary) !important; } .btn-text { line-height: 1; color: var(--text-dark); font-size: var(--font-sm); font-weight: 500; } .btn-text:hover { color: var(--color-primary) !important; } .btn-tag { display: inline-block; padding: 10px 24px; font-size: var(--font-sm); border-radius: 50px; background: var(--bg-1); color: var(--text-dark); margin-bottom: 10px; } .btn-tag:not(:last-child) { margin-inline-end: 5px; } .btn-icon { --size: 45px; display: inline-flex; justify-content: center; align-items: center; width: var(--size); height: var(--size); text-align: center; color: var(--text-white); background-color: var(--color-primary); } .btn-icon:hover { color: var(--text-white); background-color: var(--color-primary); } .btn-icon.size-md { --size: 38px; } .btn-icon.facebook { background-color: #316FF6; } .btn-icon.google { background-color: #34A853; } .btn-icon.twitter { background-color: #1DA1F2; } .btn-icon-text { display: inline-flex; align-items: center; gap: 10px; --size: 30px; } .btn-icon-text span:last-child { font-weight: var(--font-medium); } .btn-icon-text i { width: var(--size); height: var(--size); line-height: var(--size); text-align: center; background-color: var(--color-primary); font-size: 14px; border-radius: 50%; color: var(--text-white); box-shadow: 0px 14px 20px 5px rgba(var(--color-primary-rgb), 0.1); } button.mfp-close { display: inline-block; width: 35px !important; height: 35px; line-height: 35px; background: var(--color-primary) !important; color: var(--color-white) !important; opacity: 1; right: 0 !important; padding: 0 !important; text-align: center !important; } .disabled { border: none; cursor: not-allowed !important; pointer-events: initial !important; } /* Video Btn CSS */ .video-btn { --size: 75px; position: relative; width: var(--size); height: var(--size); padding: 0; font-size: 22px; display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; color: var(--color-primary); background-color: var(--bg-white); } .video-btn:hover { background-color: var(--color-primary); color: var(--text-white); } .video-btn::after { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); animation: ripple 3s infinite; background-color: var(--bg-white); border-radius: 50%; z-index: -2; } .video-btn::before { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); animation: ripple 3s 0.9s infinite; background-color: var(--bg-white); border-radius: 50%; z-index: -1; } .video-btn-sm { --size: 50px; font-size: var(--font-sm); } .video-btn-sm::before, .video-btn-sm::after { animation-name: ripple2; } .video-btn.p-absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .video-btn-text { --size: auto; border: none; gap: 10px; background: transparent; } .video-btn-text::before, .video-btn-text::after { content: none; } .video-btn-text i { --size: 45px; position: relative; width: var(--size); height: var(--size); padding: 0; font-size: 16px; display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; color: var(--color-primary); background-color: var(--bg-white); border: 1px solid var(--color-primary); } .video-btn-text span { color: var(--text-medium); } .video-btn-text:hover { background-color: transparent; color: var(--color-primary); } .video-btn-text:hover span { color: var(--color-primary); } .show-more-btn { --size: auto; cursor: pointer; color: var(--color-primary); border: 0; } /* ----------------------------------------- Form CSS ----------------------------------------- */ .form-control { border: 1px solid var(--border-color); border-radius: 5px; height: 55px; line-height: 55px; padding: 0; padding-inline-start: 18px; font-size: 14px; color: var(--text-medium); transition: border-color 0.4s; } .form-control:focus { color: var(--text-dark); background-color: transparent; } .form-control.color-white::-moz-placeholder { color: var(--text-white) !important; } .form-control.color-white::placeholder { color: var(--text-white) !important; } :is(input:not([type=radio], [type=checkbox]), textarea, .nice-select):is(:focus, :visited, :focus-within, :focus-visible) { border-color: #5961F9 !important; } select.form-select { background-size: 8px !important; } textarea { height: auto; line-height: 1.7; padding: 15px 18px 18px; } textarea.form-control { min-height: 200px; line-height: 1.7; padding: 15px 18px 18px; } textarea::-moz-placeholder { font-size: var(--font-base); } textarea::placeholder { font-size: var(--font-base); } ::-moz-placeholder { color: var(--text-medium) !important; } ::placeholder { color: var(--text-medium) !important; } .custom-radio .form-radio-label { position: relative; cursor: pointer; padding: 0; padding-inline-start: 20px; vertical-align: middle; } .custom-radio .form-radio-label::before { position: absolute; content: ""; left: 0; right: 0; margin-inline-start: 0; margin-inline-end: auto; top: 50%; transform: translateY(-50%); height: 0.9em; width: 0.9em; border: 1px solid var(--color-primary); border-radius: 50%; } .custom-radio input[type=radio]:checked+.form-radio-label::before { background-color: var(--bg-white); border-width: 0.25em; } .custom-radio .input-radio { display: none; } .custom-checkbox .form-check-label { position: relative; cursor: pointer; position: relative; cursor: pointer; padding: 0; vertical-align: middle; padding-inline-start: 22px; } .custom-checkbox .form-check-label::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 15px; width: 15px; border: 1px solid var(--color-primary); border-radius: 2px; } .custom-checkbox input[type=checkbox]:checked+.form-check-label::after { opacity: 1; } .custom-checkbox input[type=checkbox]+.form-check-label::after { content: ""; width: 11px; position: absolute; top: 50%; left: 2px; opacity: 0; height: 5px; border-left: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); transform: translateY(-65%) rotate(-45deg); transition: all 0.2s ease-out; } .custom-checkbox .input-checkbox { display: none; } input[type=checkbox]:checked+.form-check-label::before, input[type=radio]:checked+.form-check-label::before { background-color: var(--color-primary); border-color: var(--color-primary); } input[type=checkbox]:checked+.form-check-label::after, input[type=radio]:checked+.form-check-label::after { opacity: 1; } .form-group, .input-group { position: relative; } .form-group.icon-end label, .input-group.icon-end label { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); margin-inline-start: auto; margin-inline-end: 10px; transform: translateY(-50%); } .form-group.icon-start .form-control, .input-group.icon-start .form-control { padding-inline-start: 44px; } .form-group.icon-start .icon, .input-group.icon-start .icon { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); margin-inline-end: auto; margin-inline-start: 20px !important; transform: translateY(-50%); z-index: 1; } .form-group.icon-start input[type=number], .input-group.icon-start input[type=number] { text-align: right; padding-inline-end: 10px; } .input-inline { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-inline .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; padding: 15px 25px; background-color: var(--bg-white); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-inline .btn { margin-inline-start: -1px; position: relative; z-index: 2; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .show-password-field { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; } .show-password-field .show-icon { font-family: var(--font-icon); font-style: normal; } .show-password-field .show-icon::before { content: "\f06e"; } .show-password-field .show-icon.show::before { content: "\f070"; } .search-form { display: flex; padding: 6px 5px 6px 15px; border: 1px solid var(--border-color); } .search-form .search-input { display: block; width: 100%; border: none; outline: 0; height: 40px; line-height: 40px; border-radius: 5px 0 0 5px; background: transparent; } .search-form .btn-search { text-align: center; height: 40px; width: 40px; line-height: 40px; color: var(--text-medium); background: var(--color-white); } .file-upload { position: relative; line-height: 100px; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .faq-form textarea.form-control { min-height: 150px; } .faq-form :focus { color: var(--text-dark); background-color: var(--bg-white); } /* ----------------------------------------- Lazyload CSS ----------------------------------------- */ .lazy-container { position: relative; overflow: hidden; display: table; table-layout: fixed; width: 100%; background-color: var(--bg-1); z-index: 1; } .lazy-container::after { position: absolute; content: "\f03e"; font-family: "Font Awesome 5 Pro"; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; font-size: 25px; color: var(--text-medium); z-index: -1; } .lazy-container img { position: absolute; top: 0; left: 0; width: 0px; height: 0px; max-width: 100%; min-width: 100%; max-height: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; } .lazy-container img.lazy-load { filter: blur(5px); transition: filter 400ms; } .lazy-container img.lazyloaded { filter: blur(0); } .ratio::before { content: ""; display: block; padding-bottom: 56.25%; } .ratio.ratio-1-1::before { padding-bottom: 100%; } .ratio.ratio-1-2::before { padding-bottom: 114%; } .ratio.ratio-1-3::before { padding-bottom: 126.14%; } .ratio.ratio-2-3::before { padding-bottom: 66.67%; } .ratio.ratio-16-11::before { padding-bottom: 53.57%; } .ratio.ratio-16-8::before { padding-bottom: 50%; } .ratio.ratio-21-9::before { padding-bottom: 42.85%; } .ratio.ratio-21-8::before { padding-bottom: 38.0952380952%; } .ratio.ratio-5-3::before { padding-bottom: 60%; } .ratio.ratio-5-4::before { padding-bottom: 80%; } .ratio.ratio-4-3::before { padding-bottom: 133.3333333333%; } .ratio.ratio-3-4::before { padding-bottom: 75%; } .ratio.ratio-vertical::before { padding-bottom: 164%; } .blur-up { filter: blur(5px); transition: filter 400ms; } .lazyloaded.blur-up { filter: blur(0); } /* ----------------------------------------- Nice Select CSS ----------------------------------------- */ .nice-select { float: unset; font-weight: var(--font-medium); padding-left: 0; padding-right: 0; padding-inline-start: 18px; padding-inline-end: 30px; } .nice-select:after { right: 0; left: 0; margin-inline-start: auto; margin-inline-end: 0; } .nice-select.form-control:after { margin-inline-end: 12px; } .nice-select .list { z-index: 777; } .nice-select.open .list { width: 100%; opacity: 1; pointer-events: auto; font-size: 15px; padding-top: 10px; padding-bottom: 10px; } .nice-select .option { display: block; font-weight: 500; border-inline-start: 2px solid transparent; } .nice-select .option:is(:hover, .focus, .selected.focus) { background-color: var(--bg-1); } .nice-select .option.selected { font-weight: 500; color: var(--color-primary) !important; border-color: var(--color-primary); } /* ----------------------------------------- Preloader CSS ----------------------------------------- */ #preLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; background-color: var(--bg-white); } #preLoader .loader { width: 48px; height: 48px; border: 2px solid var(--bg-dark); border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; } #preLoader .loader::after { content: ""; box-sizing: border-box; position: absolute; left: 50%; top: 0; background: var(--color-primary); width: 3px; height: 24px; transform: translateX(-50%); } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ----------------------------------------- Swiper Slider CSS ----------------------------------------- */ .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiper-wrapper { -webkit-transform-style: preserve-3d; } .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 30px; opacity: 1; background-color: var(--color-primary); background-image: var(--gradient-1); opacity: 0.3; transition: all 0.3s ease-in-out; } .swiper-pagination .swiper-pagination-bullet-active { width: 16px; } .swiper-pagination .swiper-pagination-bullet-active, .swiper-pagination .swiper-pagination-bullet:hover { background-color: var(--color-primary); background-image: var(--gradient-1); opacity: 1; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { line-height: 1; bottom: 0; } .slider-navigation { z-index: 3; } .slider-navigation .slider-btn { --size: 40px; width: var(--size); height: var(--size); text-align: center; border-radius: 5px; background-color: var(--color-primary); background-image: var(--gradient-1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--text-white); font-size: 24px; transition: all 0.3s ease-out; } .slider-navigation .slider-btn:last-child { margin-inline-start: 10px; } .slider-navigation .slider-btn i { transition: transform 0.3s ease-out; } .slider-navigation .slider-btn.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .slider-navigation .slider-btn.btn-outline:hover { color: var(--text-white); background: var(--color-primary); } .slider-navigation .slider-btn:disabled { cursor: not-allowed; } .slider-navigation.position-middle .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; } .slider-navigation.position-middle .slider-btn.slider-btn-prev { left: 0%; } .slider-navigation.position-middle .slider-btn.slider-btn-next { right: 0%; } .swiper-lazy { background-color: var(--text-light); } .swiper-lazy-loaded.blur-up { filter: blur(0); } /* ----------------------------------------- Nav Tabs CSS ----------------------------------------- */ .tabs-navigation::-webkit-scrollbar { height: 8px; } .tabs-navigation::-webkit-scrollbar-track { background-color: var(--bg-light); } .tabs-navigation::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } .tabs-navigation .nav { display: inline-flex; border: none; gap: 20px; justify-content: center; z-index: 1; position: relative; overflow: hidden; } .tabs-navigation .nav li { flex: 0 0 auto; } .tabs-navigation .nav .nav-link { color: var(--text-dark); font-weight: var(--font-medium); margin: 0; z-index: 999; border: 0; border: 1px solid var(--border-color-2); cursor: pointer; } .tabs-navigation .nav .nav-link:is(.active) { color: var(--text-white); background-color: var(--color-primary); border-radius: 0; } .tabs-navigation .nav[data-hover=fancyHover] .nav-link:is(.active, :hover) { color: var(--text-dark); background: transparent !important; border-color: var(--color-primary); } .tabs-navigation .nav[data-hover=fancyHover] .nav-item { z-index: 2; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link { color: var(--text-white); background-color: var(--color-primary) !important; background-image: var(--gradient-1) !important; border-color: transparent; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link:is(:hover) { background: transparent !important; } .tabs-navigation .target { position: absolute; background-color: var(--color-primary); background-image: var(--gradient-1); border: 1px solid var(--color-primary); z-index: 1; transform: translateX(-50%); transition: all 0.3s; } .tabs-navigation-2 { border-radius: 10px 10px 0 0; } .tabs-navigation-2 .nav { display: inline-flex; gap: 0; } .tabs-navigation-2 .nav .nav-link { color: var(--text-dark); background: transparent; padding: 12px 30px; margin: 0; border-radius: 10px 10px 0 0 !important; border-color: transparent; } .tabs-navigation-2 .nav .nav-link:hover { box-shadow: none !important; } .tabs-navigation-3 .nav { display: inline-flex; flex-wrap: nowrap; gap: 0; } .tabs-navigation-3 .nav .nav-link { color: var(--text-dark); background: transparent; padding: 12px 20px; margin: 0; border-radius: 0 0 10px 10px !important; border-color: transparent; } .tabs-navigation-3 .nav .nav-link:hover { box-shadow: none !important; } .tab-pane.fade { transition: all 0.3s; transform: translateY(0.5rem); } .tab-pane.fade.show { transform: translateY(0rem); } .tab-pane.slide.show { animation: slideUp 1 0.4s; } /* ----------------------------------------- Title CSS ----------------------------------------- */ .section-title .title { margin-bottom: 0; margin-top: -8px; } .section-title .title span { color: var(--color-primary); } .section-title .subtitle { font-size: var(--font-lg); font-weight: var(--font-medium); display: inline-block; margin-bottom: 5px; } .section-title.title-inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .section-title.title-inline .title { margin-top: 0; } .section-title.title-center { text-align: center; } .section-title.title-center .subtitle { padding-inline-start: 0; } .section-title.title-center .subtitle::before { content: none; } .section-title.title-center .title { max-width: 640px; text-align: center; margin-left: auto; margin-right: auto; } .section-title.title-center p { max-width: 600px; margin-inline: auto; margin-bottom: 0; } .content-title .title { margin-bottom: 10px; margin-top: -8px; } .content-title .title span { color: var(--color-primary); } .content-title .subtitle { font-size: var(--font-lg); font-weight: var(--font-medium); display: inline-block; margin-bottom: 5px; margin-top: -3px; } .content-title p:last-child { margin-bottom: 0; } .title-md { font-size: 32px; } /* ----------------------------------------- Animation CSS ----------------------------------------- */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-50%); } to { opacity: 1; transform: translateY(0); } } @keyframes rotate { from { transform: rotate(-360deg); } to { transform: rotate(360deg); } } @keyframes moveAround { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @keyframes moveLeftRight { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } @keyframes ripple { 0% { opacity: 0.45; } 100% { opacity: 0; transform: scale(2); } } @keyframes ripple2 { 0% { opacity: 0.45; } 100% { opacity: 0; transform: scale(1.3); } } @keyframes run { 0% { top: -50%; } 100% { top: 100%; } } /* ====== Zoom effect ====== */ .mfp-zoom-in { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-in .mfp-with-anim { opacity: 0; transition: all 0.2s ease-in-out; transform: scale(0.8); } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-with-anim { transform: scale(0.8); opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* ====== Newspaper effect ====== */ .mfp-newspaper { /* start state */ /* animate in */ /* animate out */ } .mfp-newspaper .mfp-with-anim { opacity: 0; transition: all 0.5s; transform: scale(0) rotate(500deg); } .mfp-newspaper.mfp-bg { opacity: 0; transition: all 0.5s; } .mfp-newspaper.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1) rotate(0deg); } .mfp-newspaper.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-newspaper.mfp-removing .mfp-with-anim { transform: scale(0) rotate(500deg); opacity: 0; } .mfp-newspaper.mfp-removing.mfp-bg { opacity: 0; } /* ====== Move-horizontal effect ====== */ .mfp-move-horizontal { /* start state */ /* animate in */ /* animate out */ } .mfp-move-horizontal .mfp-with-anim { opacity: 0; transition: all 0.3s; transform: translateX(-50px); } .mfp-move-horizontal.mfp-bg { opacity: 0; transition: all 0.3s; } .mfp-move-horizontal.mfp-ready .mfp-with-anim { opacity: 1; transform: translateX(0); } .mfp-move-horizontal.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-move-horizontal.mfp-removing .mfp-with-anim { transform: translateX(50px); opacity: 0; } .mfp-move-horizontal.mfp-removing.mfp-bg { opacity: 0; } /* ====== Move-from-top effect ====== */ .mfp-move-from-top { /* start state */ /* animate in */ /* animate out */ } .mfp-move-from-top .mfp-content { vertical-align: top; } .mfp-move-from-top .mfp-with-anim { opacity: 0; transition: all 0.2s; transform: translateY(-100px); } .mfp-move-from-top.mfp-bg { opacity: 0; transition: all 0.2s; } .mfp-move-from-top.mfp-ready .mfp-with-anim { opacity: 1; transform: translateY(0); } .mfp-move-from-top.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-move-from-top.mfp-removing .mfp-with-anim { transform: translateY(-50px); opacity: 0; } .mfp-move-from-top.mfp-removing.mfp-bg { opacity: 0; } /* ====== 3d unfold ====== */ .mfp-3d-unfold { /* start state */ /* animate in */ /* animate out */ } .mfp-3d-unfold .mfp-content { perspective: 2000px; } .mfp-3d-unfold .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform-style: preserve-3d; transform: rotateY(-60deg); } .mfp-3d-unfold.mfp-bg { opacity: 0; transition: all 0.5s; } .mfp-3d-unfold.mfp-ready .mfp-with-anim { opacity: 1; transform: rotateY(0deg); } .mfp-3d-unfold.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-3d-unfold.mfp-removing .mfp-with-anim { transform: rotateY(60deg); opacity: 0; } .mfp-3d-unfold.mfp-removing.mfp-bg { opacity: 0; } /* ====== Zoom-out effect ====== */ .mfp-zoom-out { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-out .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(1.3); } .mfp-zoom-out.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-out.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-out.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-out.mfp-removing .mfp-with-anim { transform: scale(1.3); opacity: 0; } .mfp-zoom-out.mfp-removing.mfp-bg { opacity: 0; } /* ----------------------------------------- Social Link CSS ----------------------------------------- */ .social-link { --size: 36px; display: inline-flex; align-items: center; gap: 10px; } .social-link a { text-align: center; width: var(--size); height: var(--size); line-height: var(--size); background-color: var(--color-primary); color: var(--text-white); font-size: var(--font-base); } .social-link a:last-child { margin: 0; } .social-link a:hover { color: var(--text-white); background-color: var(--color-primary); } .social-link.style-2 a { border-radius: 50%; background-color: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); } .social-link.size-md { --size: 30px; --font-base: 14px; } .social-link.size-lg { --size: 50px; } /* ----------------------------------------- Ratings CSS ----------------------------------------- */ .rating-area { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .ratings .rate { background-position: 0 -13px; background-repeat: repeat-x !important; height: 13px; width: 90px; margin-inline-start: -3px; transition: all 0.5s ease-out 0s; } .ratings .rating-icon { background-position: 0 0; background-repeat: repeat-x !important; height: 13px; width: 80%; } .ratings .ratings-total { font-size: 12px; line-height: 1; } .ratings.size-md .rate { background-position: 0 -15px; height: 15px; width: 115px; } .ratings.size-md .rating-icon { height: 15px; } .ratings.size-md .ratings-total { font-size: 14px; } .ratings.size-lg .rate { background-position: 0 -20px; height: 20px; width: 145px; } .ratings.size-lg .rating-icon { height: 20px; } .ratings.size-lg .ratings-total { font-size: 16px; } /* ----------------------------------------- Price Range Slider CSS ----------------------------------------- */ .noUi-target { border: none; box-shadow: none; border-radius: 30px; height: 6px; padding-inline: 8px; background: rgba(var(--color-primary-rgb), 0.19); } .noUi-connect { background: var(--color-primary); } .noUi-horizontal .noUi-handle { width: 15px; height: 15px; right: -8px; top: -5px; border-radius: 50%; box-shadow: none; background: var(--color-white); border-width: 3px; border-color: var(--color-primary); cursor: grab; } .noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after { content: none; } /* ----------------------------------------- Modal CSS ----------------------------------------- */ .modal { --bs-modal-border-radius: 0; --bs-border-color: var(--border-color); --bs-modal-width: 800px; } .modal .btn-close { --size: 40px; position: absolute; top: -15px; right: -15px; width: var(--size); height: var(--size); line-height: var(--size); padding: 0; opacity: 1; background: var(--bg-white); color: var(--color-primary); text-align: center; border-radius: 50%; z-index: 1; box-shadow: var(--shadow-round); } .modal ::-webkit-scrollbar { height: 5px; } .modal ::-webkit-scrollbar-track { background-color: var(--bg-2); } .modal ::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } /* ----------------------------------------- Bootstrap Stepper CSS ----------------------------------------- */ .bs-stepper { padding: 0; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; } .bs-stepper .bs-stepper-header { flex-wrap: nowrap; overflow-y: hidden; overflow-x: scroll; flex: 0 0 auto; width: 100%; margin-inline: auto; z-index: 1; } .bs-stepper .bs-stepper-header::-webkit-scrollbar { height: 10px; width: 0; height: 0; } .bs-stepper .step { flex: 0 0 auto; width: 20%; position: relative; border-bottom: 2px solid transparent; display: flex; justify-content: center; flex-direction: column; z-index: 1; } .bs-stepper .step::before { position: absolute; content: ""; top: 57.1428571429%; right: 0; width: 100%; height: 1px; border-bottom: 1px dashed var(--border-color); z-index: -1; } .step.active-prev { cursor: pointer; } .bs-stepper .step:first-child::before { width: 50%; } .bs-stepper .step:last-child::before { width: 50%; right: unset; left: 0; } .bs-stepper .step .bs-stepper-circle { --size: 32px; width: var(--size); height: var(--size); line-height: auto; align-items: center; justify-content: center; border-radius: 50%; padding: 0; border: 1px solid var(--border-color); background-color: var(--bg-white); color: var(--color-primary); font-size: var(--font-sm); } .bs-stepper .step .h3 { line-height: 1; -webkit-text-fill-color: transparent; -webkit-text-stroke-color: var(--color-primary); -webkit-text-stroke-width: 1px; } .bs-stepper .step .bs-stepper-label { color: var(--text-dark); font-size: var(--font-xsm); } .bs-stepper .step .bs-stepper-label, .bs-stepper .step .bs-stepper-circle { margin-bottom: 0; } .bs-stepper .step.active-prev .bs-stepper-circle, .bs-stepper .step.active .bs-stepper-circle { color: var(--text-white); background-color: var(--color-primary); border-color: transparent; } .bs-stepper .step.active .bs-stepper-label { color: var(--color-primary); } .bs-stepper .step-trigger { flex-direction: column; } .bs-stepper .step-trigger:hover { background-color: transparent; } .bs-stepper .content.fade, .bs-stepper-pane.fade { transition: all 0.2s; transform: translateY(1rem); } .bs-stepper .content.fade.active, .bs-stepper-pane.fade.active { transform: translateY(0rem); } /* ----------------------------------------- Pignose Calender CSS ----------------------------------------- */ .booking-time .wrapper { display: flex; overflow: hidden; overflow-x: auto; gap: 1rem; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } .booking-time-wrapper { display: flex; flex-wrap: wrap; gap: 10px; } .booking-time .item { flex: 0 0 auto; width: 168px; display: flex; align-items: center; justify-content: center; gap: 15px; cursor: pointer; transition: all 0.2s; padding: 10px 0px; } .booking-time .item i { font-size: 18px; color: var(--color-primary); } .booking-time .item span { font-size: var(--font-sm); line-height: 1; } .booking-time .item:is(:hover, .active) { background-color: var(--color-primary); color: var(--text-white); border-color: transparent !important; } .booking-time .item:is(:hover, .active) i { color: var(--text-white); } .pignose-calendar { max-width: 100%; width: 100%; border-color: transparent; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); box-shadow: none; } .pignose-calendar .pignose-calendar-top { box-shadow: none; border: none; background-color: var(--bg-2) !important; } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-month { font-size: 100%; color: var(--text-dark); margin-bottom: 0; font-weight: var(--font-medium); } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-year { font-weight: var(--font-medium); font-size: var(--font-sm); } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav { width: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav .pignose-calendar-top-icon { color: var(--color-primary); } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav.pignose-calendar-top-prev::after { content: "Prev"; } .pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav.pignose-calendar-top-next::before { content: "Next"; } .pignose-calendar .icon-arrow-left { font-family: "Font Awesome 5 Pro" !important; } .pignose-calendar .icon-arrow-left:before { content: " \f104"; } .pignose-calendar .icon-arrow-right { font-family: "Font Awesome 5 Pro" !important; } .pignose-calendar .icon-arrow-right:before { content: "\f105"; } .pignose-calendar .pignose-calendar-header { color: var(--text-medium); font-weight: var(--font-medium); font-size: 14px; margin-top: 0; } .pignose-calendar .pignose-calendar-header .pignose-calendar-week { height: auto; line-height: normal; } .wishlist-active { background: var(--color-primary); color: var(--color-white); } .pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-disabled a { cursor: not-allowed; } .pignose-calendar .pignose-calendar-body { background-color: var(--bg-2); } .pignose-calendar .pignose-calendar-unit a { color: var(--text-dark); border-radius: 3px; margin-inline: auto; } .pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-active a { color: var(--text-white); background-color: var(--color-primary); box-shadow: none; font-weight: normal; } /* ----------------------------------------- Datepicker CSS ----------------------------------------- */ .daterangepicker { padding: 10px; background-color: var(--color-white); border-width: 0; border-radius: 10px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2); } .daterangepicker .available.next, .daterangepicker .available.prev { border-radius: 50%; background: #eee; } .daterangepicker .available.next span, .daterangepicker .available.prev span { border-color: var(--color-primary); } .daterangepicker .btn-primary { background: var(--color-primary); border-color: var(--color-primary); } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { cursor: pointer; border-radius: 50%; min-width: 32px; min-height: 31px; line-height: 30px; } .daterangepicker td.start-date.end-date { border-radius: 50%; border-color: transparent; } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--color-primary); border-color: transparent; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { height: auto; color: var(--text-dark); } .time_active { color: var(--text-white); background-color: var(--color-primary); } .text-decoration-linethrough { text-decoration: line-through; } .input-group-style-2 { border: 1px solid var(--border-color); border-radius: 5px; } .input-group-style-2 .form-control { border: 0; height: 53px; } .input-group-style-2 .current-location { border-left: 1px solid var(--border-color); font-size: 18px; }
| ver. 1.4 |
Github
|
.
| PHP 8.2.31 | Generation time: 0.13 |
proxy
|
phpinfo
|
Settings