@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,700;1,300&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,700;1,800&family=Roboto:wght@300;400&display=swap"); .eBlue { background-color: #00a3ff !important; } .eBlueish { background-color: #181c32 !important; } .eGreen { background-color: #50cd89 !important; } .eGreenish { background-color: #aae1cb !important; } .eYellow { background-color: #ffc700 !important; } .eYellowish { background-color: #ffe5ba !important; } .eRed { background-color: #f1416c !important; } .p-h-12 { height: 12px !important; border-radius: 5px !important; } .p-h-12 .eProgress-bar { border-radius: 5px !important; } .p-h-16 { height: 16px !important; border-radius: 8px !important; } .p-h-16 .eProgress-bar { border-radius: 8px !important; } .p-h-20 { height: 20px !important; border-radius: 12px !important; } .p-h-20 .eProgress-bar { border-radius: 12px !important; } :root { --dark-color-1: #181c32; --text-color-1: #797c8b; --blue-bg-color-1: #d1eeff; --seperate-color: $eColor_Seperate; } html { height: 100%; width: 100%; scroll-behavior: smooth; } body { height: 100%; width: 100%; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 25px; color: #6c6c6c; background-color: #f6f6f9; scroll-behavior: smooth; } hr { background-color: #dedede; } h1, h2, h3, h4, h5, h6, a, li, button, label, div, span { font-family: "Poppins", sans-serif; margin: 0; padding: 0; } h1 { font-size: 90px; line-height: 1; } h2 { font-size: 42px; line-height: 52px; } h3 { font-size: 27px; line-height: 37px; } h4 { font-size: 24px; line-height: 34px; } h5 { font-size: 22px; line-height: 32px; } h6 { font-size: 18px; line-height: 20px; } p { font-size: 16px; line-height: 25px; color: #6c6c6c; } /*==================== Common styles =========================*/ ul, ol, p { margin: 0px; padding: 0px; } ul, ol { list-style: none; } tr { vertical-align: middle; } a { text-decoration: none; color: #9e9e9e; } a:hover { transition: all 0.4s ease; } /*When a tag stay inside header tag, then header's color set to the a tag*/ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } /*==================== Common styles END =========================*/ /*Bootstrap color overwrite*/ .btn:focus, .btn:active { box-shadow: 0 0 0 0rem rgba(49, 132, 253, 0) !important; } .bg-success { background-color: #50cd89 !important; } .bg-danger { background-color: #f1416c !important; } .bg-primary { background-color: #00a3ff !important; } .bg-warning { background-color: #ffc700 !important; } .bg-secondary { background-color: #797c8b !important; } .bg-light { background-color: #dedede !important; } .color-success { color: #50cd89 !important; } .color-danger { color: #f1416c !important; } .color-primary { color: #00a3ff !important; } .color-warning { color: #ffc700 !important; } .color-secondary { color: #797c8b !important; } .color-light { color: #dedede !important; } .btn-success { background-color: #50cd89 !important; border-color: #50cd89 !important; } .btn-danger { background-color: #f1416c !important; border-color: #f1416c !important; } .btn-primary { background-color: #00a3ff !important; border-color: #00a3ff !important; } .btn-warning { background-color: #ffc700 !important; border-color: #ffc700 !important; } .btn-secondary { background-color: #797c8b !important; border-color: #797c8b !important; } .btn-light { background-color: #dedede !important; border-color: #dedede !important; } /*Light btn*/ .btn-light-success { background-color: #dbffec !important; border-color: #dbffec !important; color: #50cd89 !important; } .btn-light-danger { background-color: #fee4eb !important; border-color: #fee4eb !important; color: #f1416c !important; } .btn-light-primary { background-color: #d1eeff !important; border-color: #d1eeff !important; color: #00a3ff !important; } .btn-light-warning { background-color: #fef5d4 !important; border-color: #fef5d4 !important; color: #ffc700 !important; } .btn-light-success:hover { background-color: #50cd89 !important; border-color: #50cd89 !important; color: #fff !important; } .btn-light-danger:hover { background-color: #f1416c !important; border-color: #f1416c !important; color: #fff !important; } .btn-light-primary:hover { background-color: #00a3ff !important; border-color: #00a3ff !important; color: #fff !important; } .btn-light-warning:hover { background-color: #ffc700 !important; border-color: #ffc700 !important; color: #fff !important; } .btn-outline-success { color: #50cd89 !important; border-color: #50cd89 !important; } .btn-outline-danger { color: #f1416c !important; border-color: #f1416c !important; } .btn-outline-primary { color: #00a3ff !important; border-color: #00a3ff !important; } .btn-outline-warning { color: #ffc700 !important; border-color: #ffc700 !important; } .btn-outline-secondary { color: #797c8b !important; border-color: #797c8b !important; } .btn-outline-light { color: #dedede !important; border-color: #dedede !important; } .btn-outline-success:hover, .btn-outline-success:focus { color: #fff !important; background-color: #50cd89 !important; border-color: #50cd89 !important; } .btn-outline-danger:hover, .btn-outline-danger:focus { color: #fff !important; background-color: #f1416c !important; border-color: #f1416c !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { color: #fff !important; background-color: #00a3ff !important; border-color: #00a3ff !important; } .btn-outline-warning:hover, .btn-outline-warning:focus { color: #fff !important; background-color: #ffc700 !important; border-color: #ffc700 !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #fff !important; background-color: #797c8b !important; border-color: #797c8b !important; } .btn-outline-light:hover, .btn-outline-light:focus { color: #fff !important; background-color: #dedede !important; border-color: #dedede !important; } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0); } .page-item.active .page-link { background-color: #00a3ff; border-color: #00a3ff; } /*Bootstrap color overwrite end*/ /* Specing Start */ .max-w-100px { max-width: 100px !important; } .min-w-100px { min-width: 100px !important; } .min-w-150px { min-width: 150px !important; } .min-w-200px { min-width: 200px !important; } .min-w-250px { min-width: 250px !important; } .min-w-245px { min-width: 245px !important; } .min-w-330px { min-width: 330px !important; } .pb-21 { padding-bottom: 21px; } .pb-30 { padding-bottom: 30px; } .pt-57 { padding-top: 57px; } @media screen and (max-width: 576px) { .pt-57 { padding-top: 30px; } } .mb-16 { margin-bottom: 16px; } /* Specing End */ .wrapper { height: 100%; width: 100%; display: flex; overflow-x: hidden; } .navigation-section { background-color: #fff; width: 100%; max-width: 266px; transition: all 0.5s; } /* Dark Navbar */ .navigation-section-dark { background-color: #181c32; } .navigation-section>.navigation-section-backdrop { display: none; } .navigation-section::-webkit-scrollbar { width: 0px; } @media only screen and (max-width: 1099px) { .navigation-section { position: fixed; margin-left: -266px; top: 0; bottom: 0; z-index: 1000; overflow-y: auto; overflow-x: hidden; } .navigation-section>.navigation-section-backdrop { background-color: rgba(2, 2, 2, 0.3490196078); z-index: 10; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } /* Dark Navabr */ .navigation-section-dark .side-navigation-bar { background-color: #181c32; } .side-navigation-bar { background-color: #fff; height: 100%; } @media only screen and (max-width: 991px) { .side-navigation-bar { position: absolute; z-index: 99; } } .side-navigation-bar .nav-header { display: flex; padding-left: 52px; height: 54px; margin-bottom: 17px; margin-top: 60px; width: 100%; float: left; } .side-navigation-bar .nav-header .logo img { height: 54px; width: 54px; } /* Dark Navabr */ .navigation-section-dark .side-navigation-bar .nav-header .header h3 { color: #fff; } .side-navigation-bar .nav-header .header h3 { font-size: 29px; margin-top: 8px; padding-left: 8px; color: #000; } .form-logo { margin-bottom: 100px; } .form-btn { display: flex; align-items: center; gap: 20px; } .login-btn { width: 145px; height: 60px; background-color: #00a3ff; color: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; } .signup-btn { width: 145px; height: 60px; background-color: #fff; color: #181c32; border: 1px solid #dedede; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; } .login-btn:hover { color: #fff; } .signup-btn:hover { color: #181c32; } /* Dark Navbar */ .navigation-section-dark .side-navigation-bar>.parent-side-bar { background-color: #181c32; } .side-navigation-bar>.parent-side-bar { list-style: none; background-color: #fff; width: 100%; float: left; padding-bottom: 100px; } .side-navigation-bar>.parent-side-bar>li>a { padding-left: 35px; font-size: 13px; margin-top: 28px; display: flex; line-height: 20px; color: #797c8b; border-left: 4px solid rgba(0, 163, 255, 0); font-weight: 500; stroke: #797c8b; } .side-navigation-bar>.parent-side-bar>li>a>.badge { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-top: auto; margin-bottom: auto; line-height: 13px; } /* Dark Navabr */ .navigation-section-dark .side-navigation-bar>.parent-side-bar>li>a.active, .navigation-section-dark .side-navigation-bar>.parent-side-bar>li>a:hover { color: #fff; } .side-navigation-bar>.parent-side-bar>li>a.active, .side-navigation-bar>.parent-side-bar>li>a:hover { color: #00a3ff; border-left: 4px solid #00a3ff; font-weight: 500; } /*SVG icon's hover effect*/ .side-navigation-bar>.parent-side-bar>li>a .svg-icon1 { padding-right: 8px; display: inline-block; line-height: 23px; stroke: #797c8b; fill: #fff; } .side-navigation-bar>.parent-side-bar>li>a.active .svg-icon1, .side-navigation-bar>.parent-side-bar>li>a:hover .svg-icon1 { fill: #fff; stroke: #00a3ff; transition: all 0.4s ease; } .side-navigation-bar>.parent-side-bar>li>a .svg-icon2 { padding-right: 8px; display: inline-block; line-height: 23px; fill: #797c8b; stroke: rgba(0, 0, 0, 0); } .side-navigation-bar>.parent-side-bar>li>a.active .svg-icon2, .side-navigation-bar>.parent-side-bar>li>a:hover .svg-icon2 { fill: #00a3ff; stroke: rgba(0, 0, 0, 0); transition: all 0.4s ease; } .side-navigation-bar>.parent-side-bar>li>a .svg-icon3 { padding-right: 8px; display: inline-block; line-height: 23px; } .side-navigation-bar>.parent-side-bar>li>a .svg-icon3 path { fill: #fff; stroke: #797c8b; } .side-navigation-bar>.parent-side-bar>li>a.active .svg-icon3 path, .side-navigation-bar>.parent-side-bar>li>a:hover .svg-icon3 path { fill: #fff; stroke: #00a3ff; transition: all 0.4s ease; } .side-navigation-bar>.parent-side-bar>li>a .svg-icon3 g { fill: #fff; stroke: #797c8b; } .side-navigation-bar>.parent-side-bar>li>a.active .svg-icon3 g, .side-navigation-bar>.parent-side-bar>li>a:hover .svg-icon3 g { fill: #fff; stroke: #00a3ff; transition: all 0.4s ease; } .side-navigation-bar>.parent-side-bar>li>a .svg-icon3 circle { fill: #fff; stroke: #797c8b; } .side-navigation-bar>.parent-side-bar>li>a.active .svg-icon3 circle, .side-navigation-bar>.parent-side-bar>li>a:hover .svg-icon3 circle { fill: #fff; stroke: #00a3ff; transition: all 0.4s ease; } .showNav { max-width: 60px; transform: translateX(0px); transition: all 0.5s; overflow: hidden; } .showNav .side-navigation-bar .nav-header { transform: translateX(-50px); transition: all 0.5s; } .showNav .side-navigation-bar .nav-header .header { opacity: 0; visibility: hidden; } .showNav .parent-side-bar li a { padding-left: 20px; transition: all 0.5s; } .showNav .parent-side-bar li a span { opacity: 0; visibility: hidden; } .showNav .parent-side-bar li a::after { opacity: 0; visibility: hidden; } @media only screen and (max-width: 1099px) { .navigation-section { margin-left: 0; left: -266px; } .showNav { max-width: 100%; left: 0; margin-left: 0; } } /*SVG icon's hover effect end*/ /**************** Parent droupdown *****************/ .parent-droupdown>a.parent-droupdown-menu { position: relative; } .parent-droupdown>a.parent-droupdown-menu span { display: inline-block; padding-right: 25px; } .parent-droupdown>a:after { content: "\f285"; font-family: bootstrap-icons; margin-left: auto; transition: all 0.4s ease; position: absolute; right: 30px; font-weight: 600; } .parent-droupdown>a.active:after { transform: rotate(90deg); transition: all 0.4s ease; } .child-side-bar { display: none; } .child-side-bar>li>a { padding-left: 63px; margin-top: 28px; font-size: 15px; display: flex; line-height: 25px; color: #797c8b; } .child-side-bar>li>a>.badge { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-top: auto; margin-bottom: auto; line-height: 13px; } .child-side-bar>li>a.active, .child-side-bar>li>a:hover { color: #00a3ff; } .parent-droupdown.active>ul.child-side-bar { display: block; } /**Child dwoupdown or 2nd**/ .parent-droupdown-2nd>a.parent-droupdown-menu-2nd { position: relative; } .parent-droupdown-2nd>a.parent-droupdown-menu-2nd span { display: inline-block; padding-right: 25px; } .parent-droupdown-2nd>a:after { content: "\f285"; font-family: bootstrap-icons; margin-left: auto; transition: all 0.4s ease; position: absolute; right: 50px; } .parent-droupdown-2nd>a.active:after { transform: rotate(90deg); transition: all 0.4s ease; } .child-side-bar-2nd { display: none; } .child-side-bar-2nd>li>a { padding-left: 76px; padding-right: 50px; margin-top: 28px; font-size: 14px; display: flex; line-height: 25px; color: #797c8b; } .child-side-bar-2nd>li>a>.badge { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-top: auto; margin-bottom: auto; line-height: 13px; } .child-side-bar-2nd>li>a.active, .child-side-bar-2nd>li>a:hover { color: #00a3ff; } .parent-droupdown-2nd.active>ul.child-side-bar-2nd { display: block; } .ek-menu-button { background-color: #181c32; text-align: center; padding-bottom: 20px; } .visit-btn { display: flex; justify-content: center; margin-top: 85px; } .visit-btn a { display: flex; justify-content: center; align-items: center; width: 163px; height: 50px; background-color: #00a3ff; color: #fff; border-radius: 5px; } /******************************* Body Section ********************************/ .body-section { max-width: calc(100% - 266px); } .body-section-dark .page-header { background-color: #fff; height: 70px; padding: 0px 50px 0px 0px; } .page-header { background: rgba(255, 255, 255, 0); box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.062745098); display: flex; border-radius: 2px; padding-top: 16px; height: 120px; margin-bottom: 50px; } @media only screen and (min-width: 1367px) { .body-section { width: 100%; padding: 50px 50px 20px 50px; } .body-section-dark { padding: 0; } } @media only screen and (min-width: 1100px) and (max-width: 1366px) { .body-section { width: 100%; } } @media only screen and (max-width: 1099px) { .page-header { position: fixed; z-index: 999; margin-bottom: 0px; right: 0; left: 0; top: 0; padding: 10px 20px; background: #fff; height: 80px; border-color: rgba(0, 0, 0, 0); box-shadow: 0px 18px 30px rgba(0, 0, 0, 0.0352941176); } .body-section-dark .page-header { height: 80px; padding: 10px 20px; } .body-section { width: 100%; padding: 100px 20px 20px 20px; } } .page-header .navbar-toggle { display: block; line-height: 46px; font-size: 24px; width: 46px; height: 46px; text-align: center; margin: 7px 15px 7px -6px; } .page-header .navbar-toggle:hover, .page-header .navbar-toggle.active { background-color: rgba(43, 120, 219, 0.0901960784); border-radius: 6px; } .page-header .header-search { width: 324px; } .page-header .header-search .input-group .input-group-text { border-right: none; background-color: #fff; } .page-header .header-search .input-group input { height: 55px; font-size: 14px; border-left: none; } .page-header .header-search .input-group .form-control:focus { box-shadow: none; border-color: #dedede; } .page-header .header-title { width: auto; color: #000; line-height: 20px; } @media only screen and (max-width: 1099px) { .page-header .header-title { display: none; } } .page-header .header-title h5 { color: #181c32; font-size: 34px; padding: 7px 0px; } .page-header .header-title span, .page-header .header-title p { font-size: 14px; color: #797c8b; } /*Primary form*/ .primary-form { max-width: 550px; margin-left: 120px; margin-right: 50px; } @media only screen and (max-width: 991px) { .primary-form { margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 600px) { .primary-form { margin-left: 20px; margin-right: 20px; } .primary-form .w-sm-100 { width: 100%; margin-left: 0px !important; margin-bottom: 20px; } } .primary-form .subtitle p { font-size: 22px; font-weight: 600; color: #181c32; line-height: 34px; padding: 20px 0px 40px 0px; } .signin-diff { display: flex; align-items: center; gap: 20px; } .signin-diff-btn { width: 255px; height: 60px; background-color: #fff; border: 1px solid #dedede; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; color: #181c32; } .signin-diff-btn i { font-size: 26px; margin-right: 10px; } .signin-diff-btn1 i { color: #648fe4; } .signin-diff-btn2 i { width: 26px; height: 26px; border-radius: 50%; background-color: #e34133; color: #fff; font-size: 10px; padding-right: 0; display: flex; justify-content: center; align-items: center; } .signup-seperate { display: block; width: 100%; text-align: center; position: relative; font-size: 14px; line-height: 16px; font-weight: 500; color: #181c32; margin: 14px 0 20px; } .signup-seperate::after, .signup-seperate::before { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 47%; height: 1px; background-color: #dedede; } .signup-seperate::before { left: 0; } .login-form form input:not([type=checkbox]) { border: 1px solid #dddddd; border-left: 0; height: 60px; font-size: 13px; border-radius: 5px; color: #797c8b; margin-bottom: 14px; } .login-form form input:focus { box-shadow: 0px 0px 0px 0px #000; border-color: #dedede; } .login-form form .input-group input[type=password] { border-right: 0; } .login-form form .input-group span:last-child { border-left: 0; border-right: 1px solid #dddddd; } .login-form form .input-group-text { background-color: #fff; padding: 0px 8px 0px 18px; color: #797c8b; border: 1px solid #dddddd; height: 60px; border-right: 0; } .login-form form label { font-size: 16px; font-weight: 500; line-height: 25px; color: #181c32; margin-bottom: 8px; } .login-form form a { font-size: 14px; color: #797c8b; font-weight: 500; } .login-form form button { height: 60px; font-size: 16px; font-weight: 600; color: #fff; margin-top: 15px; } /*Primary form end*/ /*Vertically allignment of a div*/ .parent-elem { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .middle-elem { display: table-cell; vertical-align: middle; } /*Vertically allignment of a div end*/ /*Table start*/ /*Table End*/ .ekator-offcanvas { width: 630px; } .ekator-offcanvas .offcanvas-header { border-bottom: 1px solid #dedede; } .ekator-offcanvas .offcanvas-body { padding: 10px 50px 0px; } .ekator-offcanvas .offcanvas-header { padding: 11px 50px 7px; } .ekator-offcanvas .offcanvas-footer { padding: 10px 65px 10px 50px; } .ekator-offcanvas .offcanvas-header h5 { font-weight: 600; font-size: 18px; color: #181c32; } .eoff-form .form-group { padding-bottom: 12px; } .eoff-form .form-group label { font-size: 14px; font-weight: 500; color: #797c8b; line-height: 21px; margin-bottom: 10px; } .eoff-form .form-group input, .eoff-form .form-group select { height: 60px; border: 1px solid #dedede; border-radius: 5px; padding-left: 22px; } .eoff-form .form-group input:-moz-placeholder-shown, .eoff-form .form-group textarea:-moz-placeholder-shown { font-size: 12px; color: #797c8b; } .eoff-form .form-group input:-ms-input-placeholder, .eoff-form .form-group textarea:-ms-input-placeholder { font-size: 12px; color: #797c8b; } .eoff-form .form-group input:placeholder-shown, .eoff-form .form-group textarea:placeholder-shown, .eoff-form .form-group select { font-size: 12px; color: #797c8b; } .eoff-form .form-group textarea { height: 222px; border: 1px solid #dedede; border-radius: 5px; padding: 22px; } .eoff-form .form-group .textarea2 { height: 158px; } .eoff-form .form-group .input-group .input-group-text { justify-content: center; width: 60px; height: 60px; border: 1px solid #dedede; border-right: 0; border-radius: 5px; background-color: #e3e4ea; } .eoff-form .form-group .input-group .input-group-text i { color: #797c8b; } .eoff-form .form-group .input-group .input-group-text svg { width: 16px; fill: #797c8b; } .eoff-form .form-group .input-group .input-group-text#fb_link svg { width: 12px; } .eoff-form .form-group .input-group>label.input-group-text { background: none; } .eoff-form .form-group .input-group>label.input-group-text i { font-size: 24px; } .eoff-form .form-group .input-group>select#imageUp_group { border-left: 0; padding-left: 0; } .eoff-form .form-group .input-group input { border-left: 0; } .updateAdmin-btn { width: 100%; height: 60px; background-color: #00a3ff; color: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; margin-top: 18px; } .updateAdmin-btn:hover { color: #fff; } /* Update Admin Button */ .dCreate_admin { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px; padding: 50px 43px; background-color: #fff; border-radius: 5px; display: flex; flex-direction: column; padding: 50px 43px; background-color: #fff; border-radius: 5px; max-width: 340px; } .dCreate_admin .dCreate_admin_img { width: 253px; } .dCreate_admin .dCreate_admin_btn a { width: 151px; height: 55px; display: flex; justify-content: center; align-items: center; border-radius: 5px; font-size: 14px; font-weight: 500; } .dCreate_admin .dCreate_admin_btn a:focus { box-shadow: none; } /* Table Design */ .dCard_table th { font-size: 16px; font-weight: 500; color: var(--dark-color-1); } .dCard_table th:last-child, .dCard_table td:last-child { text-align: right; } .dCard_table tbody { border-top: 1px solid var(--seperate-color) !important; } .dCard_table tbody tr { border-bottom: 1px dashed var(--seperate-color) !important; } .dCard_table tr:last-child { border-bottom: 0 !important; } .dAdmin_profile { gap: 10px; } .dAdmin_profile .dAdmin_profile_img { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } .dAdmin_profile .dAdmin_profile_name h4 { font-size: 15px; line-height: 23px; font-weight: 600; color: #181c32; margin: 0; } .dAdmin_profile .dAdmin_profile_name p { font-size: 13px; line-height: 21px; color: #797c8b; margin: 0; } .dAdmin_info { gap: 10px; } .dAdmin_info .dAdmin_info_img { width: 50px; height: 50px; background-color: var(--blue-bg-color-1); color: #fff; border-radius: 3px; display: flex; justify-content: center; align-items: center; } .dAdmin_info .dAdmin_info_img i { font-size: 18px; color: #00a3ff; } .dAdmin_info_name p { margin: 0; font-size: 13px; line-height: 23px; font-weight: 500; color: #797c8b; } .dAdmin_info_name p span { font-weight: 600; color: #181c32; } .dAdmin_btn { flex-direction: column; gap: 6px; align-items: flex-end; } .dAdmin_btn a { width: 30px; height: 30px; border-radius: 3px; display: flex; justify-content: center; align-items: center; } .dAdmin_btn a i { font-size: 11px; } @-webkit-keyframes menu-sub-dropdown-animation-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes menu-sub-dropdown-animation-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes menu-sub-dropdown-animation-move-up { from { margin-top: 0.75rem; } to { margin-top: 0; } } @keyframes menu-sub-dropdown-animation-move-up { from { margin-top: 0.75rem; } to { margin-top: 0; } } @-webkit-keyframes menu-sub-dropdown-animation-move-down { from { margin-bottom: 0.75rem; } to { margin-bottom: 0; } } @keyframes menu-sub-dropdown-animation-move-down { from { margin-bottom: 0.75rem; } to { margin-bottom: 0; } } /* Assigned Permissions Offcanvas */ .assignPermi_area h3.title { font-size: 16px; font-weight: 600; line-height: 25px; color: #181c32; margin-bottom: 28px; } .assignPermi_items { display: flex; flex-direction: column; gap: 40px; } .assignPermi_item { background-color: #fcfcfc; border: 1px solid #dedede; border-radius: 5px; padding: 20px 50px; } .assignPermi_item .table tbody tr:last-child { border-top: 1px dashed #dedede !important; border-bottom: 0px solid transparent; } .assignPermi_item .table thead, .assignPermi_item .table tbody { border-width: 0; } .assignPermi_item .table th, .assignPermi_item .table td { padding: 0 !important; padding-bottom: 20px !important; } .assignPermi_item .table td { padding-top: 20px !important; } .assignPermi_item .table tr:last-child td { padding-bottom: 0px !important; } .assignPermi_item .table th:last-child, .assignPermi_item .table td:last-child { width: 72px; } .assignPermi_tText p { font-size: 14px; font-weight: 500; line-height: 21px; color: #797c8b; } .assignPermi_On { position: relative; padding-left: 16px; } .assignPermi_On::before { content: ""; position: absolute; top: 47%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #50cd89; } .assignPermi_Off { position: relative; padding-left: 16px; } .assignPermi_Off::before { content: ""; position: absolute; top: 47%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #f1416c; } .assignPermi_switch .form-switch .form-check-input { width: 32px; height: 20px; background-color: #f1416c; border-color: #f1416c; box-shadow: none; } .assignPermi_switch .form-check-input:checked { background-color: #50cd89; border-color: #50cd89; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 223px; background: #181c32; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.0117647059); z-index: 100; transition: all 0.5s ease; } .sidebar.close { width: 78px; } .sidebar .logo-details { height: 70px; width: 100%; display: flex; justify-content: center; align-items: center; } .sidebar .logo-details .img_wrapper { min-width: 78px; text-align: center; } .sidebar .logo-details .logo_name { font-size: 22px; color: #fff; font-weight: 600; transition: 0.3s ease; transition-delay: 0.1s; margin-left: -9px; } .sidebar.close .logo-details .img_wrapper { transition-delay: 1s; } .sidebar.close .logo-details .logo_name { display: none; transition-delay: 0s; opacity: 0; pointer-events: none; } .sidebar .nav-links { height: 100%; padding: 0 0 150px 0; overflow: auto; } .sidebar.close .nav-links { overflow: visible; } .sidebar .nav-links::-webkit-scrollbar { display: none; } .sidebar .nav-links>li { position: relative; list-style: none; transition: all 0.4s ease; cursor: pointer; } .sidebar .nav-links>li:hover .arrow, .sidebar .nav-links>li:hover .link_name { color: #fff; } .sidebar .nav-links>li .sMenu-title .sidebar_icon { opacity: 0; line-height: 44px; } .sidebar .nav-links>li .sMenu-title .sidebar_icon svg { fill: #00a3ff; } .sidebar .nav-links>li .sMenu-title .link_name { font-size: 14px; color: #fff; } .sidebar .nav-links>li .iocn-link { display: flex; align-items: center; justify-content: space-between; height: 44px; position: relative; } .sidebar .nav-links>li .iocn-link::before { content: ""; position: absolute; top: 50%; left: -3px; transform: translateY(-50%); width: 3px; height: 23px; border-radius: 0 2px 2px 0; background-color: #00a3ff; transition: all 0.3s; } .sidebar .nav-links>li .iocn-link:hover::before { left: 0; } .sidebar .nav-links>li .iocn-link:hover a i, .sidebar .nav-links>li .iocn-link:hover a svg { color: #fff; fill: #fff; } .sidebar .nav-links>li.showMenu .iocn-link { position: relative; } .sidebar .nav-links>li.showMenu .iocn-link::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 3px; height: 23px; border-radius: 0 2px 2px 0; background-color: #00a3ff; transition: all 0.3s; } .sidebar .nav-links>li .icon-link, .sidebar .nav-links>li .sidebar_icon { /* height: 44px; */ min-width: 57px; text-align: center; color: #fff; font-size: 15px; cursor: pointer; transition: all 0.4s; padding: 0 11px 0 26px; } .sidebar .nav-links>li .icon-link svg, .sidebar .nav-links>li .sidebar_icon svg { width: 20px; fill: #797c8b; } .sidebar .nav-links>li .arrow { min-width: 50px; height: 50px; color: #797c8b; display: flex; justify-content: center; align-items: center; transition: all 0.3s; padding-right: 15px; } .sidebar .nav-links>li.showMenu .iocn-link a .sidebar_icon svg { color: #00a3ff; fill: #00a3ff; } .sidebar .nav-links>li.showMenu .iocn-link a .link_name { color: #fff; } .sidebar .nav-links>li.showMenu .iocn-link .arrow { transform: rotate(90deg); padding-right: 0; transform-origin: 45% 45%; } .sidebar.close .nav-links .arrow { display: none; } .sidebar .nav-links>li a { display: flex; align-items: center; text-decoration: none; height: 44px; } .sidebar .nav-links>li a .link_name { font-size: 13px; font-weight: 500; color: #797c8b; transition: all 0.4s ease; padding-top: 5px; } .sidebar.close .nav-links li a .link_name { opacity: 0; pointer-events: none; } .sidebar .nav-links>li .sub-menu { padding: 20px 6px 14px 57px; margin-top: -10px; background: #1d1b31; display: none; } .sidebar .nav-links>li .sub-menu li a { height: auto; padding: 5px 0px 8px; } .sidebar .nav-links>li.showMenu .sub-menu { display: block; transition: all 0.4s; } .sidebar .nav-links>li .sub-menu a { color: #fff; font-size: 13px; padding: 5px 0; white-space: nowrap; opacity: 0.6; transition: all 0.3s ease; } .sidebar .nav-links>li .sub-menu a:hover { opacity: 1; color: #fff; } .sidebar.close .nav-links li .sMenu-title .sidebar_icon { opacity: 1; } .sidebar.close .nav-links li .sub-menu { position: absolute; left: 100%; margin-top: 0; padding: 10px 20px; border-radius: 0 6px 6px 0; opacity: 0; display: block; pointer-events: none; transition: 0s; } .sidebar.close .nav-links li:hover .sub-menu { top: 0; opacity: 1; pointer-events: auto; transition: all 0.4s ease; } .sidebar .nav-links>li .sub-menu .link_name { display: none; } .sidebar.close .nav-links li .sub-menu .link_name { font-size: 13px; opacity: 1; display: block; } .sidebar .nav-links>li .sub-menu.blank { opacity: 1; pointer-events: auto; padding: 3px 20px 6px 16px; opacity: 0; pointer-events: none; } .sidebar .nav-links>li:hover .sub-menu.blank { top: 50%; transform: translateY(-50%); } .home-section { position: relative; background: #e4e9f7; left: 223px; width: calc(100% - 223px); transition: all 0.5s ease; } .sidebar.close~.home-section { left: 78px; width: calc(100% - 78px); } .home-content { background-color: #f6f6f9; } .home-section .home-content .sidebar_menu_icon { cursor: pointer; } .menuList { text-align: center; transition: all 0.3s; } @media screen and (max-width: 991px) { .sidebar { width: 240px; left: -240px; } .sidebar .nav-links { padding-top: 50px; } .sidebar.close { width: 260px; left: 0; overflow: auto; } .sidebar.close::-webkit-scrollbar { display: none; } .sidebar.close .logo-details .logo_name { display: block; opacity: 1; } .sidebar.close .nav-links li a .link_name { opacity: 1; pointer-events: visible; } .sidebar.close .nav-links li .sub-menu { position: relative; left: 0; display: none; } .sidebar.close .nav-links li.showMenu .sub-menu { display: block; padding: 6px 6px 14px 80px; opacity: 1; } .sidebar.close .nav-links li.showMenu .sub-menu .link_name { display: none; } .sidebar.close .nav-links .arrow { display: flex; } .home-section { left: 0; width: 100%; } .sidebar.close~.home-section { left: 0px; width: 100%; } } .closeIcon { display: none; } @media screen and (max-width: 991px) { .closeIcon { display: block; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: auto; height: auto; background: #fff; border-radius: 10px; text-align: center; line-height: 30px; cursor: pointer; color: #0d6efd; } .closeIcon svg { fill: #fff; width: 20px; } } .sidebar.close .closeIcon { right: -15px; } .home-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; height: 70px; background-color: #fff; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.062745098); padding-left: 20px; } .header-menu { width: auto; height: 100%; height: 60px; } .header-menu>ul { display: inline-flex; list-style: none; height: inherit; } .header-menu>ul>li { margin-left: 0px; padding: 7px 0px; } .header-menu>ul>li>a.list { padding: 0px; display: block; font-size: 21px; width: 40px; height: 60px; line-height: 60px; text-align: center; margin: 0px 2px; color: #797c8b; position: relative; } .header-menu>ul>li>a:hover { background-color: rgba(43, 120, 219, 0); border-radius: 6px; } .header-menu>ul>li>a>span.danger { display: inline-block; width: 8px; height: 8px; background-color: #f1416c; border-radius: 100%; position: absolute; margin-top: 8px; margin-left: 15px; } .header-menu>ul>li>a>span.success { display: inline-block; width: 8px; height: 8px; background-color: #50cd89; border-radius: 100%; position: absolute; margin-top: 8px; margin-left: 15px; } .header-menu>ul>li>a>span.danger-counter { font-size: 8px; display: inline-block; width: 18px; height: 18px; background-color: #f1416c; border-radius: 100%; position: absolute; margin-left: 9px; color: #ffffff; font-weight: 700; padding: 0px; text-align: center; line-height: 20px; margin-top: 8px; } .header-menu>ul>li>a>span.success-counter { font-size: 8px; display: inline-block; width: 18px; height: 18px; background-color: #50cd89; border-radius: 100%; position: absolute; margin-left: 9px; color: #ffffff; font-weight: 700; padding: 0px; text-align: center; line-height: 20px; margin-top: 6px; } ul>li.user-profile { padding-top: 10px; } ul>li.user-profile>.btn-group>button { display: flex; padding: 0px; height: 42px; margin: 0px 0px 0px 6px; border: 0px solid rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0) !important; } ul>li.user-profile>.btn-group .dropdown-toggle::after { display: none !important; } ul>li.user-profile>.btn-group>button img { border-radius: 5px; } ul>li.user-profile.user-profile-inner .btn { padding: 4px 30px 22px; } ul>li.user-profile .user-name { margin: 0px; padding: 0px; font-size: 14px; font-weight: 500; color: #000000; display: block; margin-top: 1px; } ul>li.user-profile .user-title { margin: 0px; padding: 0px; font-size: 13px; font-weight: 400; color: #797c8b; display: block; } ul>li.user-profile>.btn-group .dropdown-menu { width: 280px; margin-top: 10px !important; padding-bottom: 25px; border: none; box-shadow: 0px 18px 30px 0px rgba(0, 0, 0, 0.0352941176); transition: all 0.5s; transform: translateY(55px); -webkit-animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn) { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #181c32; padding: 7px 30px; position: relative; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn) span { line-height: 1; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn)::before { content: ""; position: absolute; top: 0; left: 12px; width: 256px; height: 38px; border-radius: 5px; background-color: #edf2f6; z-index: -1; opacity: 0; transition: all 0.3s; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover { background-color: transparent; color: #00a3ff; border-radius: 5px; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover span svg { color: #00a3ff; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover span svg path, ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover span svg circle, ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover span svg g g { stroke: #00a3ff; fill: #00a3ff; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):hover::before { opacity: 1; } ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):active, ul>li.user-profile>.btn-group .dropdown-menu li:not(.user-profile)>a:not(.btn):focus { background-color: #edf2ed; color: #00a3ff; } .header_notification { gap: 7px; } .header_notification .notification_icon { width: 28px; height: 28px; border-radius: 50%; background-color: #d1eeff; display: flex; justify-content: center; align-items: center; } .header_notification .notification_icon i { color: #00a3ff; font-size: 15px; font-weight: 700; } .header_notification p { font-size: 13px; font-weight: 400; color: #6e6f78; } .header_notification p span { color: #00a3ff; } .eDropdown-menu li:first-child { border-bottom: 1px solid #dedede; margin-bottom: 12px; } .eDropdown-menu li:last-child { padding-top: 25px; border-top: 1px solid #dedede; padding-left: 30px; margin-top: 11px; } .eLogut_btn { background-color: #00a3ff; display: flex; justify-content: center; align-items: center; gap: 7px; width: 126px; height: 45px; border-radius: 5px; font-size: 13px; font-weight: 500; color: #fff; } .eLogut_btn:hover { color: #fff; } .main_content { padding: 20px 20px 20px; } body { background-color: #f5f8fa; } .main-section { margin: 0 20px; } .mainSection-title { padding-bottom: 14px; } .mainSection-title h4 { font-size: 16px; font-weight: 600; line-height: 26px; color: #181c32; } .eSection-wrap { padding: 20px; padding-bottom: 0; margin-bottom: 20px; background-color: #fff; box-shadow: 0 6px 20px rgba(121, 124, 139, 0.0156862745); border-radius: 10px; } .eSection-wrap .title { border-bottom: 1px solid #cacfd4; margin-bottom: 20px; padding-bottom: 18px; } .eSection-wrap .title h3 { font-size: 15px; line-height: 23px; color: #181c32; } .eSection-wrap .title p { font-size: 12px; line-height: 22px; max-width: 710px; color: #797c8b; } .eSection-wrap-2 { padding: 30px 20px; background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.0039215686); border-radius: 5px; } .eMain { padding-bottom: 20px; } .column-title { margin-bottom: 20px; font-size: 13px; line-height: 22px; font-weight: 500; color: #181c32; padding-left: 12px; position: relative; } .column-title::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: #e3e4ea; } .copyright-text { padding-top: 30px; padding-bottom: 13px; } .copyright-text p { font-size: 16px; color: #797c8b; } .copyright-text p span { color: #00a3ff; } .gr-15 { row-gap: 15px; } .pr-10 { padding-right: 10px; } .pCard { position: relative; width: 200px; height: 250px; text-align: center; } .progress-1 { position: relative; width: 150px; height: 150px; } .progress-1 .percent { position: relative; width: 150px; height: 150px; } .progress-1 .percent svg { position: relative; width: 150px; height: 150px; } .progress-1 .percent svg circle { width: 150px; height: 150px; fill: none; stroke-width: 10; stroke: #f2f2f2; transform: translate(5px, 5px); stroke-dasharray: 440; stroke-dashoffset: 440; stroke-linecap: round; } .progress-1 .percent svg circle:nth-child(1) { stroke-dashoffset: 0; stroke: #f2f2f2; } .progress-1 .percent svg circle:nth-child(2) { stroke-dashoffset: 44; stroke: #dedede; } .progress-1 .percent .number { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #999; } .progress-1 .percent .number h2 { font-size: 48px; } .progress-1 .percent .number h2 span { font-size: 24px; } .text { padding-top: 10px; color: #999; font-weight: 700; letter-spacing: 1px; } .skill { width: 160px; height: 160px; position: relative; } .skill .outer { height: 160px; width: 160px; border-radius: 50%; padding: 20px; box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7); } .skill .outer .inner { height: 120px; width: 120px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset 4px 4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgb(255, 255, 255), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05); } .skill .outer .inner #number { font-weight: 600; color: #555; } .skill circle { fill: none; stroke: url(#GradientColor); stroke-width: 20; stroke-dasharray: 472; stroke-dashoffset: 472; -webkit-animation: anim 2s linear forwards; animation: anim 2s linear forwards; } .skill svg { position: absolute; top: 0; left: 0; } @-webkit-keyframes anim { 100% { stroke-dashoffset: 165; } } @keyframes anim { 100% { stroke-dashoffset: 165; } } .eButton_toolbar_wrap { display: inline-block; border: 1px solid #000; border-radius: 10px; overflow: hidden; } .eButton_toolbar { display: flex; } .eButton_toolbar li { border-right: 1px solid #000; } .eButton_toolbar li:last-child { border-right: 0; } .eButton_toolbar li:hover, .eButton_toolbar li.active { background-color: rgba(0, 0, 0, 0.3137254902); } .eButton_toolbar li:hover a, .eButton_toolbar li.active a { color: #000; } .eButton_toolbar li a { display: inline-block; padding: 10px; } .eButton_toolbar.eButton_toolbar_color { background-color: blue; } .eButton_toolbar.eButton_toolbar_color li a { color: #fff; } .export_btn { display: flex; justify-content: center; align-items: center; min-width: 127px; height: 42px; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; background-color: #00a3ff; font-size: 13px; font-weight: 500; color: #fff; transition: all 0.3s; } .export_btn:hover { background-color: transparent; border-color: #00a3ff; color: #00a3ff; } .print_invoice_btn { display: flex; justify-content: center; align-items: center; gap: 7px; max-width: 154px; height: 55px; margin-left: auto; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; background-color: #00a3ff; font-size: 13px; font-weight: 500; color: #fff; transition: all 0.3s; } .print_invoice_btn svg path { transition: all 0.3s; } .print_invoice_btn:hover { background-color: transparent; border-color: #00a3ff; color: #00a3ff; } .print_invoice_btn:hover svg path { fill: #00a3ff; } .paypal_btn { display: flex; justify-content: center; align-items: center; gap: 7px; max-width: 175px; height: 55px; margin-top: 50px; margin-left: auto; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; background-color: #00a3ff; font-size: 13px; font-weight: 500; color: #fff; transition: all 0.3s; } .paypal_btn:hover { background-color: transparent; border-color: #00a3ff; color: #00a3ff; } .off_payment_btn { display: flex; justify-content: center; align-items: center; gap: 7px; max-width: 283px; height: 55px; margin-top: 60px; margin-left: auto; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; background-color: #00a3ff; font-size: 13px; font-weight: 500; color: #fff; transition: all 0.3s; } .off_payment_btn:hover { background-color: transparent; border-color: #00a3ff; color: #00a3ff; } .eBtn-3 { display: flex; justify-content: center; align-items: center; min-width: 127px; height: 42px; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; background-color: #edf2f6; font-size: 13px; font-weight: 500; color: #00a3ff; transition: all 0.3s; } .eBtn-3:hover { background-color: transparent; border-color: #00a3ff; color: #00a3ff; } .eBtn-3::after { display: none; } .ePagination_wrap { display: inline-block; overflow: hidden; border: 1px solid #000; border-radius: 5px; } .ePagination { display: flex; } .ePagination li { border-right: 1px solid #000; } .ePagination li:last-child { border-right: 0; } .ePagination li:hover, .ePagination li.active { background-color: rgba(0, 0, 0, 0.3137254902); } .ePagination li:hover a, .ePagination li.active a { color: #000; } .ePagination li a { display: flex; justify-content: center; align-items: center; padding: 10px; min-width: 35px; line-height: 1; } .ePagination.ePagination_color { background-color: blue; } .ePagination.ePagination_color li a { color: #fff; } .eBtn-Wrapper { gap: 15px; padding-bottom: 15px; } .eAlert { position: relative; padding: 10px 20px; margin-bottom: 12px; font-size: 14px; font-weight: 400; line-height: 23px; color: #181c32; } .eAlert.alert-dismissible .btn-close { top: 50%; transform: translateY(-50%); right: 20px; background: transparent url("../images/alert-close.svg") center/1em auto no-repeat; z-index: 2; padding: 0; opacity: 1; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .eAlert.alert-dismissible .btn-close:hover { opacity: 1; } .eBtn-2 { display: inline-block; font-size: 13px; font-weight: 400; line-height: 21px; color: #fff; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.5rem 0.75rem; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eBtn { display: inline-block; font-size: 13px; font-weight: 400; line-height: 21px; color: #fff; width: 119px; height: 40px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eBtn.dropdown-toggle::after { margin-left: 15px; vertical-align: middle; } .eBtn~.dropdown-menu { box-shadow: 0 7px 10px rgba(0, 0, 0, 0.0352941176); } .eBtn~.dropdown-menu .dropdown-item { font-size: 13px; } .dropstart .dropdown-toggle::before { margin-right: 15px; } .eBtn-link { font-weight: 500; color: #181c32; } .eBtn-blue { background-color: #00a3ff; border: 1px solid #00a3ff; border-radius: 5px; } .eBtn-outline-blue { background-color: transparent; border: 1px solid #00a3ff; border-radius: 5px; border-width: 1.5px; color: #00a3ff; } .eBtn-blueish { background-color: #b0dff9; border: 1px solid #7bc0e6; border-radius: 5px; } .eBtn-outline-blueish { background-color: transparent; border: 1px solid #00a3ff; border-radius: 5px; color: #00a3ff; } .eBtn-green { background-color: #50cd89; border: 1px solid #50cd89; border-radius: 5px; } .eBtn-outline-green { background-color: transparent; border: 1px solid #50cd89; border-radius: 5px; border-width: 1.5px; color: #50cd89; } .eBtn-greenish { background-color: #aae1cb; border: 1px solid #83d4b3; border-radius: 5px; } .eBtn-outline-greenish { background-color: transparent; border: 1px solid #83d4b3; border-radius: 5px; color: #50cd89; } .eBtn-pink { background-color: #f1416c; border: 1px solid #f1416c; border-radius: 5px; } .eBtn-outline-pink { background-color: #f1416c; border: 1px solid #f1416c; border-radius: 5px; border-width: 1.5px; color: #f1416c; } .eBtn-pinkish { background-color: #fec0bf; border: 1px solid #f29a99; border-radius: 5px; } .eBtn-outline-pinkish { background-color: transparent; border: 1px solid #f29a99; border-radius: 5px; color: #f1416c; } .eBtn-yellow { background-color: #ffc700; border: 1px solid #ffc700; border-radius: 5px; } .eBtn-outline-yellow { background-color: transparent; border: 1px solid #ffc700; border-radius: 5px; border-width: 1.5px; color: #ffc700; } .eBtn-yellowish { background-color: #ffe5ba; border: 1px solid #ebc27d; border-radius: 5px; } .eBtn-outline-yellowish { background-color: transparent; border: 1px solid #ebc27d; border-radius: 5px; color: #ffc700; } .eBtn-purple { background-color: #7239ea; border: 1px solid #7239ea; border-radius: 5px; } .eBtn-outline-purple { background-color: transparent; border: 1px solid #7239ea; border-radius: 5px; border-width: 1.5px; color: #7239ea; } .eBtn-purpleish { background-color: #b9bbe5; border: 1px solid #8f92d1; border-radius: 5px; } .eBtn-outline-purpleish { background-color: transparent; border: 1px solid #8f92d1; border-radius: 5px; color: #7239ea; } .eBtn-red { background-color: #f1416c; border: 1px solid #f1416c; border-radius: 5px; } .eBtn-outline-red { background-color: transparent; border: 1px solid #f1416c; border-radius: 5px; border-width: 1.5px; color: #f1416c; } .eBtn-black { background-color: #797c8b; border: 1px solid #797c8b; border-radius: 5px; } .eBtn-outline-black { background-color: transparent; border: 1px solid #abafb2; border-radius: 5px; border-width: 1.5px; color: #797c8b; } .eBtn-blackish { background-color: #cacfd4; border: 1px solid #abafb2; border-radius: 5px; } .eBtn-outline-blackish { background-color: transparent; border: 1px solid #cacfd4; border-radius: 5px; color: #797c8b; } .eBtn-white { background-color: #e3e4ea; border: 1px solid #cacfd4; border-radius: 5px; } .eBtn-outline-whiteish { background-color: transparent; border: 1px solid #cacfd4; border-radius: 5px; color: #00a3ff; } .ol-card p-4 { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; box-shadow: 0 7px 15px rgba(121, 124, 139, 0.0784313725); border-radius: 5px; margin-bottom: 20px; overflow: hidden; } .ol-card p-4.ol-card p-4-2 { border: 1px solid #e3e4ea; border-radius: 5px; } .ol-card p-4.ol-card p-4-2 .title mt-4 mb-3 { margin-bottom: 0; } .ol-card p-4.ol-card p-4-special .ol-card-body { padding: 20px 20px 30px; } .ol-card p-4-img-top { border-top-left-radius: 5px; border-top-right-radius: 5px; width: 100%; } .ol-card p-4-img { width: 100%; } .ol-card-body { flex: 1 1 auto; padding: 10px 20px 20px; } .ol-card-body .title mt-4 mb-3 { font-size: 15px; font-weight: 600; line-height: 28px; color: #181c32; margin-bottom: 5px; } .ol-card-body .ol-card p-4-subtitle { font-size: 12px; font-weight: 400; line-height: 22px; color: #797c8b; } .ol-card-body .ol-card p-4-text { font-size: 13px; font-weight: 400; line-height: 22px; color: #797c8b; margin-bottom: 13px; } .ol-card-body .ol-card p-4-AdminBtn { gap: 10px; } .ol-card-body .ol-card p-4-Admin { gap: 5px; } .ol-card-body .ol-card p-4-Admin .ol-card p-4-userImg { width: 30px; height: 30px; border-radius: 50%; background-color: #e3e4ea; } .ol-card-body .ol-card p-4-Admin span { font-size: 12px; font-weight: 500; line-height: 22px; color: #797c8b; } .ol-card-body .eBtn { display: inline-block; font-size: 12px; font-weight: 500; line-height: 22px; color: #fff; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 86px; height: 40px; display: flex; justify-content: center; align-items: center; box-shadow: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .carouselOnly, .carouselControlsOnly, .carouselIndicatorsOnly { overflow: hidden; border-radius: 5px; position: relative; } .carouselControlsOnly .swiper-button-next, .carouselControlsOnly .swiper-button-prev, .carouselIndicatorsOnly .swiper-button-next, .carouselIndicatorsOnly .swiper-button-prev { width: auto; height: auto; } .carouselControlsOnly .swiper-button-next::after, .carouselControlsOnly .swiper-button-prev::after, .carouselIndicatorsOnly .swiper-button-next::after, .carouselIndicatorsOnly .swiper-button-prev::after { color: transparent; display: none; } .carouselControlsOnly .swiper-button-next svg, .carouselControlsOnly .swiper-button-prev svg, .carouselIndicatorsOnly .swiper-button-next svg, .carouselIndicatorsOnly .swiper-button-prev svg { width: 20px; height: 20px; color: #797c8b; } .carouselControlsOnly .swiper-button-next, .carouselIndicatorsOnly .swiper-button-next { right: 14px; } .carouselControlsOnly .swiper-button-prev, .carouselIndicatorsOnly .swiper-button-prev { left: 15px; } .carouselIndicatorsOnly .swiper-pagination-bullet { width: 30px; height: 3px; border-radius: 3px; background-color: #797c8b; opacity: 30%; } .carouselIndicatorsOnly .swiper-pagination-bullet-active { opacity: 100%; } .eSwiper-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; width: 90%; } .eSwiper-caption h4 { font-size: 13px; font-weight: 500; line-height: 22px; color: #181c32; padding-bottom: 5px; } .eSwiper-caption p { font-size: 11px; line-height: 19px; color: #797c8b; } .drawer-item ul { gap: 16px; } .eBtn-offcanvas { display: inline-block; font-size: 13px; font-weight: 400; line-height: 21px; color: #fff; width: 75px; height: 40px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eOffcanvas .offcanvas-header { padding: 20px; padding-bottom: 0; } .eOffcanvas .offcanvas-body { padding: 20px; padding-top: 0; } .eOffcanvas .offcanvas-body h5 { font-size: 15px; font-weight: 500; color: #181c32; } .eOffcanvas .offcanvas-body p { font-size: 12px; font-weight: 400; color: #797c8b; } .offcanvas-btn { width: 13px; } .offcanvas-btn svg { fill: #797c8b; } .eProgress { display: flex; height: 12px; overflow: hidden; font-size: 9px; font-weight: 500; background-color: #e3e4ea; border-radius: 5px; } .eProgress-multi .eProgress-bar { border-radius: 0 !important; } .eProgress-multi .eProgress-bar:first-child { border-radius: 5px 0 0 5px !important; } .eProgress-multi .eProgress-bar:last-child { border-radius: 0 5px 5px 0 !important; } .eProgress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: #000; border-radius: 5px; transition: width 0.6s ease; } .eProgress-bar-striped { background-image: linear-gradient(-45deg, #61c1f8 25%, transparent 25%, transparent 50%, #61c1f8 50%, #61c1f8 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .eSweet_alerts_title { font-size: 13px; font-weight: 500; color: #181c32; text-align: center; } @media screen and (max-width: 575px) { .eSweet_alerts_title { text-align: left; } } .e_sAlert { display: inline-block; font-size: 13px; font-weight: 400; line-height: 40px; color: #fff; width: 94px; height: 40px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #00a3ff; border: 1px solid #00a3ff; border-radius: 5px; } .eModal .modal-dialog { margin: 0 auto; } .eModal .modal-dialog.sweet-alerts { max-width: 287px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .eModal .modal-dialog.modal-dialog-centered { justify-content: center; } .eModal .modal-dialog .modal-content .modal-body { padding: 13px 30px 20px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; } .eModal .modal-dialog .modal-content .modal-body .icon { width: 68px; height: 68px; border: 1.5px solid #e3e4ea; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 18px; } .eModal .modal-dialog .modal-content .modal-body .icon svg { fill: #00a3ff; } .eModal .modal-dialog .modal-content .modal-body .icon.icon-success svg { fill: #50cd89; } .eModal .modal-dialog .modal-content .modal-body .icon.icon-confirm svg { fill: #ffc700; } .eModal .modal-dialog .modal-content .modal-body p { font-size: 15px; font-weight: 500; color: #181c32; padding-bottom: 16px; } .eModal .modal-dialog .modal-content .modal-body .focus-text { color: #797c8b; margin-top: -10px; } .eModal .modal-dialog .modal-content .modal-body button { width: 68px; height: 40px; background-color: #00a3ff; font-size: 13px; font-weight: 500; color: #fff; } .eModal .modal-dialog .modal-content .modal-body .confirmBtn { display: flex; gap: 14px; } .eModal .modal-dialog .modal-content .modal-body .confirmBtn .eBtn-green { width: 116px; background-color: #50cd89 !important; } .eModal .modal-dialog .modal-content .modal-body .confirmBtn .eBtn-red { width: 100px; background-color: #f1416c !important; } .eModal .modal-dialog.text-sweet-alerts { max-width: 320px; } .eModal .modal-dialog.text-sweet-alerts .modal-body { padding: 28px 0 !important; } .eNav-Tabs { border-bottom-color: #cacfd4; margin-bottom: 10px; } .eNav-Tabs button.nav-link { font-size: 13px; font-weight: 500; color: #181c32; padding: 2px 20px; } .eNav-Tabs button.nav-link.active, .eNav-Tabs button.nav-link:hover { color: #181c32; border-color: #cacfd4 #cacfd4 #fff; border-radius: 5px 5px 0 0; } .eNav-Tabs-justify { margin-bottom: 10px; flex-wrap: nowrap; overflow-x: scroll; } .eNav-Tabs-justify::-webkit-scrollbar { display: none; } .eNav-Tabs-justify button.nav-link { font-size: 13px; font-weight: 500; color: #181c32; padding: 2px 16px; } .eNav-Tabs-justify button.nav-link.active { color: #fff; background-color: #00a3ff; } .vTabs-gap { gap: 30px; } @media screen and (max-width: 767px) { .vTabs-gap { gap: 10px; } } .eNav-Tabs-vertical { flex-wrap: nowrap; overflow-x: scroll; flex-basis: 97px; } @media screen and (max-width: 767px) { .eNav-Tabs-vertical { flex-basis: 100%; } } .eNav-Tabs-vertical::-webkit-scrollbar { display: none; } .eNav-Tabs-vertical~.eNav-Tabs-content { flex-basis: calc(100% - 97px); } .eNav-Tabs-vertical button.nav-link { font-size: 13px; font-weight: 500; color: #181c32; padding: 2px 16px; text-align: left; } .eNav-Tabs-vertical button.nav-link.active { color: #fff; background-color: #00a3ff; } .eNav-Tabs-custom { border-bottom: none; margin-bottom: 10px; flex-wrap: nowrap; overflow-x: scroll; gap: 50px; position: relative; } .eNav-Tabs-custom::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #cacfd4; } .eNav-Tabs-custom::-webkit-scrollbar { display: none; } .eNav-Tabs-custom button.nav-link { font-size: 13px; font-weight: 500; color: #181c32; padding-left: 0; padding-right: 0; padding: 0 0 14px 0; position: relative; z-index: 1; transition: all 0.3s; } .eNav-Tabs-custom button.nav-link.active, .eNav-Tabs-custom button.nav-link:hover { border-color: transparent; background: transparent !important; } .eNav-Tabs-custom button.nav-link.active span, .eNav-Tabs-custom button.nav-link:hover span { opacity: 1; z-index: 1; background-color: #00a3ff; } .eNav-Tabs-custom button.nav-link span { display: inline-block; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #00a3ff; z-index: 1; opacity: 0; } .eNav-Tabs-content .tab-pane p { font-size: 12px; color: #797c8b; } .colorGradient { border-radius: 50%; width: 172px; height: 172px; transform: rotate(15deg); position: relative; margin-bottom: 20px; } .colors_1 { position: absolute; top: 35%; left: 10%; transform: rotate(-15deg); color: #fff; font-size: 12px; } .colors_2 { position: absolute; top: 35%; right: 10%; transform: rotate(-15deg); color: #fff; font-size: 12px; } .colors_3 { position: absolute; bottom: 15%; left: 35%; transform: rotate(-15deg); color: #fff; font-size: 12px; } .blueColors { background: conic-gradient(#4dbfff 0deg 120deg, #b1e2fe 120deg 240deg, #00a3ff 240deg 360deg); } .greenColors { background: conic-gradient(#86dfaf 0deg 120deg, #c0f3d8 120deg 240deg, #50cd89 240deg 360deg); } .yellowColors { background: conic-gradient(#fedd69 0deg 120deg, #f9ecbe 120deg 240deg, #ffc700 240deg 360deg); } .purpleColors { background: conic-gradient(#a57cfb 0deg 120deg, #d3befe 120deg 240deg, #7239ea 240deg 360deg); } .redColors { background: conic-gradient(#fe90ab 0deg 120deg, #fcc0cf 120deg 240deg, #f1416c 240deg 360deg); } .ebg-primary { background-color: #00a3ff !important; } .ebg-outline-primary { color: #181c32; border-color: #00a3ff !important; } .ebg-outline-primary:hover { color: #fff; background-color: #00a3ff; } .ebg-primary-dark { background-color: #0079be !important; } .ebg-soft-primary { background-color: #daf1fe !important; color: #00a3ff !important; } .ebg-success { background-color: #34c38f !important; } .ebg-outline-success { color: #181c32; border-color: #34c38f !important; } .ebg-outline-success:hover { color: #fff; background-color: #34c38f; } .ebg-soft-success { background-color: #d1fee5 !important; color: #50cd89 !important; } .ebg-info { background-color: #556ee6 !important; } .ebg-outline-info { color: #181c32; border-color: #556ee6 !important; } .ebg-outline-info:hover { color: #fff; background-color: #556ee6; } .ebg-soft-info { background-color: #eae3f9 !important; color: #7239ea !important; } .ebg-warning { background-color: #f1b44c !important; } .ebg-soft-warning { background-color: #fcf5db !important; color: #ffc700 !important; } .ebg-danger { background-color: #f65e5e !important; } .ebg-soft-danger { background-color: #ffe9ef !important; color: #f1416c !important; } .ebg-soft-red { background-color: #ffe1e8 !important; color: #f3416c !important; } .ebg-dark { background-color: #181c32 !important; } .ebg-soft-dark { background-color: #d6d6d6 !important; color: #181c32 !important; } .fpb-7 { padding-bottom: 7px; } .fmb-12 { margin-bottom: 12px; } .fmb-14 { margin-bottom: 14px; } .eForm-label { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #181c32; } .col-eForm-label { font-size: 13px; font-weight: 500; color: #181c32; line-height: 1.5; } @media screen and (max-width: 575px) { .col-eForm-label { margin-bottom: 6px; } } .eForm-check-label { font-size: 12px; font-weight: 500; color: #181c32; } .eForm-control-color { width: 60px; padding: 8px; } .eForm-control-sm { min-height: 30px !important; padding: 8px 16px !important; font-size: 10px !important; border-radius: 5px !important; } .eForm-control-lg { min-height: 55px !important; padding: 16px !important; font-size: 14px !important; border-radius: 5px !important; } .eForm-control { display: block; width: 100%; padding: 11px 16px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #797c8b; background-color: #fff; background-clip: padding-box; border: 1px solid #cacfd4; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eForm-control:focus, .eForm-control:hover { border: 1px solid #00a3ff; } .eForm-control::-moz-placeholder { font-size: 12px; font-weight: 400; color: #181c32; } .eForm-control:-ms-input-placeholder { font-size: 12px; font-weight: 400; color: #181c32; } .eForm-control::placeholder { font-size: 12px; font-weight: 400; color: #181c32; } textarea.eForm-control { min-height: 120px !important; } input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator, input[type=week]::-webkit-calendar-picker-indicator { background-image: url(../images/calendar-regular.svg); } input[type=time]::-webkit-calendar-picker-indicator { background-image: url(../images/clock.svg); } .btn-form { border: 0; width: 119px; height: 40px; border-radius: 5px; background-color: #00a3ff; font-size: 12px; font-weight: 500; color: #fff; } .eForm-control-file[type=file] { display: block; width: 100%; font-size: 12px; font-weight: 400; line-height: 1.5; color: #797c8b; background-color: #fff; background-clip: padding-box; border: 1px solid #cacfd4; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eForm-control-file[type=file]::-webkit-file-upload-button { padding: 11px 16px; margin-right: 14px; font-size: 12px; font-weight: 400; color: #797c8b; background-color: #eff2f7; border-right: 1px solid #cacfd4; border-radius: 5px 0 0 5px; } .eForm-control-file[type=file]:hover::-webkit-file-upload-button { background-color: #eff2ef !important; } .eForm-control-file[type=file].eForm-control-file-lg { font-size: 14px; } .eForm-control-file[type=file].eForm-control-file-lg::-webkit-file-upload-button { padding: 17px 20px 15px; font-size: 14px; } .eForm-control-file[type=file].eForm-control-file-sm { font-size: 10px; } .eForm-control-file[type=file].eForm-control-file-sm::-webkit-file-upload-button { padding: 7px 20px 6px; font-size: 10px; } .eForm-select~.select2-container--default .select2-selection--multiple, .eForm-select~.select2-container--default .select2-selection--single { border: 1px solid #cacfd4; border-radius: 5px; padding-bottom: 0 !important; padding-right: 0 !important; min-height: 40px; } .eForm-select~.select2-container--default .select2-selection--multiple:focus, .eForm-select~.select2-container--default .select2-selection--multiple:hover, .eForm-select~.select2-container--default .select2-selection--single:focus, .eForm-select~.select2-container--default .select2-selection--single:hover { border: 1px solid #00a3ff; } .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice { background-color: #00a3ff; border: 0px solid #aaa; border-radius: 13px; margin-left: 8px; padding-left: 0; padding-right: 30px; } .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice .select2-selection__choice__remove { border-right: 0px solid transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 12px; font-weight: 400; padding: 0px 12px; color: #bce7ff; right: 0; left: auto; } .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover, .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:focus, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice .select2-selection__choice__remove:hover, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice .select2-selection__choice__remove:focus { background-color: transparent !important; } .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice .select2-selection__choice__display { padding-left: 11px; color: #fff; font-size: 12px; padding-right: 10px; position: relative; } .eForm-select~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display::after, .eForm-select~.select2-container--default .select2-selection--single .select2-selection__choice .select2-selection__choice__display::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 17px; background-color: #7dcffe; } .eForm-select~.select2-container--default .select2-selection--single .select2-selection__rendered { color: #797c8b; line-height: 40px; font-size: 14px; font-weight: 400; padding-left: 16px; } .eForm-select~.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; top: 0 !important; right: 11px !important; } .eForm-select~.select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 0 !important; background-image: url(../images/select-arrow.svg); width: 8px !important; height: 7px !important; background-repeat: no-repeat; transform: rotate(0deg); transition: all 0.3s; } .eForm-select~.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow { top: -2px !important; } .eForm-select~.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg); } .eForm-select~.select2-container--default .select2-search--inline .select2-search__field { margin-left: 16px !important; margin-top: 14px !important; line-height: 1; } .eForm-select~.select2-container--default .select2-search--inline .select2-search__field:-moz-placeholder-shown { font-size: 12px; font-weight: 400; color: #797c8b; } .eForm-select~.select2-container--default .select2-search--inline .select2-search__field:-ms-input-placeholder { font-size: 12px; font-weight: 400; color: #797c8b; } .eForm-select~.select2-container--default .select2-search--inline .select2-search__field:placeholder-shown { font-size: 12px; font-weight: 400; color: #797c8b; } .eForm-select~.select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #cacfd4; } .eForm-select.eChoice-multiple-without-remove~.select2-container--default .select2-selection--multiple .select2-selection__choice { padding-right: 1px; } .eForm-select.eChoice-multiple-without-remove~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove { display: none; } .eForm-select.eChoice-multiple-without-remove~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display { padding-left: 11px; color: #fff; font-size: 12px; padding-right: 10px; position: relative; } .eForm-select.eChoice-multiple-without-remove~.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display::after { display: none; } .select2-dropdown { border: none !important; border-radius: 0 0 5px 5px !important; overflow: hidden; box-shadow: 0 7px 25px rgba(121, 124, 139, 0.1450980392); } .select2-results__option { padding: 6px 16px !important; font-size: 13px; font-weight: 500; line-height: 20px; color: #797c8b; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #edf2f6 !important; color: #00a3ff !important; } .select2-container--default .select2-search--dropdown .select2-search__field{ border: 1px solid #d4d4d4; border-radius: 7px; margin: 4px 10px; width: calc(100% - 22px); outline-color: #f9f9f9; } .select2-container--default .select2-results__option--selected { background-color: #edf2f6 !important; color: #00a3ff !important; } .eImage-wrap { gap: 20px; padding-bottom: 40px; } .ew-20 { width: 134px; height: 115px; border-radius: 5px; } .ew-40 { width: 194px; height: 141px; border-radius: 5px; } .ew-60 { width: 206px; height: 168px; border-radius: 5px; } .ew-80 { width: 222px; height: 201px; border-radius: 5px; } .ew-100 { width: 294px; height: 269px; border-radius: 5px; } .eImage-avator { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; } .eAvatar { position: relative; width: 70px; height: 70px; overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 5px; } .eAvatar .eAvatar-img { background-size: cover; } .eAvatar:not(img) { background-color: #e3e4ea; } .eAvatar-xl { width: 130px; height: 130px; } .eAvatar-lg { width: 100px; height: 100px; } .eAvatar-sm { width: 50px; height: 50px; } .eAvatar-circle { border-radius: 50%; } @media screen and (max-width: 991px) { .eAccordion { margin-bottom: 20px; } } .eAccordion .accordion-item { border: 1px solid #cacfd4 !important; border-bottom: none !important; border-radius: 0; } .eAccordion .accordion-item:last-child { border-bottom: 1px solid #cacfd4 !important; } .eAccordion .accordion-item .accordion-header .accordion-button { font-size: 13px; line-height: 30px; font-weight: 500; color: #181c32; box-shadow: 0 0 0 rgba(0, 0, 0, 0); padding: 12px 20px; } .eAccordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { position: relative; background-color: #f6f2ff; border-top: 1px solid #f0e9ff; border-bottom: 1px solid #f0e9ff; margin-top: -1px; z-index: 10; } .eAccordion .accordion-item .accordion-header .accordion-button::after { background-image: url(../images/arrow_bottom.svg) !important; } .eAccordion .accordion-item .accordion-body { padding: 4px 19px 6px; } .eAccordion .accordion-item .accordion-body p { font-size: 13px; font-weight: 400; color: #797c8b; } .eAccordion-flush { padding: 0 14px; border: 1px solid #cacfd4; } .eAccordion-flush .accordion-item .accordion-header .accordion-button { font-size: 13px; line-height: 30px; font-weight: 500; color: #181c32; box-shadow: 0 0 0 rgba(0, 0, 0, 0); padding: 12px 20px; } .eAccordion-flush .accordion-item .accordion-header .accordion-button:not(.collapsed) { position: relative; background-color: #f6f2ff; border: 1px solid #f0e9ff; margin-top: -1px; z-index: 10; } .eAccordion-flush .accordion-item .accordion-header .accordion-button::after { background-image: url(../images/arrow_bottom.svg) !important; } .eAccordion-flush .accordion-item .accordion-body { padding: 4px 19px 6px; } .eAccordion-flush .accordion-item .accordion-body p { font-size: 13px; font-weight: 400; color: #797c8b; } .eHeading .table> :not(caption)>*>* { display: block; border-bottom: none; } .eh1 { font-size: 1.875rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh2 { font-size: 1.75rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh3 { font-size: 1.5rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh4 { font-size: 1.25rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh5 { font-size: 1.125rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh6 { font-size: 1rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh7 { font-size: 0.8125rem; font-weight: 500; color: #181c32; line-height: 28px; } .eh8 { font-size: 0.6875rem; font-weight: 500; color: #181c32; line-height: 28px; } .display-heading .table> :not(caption)>*>* { display: block; border-bottom: none; } .eDisplay-1 { font-size: 3.75rem; font-weight: 500; line-height: 28px; color: #181c32; } .eDisplay-2 { font-size: 3.125rem; font-weight: 500; line-height: 28px; color: #181c32; } .eDisplay-3 { font-size: 2.5rem; font-weight: 500; line-height: 28px; color: #181c32; } .eDisplay-4 { font-size: 1.875rem; font-weight: 500; line-height: 28px; color: #181c32; } .eDisplay-5 { font-size: 1.25rem; font-weight: 500; line-height: 28px; color: #181c32; } .eCheckbox .form-check.eForm-check { padding-left: 0; } .eCheckbox .form-check.eForm-check .row { gap: 8px; } .eCheckbox input.form-check-input { margin-top: 0.35em; box-shadow: 0 0 0 rgba(0, 0, 0, 0); border: 1px solid #cacfd4; } .eCheckbox input.form-check-input:checked { background-color: #00a3ff; border-color: #00a3ff; } .eCheckbox input.form-check-input.eCheckboxPrimary:checked { background-color: #00a3ff; border-color: #00a3ff; } .eCheckbox input.form-check-input.eCheckboxSuccess:checked { background-color: #34c38f; border-color: #34c38f; } .eCheckbox input.form-check-input.eCheckboxInfo:checked { background-color: #556ee6; border-color: #556ee6; } .eCheckbox input.form-check-input.eCheckboxWarning:checked { background-color: #f1b44c; border-color: #f1b44c; } .eCheckbox input.form-check-input.eCheckboxDanger:checked { background-color: #f65e5e; border-color: #f65e5e; } .eCheckbox input.form-check-input.eCheckboxOutlinePrimary:checked { background-color: transparent; border-color: #00a3ff; background-image: url(../images/checkbox-check.svg); } .eCheckbox input.form-check-input.eCheckboxOutlineSuccess:checked { background-color: transparent; border-color: #34c38f; background-image: url(../images/checkbox-check.svg); } .eCheckbox input.form-check-input.eCheckboxOutlineInfo:checked { background-color: transparent; border-color: #556ee6; background-image: url(../images/checkbox-check.svg); } .eCheckbox input.form-check-input.eCheckboxOutlineWarning:checked { background-color: transparent; border-color: #f1b44c; background-image: url(../images/checkbox-check.svg); } .eCheckbox input.form-check-input.eCheckboxOutlineDanger:checked { background-color: transparent; border-color: #f65e5e; background-image: url(../images/checkbox-check.svg); } .eCheckbox label { font-size: 12px; font-weight: 500; color: #181c32; } .eRadios .form-check.eForm-radio { padding-left: 0; } .eRadios .form-check.eForm-radio .row { gap: 8px; } .eRadios input.form-check-input { width: 14px; height: 14px; vertical-align: middle; margin-top: 0.45em; box-shadow: 0 0 0 rgba(0, 0, 0, 0); border: 1px solid #cacfd4; } .eRadios input.form-check-input:checked { background-color: #00a3ff; border-color: #00a3ff; } .eRadios input.form-check-input.eRadioPrimary:checked { background-color: #00a3ff; border-color: #00a3ff; } .eRadios input.form-check-input.eRadioSuccess:checked { background-color: #34c38f; border-color: #34c38f; } .eRadios input.form-check-input.eRadioInfo:checked { background-color: #556ee6; border-color: #556ee6; } .eRadios input.form-check-input.eRadioWarning:checked { background-color: #f1b44c; border-color: #f1b44c; } .eRadios input.form-check-input.eRadioDanger:checked { background-color: #f65e5e; border-color: #f65e5e; } .eRadios input.form-check-input.eRadioOutlinePrimary:checked { background-color: transparent; border-color: #00a3ff; background-image: none; position: relative; } .eRadios input.form-check-input.eRadioOutlinePrimary:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: #00a3ff; border-radius: 50%; } .eRadios input.form-check-input.eRadioOutlineSuccess:checked { background-color: transparent; border-color: #34c38f; background-image: none; position: relative; } .eRadios input.form-check-input.eRadioOutlineSuccess:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: #34c38f; border-radius: 50%; } .eRadios input.form-check-input.eRadioOutlineInfo:checked { background-color: transparent; border-color: #556ee6; background-image: none; position: relative; } .eRadios input.form-check-input.eRadioOutlineInfo:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: #556ee6; border-radius: 50%; } .eRadios input.form-check-input.eRadioOutlineWarning:checked { background-color: transparent; border-color: #f1b44c; background-image: none; position: relative; } .eRadios input.form-check-input.eRadioOutlineWarning:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: #f1b44c; border-radius: 50%; } .eRadios input.form-check-input.eRadioOutlineDanger:checked { background-color: transparent; border-color: #f65e5e; background-image: none; position: relative; } .eRadios input.form-check-input.eRadioOutlineDanger:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: #f65e5e; border-radius: 50%; } .eRadios label { font-size: 12px; font-weight: 500; color: #181c32; } .eSwitches .form-switch input.form-check-input { width: 29px; height: 14px; margin-top: 0.35em; box-shadow: 0 0 0 rgba(0, 0, 0, 0); border: 1px solid #cacfd4; border-radius: 8px; background-color: #fff; background-image: url(../images/switch.svg); } .eSwitches .form-switch input.form-check-input:checked { background-color: #00a3ff; border-color: #00a3ff; background-image: url(../images/switch-checked.svg); } .eSwitches .form-switch input.form-check-input.form-switch-medium { height: 16px; } .eSwitches .form-switch input.form-check-input.form-switch-large { width: 35px; height: 18px; } .eSwitches label { font-size: 12px; font-weight: 500; color: #181c32; } .eBadge { display: inline-block; padding: 5px 10px; outline: 10px; font-size: 10px; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 3px; } .eBadge-pill { border-radius: 10px !important; } .eBadge-btn { display: inline-block; font-size: 13px; font-weight: 400; line-height: 21px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 9px 18px 8px; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eBadge-btn .eBadge { min-width: 18px; min-height: 18px; border-radius: 3px; margin-left: 11px; display: inline-flex; justify-content: center; align-items: center; padding: 2px 7px 1px; } .epagination .page-item .page-link { padding: 10px 15px; position: relative; display: block; font-size: 14px; line-height: 21px; font-weight: 500; color: #797c8b; text-decoration: none; background-color: #fff; border: 1px solid #dedede; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .epagination .page-item .page-link:focus { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .epagination .page-item .page-link:hover { z-index: 2; color: #fff; background-color: #00a3ff; border-color: #00a3ff; } .epagination .page-item .page-link:hover svg path { fill: #fff; } .epagination .page-item:first-child .page-link { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .epagination .page-item:last-child .page-link { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .epagination-2 .page-item .page-link { padding: 10px 15px; position: relative; display: block; font-size: 14px; line-height: 21px; font-weight: 500; color: #797c8b; text-decoration: none; background-color: #fff; border: 1px solid transparent; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .epagination-2 .page-item .page-link:focus { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .epagination-2 .page-item .page-link:hover, .epagination-2 .page-item .page-link.active { z-index: 2; color: #fff; background-color: #00a3ff; } .epagination-2 .page-item .page-link:hover svg path, .epagination-2 .page-item .page-link.active svg path { stroke: #fff; } .eBtnTooltip { display: inline-block; font-weight: 400; line-height: 21px; color: #fff; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 11px 18px 9px; font-size: 13px; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .eSection-wrap .toast:not(.show) { display: block !important; } .eSection-wrap .fade:not(.show) { opacity: 1 !important; } .eToastBasic { width: 287px; max-width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid #e3e4ea; box-shadow: 0 7px 15px rgba(121, 124, 139, 0.14); border-radius: 5px; } .eToastBasic .toast-header { padding: 6px 12px; color: #181c32; background-color: #fff; background-clip: padding-box; border-bottom: 1px solid #e3e4ea; border-top-left-radius: 5px; border-top-right-radius: 5px; } .eToastBasic .toast-header strong { font-size: 16px; font-weight: 600; color: #181c32; } .eToastBasic .toast-header small { font-size: 10px; font-weight: 400; color: #797c8b; } .eToastBasic .toast-header .btn-close { width: 11px; height: 11px; margin-right: 0; margin-left: 13px; padding: 0 !important; background: transparent url("../images/toast-close-1.svg") center/1em auto no-repeat; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; opacity: 1 !important; } .eToastBasic .toast-body { font-size: 10px; font-weight: 400; color: #181c32; line-height: 24px; padding: 13.5px 11px 12px; } .eToastCustom { width: 287px; max-width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid #e3e4ea; box-shadow: 0 7px 15px rgba(121, 124, 139, 0.14); border-radius: 5px; } .eToastCustom .toast-body { padding: 9px 0 12px; } .eToastCustom .toast-body p { font-size: 13px; font-weight: 500; color: #181c32; line-height: 24px; padding-left: 12px; padding-bottom: 8px; } .eToastCustom .toast-body .toastAction { display: flex; justify-content: flex-start; gap: 10px; border-top: 1px solid #e3e4ea; padding: 11px 12px 0; } .eToastColor { position: relative; width: 303px; max-width: 100%; pointer-events: auto; background-clip: padding-box; box-shadow: 0 7px 15px rgba(121, 124, 139, 0.14); border-radius: 5px; } .eToastColor .toast-body { font-size: 13px; font-weight: 500; padding: 12px 19px 13px; } .eToastColor .btn-close { position: absolute; top: 50%; right: 19px; transform: translateY(-50%); background: transparent url("../images/toast-close-2.svg") center/1em auto no-repeat; width: 11px; height: 11px; padding: 0 !important; padding-right: 20px; opacity: 1 !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; } .eTable { font-size: 14px !important; font-weight: 600 !important; color: #181c32 !important; } .eTable> :not(caption)>*>* { padding: 11px 16px !important; border-bottom-color: #e3e4ea !important; } .eTable> :not(caption)>*>*:first-child { padding-left: 30px !important; } .eTable> :not(:first-child) { border-top: 1px solid #e3e4ea; } .eTable.table-borderless> :not(:first-child) { border-top: none; } .eTable .table-light { --bs-table-bg: $table-light-bg; } .eTable tbody tr { font-size: 12px !important; font-weight: 400 !important; } .eTable tbody tr th { font-size: 12px !important; font-weight: 400 !important; } .eTable.table-hover>tbody>tr:hover>* { background-color: #e3e4ea; color: #181c32; } .eTable.table-dark { --bs-table-bg: #181c32; --bs-table-hover-bg: #181c3215; --bs-table-hover-color: #181c32; color: #fff !important; border-color: #4c5067 !important; } .eTable.table-dark> :not(caption)>*>* { border-bottom-color: #4c5067 !important; } .eTable.table-dark.table-hover>tbody>tr:hover>* { background-color: rgba(24, 28, 50, 0.5647058824); color: #fff; } .eTable.table-dark.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-accent-bg: #181c3290 !important; color: #fff; } .eTable.table-striped>tbody>tr:nth-of-type(odd)>* { background-color: #e3e4ea; color: #181c32; } .eTable-2> :not(caption)>*>*:last-child { width: 107px; } .table-action-btn { display: inline-block; padding: 6px 10px; line-height: 1; border-radius: 5px; background-color: #e3e4ea; font-size: 12px; font-weight: 400; color: #181c32; } .table-action-btn:hover { color: #181c32; } .table-action-btn-2 { display: inline-block; height: 35px; padding: 8px 18px; line-height: 1; border: none; border-radius: 5px; background-color: #edf2f6; font-size: 14px; font-weight: 500; color: #797c8b; } .table-action-btn-2~.eDropdown-menu-2 li a { font-size: 14px !important; font-weight: 500; line-height: 30px; } .eTable-2.tbody-border thead tr th { font-size: 16px; font-weight: 600; color: #181c32; } .eTable-2.tbody-border tbody tr { border-bottom: 1.1px solid #dedede !important; } .eTable-2.tbody-border tbody tr:first-child { border-bottom: 1.1px solid transparent !important; } .eBreadcrumb { gap: 20px; } .eBreadcrumb li { font-size: 12px; line-height: 19px; color: #797c8b; } .eBreadcrumb li:first-child { color: #181c32; font-weight: 600; position: relative; } .eBreadcrumb li:first-child::before { content: ">"; position: absolute; top: 0; right: -17px; width: 10px; height: 10px; } .eBreadcrumb-2 { gap: 15px; } .eBreadcrumb-2 li { position: relative; } .eBreadcrumb-2 li::before { content: ""; position: absolute; top: 55%; right: -10px; transform: translateY(-50%); width: 5px; height: 2px; background-color: #797c8b; } .eBreadcrumb-2 li:last-child::before { display: none; } .eBreadcrumb-2 li a { font-size: 12px; font-weight: 500; line-height: 18px; color: #797c8b; } .classRoutines-item { border-bottom: 1px dashed #dedede; padding-bottom: 20px; margin-bottom: 20px; } .classRoutines-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .classRoutines-item .title { font-size: 15px; font-weight: 600; line-height: 23px; color: #181c32; min-width: 130px; } .classTime-items { gap: 20px; overflow-x: scroll; } .classTime-items::-webkit-scrollbar { display: none; } .classTime-item { background-color: #f1faff; border: 1px dashed rgba(0, 163, 255, 0.4); border-radius: 5px; padding: 16px 20px; min-width: 206px; } .classTime-item .subjectName { font-size: 18px; font-weight: 600; line-height: 27px; color: #181c32; padding-bottom: 10px; } .classDetails-info { gap: 9px; padding-bottom: 10px; } .classDetails-info:last-child { padding-bottom: 0; } .classDetails-info .icon { flex: 0 0 20px; text-align: center; width: 20px; line-height: 1; } .classDetails-info .info { flex: 0 0 auto; font-size: 13px; font-weight: 500; line-height: 20px; color: #181c32; } .search-filter-area { padding-bottom: 7px; } .search-input { gap: 8px; min-width: 250px; height: 42px; border-radius: 5px; background-color: #edf2f6; padding: 13px 17px; } .search-input input { background-color: transparent; border: none; font-size: 12px; line-height: 28px; color: #797c8b; width: 100%; } .search-input input:focus { background-color: transparent; color: #797c8b; } .eDropdown-menu-2 { transform: translateY(44px); background-color: #fff; border-radius: 5px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1450980392) !important; padding: 10px 7px 12px; border: none; transition: all 0.5s; -webkit-animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; } .eDropdown-menu-2.eDropdown-table-action { transform: translate3d(12px, 44px, 0); } .eDropdown-menu-2 li a { display: inline-block; width: 100%; font-size: 14px; font-weight: 500; color: #797c8b; line-height: 30px; border-radius: 3px; padding: 4px 13px 2px; cursor: pointer; } .eDropdown-menu-2 li a:hover { background-color: #edf2f6; color: #00a3ff; } .adminTable-action { position: relative; width: 107px; margin-left: auto; } .filter-options { min-width: 260px; transform: translateY(44px); background-color: #fff; border-radius: 5px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1450980392); padding: 10px 0 20px; border: none; transition: all 0.5s; -webkit-animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; animation: menu-sub-dropdown-animation-fade-in 0.3s ease 1, menu-sub-dropdown-animation-move-up 0.3s ease 1; } .filter-options .title { font-size: 14px; font-weight: 500; color: #000; line-height: 23px; padding-left: 15px; padding-bottom: 11px; border-bottom: 1px solid #e3e4ea; margin-bottom: 15px; } .filter-option { padding: 0px 16px 20px; gap: 7px; } .filter-option select, .filter-option input { background-color: #edf2f6; border-radius: 5px; border: 1px solid transparent; font-size: 12px; font-weight: 500; color: #797c8b; min-height: 38px; } .filter-option select:hover, .filter-option input:hover { border: 1px solid #00a3ff; } .filter-button { gap: 10px; padding-right: 16px; } .eFilter-reset, .eFilter-apply { display: flex; justify-content: center; align-items: center; min-width: 78px; height: 38px; border-radius: 5px; background-color: #edf2f6; font-size: 14px; font-weight: 500; line-height: 23px; color: #797c8b; } .eFilter-reset:hover, .eFilter-apply:hover { color: #797c8b; } .eFilter-apply { background-color: #00a3ff; color: #fff; } .eFilter-apply:hover { color: #fff; } .filter-export-area { gap: 15px; } .admin-tInfo { font-size: 15px; font-weight: 500; line-height: 23px; color: #797c8b; } .eTable-2> :not(caption)>*>* { border-bottom: 1px dashed #dedede; padding: 20px 16px !important; } .eTable-2> :not(caption)>*>*:first-child { padding-left: 0px !important; } .eTable-2> :not(:first-child) { border-top: 1.2px solid #dedede !important; } .eTable-2 thead tr th { font-size: 13px; font-weight: 500; color: #797c8b; border-bottom: 1.1px solid #dedede !important; } .eTable-2 tbody tr:not(:last-child) { border-bottom: 1px dashed #dedede; } .eTable-2> :not(caption)>*:last-child>* { border-bottom-color: transparent !important; } .row-number { font-size: 14px; font-weight: 500; line-height: 21px; color: #797c8b; } .att-filter { gap: 18px; padding-bottom: 30px; } .att-filter .att-filter-option { flex: 0 0 auto; min-width: 350px; } @media screen and (max-width: 991px) { .att-filter .att-filter-option { min-width: 335px !important; } } @media screen and (max-width: 767px) { .att-filter .att-filter-option { min-width: 300px !important; } } .att-filter .att-filter-option .select2 { width: 100%; } .att-filter .att-filter-btn { display: flex; justify-content: center; align-items: center; min-width: 125px; height: 40px; background-color: #797c8b; border-radius: 5px; font-size: 13px; font-weight: 500; color: #fff; } .select2-container--default .select2-results>.select2-results__options { max-height: initial !important; } .att-report-banner { background-color: #eff0f5; padding: 25px 40px; border-radius: 10px; margin-bottom: 30px; position: relative; gap: 20px; } @media screen and (max-width: 767px) { .att-report-banner { padding: 25px; } } .att-report-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; border-radius: 10px; background-color: #00a3ff; } .att-report-banner .att-report-summary .title { font-size: 24px; font-weight: 600; line-height: 35px; color: #181c32; padding-bottom: 5px; } @media screen and (max-width: 991px) { .att-report-banner .att-report-summary .title { font-size: 20px; } } .att-report-banner .att-report-summary .summary-item { font-size: 15px; font-weight: 600; line-height: 23px; color: #181c32; padding-bottom: 5px; } .att-report-banner .att-report-summary .summary-item span { font-weight: 500; color: #797c8b; } .att-report-banner .att-report-summary .summary-item:last-child { padding-bottom: 0; } .att-report-banner .att-banner-img { max-width: 170px; } .att-table { overflow: hidden; display: flex; } .att-title { min-width: 160px; max-width: 160px; width: 100%; } .att-title-header { font-size: 14px; font-weight: 500; line-height: 21px; color: #797c8b; border-bottom: 1px solid #dedede; min-height: 77px; } .att-stuName-items .att-stuName-item { border-bottom: 1px dashed #dedede; } .att-stuName-items .att-stuName-item a { min-height: 77px; width: 100%; display: flex; align-items: center; font-size: 15px; font-weight: 500; line-height: 15px; color: #181c32; } .att-stuName-items .att-stuName-item:last-child { border-bottom: none; } .att-stuName-items .att-stuName-item:last-child a { min-height: 39px; align-items: flex-end; } .att-content { max-width: 1440px; overflow-x: scroll; } .att-content::-webkit-scrollbar { display: none; } .att-dayWeek { min-width: 1440px; min-height: 77px; border-bottom: 1px solid #dedede; } .att-wDay, .att-date { gap: 30px; } .att-wDay div p, .att-date div p { width: 16px; text-align: center; font-size: 15px; line-height: 26px; font-weight: 500; color: #797c8b; } .att-wDay { padding-bottom: 7px; } .att-wDay div p { color: #181c32; } .att-count-items { min-width: 1440px; } .att-count-item { border-bottom: 1px dashed #dedede; } .att-count-item:last-child { border-bottom: none; } .att-count-item:last-child .att-count-stu { min-height: 39px; align-items: flex-end; } .att-count-stu { min-height: 77px; align-items: center; gap: 30px; } .att-count-stu div { width: 16px; height: 16px; border-radius: 4px; background-color: rgba(24, 28, 50, 0.3); position: relative; } .att-count-stu div::before { position: absolute; top: -40%; left: 50%; transform: translate(-50%, 0%); width: 7px; height: 7px; } .att-count-stu div.present { background-color: rgba(80, 205, 137, 0.3); } .att-count-stu div.present::before { content: url(../images/att-check.svg); } .att-count-stu div.absent { background-color: rgba(243, 65, 108, 0.3); } .att-count-stu div.absent::before { content: url(../images/att-times.svg); } .user-profile-area { gap: 40px; } .user-profile-area .user-info { flex: 1 0 330px; max-width: 330px; align-self: stretch; background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.0039215686); border-radius: 5px; padding: 20px; gap: 20px; } @media screen and (max-width: 991px) { .user-profile-area .user-info { max-width: 465px; } } @media screen and (max-width: 767px) { .user-profile-area .user-info { max-width: 345px; } } .user-profile-area .user-details-info { flex: 1 0 auto; overflow: hidden; max-width: auto; } @media screen and (max-width: 991px) { .user-profile-area .user-details-info { max-width: 465px; } } @media screen and (max-width: 767px) { .user-profile-area .user-details-info { max-width: 345px; } } .user-profile-area .user-details-info .eNav-Tabs-custom { overflow-x: scroll; background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.0039215686); border-radius: 5px; margin-bottom: 20px; padding: 20px 30px 0; } .user-profile-area .user-details-info .eNav-Tabs-custom::after { display: none; } .user-profile-area .user-details-info .eNav-Tabs-custom button.nav-link { font-size: 15px; line-height: 20px; font-weight: 500; color: #797c8b; } .user-profile-area .user-details-info .eNav-Tabs-custom button.nav-link.active, .user-profile-area .user-details-info .eNav-Tabs-custom button.nav-link:hover { color: #181c32; } .user-profile-area .user-details-info .eNav-Tabs-content { background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.0039215686); border-radius: 5px; padding: 30px; } .user-info-basic { gap: 20px; padding-top: 20px; position: relative; } .user-info-basic .userImg { width: 150px; height: 150px; border-radius: 5px; background-color: #797c8b; margin: 0 auto; } .user-info-basic .userContent .title { font-size: 18px; font-weight: 600; color: #181c32; padding-bottom: 5px; line-height: 27px; } .user-info-basic .userContent .info { font-size: 13px; line-height: 21px; color: #797c8b; padding-bottom: 8px; } .user-info-basic .userContent .user-status-verify { max-width: 88px; margin: 0 auto; background-color: #eef9ff; border-radius: 3px; padding: 4px 11px; font-size: 11px; font-weight: 500; color: #00a3ff; line-height: 17px; } .user-graphic-element-1 { position: absolute; top: 0; left: 28px; } .user-graphic-element-2 { position: absolute; top: 10px; left: 20px; } .user-graphic-element-3 { position: absolute; top: 63px; right: 42px; } .user-edit-title { border-bottom: 1px dashed #dedede; padding-bottom: 15px; margin-bottom: 20px; } .user-edit-title .title { font-size: 16px; font-weight: 600; font-size: 16px; line-height: 25px; color: #181c32; } .user-edit-title .userInfo-edit { display: flex; justify-content: center; align-items: center; width: 101px; height: 30px; border-radius: 3px; background-color: #f3f9fe; font-size: 12px; font-weight: 500; line-height: 18px; color: #797c8b; } .user-edit-title .userInfo-edit span { padding-right: 6px; } .user-info-edit-items .item { padding-bottom: 14px; } .user-info-edit-items .item:last-child { padding-bottom: 0; } .user-info-edit-items .item .title { font-size: 15px; font-weight: 600; line-height: 23px; color: #181c32; } .user-info-edit-items .item .info { font-size: 13px; font-weight: 500; line-height: 20px; color: #797c8b; } .eForm-select~.select2-container { width: 100% !important; } .userFormEdit-btn { display: flex; justify-content: center; align-items: center; max-width: 127px; height: 40px; border-radius: 5px; background-color: #00a3ff; font-size: 12px; font-weight: 500; color: #fff; margin-left: auto; margin-top: 13px; } .userFormEdit-btn:hover { color: #fff; } .error_wrap { height: 50vh; } .error_content { padding-top: 12px; } .error_content .title { font-size: 22px; font-weight: 500; line-height: 33px; color: #181c32; padding-bottom: 5px; } .error_content .info { font-size: 16px; line-height: 26px; color: #797c8b; } .invoice_logo { max-width: 125px; } .invoice_details { padding-top: 24px; } .invoice_details .item .sub-title, .invoice_details .item .title { font-size: 16px; color: #797c8b; } .invoice_details .item .title { font-weight: 600; color: #181c32 !important; } .invoice_title { font-size: 24px; font-weight: 600; line-height: 35px; color: #181c32; } .invoice_summary { padding-top: 38px; gap: 27px; margin-bottom: 60px; } .invoice_summary_item .summary_title { gap: 8px; padding-bottom: 20px; border-bottom: 1px solid #dedede; } .invoice_summary_item .summary_title .summary_title_icon { display: inline-block; width: 16px; height: 16px; border: 3px solid #797c8b; border-radius: 50%; } .invoice_summary_item .summary_title .summary_title_icon.allowance_icon { border-color: #00a3ff; } .invoice_summary_item .summary_title .summary_title_icon.deduction_icon { border-color: #50cd89; } .invoice_summary_item .summary_title .summary_title_icon.payslip_icon { border-color: #f3416c; } .invoice_summary_item .summary_title h4 { font-size: 16px; font-weight: 600; line-height: 25px; color: #181c32; } .summary_table .summary_thead { padding-top: 15px; padding-bottom: 14px; border-bottom: 1px solid #dedede; margin-bottom: 17px; } .summary_table .summary_thead h4 { font-size: 14px; font-weight: 500; line-height: 21px; color: #797c8b; } .summary_table .summary_tbody .amount { font-size: 16px; font-weight: 500; line-height: 25px; color: #181c32; } .payslip_modal_content { border: none; border-radius: 5px; box-shadow: 0 10px 25px rgba(121, 124, 139, 0.25); } .payslip_modal_content .modal-header { padding: 20px; border-bottom: 1px solid #dedede; } .payslip_modal_content .modal-header .modal-title { font-size: 18px; font-weight: 600; line-height: 27px; color: #181c32; } .payslip_modal_content .modal-header button.btn-close { background: transparent url(../images/close-2.svg) center/1em auto no-repeat; } .payslip_modal_content .payslip_modal_body { padding-bottom: 0; } .payslip_user_summary { background: rgb(255, 255, 255); background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(236, 236, 241) 85%, rgb(237, 237, 242) 100%); height: 131px; padding: 23px 0; border-radius: 10px; margin-top: 4px; } .payslip_user_summary .item { font-size: 15px; font-weight: 600; line-height: 23px; color: #797c8b; padding-bottom: 8px; } .payslip_user_summary .item:last-child { padding-bottom: 0; } .payslip_user_summary .item .inner-item { color: #181c32; } .payslip_modal_body_content { gap: 17px; padding-top: 14px; border-top: 1px solid #dedede; margin-bottom: 0; } .payslip_modal_body_content .summary_title { padding-bottom: 8px; } .payslip_modal_body_content .summary_thead { padding: 5px 0 4px; border-bottom-style: dashed; margin-bottom: 8px; } .payslip_modal_body_content .summary_thead h4 { font-size: 13px; line-height: 20px; } .payslip_modal_body_content .salary_table { max-width: 100%; } .salary_table { max-width: 360px; margin-left: auto; } @media screen and (max-width: 767px) { .salary_table { max-width: 100%; margin: 0 auto; } } .salary_table .eTable-2 { margin-bottom: 0 !important; } .salary_table .eTable-2 tbody tr td:last-child { padding-right: 0 !important; } .salary_table .eTable-2 tbody tr td:last-child div { text-align: right; } .paymentContent { max-width: 1172px; margin: 0 auto; margin-top: 30px; padding: 0; background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.0039215686); border-radius: 5px; } .paymentHeader { padding: 28px 75px 26px 64px; border-bottom: 1px solid #dedede; } .paymentHeader .title { font-size: 24px; font-weight: 600; line-height: 35px; color: #181c32; } .paymentHeader .btn-close { width: 14px; height: 14px; border: 1px solid #e3e4ea; border-radius: 4px; padding: 12px; display: flex; justify-content: center; align-items: center; } .paymentLeft { flex: 0 0 auto; max-width: 402px; width: 100%; } .paymentRight { flex: 0 0 auto; max-width: 573px; width: 100%; } .paymentWrap { gap: 57px; padding: 33px 75px 40px 64px; } .payment_tab_title { font-size: 18px; font-weight: 500; line-height: 27px; color: #181c32; } .payment_body_content .row { gap: 57px; } .payment_modalTab { gap: 30px; } .payment_modalTab .tabItem { padding: 20px; border: 1px dashed #cfd1dc; border-radius: 5px; background-color: #fff; cursor: pointer; } @media screen and (max-width: 576px) { .payment_modalTab .tabItem { padding: 20px 10px; } } .payment_modalTab .tabItem.active { background-color: #f1faff; } .payment_modalTab .tabItem.active .payment_gateway_option .logo { background-color: #d0eaf8; } .payment_gateway_option { gap: 20px; } .payment_gateway_option .logo { width: 177px; height: 65px; border-radius: 5px; display: flex; justify-content: center; align-items: center; background-color: #efeff3; } .payment_gateway_option .info .card_no { font-size: 16px; font-weight: 500; line-height: 25px; color: #181c32; padding-bottom: 5px; } @media screen and (max-width: 576px) { .payment_gateway_option .info .card_no { font-size: 14px; } } .payment_gateway_option .info .card_date { font-size: 15px; font-weight: 400; line-height: 25px; color: #797c8b; } @media screen and (max-width: 576px) { .payment_gateway_option .info .card_date { font-size: 14px; } } .payment_table { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-bottom: 30px; } .payment_table .table { margin-bottom: 0; }