/* ========================================= */ /* Name : Readytocook Author : Lyslid Team Author Portfolio : https://bookbixg.com/ */ /* ======================================= */ /* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"); */ /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); */ * { font-family: 'Noto Sans Thai', sans-serif; font-family: 'Sarabun', sans-serif; } :root { --blue: #1e90ff; --white: #ffffff; --black: #000000; --text-color-green: #18A34E; --rc-body-ml: 270px; --rc-bg-white: #fff; --rc-bg-gray: #fff; --rc-color-main: #3EE057; --rc-color-main-title: #41db7c; --rc-color-main-title-hover: #55ee90; --rc-box-shadow: 0px 0px 6px rgba(0,0,0,0.08); --rc-box-shadow-hover: 0px 0px 14px rgba(0,0,0,0.15); /* --rc-card-shadow: 0px 0px 14px rgba(0,0,0,0.06); */ --rc-input-padding: 6px 20px; --rc-icons-topbar-bg: transparent; --rc-icons-topbar-border: 1px solid #F5F5F5; --rc-icons-topbar-color: #3EE057; --rc-icons-topbar-bg-hover: #3EE057; --rc-icons-topbar-border-hover: 1px solid #3EE057; --rc-icons-topbar-color-hover: #fff; --rc-font-color-primary: #171717; --rc-tranform-upscale: scale(1.15); --rc-tranform-downscale: scale(0.95); --rc-success-bg-subtle: #cdf6d3; --rc-btn-active-border-color: transparent; /* Accordion */ --rc-accordion-active-color: #18A34E; --rc-accordion-active-bg: #DEF7E8; --rc-accordion-border-left: 4px solid #dee2e6; --rc-accordion-active-border-left: 4px solid #3EE057; /* --rc-accordion-border-width:; */ /* --rc-accordion-border-color:; */ --rc-accordion-btn-focus-box-shadow: 0 0 0 2px #40DB7C; --rc-accordion-card-shadow: 0px 1px 3px rgba(0, 0, 0, 0.102); --rc-accordion-hover-card-shadow: 0px 0px 20px rgba(0, 0, 0, 0.102); /* varian color */ --rc-primary-solid: #0d6efd; --rc-secondary-solid: #6c757d; --rc-success-solid: #3EE057; --rc-danger-solid: #dc3545; --rc-warning-solid: #ffc107; --rc-info-solid: #0dcaf0; --rc-light-solid: #f8f9fa; --rc-dark-solid: #212529; --rc-primary-light: #cfe2ff; --rc-text-primary-light: #052c65; --rc-secondary-light: #e2e3e5; --rc-text-secondary-light: #2b2f32; --rc-success-light: #cdf6d3; --rc-text-success-light: #0a3622; --rc-danger-light: #f8d7da; --rc-text-danger-light: #58151c; --rc-warning-light: #fff3cd; --rc-text-warning-light: #664d03; --rc-info-light: #cff4fc; --rc-text-info-light: #055160; --rc-light-light: #f8f9fa; --rc-text-light-light: #495057; --rc-dark-light: #212529; --rc-text-dark-light: #052c65; /* varian color hover */ --rc-primary-hover-solid: #2b80ff; --rc-secondary-hover-solid: #818b93; --rc-success-hover-solid: #4fee67; --rc-danger-hover-solid: #f85464; --rc-warning-hover-solid: #ffce3b; --rc-info-hover-solid: #41dfff; --rc-light-hover-solid: #f8f9fa; --rc-dark-hover-solid: #34393e; /* Alert */ --rc-alert-primary-solid: #0d6efd; --rc-alert-secondary-solid: #6c757d; --rc-alert-success-solid: #3EE057; --rc-alert-danger-solid: #dc3545; --rc-alert-warning-solid: #ffc107; --rc-alert-info-solid: #0dcaf0; --rc-alert-light-solid: #f8f9fa; --rc-alert-dark-solid: #212529; --header-height: 3rem; --nav-width: 68px; --first-color: #4723d9; --first-color-light: #afa5d9; --white-color: #f7f6fb; --body-font: "Nunito", sans-serif; --normal-font-size: 1rem; --z-fixed: 100; } html { font-size: 16px; } .rc-color { color: #ec8b4f; color: #fbd35a; color: #21ed6fb4; color: #f95364; color: rgba((255, 172, 218, 0.8)0%, 70%); color: #f48cff; color: rgb(243, 138, 255); } body { background-color: #F5F5F5; transition: 0.5s; position: relative; /* overflow: hidden; */ } footer { padding-left: 20px; padding-right: 20px; font-size: 14px; text-align: center; } footer a { color: var(--rc-color-main-title); } /* Custom Color BS Template */ .divider { width: 100%; height: 1px; background-color: #f2f2f2; margin-top: 20px; margin-bottom: 20px; } .btn { border: 0px; padding-left: 20px; padding-right: 20px; } .btn:hover { border: 0px; /* filter: brightness(1.1); */ /* background-color: inherit; */ } .bg-success { background-color: var(--rc-color-main) !important; } .btn-success { color: #0a3622; border-color: var(--rc-color-main); background-color: var(--rc-color-main) !important; } .btn-success:hover { color: #0a3622; } .form-check-input:checked { background-color: var(--rc-color-main-title); border-color: var(--rc-color-main-title); } .form-check-input:checked + label { color: var(--rc-color-main-title); } .form-check-input:focus { border-color: #41db7c; border: 0px; outline: 0; box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } .dropdown-divider { opacity: 0.3; } .dropdown-toggle { position: relative; } .dropdown-menu.show { border: 0; padding: 10px; box-shadow: var(--rc-box-shadow); } /* Perfect Scrollbar */ .ps__thumb-y { background-color: #40db7c; } /* Navbar Top */ .toggle-nav { width: 60px; height: 60px; background-color: #D3FFE4; border-bottom-right-radius: 30px; } .navbar-top { background-color: #fff; box-shadow: var(--rc-box-shadow); height: 60px; } .nav-bar-top-search { margin-left: 24px; } .nav-bar-top-search .input-group { padding-top: 10px; padding-bottom: 10px; } .nav-bar-top-search .input-group input { border-radius: 40px; border-top-right-radius: 40px !important; border-bottom-right-radius: 40px !important; z-index: 0; height: 40px; width: 320px; padding: var(--rc-input-padding); padding-right: 57px; background-color: #F9F9F9; border: 0px solid transparent; font-size: 14px; } .nav-bar-top-search .input-group input::placeholder { color: #AEAEAE; } .form-control:focus { box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { background: transparent; border-radius: 40px !important; margin-left: -50px; z-index: 5; color: #AAAFAC; padding-right: 20px; padding-left: 15px; } .icons-topbar { border-right: 1px solid #F2F2F2; padding-left: 14px; padding-right: 14px; } .icons-topbar .dropdown-toggle::after { display: none; } .icons-topbar .dropdown-toggle { margin-top: 12px; margin-bottom: 10px; border-radius: 20px; height: 36px; width: 36px; border: var(--rc-icons-topbar-border); background-color: var(--rc-icons-topbar-bg); color: var(--rc-icons-topbar-color); font-size: 14px; padding-top: 7px; padding-left: 0; padding-right: 0; text-align: center; } .icons-topbar .dropdown-toggle:hover { background-color: var(--rc-icons-topbar-bg-hover); border: var(--rc-icons-topbar-border-hover); color: var(--rc-icons-topbar-color-hover); } .icons-topbar .dropdown-toggle::after { display: none; } .topbar-username { font-size: 14px; font-weight: 600; text-align: left; color: var(--rc-font-color-primary); } .topbar-role { font-size: 10px; font-weight: 400; text-align: left; color: var(--rc-font-color-primary); } .topbar-user-group img { width: 36px; height: 36px; border-radius: 30px; margin-right: 10px; } .topbar-user-profile { padding-right: 24px; padding-top: 4px; } .topbar-user-profile .dropdown-toggle::after { position: absolute; top: 15px; right: -6px; } .topbar-user-profile .dropdown-menu i { margin-right: 10px; } .dropdown-item.active, .dropdown-item { font-size: 12px; } .dropdown-item.active, .dropdown-item:active { background-color: #def7e8; color: #18a34e; } .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { border-color: var(--rc-btn-active-border-color); } /* Navbar Left */ #rc-body { margin-left: 270px; position: relative; /* height: 100%; */ } .sidevbar { position: sticky; box-shadow: var(--rc-box-shadow); background-color: var(--rc-bg-white); width: 270px; height: 100%; } .header_toggle { color: var(--first-color); font-size: 1.5rem; cursor: pointer; flex-grow: 0; flex-shrink: 0; flex-basis: 60px; height: 60px; background-color: #D3FFE4; border-bottom-right-radius: 30px; transition: 0.1s; } .header_toggle i { font-size: 28px; font-weight: 800; color: #40DB7C; text-align: center; width: 60px; height: 60px; display: block; padding-top: 10px; } .header_toggle i::before { transition: 0.5s; transform: rotate(0deg); } .header-toggle-move i { } .header-toggle-move i::before { transition: 0.5s; transform: rotate(180deg); } .left-navbar { position: fixed; top: 0; left: 0; width: 270px; height: 100%; background-color: var(--white); transition: 0.5s; z-index: var(--z-fixed); padding-bottom: 40px; z-index: 1021; } .left-navbar nav { width: 100%; } .left-navbar-logo { height: 60px; margin: 0 auto; padding-top: 0px; display: flex; flex-direction: column; justify-content: center; } .left-user-group { width: 100%; padding-top: 20px; padding-bottom: 20px; margin-bottom: 10px; transition: 0.5s; } .left-navbar-username { font-size: 16px; font-weight: 600; text-align: left; color: var(--rc-font-color-primary); text-align: center; } .left-navbar-role { font-size: 12px; font-weight: 400; text-align: left; color: var(--rc-font-color-primary); text-align: center; } .left-navbar-user-group img { width: 36px; height: 36px; border-radius: 30px; margin-right: 10px; } .left-navbar.show { width: calc(var(--nav-width) + 0px); } .left-navbar.show .nav { padding-left: 10px; padding-right: 10px; } .left-navbar.show .nav .left-navbar-logo { padding-top: 0px; display: flex; flex-direction: column; justify-content: center; } .left-navbar.show .left-navbar-username, .left-navbar.show .left-navbar-role { font-size: 8px; } .left-navbar.show .left-navbar-list { padding-left: 0px; padding-right: 0px; } #rc-body.navbar-small { margin-left: 68px !important; } .header_toggle { color: var(--first-color); font-size: 1.5rem; cursor: pointer; } .inner-collapse { padding: 0 20px; } .left-navbar.show .left-user-group { padding-top: 10px; padding-bottom: 10px; transition: 0.5s; } .left-navbar.show .inner-collapse { position: absolute; opacity: 0; } .inner-collapse-navbar { font-size: 14px; color: #212529; text-decoration: none; display: block; padding-top: 5px; padding-bottom: 5px; } .inner-collapse-navbar:hover { color: #18A34E; } .inner-collapse-navbar.active { color: #18A34E; } .left-navbar-list { width: 100%; padding-left: 20px; padding-right: 20px; } .left-navbar-btn { width: 100%; text-align: left; padding-left: 20px; padding-right: 20px; border-radius: 30px; transition: 0.1s; margin-bottom: 1px; margin-top: 1px; transition: 0.2s; opacity: 1; display: flex; flex-direction: row; flex-wrap: nowrap; overflow: hidden; } .left-navbar-btn i { margin-right: 5px; } .left-navbar-btn:hover { background-color: #DEF7E8; color: #18A34E; border-radius: 30px; } .left-navbar-btn.active { background-color: #DEF7E8; color: #18A34E; border-radius: 30px; } .left-navbar.show .left-navbar-btn { padding-left: 5px; padding-right: 5px; justify-content: center; } .left-navbar.show .left-navbar-btn i { margin-right: 0px; } .left-navbar.show .left-navbar-btn span { opacity: 0; transition: 0; text-indent: -199px; } /* Navbar Left Hover */ .left-navbar.show:hover { width: 270px; } .left-navbar.show:hover .left-navbar-btn { padding-left: 20px; padding-right: 20px; justify-content: left; } .left-navbar.show:hover .left-navbar-btn i { margin-right: 5px; } .left-navbar.show:hover .left-navbar-btn span { opacity: 1; transition: 0; text-indent: 0px; } .left-navbar.show:hover .inner-collapse { opacity: 1; position: static; } /* Notifications */ .topbar-notifications .dropdown-menu.show { width: 240px; padding: 10px 10px 10px 10px; border: 0; box-shadow: var(--rc-box-shadow); } .notifications-top-btn { padding: 7px; background-color: #F9F9F9; border-radius: 4px; text-decoration: none; margin-bottom: 5px; transition: 0.1s; } .notifications-top-btn:hover { transform: scale(1.15); background-color: #fff; box-shadow: var(--rc-box-shadow); } .noti-icon-title { flex-grow: 0; flex-shrink: 0; flex-basis: 44px; height: 44px; border-radius: 4px; font-size: 24px; padding: 5px; text-align: center; margin-right: 7px; } .noti-descriptions { font-size: 12px; line-height: 14px; color: #212529; font-weight: 600; } .noti-date { color: #797979; font-size: 10px; font-weight: 400; padding-top: 2px; } .noti-view-all-btn { text-align: center; } .noti-count { position: absolute; font-size: 8px; font-weight: 600; width: 15px; height: 15px; background-color: #ff4646; color: #fff; top: 0px; right: -6px; border-radius: 20px; padding-top: 2px; text-align: center; } /* Notification color */ .noti-green { background-color: #DEF7E8; color: #0D5; } .noti-orange { background-color: #f7e8de; color: #ff9446; } .noti-red { background-color: #ffd0d0; color: #ff4646; } /* ========================================= */ /* Main Body */ /* ======================================= */ .main-body { position: relative; /* height: calc(100% - 116px); */ /* height: 100%; */ padding: 28px 14px; /* overflow: hidden; */ } /* ========================================= */ /* Breadcrumb */ /* ======================================= */ .breadcrumb { margin-bottom: 0px; } /* Style 1 */ .rc-breadcrumb-style-1 { border-radius: 4px; padding: 14px 14px; height: auto !important; } .rc-breadcrumb-style-1 .breadcrumb-item { font-size: 12px; color: var(--rc-color-main); } .rc-breadcrumb-style-1 .breadcrumb-item a { text-decoration: none; color: var(--rc-font-color-primary); } /* Style 2 */ .rc-breadcrumb-style-2 { height: auto !important; border-radius: 4px; padding: 14px 14px; } .rc-breadcrumb-style-2 .breadcrumb-item { font-size: 12px; color: var(--rc-color-main); } .rc-breadcrumb-style-2 .breadcrumb-item span { border: 1px solid var(--rc-color-main); padding: 2px 5px; border-radius: 4px; } .rc-breadcrumb-style-2 .breadcrumb-item a { text-decoration: none; color: var(--rc-font-color-primary); border: 1px solid var(--rc-font-color-primary); padding: 1px 6px; border-radius: 4px; } /* .rc-breadcrumb-style-2 .breadcrumb-item + .rc-breadcrumb-style-2 .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, ">") !important; } */ /* Style 3 */ .rc-breadcrumb-style-3 { height: auto !important; border-radius: 4px; padding: 14px 14px; } .rc-breadcrumb-style-3 .breadcrumb-item { font-size: 12px; color: var(--rc-color-main); } .rc-breadcrumb-style-3 .breadcrumb-item span { border: 1px solid #DEF7E8; background-color: #DEF7E8; color: #18A34E; padding: 2px 5px; border-radius: 4px; } .rc-breadcrumb-style-3 .breadcrumb-item a { text-decoration: none; color: var(--rc-font-color-primary); background-color: #ececec; border: 1px solid #ececec; padding: 1px 6px; border-radius: 4px; } .rc-breadcrumb-style-3 .breadcrumb-item + .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, ">") !important; } /* Style 4 */ .rc-breadcrumb-style-4 { height: auto !important; border-radius: 4px; padding: 14px 14px; } .rc-breadcrumb-style-4 .breadcrumb-item { font-size: 12px; color: var(--rc-color-main); } .rc-breadcrumb-style-4 .breadcrumb-item span { border: 1px solid #3EE057; background-color: #DEF7E8; color: #18A34E; padding: 2px 5px; border-radius: 4px; } .rc-breadcrumb-style-4 .breadcrumb-item a { text-decoration: none; color: var(--rc-font-color-primary); background-color: #ececec; border: 1px solid #d0d0d0; padding: 1px 6px; border-radius: 4px; } .rc-breadcrumb-style-4 .breadcrumb-item + .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, "•") !important; } /* ========================================= */ /* Typo */ /* ======================================= */ .headline-title small { margin-top: -10px; display: block; margin-bottom: 18px; } .headline-title h1 { text-transform: uppercase; } .h1 { font-size: 32px; font-weight: 900; color: var(--rc-font-color-primary); } /* Icons */ .accordion-active-icons .accordion-button i { /* margin-right: 14px; */ font-size: 14px; } /* ========================================= */ /* Component Accordion */ /* ======================================= */ .accordion-button:not(.collapsed) { color: #18a34e; background-color: #def7e8; border-left: var(--rc-accordion-active-border-left); } .accordion-button { border-left: var(--rc-accordion-border-left); } .accordion-button:hover { border-left: var(--rc-accordion-active-border-left); } .accordion-button:focus { box-shadow: none; border-left: var(--rc-accordion-active-border-left); } .accordion-item { color: var(--rc-font-color-primary); background-color: var(--bs-accordion-bg); border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } /* Flush */ .accordion-flush .accordion-button { border-left: none; } /* card */ .accordion-card .accordion-button:not(.collapsed) { color: #18a34e; background-color: #ffffff; border-left: var(--rc-accordion-active-border-left); } .accordion-card .accordion-button { border-left: var(--rc-accordion-border-left); box-shadow: 0px 0px 0px transparent; } .accordion-card .accordion-button:hover { border-left: var(--rc-accordion-active-border-left); } .accordion-card .accordion-button:focus { box-shadow: none; border-left: var(--rc-accordion-active-border-left); } .accordion-card .accordion-item { color: var(--rc-font-color-primary); background-color: var(--bs-accordion-bg); border: 0; /* border-left: var(--rc-accordion-active-border-left); */ box-shadow: var(--rc-accordion-card-shadow); margin-bottom: 5px; border-radius: 6px; transition: 0.1s; } .accordion-card .accordion-body { border-bottom: var(--rc-accordion-active-border-left); } .accordion-card .accordion-item:hover { box-shadow: var(--rc-accordion-hover-card-shadow); transform: scale(1.028); } /* card active background */ .accordion-active-bg .accordion-button:not(.collapsed) { color: rgb(255, 255, 255); background-color: #ffffff; background-color: var(--rc-color-main); border-left: var(--rc-accordion-active-border-left); } .accordion-active-bg .accordion-button { border-left: var(--rc-accordion-border-left); box-shadow: 0px 0px 0px transparent; } .accordion-active-bg .accordion-button:hover { color: rgb(255, 255, 255); border-left: var(--rc-accordion-active-border-left); background-color: var(--rc-color-main); } .accordion-active-bg .accordion-button:focus { box-shadow: none; border-left: var(--rc-accordion-active-border-left); } .accordion-active-bg .accordion-item { color: var(--rc-font-color-primary); background-color: var(--bs-accordion-bg); border: 0; box-shadow: var(--rc-accordion-card-shadow); margin-bottom: 5px; border-radius: 6px; transition: 0.1s; } .accordion-active-bg .accordion-body { border-bottom: var(--rc-accordion-active-border-left); } .accordion-active-bg .accordion-item:hover { box-shadow: var(--rc-accordion-hover-card-shadow); transform: scale(1.028); } .accordion-active-bg .accordion-button::after { flex-shrink: 0; width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-left: auto; content: ""; background-image: url("data:image/svg+xml,");; background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); } .accordion-active-bg .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,");; transform: var(--bs-accordion-btn-icon-transform); } .accordion-active-bg .accordion-button:hover::after { background-image: url("data:image/svg+xml,");; transform: rotate(180deg); } .accordion-active-bg .accordion-button:hover:not(.collapsed)::after { background-image: url("data:image/svg+xml,");; transform: rotate(180deg); } /* card header background */ .accordion-header-bg .accordion-button:not(.collapsed) { color: rgb(255, 255, 255); background-color: var(--rc-color-main); border-left: var(--rc-accordion-active-border-left); } .accordion-header-bg .accordion-button { border-left: 0px; box-shadow: 0px 0px 0px transparent; background: #def7e8; } .accordion-header-bg .accordion-button:hover { color: rgb(255, 255, 255); border-left: 0px; background-color: var(--rc-color-main); } .accordion-header-bg .accordion-button:focus { box-shadow: none; border-left: 0px; } .accordion-header-bg .accordion-item { color: var(--rc-font-color-primary); background-color: var(--bs-accordion-bg); border: 0; box-shadow: var(--rc-accordion-card-shadow); margin-bottom: 5px; border-radius: 6px; transition: 0.1s; } /* .accordion-header-bg .accordion-body { border-bottom: var(--rc-accordion-active-border-left); } */ .accordion-header-bg .accordion-item:hover { box-shadow: var(--rc-accordion-hover-card-shadow); transform: scale(1.028); } .accordion-header-bg .accordion-button::after { flex-shrink: 0; width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-left: auto; content: ""; background-image: url("data:image/svg+xml,");; background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); } .accordion-header-bg .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,");; transform: var(--bs-accordion-btn-icon-transform); } .accordion-header-bg .accordion-button:hover::after { background-image: url("data:image/svg+xml,");; transform: rotate(180deg); } .accordion-header-bg .accordion-button:hover:not(.collapsed)::after { background-image: url("data:image/svg+xml,");; transform: rotate(180deg); } /* ========================================= */ /* Component Alert */ /* ======================================= */ .alert-success { background-color: var(--rc-success-bg-subtle); } .alert.no-border-alert { border: 0px; } .alert-primary.solid { background-color: var(--rc-alert-primary-solid); } .alert-secondary.solid { background-color: var(--rc-alert-secondary-solid); } .alert-success.solid { background-color: var(--rc-alert-success-solid); } .alert-danger.solid { background-color: var(--rc-alert-danger-solid); } .alert-warning.solid { background-color: var(--rc-alert-warning-solid); } .alert-info.solid { background-color: var(--rc-alert-info-solid); } .alert-light.solid { background-color: var(--rc-alert-light-solid); } .alert-dark.solid { background-color: var(--rc-alert-dark-solid); } .alert.solid { color: #fff; } .alert.alert-light.solid { color: #171717; } .alert.solid.alert-dismissible .btn-close { opacity: .8; color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } .alert.solid.alert-dismissible .btn-close:hover { opacity: 1; } .alert.alert-light.solid.alert-dismissible .btn-close { opacity: .8; color: #171717; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23171717'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } /* square alert */ .alert.square-alert { border-radius: 0px; } /* rounded alert */ .alert.rounded-alert { border-radius: 100px; } .border-left-solid { border: 0px solid transparent; background-color: #fff; border-left: 4px solid var(--rc-alert-success-solid); box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } .alert-primary.border-left-solid { border-color: var(--rc-alert-primary-solid); } .alert-secondary.border-left-solid { border-color: var(--rc-alert-secondary-solid); } .alert-success.border-left-solid { border-color: var(--rc-alert-success-solid); } .alert-danger.border-left-solid { border-color: var(--rc-alert-danger-solid); } .alert-warning.border-left-solid { border-color: var(--rc-alert-warning-solid); } .alert-info.border-left-solid { border-color: var(--rc-alert-info-solid); } .alert-light.border-left-solid { border-color: var(--rc-alert-light-solid); } .alert-dark.border-left-solid { border-color: var(--rc-alert-dark-solid); } /* ========================================= */ /* Component Card */ /* ======================================= */ .rc-card { background-color: var(--rc-bg-white); box-shadow: var(--rc-box-shadow); margin-bottom: 24px; border-radius: 6px; transition: 0.2s; position: relative; height: calc(100% - 24px); /* overflow: hidden; */ } .w-35 { height: 150px; overflow: hidden; } .rc-card-hover:hover { transform: scale(1.02); box-shadow: var(--rc-box-shadow-hover); } .rc-card-body { padding: 28px; } .card-title { margin-bottom: 14px; } .card-subtitle { margin-top: -10px; margin-bottom: 14px; font-size: 0.875rem; } .card-link + .card-link { margin-left: 28px; } .rc-card > .card-img-top { border-top-left-radius: 6px; border-top-right-radius: 6px; } .rc-card > .rc-card-body > .card-img-top { margin-bottom: 23px; } .rc-border { border-left: 4px solid var(--rc-color-main); } /* ========================================= */ /* Badges */ /* ======================================= */ .badge-xs { font-size: 10px; } .badge-sm { font-size: 12px; } .badge-md { font-size: 14px; } .badge-lg { font-size: 16px; } .badge-xl { font-size: 18px; } .border-badge { border: 1px solid #f5f5f5; background-color: transparent; } .border-badge:hover { border-width: 1px; border-style: solid; } .btn-primary.border-badge { border-color: var(--bs-primary-border-subtle); background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .btn-secondary.border-badge { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); } .btn-success.border-badge { border-color: var(--bs-success-border-subtle) !important; background-color: var(--rc-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; } .btn-danger.border-badge { border-color: var(--bs-danger-border-subtle); background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); } .btn-warning.border-badge { border-color: var(--bs-warning-border-subtle); background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .btn-info.border-badge { border-color: var(--bs-info-border-subtle); background-color: var(--bs-info-bg-subtle); color: var(--bs-info-border-subtle); } .btn-light.border-badge { border-color: var(--bs-light-border-subtle); background-color: var(--bs-light-bg-subtle); color: var(--bs-light-text-emphasis); } .btn-dark.border-badge { border-color: var(--bs-dark-border-subtle); background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } .square-badge { border-radius: 0px; } .square-badge .badge { border-radius: 2px; } .btn-badge { padding-left: 12px; padding-right: 12px; } .rounded-badge { border-radius: 30px; padding-left: 10px; padding-right: 10px; } .rounded-badge .badge { border-radius: 30px; } .btn .badge { margin-left: 3px; } .badge { line-height: 14px; } /* light */ .badge-container .light { margin-bottom: 5px; } .light.badge-primary { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .light.badge-secondary { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); } .light.badge-success { background-color: var(--rc-success-bg-subtle) !important; /* color: var(--bs-success-text-emphasis) !important; */ color: #22a86b !important; } .light.badge-danger { background-color: var(--bs-danger-bg-subtle); /* color: var(--bs-danger-text-emphasis); */ color: #bc2635; } .light.badge-warning { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .light.badge-info { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); } .light.badge-light { background-color: var(--bs-light-bg-subtle); color: var(--bs-light-text-emphasis); } .light.badge-dark { background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } /* ========================================= */ /* Button */ /* ======================================= */ .border-button { border: 1px solid #f5f5f5; background-color: transparent; } .border-button:hover { border-width: 1px; border-style: solid; } .btn-primary.border-button { border-color: var(--bs-primary-border-subtle); background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .btn-secondary.border-button { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); } .btn-success.border-button { border-color: var(--bs-success-border-subtle) !important; background-color: var(--rc-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; } .btn-danger.border-button { border-color: var(--bs-danger-border-subtle); background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); } .btn-warning.border-button { border-color: var(--bs-warning-border-subtle); background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .btn-info.border-button { border-color: var(--bs-info-border-subtle); background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-subtle); } .btn-light.border-badge { border-color: var(--bs-light-border-subtle); background-color: var(--bs-light-bg-subtle); color: var(--bs-light-text-emphasis); } .btn-dark.border-button { border-color: var(--bs-dark-border-subtle); background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } /* Light Color */ .btn-primary.light-color { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .btn-secondary.light-color { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); } .btn-success.light-color { background-color: var(--rc-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; } .btn-danger.light-color { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); } .btn-warning.light-color { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .btn-info.light-color { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); } .btn-light.light-color { background-color: var(--bs-light-bg-subtle); color: var(--bs-light-text-emphasis); } .btn-dark.light-color { background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } /* Square Button */ .square-button { border-radius: 0px; } /* Rounded Button */ .rounded-button { border-radius: 30px; } /* btn hover */ .btn-primary:hover { background-color: var(--rc-primary-hover-solid); } .btn-secondary:hover { background-color: var(--rc-secondary-hover-solid); } .btn-success:hover { background-color: var(--rc-success-hover-solid) !important; } .btn-danger:hover { background-color: var(--rc-danger-hover-solid); } .btn-warning:hover { background-color: var(--rc-warning-hover-solid); } .btn-info:hover { background-color: var(--rc-info-hover-solid); } .btn-light:hover { background-color: var(--rc-light-hover-solid); } .btn-dark:hover { color: #fff; background-color: var(--rc-dark-hover-solid); } /* RC Style */ .rc-btn { color: #171717; border: 0px solid transparent; background-color: #fff !important; border-left: 4px solid var(--rc-alert-success-solid); box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } .btn-rc-solid { color: var(--white); border: 0px solid transparent; background-color: var(--rc-color-main-title); border-left: 0px solid var(--rc-color-main-title); /* box-shadow: 1px 3px 10px rgba(0,0,0,0.1); */ } .btn-rc-solid:hover, .btn-rc-solid:active { color: var(--white) !important; border: 0px solid transparent; background-color: var(--rc-color-main-title-hover) !important; border-left: 0px solid var(--rc-color-main-title); box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } .btn-primary.rc-btn { border-left: 4px solid var(--rc-primary-solid); } .btn-secondary.rc-btn { border-left: 4px solid var(--rc-secondary-solid); } .btn-success.rc-btn { border-left: 4px solid var(--rc-success-solid); } .btn-danger.rc-btn { border-left: 4px solid var(--rc-danger-solid); } .btn-warning.rc-btn { border-left: 4px solid var(--rc-warning-solid); } .btn-info.rc-btn { border-left: 4px solid var(--rc-info-solid); } .btn-light.rc-btn { border-left: 4px solid var(--rc-light-solid); } .btn-dark.rc-btn { border-left: 4px solid var(--rc-dark-solid); } /* RC Hover */ .btn-primary.rc-btn:hover { background-color: var(--rc-primary-hover-solid) !important; } .btn-secondary.rc-btn:hover { background-color: var(--rc-secondary-hover-solid) !important; } .btn-success.rc-btn:hover { background-color: var(--rc-success-hover-solid) !important; } .btn-danger.rc-btn:hover { background-color: var(--rc-danger-hover-solid) !important; } .btn-warning.rc-btn:hover { background-color: var(--rc-warning-hover-solid) !important; } .btn-info.rc-btn:hover { background-color: var(--rc-info-hover-solid) !important; } .btn-light.rc-btn:hover { background-color: var(--rc-light-hover-solid) !important; } .btn-dark.rc-btn:hover { color: #fff; background-color: var(--rc-dark-hover-solid) !important; } /* disable btn */ .btn:disabled, .btn.disabled, fieldset:disabled .btn { background-color: #f7f7f7; } /* .collapsing.collapse-horizontal { width: 0 !important; } */ /* ========================================= */ /* Dropdown */ /* ======================================= */ .btn.dropdown-toggle { padding-left: 12px; padding-right: 12px; } .btn.btn-success.dropdown-toggle, .btn.btn-success.show { color: #0a3622 !important; } .btn.btn-success:focus-visible { color: #0a3622; } .rc-btn:hover { /* color: #171717; border: 0px solid transparent; background-color: #fff !important; */ /* border-left: 4px solid var(--rc-alert-success-solid); */ /* box-shadow: 1px 3px 10px rgba(0,0,0,0.1); */ } .btn.rc-btn.show { color: #0a3622 !important; border-left: 4px solid var(--rc-alert-success-solid); background-color: var(--rc-success-hover-solid) !important; } /* ========================================= */ /* List Group */ /* ======================================= */ .list-group-item.active { background-color: #41db7c; border-color: #41db7c; } .list-group-item.disabled { background-color: #f7f7f7; } .list-group-item-action:hover, .list-group-item-action:focus { color: #18A34E; background-color: #DEF7E8; } .list-group-item-action.active:hover, .list-group-item-action.active:focus { background-color: #41db7c; border-color: #41db7c; color: #fff; } .list-group-item-action.list-group-item-primary:hover, .list-group-item-action.list-group-item-primary:focus { color: var(--white); background-color: var(--rc-primary-hover-solid); } .list-group-item-action.list-group-item-secondary:hover, .list-group-item-action.list-group-item-secondary:focus { color: var(--white); background-color: var(--rc-secondary-hover-solid); } .list-group-item-action.list-group-item-success:hover, .list-group-item-action.list-group-item-success:focus { color: var(--black); background-color: var(--rc-success-hover-solid); } .list-group-item-action.list-group-item-danger:hover, .list-group-item-action.list-group-item-danger:focus { color: var(--white); background-color: var(--rc-danger-hover-solid); } .list-group-item-action.list-group-item-warning:hover, .list-group-item-action.list-group-item-warning:focus { color: var(--black); background-color: var(--rc-warning-hover-solid); } .list-group-item-action.list-group-item-info:hover, .list-group-item-action.list-group-item-info:focus { color: var(--black); background-color: var(--rc-info-hover-solid); } .list-group-item-action.list-group-item-light:hover, .list-group-item-action.list-group-item-light:focus { color: var(--black); background-color: var(--rc-light-hover-solid); } .list-group-item-action.list-group-item-dark:hover, .list-group-item-action.list-group-item-dark:focus { color: var(--white); background-color: var(--rc-dark-hover-solid); } /* Active */ .list-group-item-action.list-group-item-primary.active, .list-group-item-action.list-group-item-primary:active { color: var(--white); border-color: var(--rc-primary-solid); background-color: var(--rc-primary-solid); } .list-group-item-action.list-group-item-secondary.active, .list-group-item-action.list-group-item-secondary:active { color: var(--white); border-color: var(--rc-secondary-solid); background-color: var(--rc-secondary-solid); } .list-group-item-action.list-group-item-success.active, .list-group-item-action.list-group-item-success:active { color: var(--black); border-color: var(--rc-success-solid); background-color: var(--rc-success-solid); } .list-group-item-action.list-group-item-danger.active, .list-group-item-action.list-group-item-danger:active { color: var(--white); border-color: var(--rc-danger-solid); background-color: var(--rc-danger-solid); } .list-group-item-action.list-group-item-warning.active, .list-group-item-action.list-group-item-warning:active { color: var(--black); border-color: var(--rc-warning-solid); background-color: var(--rc-warning-solid); } .list-group-item-action.list-group-item-info.active, .list-group-item-action.list-group-item-info:active { color: var(--black); border-color: var(--rc-info-solid); background-color: var(--rc-info-solid); } .list-group-item-action.list-group-item-light.active, .list-group-item-action.list-group-item-light:active { color: var(--black); border-color: var(--rc-light-solid); background-color: var(--rc-light-solid); } .list-group-item-action.list-group-item-dark.active, .list-group-item-action.list-group-item-dark:active { color: var(--white); border-color: var(--rc-dark-solid); background-color: var(--rc-dark-solid); } /* Custom Content */ /* ========================================= */ /* Pagination */ /* ======================================= */ .page-link { color: var(--rc-color-main-title); } .page-link:hover { color: var(--text-color-green); background-color: #DEF7E8; } .page-link:focus { box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); background-color: #DEF7E8; } .page-link.active, .active > .page-link { color: #ffffff; background: var(--rc-color-main-title); border: 1px solid var(--rc-color-main-title); } .rc-border-bottom .page-link{ margin-left: 4px; margin-right: 4px; color: #6e6e6e; background-color: #fff; border: 0px solid; border-bottom: 3px solid #dee2e6; } .rc-border-bottom .page-link:hover { color: var(--text-color-green); background-color: #DEF7E8; border-bottom: 3px solid var(--rc-color-main-title); } .rc-border-bottom .page-link.active,.rc-border-bottom .active > .page-link { border-bottom: 3px solid var(--rc-color-main-title); color: var(--text-color-green); } /* Solid Background */ .rc-solid-background .page-link{ margin-left: 4px; margin-right: 4px; color: #6e6e6e; background-color: #f0f0f0; border: 0px solid; border-radius: 4px; } .rc-solid-background .page-link:hover { color: var(--text-color-green); background-color: #DEF7E8; } .rc-solid-background .page-link.active,.rc-solid-background .active > .page-link { background-color: var(--rc-color-main-title); color: var(--white); } .rc-solid-background .disabled .page-link { background-color: #bdbdbd; } /* Circle Pagination */ .rc-circle-pagination .page-link{ margin-left: 4px; margin-right: 4px; color: #6e6e6e; background-color: #f0f0f0; border: 0px solid; border-radius: 50rem; } .rc-circle-pagination .page-link:hover { color: var(--text-color-green); background-color: #DEF7E8; } .rc-circle-pagination .page-link.active,.rc-circle-pagination .active > .page-link { background-color: var(--rc-color-main-title); color: var(--white); } .rc-circle-pagination .disabled .page-link { background-color: #bdbdbd; } .rc-circle-pagination .page-item:last-child .page-link { border-radius: 50rem; } .rc-circle-pagination .page-item:first-child .page-link { border-radius: 50rem; } /* ========================================= */ /* Popovers */ /* ======================================= */ .popover { box-shadow: var(--rc-box-shadow); border: 1px solid #95eab3; } .popover-header { color: #18a34e; background-color: #95eab3; border-bottom: 1px solid #95eab3; } .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: #95eab3; } .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: #95eab3; } .bs-popover-left > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: #95eab3; } .bs-popover-right > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: #95eab3; } /* Custom background color */ /* primary */ .custom-popover-color-primary .popover-header { background-color: var(--rc-primary-solid); color: #fff; border-bottom: 1px solid var(--rc-primary-solid); } .popover.custom-popover-color-primary { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-primary-solid); } .custom-popover-color-primary.bs-popover-top > .popover-arrow::before, .custom-popover-color-primary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-primary-solid); } .custom-popover-color-primary.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-primary-solid); } .custom-popover-color-primary.bs-popover-left > .popover-arrow::before, .custom-popover-color-primary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-primary-solid); } .custom-popover-color-primary.bs-popover-right > .popover-arrow::before, .custom-popover-color-primary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-primary-solid); } /* secondary */ .custom-popover-color-secondary .popover-header { background-color: var(--rc-secondary-solid); color: #fff; border-bottom: 1px solid var(--rc-secondary-solid); } .popover.custom-popover-color-secondary { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-secondary-solid); } .custom-popover-color-secondary.bs-popover-top > .popover-arrow::before, .custom-popover-color-secondary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-secondary-solid); } .custom-popover-color-secondary.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-secondary-solid); } .custom-popover-color-secondary.bs-popover-left > .popover-arrow::before, .custom-popover-color-secondary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-secondary-solid); } .custom-popover-color-secondary.bs-popover-right > .popover-arrow::before, .custom-popover-color-secondary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-secondary-solid); } /* Success */ .custom-popover-color-success .popover-header { background-color: var(--rc-success-solid); color: #0b3622; border-bottom: 1px solid var(--rc-success-solid); } .popover.custom-popover-color-success { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-success-solid); } .custom-popover-color-success.bs-popover-top > .popover-arrow::before, .custom-popover-color-success.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-success-solid); } .custom-popover-color-success.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-success-solid); } .custom-popover-color-success.bs-popover-left > .popover-arrow::before, .custom-popover-color-success.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-success-solid); } .custom-popover-color-success.bs-popover-right > .popover-arrow::before, .custom-popover-color-success.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-success-solid); } /* Danger */ .custom-popover-color-danger .popover-header { background-color: var(--rc-danger-solid); color: #ffffff; border-bottom: 1px solid var(--rc-danger-solid); } .popover.custom-popover-color-danger { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-danger-solid); } .custom-popover-color-danger.bs-popover-top > .popover-arrow::before, .custom-popover-color-danger.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-danger-solid); } .custom-popover-color-danger.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-danger-solid); } .custom-popover-color-danger.bs-popover-left > .popover-arrow::before, .custom-popover-color-danger.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-danger-solid); } .custom-popover-color-danger.bs-popover-right > .popover-arrow::before, .custom-popover-color-danger.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-danger-solid); } /* Warning */ .custom-popover-color-warning .popover-header { background-color: var(--rc-warning-solid); color: #000000; border-bottom: 1px solid var(--rc-warning-solid); } .popover.custom-popover-color-warning { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-warning-solid); } .custom-popover-color-warning.bs-popover-top > .popover-arrow::before, .custom-popover-color-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-warning-solid); } .custom-popover-color-warning.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-warning-solid); } .custom-popover-color-warning.bs-popover-left > .popover-arrow::before, .custom-popover-color-warning.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-warning-solid); } .custom-popover-color-warning.bs-popover-right > .popover-arrow::before, .custom-popover-color-warning.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-warning-solid); }s /* Info */ .custom-popover-color-info { /* background: red; */ } .custom-popover-color-info .popover-header { background-color: var(--rc-info-solid) !important; color: #000000; border-bottom: 1px solid var(--rc-info-solid); } .popover.custom-popover-color-info { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-info-solid); } .custom-popover-color-info.bs-popover-top > .popover-arrow::before, .custom-popover-color-info.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-info-solid); } .custom-popover-color-info.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-info-solid); } .custom-popover-color-info.bs-popover-left > .popover-arrow::before, .custom-popover-color-info.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-info-solid); } .custom-popover-color-info.bs-popover-right > .popover-arrow::before, .custom-popover-color-info.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-info-solid); } /* Light */ .custom-popover-color-light .popover-header { background-color: var(--rc-light-solid); color: #000000; border-bottom: 1px solid var(--rc-light-solid); } .popover.custom-popover-color-light { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-light-solid); } .custom-popover-color-light.bs-popover-top > .popover-arrow::before, .custom-popover-color-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-light-solid); } .custom-popover-color-light.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-light-solid); } .custom-popover-color-lighto.bs-popover-left > .popover-arrow::before, .custom-popover-color-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-light-solid); } .custom-popover-color-light.bs-popover-right > .popover-arrow::before, .custom-popover-color-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-light-solid); } /* Dark */ .custom-popover-color-dark .popover-header { background-color: var(--rc-dark-solid); color: #ffffff; border-bottom: 1px solid var(--rc-dark-solid); } .popover.custom-popover-color-dark { box-shadow: var(--rc-box-shadow); border: 1px solid var(--rc-dark-solid); } .custom-popover-color-dark.bs-popover-top > .popover-arrow::before, .custom-popover-color-dark.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { border-top-color: var(--rc-dark-solid); } .custom-popover-color-dark.bs-popover-bottom > .popover-arrow::before, .custom-popover-color-dark.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { border-bottom-color: var(--rc-dark-solid); } .custom-popover-color-dark.bs-popover-left > .popover-arrow::before, .custom-popover-color-dark.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { border-left-color: var(--rc-dark-solid); } .custom-popover-color-dark.bs-popover-right > .popover-arrow::before, .custom-popover-color-dark.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { border-right-color: var(--rc-dark-solid); } /* ========================================= */ /* Progress Bar */ /* ======================================= */ .progressbar-container > .progress + .progress { margin-top: 14px; } .progress, .progress-stacked { border-radius: 4px; /* height: 10px; */ /* background-color: var(--rc-color-main-title); */ } .progress-bar { background-color: var(--rc-color-main-title); } .progress-title { font-size: 12px; margin-bottom: 5px; } /* ========================================= */ /* Tabs */ /* ======================================= */ .nav-link { color: var(--black); font-weight: 500; font-size: 16px; } .nav-link i{ /* color: var(--text-color-green); */ } .nav-link:hover { color: var(--text-color-green); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--text-color-green); } .tab-rc-boder { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--rc-color-main-title); border: 1px solid var(--rc-color-main-title); } .nav-pills-outline .nav-link{ border: 1px solid #dee2e6; background-color: transparent; margin-right: 5px; } .nav-pills-outline .nav-link:hover { border: 1px solid var(--rc-color-main-title); } /* RC */ .nav-pills.nav-pills-rc .nav-link.active, .nav-pills.nav-pills-rc .show > .nav-link { background-color: var(--white); border: 1px solid var(--rc-color-main-title); border-left: 4px solid var(--rc-color-main-title); color: var(--text-color-green); } .nav-pills-rc .nav-link{ border: 1px solid #dee2e6; background-color: transparent; margin-right: 5px; border-left: 4px solid #dee2e6; } .nav-pills-rc .nav-link:hover { border: 1px solid var(--rc-color-main-title); border-left: 4px solid var(--rc-color-main-title); } .tab-content.tab-content-rc { /* border: 1px solid #dee2e6; background-color: transparent; margin-top: 5px; border-left: 4px solid #dee2e6; border-radius: 4px; */ } .tab-content.tab-content-rc > .active { margin-top: 5px; border-radius: 4px; border: 1px solid var(--rc-color-main-title); border-left: 4px solid var(--rc-color-main-title); } .nav-pills-vertical { border-right: 1px solid #dee2e6; padding-right: 14px; } /* ========================================= */ /* Tooltips */ /* ======================================= */ .custom-tooltip { --bs-tooltip-bg: rgba(220, 56, 72,1); --bs-tooltip-color: var(--bs-white); } /* ========================================= */ /* Images */ /* ======================================= */ .example-img { min-height: 150px; } .example-img img { width: 300px; } .img-thumbnail { padding: 6px; } /* ========================================= */ /* Form */ /* ======================================= */ .form-select:focus { border: 1px solid #41db7c; box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } .form-control { border-radius: 4px; } .form-control:focus { border: 1px solid #41db7c; } .form-rounded { border-radius: 50px; } .form-control::placeholder { font-size: 14px; color: rgb(141, 141, 141); } .rc-default-form { padding: 0; } .rc-default-form .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { background: #fff; border-radius: 0px !important; margin-left: 0px; z-index: 5; color: #AAAFAC; padding-right: 20px; padding-left: 15px; border-left: 0px solid #fff; } /* .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){ background: transparent; border-radius: 0px !important; margin-left: -50px; z-index: 5; color: #AAAFAC; padding-right: 20px; padding-left: 15px; } */ .example-form form .form-control + .form-control { margin-top: 0.5rem; } .example-form .example-label { /* width: 160px; */ } /* Checkbox */ .form-check-input[type=checkbox]:indeterminate { background-color: var(--rc-color-main); border-color: var(--rc-color-main); --bs-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e); } .checkbox-border-button { border: 1px solid #cacaca; background-color: transparent; } .checkbox-border-button:hover { border-width: 1px; border-style: solid; } /* RC */ .btn-check + .btn.btn-.btn-rc-solid:hover { border-color: var(--rc-color-main-title) !important; background-color: #DEF7E8 !important; color: var(--bs-success-text-emphasis) !important; } .btn-check:checked + .btn.btn-rc-solid, :not(.btn-check) + .btn.btn-rc-solid:active { background-color: var(--rc-color-main-title) !important; } /* Success */ .btn-check + .btn.btn-success:hover { border-color: var(--bs-success-border-subtle) !important; background-color: var(--rc-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; } .btn-check:checked + .btn.btn-success, :not(.btn-check) + .btn.btn-success:active { background-color: var(--rc-success-solid) !important; } /* Primary */ .btn-check + .btn.btn-primary:hover { border-color: var(--bs-primary-border-subtle) !important; background-color: var(--rc-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; } .btn-check:checked + .btn.btn-primary, :not(.btn-check) + .btn.btn-primary:active { background-color: var(--rc-primary-solid) !important; } /* Secondary */ .btn-check + .btn.btn-secondary:hover { border-color: var(--bs-secondary-border-subtle) !important; background-color: var(--rc-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; } .btn-check:checked + .btn.btn-secondary, :not(.btn-check) + .btn.btn-secondary:active { background-color: var(--rc-secondary-solid) !important; } /* Danger */ .btn-check + .btn.btn-danger:hover { border-color: var(--bs-danger-border-subtle) !important; background-color: var(--rc-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; } .btn-check:checked + .btn.btn-danger, :not(.btn-check) + .btn.btn-danger:active { background-color: var(--rc-danger-solid) !important; } /* Warning */ .btn-check + .btn.btn-warning:hover { border-color: var(--bs-warning-border-subtle) !important; background-color: var(--rc-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; } .btn-check:checked + .btn.btn-warning, :not(.btn-check) + .btn.btn-warning:active { background-color: var(--rc-warning-solid) !important; } /* Info */ .btn-check + .btn.btn-info:hover { border-color: var(--bs-info-border-subtle) !important; background-color: var(--rc-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; } .btn-check:checked + .btn.btn-info, :not(.btn-check) + .btn.btn-info:active { background-color: var(--rc-info-solid) !important; } /* Light */ .btn-check + .btn.btn-light:hover { border-color: var(--bs-light-border-subtle) !important; background-color: var(--rc-light-bg-subtle) !important; color: var(--bs-light-text-emphasis) !important; } .btn-check:checked + .btn.btn-light, :not(.btn-check) + .btn.btn-light:active { background-color: var(--rc-light-solid) !important; } /* Dark */ .btn-check + .btn.btn-dark:hover { border-color: var(--bs-dark-border-subtle) !important; background-color: var(--rc-dark-bg-subtle) !important; color: var(--bs-dark-text-emphasis) !important; } .btn-check:checked + .btn.btn-dark, :not(.btn-check) + .btn.btn-dark:active { background-color: var(--rc-dark-solid) !important; } .form-range::-webkit-slider-thumb { background: var(--rc-color-main-title); } .form-range::-moz-range-thumb { background: var(--rc-color-main-title); } .form-range::-ms-thumb { background: var(--rc-color-main-title); } .form-range::-webkit-slider-thumb:active { background: var(--rc-success-hover-solid); box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } .form-range::-moz-range-thumb:active { background: var(--rc-success-hover-solid); box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } .form-range::-ms-thumb:active { background: var(--rc-success-hover-solid); box-shadow: 0 0 0 2px rgb(65 219 124 / 25%); } /* ========================================= */ /* Form Editer */ /* ======================================= */ .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners { border: 0px; background-color: var(--rc-color-main-title); border-radius: 4px; } .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners { border-radius: 4px; } .ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list, .ck.ck-dropdown .ck-dropdown__panel .ck-list.ck-rounded-corners { background-color: #41db7c; } .ck-editor__editable[role="textbox"] { min-height: 300px; border-radius: 4px; margin-top: 5px; } .ck-toolbar__items { } .ck-button { color: #fff !important; } .ck-button:hover { background-color: #18A34E !important; } .ck.ck-list__item .ck-button.ck-on { background-color: #18A34E !important; } .ck-content .image { /* block images */ max-width: 80%; margin: 20px auto; } ul.ck-list { background-color: #def7e8; } .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) { /* border-color: #41db7c; */ } .ck-focused { border-color: #41db7c !important; } /* ========================================= */ /* Icons */ /* ======================================= */ .icons-container i{ margin-right: 10px; margin-bottom: 10px; margin-top: 10px; display: inline-block; } .icons-container .row .col-12:hover { color: var(--rc-color-main-title); cursor: pointer; } /* ========================================= */ /* Table */ /* ======================================= */ tr > td, tr > th { font-size: 14px; } .table tbody tr th { vertical-align: middle; } .table tbody tr td { vertical-align: middle; } table .badge.badge-xs { /* color: #fff; */ /* padding-top: 0.35rem; padding-bottom: 0.35rem; */ } .table img { width: 50px; border-radius: 4px; padding: 2px; border: 1px solid #d5d5d5; } /* Custom Table */ .custom-table-1 thead tr th { background-color: #def7e8; border-bottom: 0px; padding-top: 14px; padding-bottom: 14px; } .custom-table-1 thead tr th:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .custom-table-1 thead tr th:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Data Tables */ .table.dataTable > tbody > tr > td { padding-top: 15px; padding-bottom: 15px; } /* ========================================= */ /* Chart */ /* ======================================= */ #rcDonut svg text { font-size: 10px !important; font-weight: 500 !important; } .morris-hover.morris-default-style { border-radius: 7px; padding: 6px; color: #212429; background: rgba(255,255,255,0.9); border: solid 2px rgb(222, 247, 232); font-size: 12px; text-align: center; } .morris-hover.morris-default-style .morris-hover-row-label { font-weight: bold; margin: 0.25em 0; } .morris-hover.morris-default-style .morris-hover-point { white-space: nowrap; margin: 0.1em 0; background-color: #212429; color: #fff !important; border-radius: 4px; padding: 3px 7px; } .updating-chart-column { width: 100%; } .updating-chart { width: 100%; } /* ========================================= */ /* Error Page */ /* ======================================= */ .error-title { font-size: 300px; font-weight: 900; margin-top: -120px; } .error-sub-title { text-transform: uppercase; font-size: 70px; font-weight: 900; margin-top: -40px; } .error-sub-title-2 { font-size: 24px; padding-left: 28px; padding-right: 28px; } .account-page { background-color: #41db7c; } .login-form label { font-size: 12px; font-weight: 500; } .forgot-password-btn { font-size: 12px; line-height: 26px; color: #171717; } .forgot-password-btn:hover { color: #41db7c; } .register-btn-group { font-size: 14px; color: #848484; } .register-btn { color: #41db7c; } .account-page .rc-card { border-radius: 16px; } /* ========================================= */ /* Account */ /* ======================================= */ .profile-row small{ font-size: 12px; } .profile-btn-group { text-align: right; } .profile-btn-group button { margin: 0 auto; } /* ========================================= */ /* Date Picker */ /* ======================================= */ .air-datepicker-cell.-current- { color: #41db7c !important; } .air-datepicker-cell.-in-range- { background: rgb(222 247 232) !important; } .air-datepicker-cell.-range-from- { border: 1px solid #41db7c !important; background-color: rgb(222 247 232) !important; border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius); } .air-datepicker-cell.-range-to- { border: 1px solid #41db7c !important; background-color: rgb(222 247 232) !important; border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0; } .air-datepicker-cell.-selected- { color: #fff !important; background: #41db7c !important; } /* ========================================= */ /* Swiper */ /* ======================================= */ .swiper { width: 100%; height: 100%; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-button-next:after, .swiper-button-prev:after { color: #41db7c; } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { background: #41db7c; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #41db7c; } .autoplay-progress { position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #41db7c; } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: #41db7c; fill: none; stroke-dashoffset: calc(125.6 * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { background: #41db7c; } .swiper-slide { font-size: 18px; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px; background-position: center; background-size: cover; } .parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; -webkit-background-size: cover; background-size: cover; background-position: center; } .swiper-slide .title { font-size: 41px; font-weight: 300; } .swiper-slide .subtitle { font-size: 21px; } .swiper-slide .text { font-size: 14px; max-width: 400px; line-height: 1.3; } /* ========================================= */ /* Select 2 */ /* ======================================= */ .select2-container { width: 100% !important; } .select2-results__option { } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--rc-color-main-title); } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; padding: 0.375rem 0.75rem; position: relative; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 38px; font-size: 1rem; font-weight: 400; line-height: 1.3; user-select: none; -webkit-user-select: none; padding: 0.375rem 0.75rem; } .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .select2-container .select2-search--inline .select2-search__field { margin: 0px; } .select2-container .select2-selection--single { height: 38px; padding: 0.375rem 0.75rem; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 23px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; } .select2-container--default .select2-selection--single .select2-selection__clear{ margin-top: -2px; } /* ========================================= */ /* Range Slider */ /* ======================================= */ .noUi-connect { background: #41db7c; } .noUi-handle:before, .noUi-handle:after { content: ""; display: none; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle { width: 24px; height: 24px; border: 0px solid #cccccc; border-radius: 30px; background: #ffffff; cursor: default; box-shadow: 0px 0px 13px #0000002b; } .noUi-horizontal .noUi-handle { width: 24px; height: 24px; right: -17px; top: -3px; cursor: pointer; } .noUi-connects { background: #e9ecef; border-radius: 4px; } .noUi-target { background: #e9ecef; border-radius: 4px; border: 0dvw solid #D3D3D3; box-shadow: none; } .smallSlider .noUi-horizontal .noUi-handle { width: 10px !important; height: 10px !important; } .smallSlider.noUi-target { height: 3px; } .smallSlider .noUi-connects{ height: 3px; } .smallSlider .noUi-base,.smallSlider .noUi-connects { height: 3px; } .smallSlider .noUi-handle { right: -6px; background: #41db7c; width: 10px !important; height: 10px !important; } .slider-value { font-size: 12px; } .value-style .value-title { background-color: var(--rc-color-main); font-size: 12px; color: #fff; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .value-style .range-value { font-size: 12px; background-color: #e9ecef; border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; } /* 2 */ .value-style-2 .value-title { background-color: var(--rc-color-main); font-size: 12px; color: #fff; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; text-align: center; } .value-style-2 .range-value { font-size: 12px; background-color: #e9ecef; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; text-align: center; } /* 3 */ .value-style-3 .value-title { background-color: var(--rc-color-main); font-size: 12px; color: #fff; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; text-align: center; /* border: 1px solid var(--rc-color-main); */ } .value-style-3 .range-value { font-size: 12px; background-color: #e9ecef; border: 1px solid #e9ecef; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; text-align: center; } /* 2 Value */ .value-group { font-size: 12px; background-color: #e9ecef; border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; } .value-divider { padding-left: 5px; padding-right: 5px; } /* ========================================= */ /* Map */ /* ======================================= */ .map-container iframe { width: 100%; } /* ========================================= */ /* Calendar */ /* ======================================= */ .fc .fc-button-primary { background-color: var(--rc-color-main-title); border-color: var(--rc-color-main-title); color: var(--fc-button-text-color); } .calendar-container .btn-group .btn:hover { background-color: var(--rc-color-main-title-hover) !important; box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } .calendar-container .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .calendar-container .btn-group > .btn.dropdown-toggle-split:first-child, .calendar-container .btn-group > .btn-group:not(:last-child) > .btn { background: #40db7c; } .calendar-container .btn-group > .btn:nth-child(n+3), .calendar-container .btn-group > :not(.btn-check) + .btn, .calendar-container .btn-group > .btn-group:not(:first-child) > .btn { background: #40db7c; } .calendar-container .btn-check:checked + .btn, .calendar-container :not(.btn-check) + .btn:active, .calendar-container .btn:first-child:active, .calendar-container .btn.active, .calendar-container .btn.show { background-color: #18a34e !important; } .calendar-container .btn-check:checked + .calendar-container .btn.btn-primary, .calendar-container :not(.btn-check) + .calendar-container .btn.btn-primary:active { background-color: #18a34e !important; } .fc-today-button { background: #40db7c; } .fc-today-button:hover { background-color: var(--rc-color-main-title-hover) !important; box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } .fc-h-event { background-color: #40db7c; border: 1px solid #40db7c; display: block; } .fc-daygrid-event-dot { border: calc(var(--fc-daygrid-event-dot-width)/2) solid #40db7c; } /* .btn-rc-solid { color: var(--white); border: 0px solid transparent; background-color: var(--rc-color-main-title); border-left: 0px solid var(--rc-color-main-title); } .btn-rc-solid:hover, .btn-rc-solid:active { color: var(--white) !important; border: 0px solid transparent; background-color: var(--rc-color-main-title-hover) !important; border-left: 0px solid var(--rc-color-main-title); box-shadow: 1px 3px 10px rgba(0,0,0,0.1); } */ /* ========================================= */ /* Ecommerce */ /* ======================================= */ .product-item { position: relative; } .product-flag { font-size: 12px; padding-left: 10px; padding-right: 10px; color: #fff; position: absolute; top: 38px; right: 38px; background-color: var(--rc-danger-solid); border-radius: 2px; } .product-name { color: #171717; text-decoration: none; transition: 0.2s; } .product-name:hover { color: var(--rc-color-main-title); } .product-subname { color: #171717; text-decoration: none; transition: 0.1s; } .product-subname h6 { margin-bottom: 10px; } .product-subname:hover { text-decoration: underline; color: var(--rc-color-main-title); } .prices { font-size: 24px; font-weight: 700; color: #171717; } .old-price { margin-right: 5px; text-decoration: line-through; font-weight: 400; } .price { margin-left: 5px; } .product-name > h5 { font-weight: 700; } .fav-btn { padding-left: 10px; padding-right: 10px; border: 1px solid #f2f2f2; border-radius: 4px; color: #a6a6a6; transition: 0.2s; } .fav-btn:hover:hover { border: 1px solid #f2f2f2; } .fav-btn:hover i{ color: var(--rc-danger-hover-solid); } .product-thumb { position: relative; overflow: hidden; transform: 0.2s; display: block; } .product-thumb img { transition: 0.2s; } .product-thumb img:hover{ transform: scale(1.2) rotate(10deg); filter: brightness(110%); } .product-item-list .product-flag{ top: 10px; right: auto; left: 20px; } .product-order .dropdown-toggle::after { display: none; } .product-order .form-check-input[type=checkbox] { width: 20px; height: 20px; } .title-item-name-checkout, .title-item-amont-checkout, .title-item-price-checkout { font-size: 10px; padding-bottom: 10px; } .title-item-price-checkout { text-align: right; } .item-name-checkout { font-size: 12px; } .item-amont-checkout { font-size: 12px; } .item-amont-checkout input { width: 24px; height: 24px; font-size: 12px; } .item-price-checkout { font-size: 12px; text-align: right; } .item-name-checkout, .item-amont-checkout, .item-price-checkout { padding-bottom: 10px; padding-top: 10px; } .items-checkout, .discount-promotion-code, .total-checkout { border-bottom: 1px solid #f2f2f2; } .total-checkout { font-weight: 700; } .total-checkout .item-price-checkout { font-size: 14px; } .input-promotion-code .input-group-text{ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .input-promotion-code.rc-default-form .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 15px; background-color: var(--rc-color-main); border: 1px solid var(--rc-color-main); color: #fff; } .prices .product-flag { position: static; height: 20px; margin-top: 10px; margin-left: 10px; border-radius: 4px; } /* ========================================= */ /* Product Detail */ /* ======================================= */ .product-rating ul li { padding-right: 3px; color: var(--rc-warning-solid); font-size: 14px; } .sku span { font-size: 14px; } .product-type label { font-size: 14px; } .tag-product-title { font-size: 14px; } .tag-product { font-size: 14px; } .number .form-control { width: 50px; border-radius: 0px; text-align: center; } .plus { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .minus { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .fav-wrapper { text-align: right; } .fav-wrapper .fav-btn { padding-left: 0px; padding-right: 0px; text-align: right; background-color: transparent; border: 0px solid transparent; }.fav-wrapper .fav-btn:hover { border: 0px solid transparent; } .tag-product { background-color: #DEF7E8; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 2px; margin-top: 2px; border-radius: 4px; } .tag-product-title { margin-right: 10px; } #thumbImg li { width: 25%; } #thumbImg .nav-link { margin-top: 4px; margin-left: 2px; margin-right: 2px; /* width: 20%; */ padding: 0; border: 0px solid transparent; } /* ========================================= */ /* Invoice */ /* ======================================= */ .invoice-outline-title { font-size: 14px; } .invoice-header small { font-size: 12px; } .invoice-logo { margin-bottom: 10px; margin-top: 10px; width: 120px; } .invoice-header div { font-size: 14px; } /* ========================================= */ /* General */ /* ======================================= */ .widgets-stat .icon-stat-left { font-size: 40px; padding: 6px 20px 10px 20px; background-color: #ffffff4d; color: #3ee057; border-radius: 100px; } .stat-info { text-align: right; } .stat-info h3 { font-size: 34px; font-weight: 700; /* margin-bottom: 0px; */ } .stat-info .stat-title { font-size: 14px; font-weight: 500; } .stat-info .progress { height: 6px; } .stat-info small { font-size: 12px; margin-top: 8px; display: block; } .stat-column .stat-info { margin-bottom: 5px; background-color: #ffffff; border: 1px solid #e5e5e5; text-align: center; padding: 15px; border-radius: 4px; } .bg-secondary-light { background-color: var(--rc-secondary-light) !important; color: var(--rc-secondary-solid) !important; } .bg-success-light { background-color: var(--rc-success-light) !important; color: var(--rc-success-solid) !important; } .bg-warning-light { background-color: var(--rc-warning-light) !important; color: var(--rc-warning-solid) !important; } .bg-info-light { background-color: var(--rc-info-light) !important; color: var(--rc-info-solid) !important; } .bg-danger-light { background-color: var(--rc-danger-light) !important; color: var(--rc-danger-solid) !important; } .bg-light-light { background-color: var(--rc-light-light) !important; color: var(--rc-text-secondary-light) !important; } /* ========================================= */ /* Media Queries */ /* ======================================= */ @media (max-width: 1399.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { .nav-bar-top-search { width: 100%; } .navbar-search { padding-left: 15px !important; padding-right: 15px !important; } .nav-bar-top-search .input-group input { width: 100%; } } @media (max-width: 767.98px) { /* Topbar */ .navbar-top-expand { /* overflow: hidden; */ } .topbar-user-role { display: none; } .nav-bar-top-search .input-group input { width: 100px; padding-right: 40px; font-size: 12px; } .topbar-user-group img { margin-right: 0px; } /* Leftbar */ #rc-body { margin-left: 0px; } #rc-body.navbar-small { margin-left: 270px !important; } .left-navbar { width: calc(var(--nav-width) - 70px); } .left-navbar .nav { padding-left: 10px; padding-right: 10px; } .left-navbar .nav .left-navbar-logo { padding-top: 0px; display: flex; flex-direction: column; justify-content: center; } .left-navbar .left-navbar-username, .left-navbar .left-navbar-role { font-size: 8px; } .left-navbar .left-navbar-list { padding-left: 0px; padding-right: 0px; } .left-navbar .left-user-group { padding-top: 10px; padding-bottom: 10px; transition: 0.5s; } .left-navbar .left-navbar-btn { padding-left: 5px; padding-right: 5px; justify-content: center; } .left-navbar .left-navbar-btn i { margin-right: 0px; } .left-navbar .left-navbar-btn span { opacity: 0; transition: 0; text-indent: -199px; } .header_toggle i::before { transition: 0.5s; transform: rotate(180deg); } .header-toggle-move i::before { transition: 0.5s; transform: rotate(0deg); } .left-navbar .inner-collapse { opacity: 0; position: absolute; } /* Expand */ .left-navbar.show { width: 270px; left: 0; } .left-navbar.show .nav { padding-left: 0px; padding-right: 0px; } .left-navbar.show .nav .left-navbar-logo { padding-top: 0px; display: flex; flex-direction: column; justify-content: center; } .left-navbar.show .left-navbar-username { font-size: 16px; } .left-navbar.show .left-navbar-role { font-size: 12px; } .left-navbar.show .left-navbar-list { padding-left: 20px; padding-right: 20px; } .left-navbar.show .left-user-group { padding-top: 20px; padding-bottom: 20px; } .left-navbar.show .inner-collapse { display: block; opacity: 1; position: static; } .left-navbar.show .inner-collapse.collapse:not(.show) { display: none; } .left-navbar.show .left-navbar-btn { padding-left: 20px; padding-right: 20px; justify-content:left; } .left-navbar.show .left-navbar-btn i { margin-right: 5px; } .left-navbar.show .left-navbar-btn span { opacity: 1; transition: 0; text-indent: 0px; } /* main body */ .main-body { /* overflow: hidden; */ padding: 14px; } /* Example img */ .example-img img { width: 100%; margin-bottom: 10px; } /* Card */ .rc-card-body { padding: 20px; } /* Error Page */ .error-title { font-size: 120px; font-weight: 900; margin-top: -40px; } .error-sub-title { text-transform: uppercase; font-size: 24px; font-weight: 900; margin-top: -20px; } .error-sub-title-2 { font-size: 16px; } } @media (max-width: 575.98px) { /* ========================================= */ /* Breadcrumb */ /* ======================================= */ .breadcrumb-item { /* display: block !important; height: 24px; */ } }