/* --- END ASSIGN MODAL STYLES --- */ /* --- END ROOM DETAIL MODAL STYLES --- */ /* --- END ROOM STATUS DASHBOARD STYLES --- */ /* @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); */ /* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Prata&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap'); /* Client/group/guest names entered in a regional script (e.g. Gujarati column headers imported as group names) have no glyphs in any of the Latin-only fonts above, and this panel's font stacks never named a fallback that covers them -- depending on what's installed on the viewer's OS, that can render as boxes or "?" instead of the actual text. Adding Noto Sans Gujarati as an explicit fallback (before the final generic sans-serif) guarantees correct rendering everywhere, not just on OSes that happen to ship their own Gujarati font. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@400;500;600;700&display=swap'); @import url('bootstrap.min.css'); @import url('bootstrap-reset.css'); @import url('jquery-ui-1.10.3.css'); @import url('../fonts/css/font-awesome.min.css'); body { background-color: #fff; font-family: "Inter", sans-serif; color: #2f2f2f; line-height: 20px; overflow-x: hidden; font-size: 14px; letter-spacing: 0.2px !important;} body#index-body { background: url(../images/body-bg.jpg) repeat scroll center top #ffffff !important; } input, select, textarea { font-family: "Inter", sans-serif; color: #767676; } a { color: #ed6f7e; } a:active, a:hover { outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; color: #444444; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #ed6f7e; outline-offset: 2px; } h1, h2, h3, h4, h5 { font-family: "Prata", serif; font-weight: 400; font-style: normal;color:#2f2f2f; } .mtop10 { margin-top: 10px; } hr { border-color: #ddd; } b, strong{font-weight: 500;} /*------------------------------- LOGIN STYLES -------------------------------*/ .modal-backdrop{z-index:900 !important;} .login-body { /*background: #ed6f7e url("../images/login-bg.jpg") no-repeat fixed;*/ background-size: cover; width: 100%; height: 100%; } .form-signin { max-width: 450px; margin: 170px auto;background-color:#fff; background:#fff; border-radius: 5px; -webkit-border-radius: 5px; } .form-signin .form-signin-heading { margin: 0;padding: 25px 15px 0px 10px;text-align: center; color: #fff; position: relative; } .sign-title { font-size: 24px; color: #666; position: absolute; top: -60px; left: 0; text-align: center; width: 100%; text-transform: uppercase; } .form-signin .checkbox { margin-bottom: 14px; font-size: 13px; } .form-signin .checkbox { font-weight: normal; color: #fff; font-weight: normal; font-family: "Inter", sans-serif; width: 100%; left:-15; } .form-signin .checkbox a { color: #007bb7; text-decoration: none; } .form-signin .checkbox a:hover { color: #666; text-decoration: underline; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin .input-text {width: 100% !important;font-size: 16px !important;transition: all .4s ease !important;background: transparent !important;font-family: var(--primaryfont) !important;outline: none !important;border: 1px solid #e0e0e0 !important;padding: 5px 14px !important;color: var(--textgrey) !important;border-radius: 6px !important; height: 42px !important;} .form-signin .input-text:focus {border-color: #EA4E87 !important;box-shadow: none !important;border-radius: 6px !important;} .form-signin input[type="text"], .form-signin input[type="password"] { margin-bottom: 15px; border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc; background: #f5f5f5; box-shadow: none; font-size: 12px; } .form-signin .btn-login { background: #ed6f7e; color: #fff; text-transform: uppercase; font-weight: normal; font-family: "Inter", sans-serif; margin: 20px 0 5px; padding: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; font-size: 30px; } .form-signin .btn-login:hover { background: #23608f; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .form-signin p { text-align: left; color: #b6b6b6; font-size: 16px; font-weight: normal; } .form-signin a, .form-signin a:hover { color: #ed6f7e; } .form-signin a:hover { text-decoration: underline; } .login-wrap { padding: 20px; position: relative; } .registration { color: #c7c7c7; text-align: center; margin-top: 15px; } .input-text {width: 100% !important;font-size: 16px !important;transition: all .4s ease !important;background: transparent !important;font-family: var(--primaryfont) !important;outline: none !important;border: 1px solid #e0e0e0 !important;padding: 5px 14px !important;color: var(--textgrey) !important;border-radius: 6px !important; height: 42px !important;} .danger-box{background-color: #FFE8E8;border-radius: 5px;color: #DF4343;font-size: 13px;max-width: -webkit-fill-available;max-width: -moz-available;line-height: 20px;padding: 7px 6px;font-weight: 500;border-left: 3px solid #DF4343;letter-spacing: 0.2px;} .success-box{background-color: #DBF9D9;border-radius: 5px;color: #40A439;font-size: 13px;max-width: -webkit-fill-available; max-width: -moz-available;line-height: 20px;padding: 7px 6px;font-weight: 500;border-left: 3px solid #40A439;letter-spacing: 0.2px;} /*--------------------------------- LEFT SIDE ----------------------------------*/ .left-side { width: 240px; position: absolute; top: 0; left: 0; } .sticky-left-side { position: fixed; height: 100%; overflow-y: auto; z-index: 100;} .sticky-left-side .custom-nav { margin-top: 70px; } .sticky-left-side .custom-nav .menu-icon{background-color: #ffeeeb;height: 30px;width: 30px;border-radius: 50px;display: flex;justify-content: center;align-items: center;min-width: 30px;} .left-side-collapsed .sticky-left-side { overflow-y: visible; } /* .logo { padding-top: 5px; height: 55px; } */ .logo a {text-decoration: none; display: inline-flex; align-items: center; height: 100%; } .logo img { max-height: 45px; width: auto; vertical-align: middle; } .logo-icon .logo-icon-img { max-height: 32px; width: auto; vertical-align: middle; } .logo-icon { display: none; } .left-side-collapsed .logo-icon { background-color: #fff; display: flex !important; align-items: center; justify-content: center; height: 55px; margin-top: -55px; padding: 0 7px; width: 60px; box-sizing: border-box; } .left-side-inner { padding: 0px; margin-bottom: 50px; } .left-side .searchform { display: none; } .left-side .searchform::after { content: ''; display: block; clear: both; } .left-side .searchform input { padding: 10px; width: 90%; margin: 0 0 20px 12px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: none; } .left-side .logged-user { padding: 0 0 15px 12px; margin: 0 0 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: none; } .left-side .logged-user .media-object { width: 45px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; float: left; } .left-side .logged-user .media-body { margin-left: 60px; color: #d7d7d7; } .left-side .logged-user .media-body h4 { font-size: 15px; margin: 5px 0 0 0; } .left-side .logged-user .media-body h4 a { color: #fff; } .left-side .logged-user .media-body span { font-style: italic; font-size: 11px; opacity: 0.5; } .custom-nav { margin: 15px; } .custom-nav > li { position: relative; margin-bottom: 4px; } .custom-nav > li > a { position: relative; } .custom-nav > li > a { color: #2f2f2f; font-family: "Inter", sans-serif; letter-spacing: 0.5px; font-weight: 500; padding: 12px 15px;display: flex;align-items: center;gap: 10px; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;} .custom-nav > li > a:visited { color: inherit; } /* The global a:focus-visible ring (this file, ~line 33) drew a generic rounded-square outline around whichever sidebar icon/link was last clicked, on top of this menu's own active background (the flag-tab pill in expanded mode, the solid circle in collapsed mode) -- two different "you are here" indicators overlapping made the active icon look like a messy outline instead of the intended solid shape. The pill/circle already communicates focus/current-item clearly on its own here, so drop the generic ring just for this nav rather than everywhere in the app. */ .custom-nav > li > a:focus-visible { outline: none; } .custom-nav > li > a:hover, .custom-nav > li > a:active { background-color: #c14b59;color: #fff;border-radius: 0; box-shadow: 0 6px 14px rgba(193,75,89,0.28); } .custom-nav > li > a:hover img{filter: brightness(0) invert(1);} .custom-nav > li > a img{transition: all 0.3s;} .custom-nav > li.menu-list > a { background: transparent url(../images/plus-white.png) no-repeat 93% center; } .custom-nav > li.menu-list > a:hover { background-color: #c14b59;color: #fff; background-image: url(../images/plus.png); } .custom-nav > li.nav-active > a {background-color: #ffdfe3; color: #c14b59; border-radius: 0; background-image: url(../images/minus.png); box-shadow: 0 4px 10px rgba(193,75,89,0.14);} .custom-nav > li.nav-active > ul { display: block; } .custom-nav > li.nav-active > a:hover { background-image: url(../images/minus.png); } .custom-nav > li.active > a, .custom-nav > li.active > a:focus { background-color: #ffdfe3; color: #c14b59; border-radius: 0; box-shadow: 0 4px 10px rgba(193,75,89,0.14);} .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: #ffdfe3; color: #c14b59;} .custom-nav > li.menu-list.active > a { background-image: url(../images/plus.png); } .custom-nav > li.nav-active.active > a { background-image: url(../images/minus.png); } .custom-nav > li.nav-active.active > a:hover { background-image: url(../images/minus.png);background-color: #c14b59; color: #fff; border-radius: 0; } .custom-nav li .fa { font-size: 16px; vertical-align: middle; margin-right: 10px; width: 16px; text-align: center; } .custom-nav .sub-menu-list { list-style: none; display: none; margin: 0; padding: 0; background-color: #F8F6F6;overflow: hidden;border: 1px solid #E8DEDF;margin: 10px 0;color: #fff;border-radius: 8px; } .custom-nav .sub-menu-list > li > a { color: #2f2f2f; font-size: 13px; display: flex;gap: 10px; padding: 10px 5px 10px 20px; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } /* NOT color:inherit -- .sub-menu-list itself sets a base color:#fff (a reset meant to be overridden by every link's own explicit dark color below), and :visited is more specific than that base rule. inherit would pull that ul's white straight through for any already-clicked link, rendering white-on-near-white -- invisible, exactly the bug this was meant to avoid. */ .custom-nav .sub-menu-list > li > a:visited { color: #2f2f2f; } .custom-nav .sub-menu-list > li > a:hover, .custom-nav .sub-menu-list > li > a:active, .custom-nav .sub-menu-list > li > a:focus { text-decoration: none; color: #fff; background: #c14b59; } .custom-nav .sub-menu-list > li > a img{transition: all 0.3s;} .custom-nav .sub-menu-list > li > a:hover img, .custom-nav .sub-menu-list > li > a:active img, .custom-nav .sub-menu-list > li > a:focus img{filter: brightness(0) invert(1);} .custom-nav .sub-menu-list > li .fa { font-size: 17px;margin-right: 5px;text-align: left;width: auto;vertical-align: baseline; color: #fff; } .custom-nav .sub-menu-list > li.active > a { color: #fff; background-color: #c14b59;} .custom-nav .sub-menu-list > li.active > a img{filter: brightness(0) invert(1);} .custom-nav .sub-menu-list ul { margin-left: 12px; border: 0; } .custom-nav .menu-list.active ul { display: block; } .nav > li > a:hover{background-color: #c14b59; color: #fff;} .nav > li > a:focus{background-color: #ffdfe3;} /*------------------------------------------ LEFT SIDE COLLAPSE -------------------------------------------*/ .pr-0 { padding-right: 0 !important; } .pl-0 { padding-left: 0 !important; } .mr-0 { margin-right: 0 !important; } .ml-0 { margin-left: 0 !important; } .mb0px { margin-bottom: 0 !important; } .mb5px { margin-bottom: 5px; } .mb10px { margin-bottom: 10px; } .mb15px { margin-bottom: 15px; } .mb20px { margin-bottom: 20px; } .mb25px { margin-bottom: 25px; } .mb30px { margin-bottom: 30px; } .mt0px { margin-top: 0; } .mt5px { margin-top: 5px; } .mt7px { margin-top: 7px; } .mt10px { margin-top: 10px; } .mt15px { margin-top: 15px; } .mt20px { margin-top: 20px; } .mt25px { margin-top: 25px; } .mt30px { margin-top: 30px; } .mt76px { margin-top: 76px; } .pb0px { padding-bottom: 0 !important; } .pb5px { padding-bottom: 5px; } .pb10px { padding-bottom: 10px; } .pb15px { padding-bottom: 15px; } .pb20px { padding-bottom: 20px; } .pb25px { padding-bottom: 25px; } .pb30px { padding-bottom: 30px; } .pt0px { padding-top: 0; } .pt5px { padding-top: 5px; } .pt7px { padding-top: 7px; } .pt10px { padding-top: 10px; } .pt15px { padding-top: 15px; } .pt20px { padding-top: 20px; } .pt25px { padding-top: 25px; } .pt30px { padding-top: 30px; } .pt76px { padding-top: 76px; } .left-side-collapsed .logo { display: none; } .left-side-collapsed .header-section { margin-left: 0px; } .left-side-collapsed .left-side { width: 60px; top: 55px; } .left-side-collapsed .left-side-inner { padding: 0; } h5.left-nav-title { margin-left: 10px; color: #fff; } .left-side-collapsed .custom-nav { margin: 0px 0px 20px 0px; } .left-side-collapsed .custom-nav li a { text-align: center; padding: 10px 10px; position: relative; } .left-side-collapsed .custom-nav .menu-style .menu-width {width: 38px;margin: 0 10px;} .left-side-collapsed .custom-nav > li.menu-list > a { background-image: none; } .left-side-collapsed .custom-nav li a span { position: absolute; background: #c14b59; padding: 10px; left: 52px; top: 0; min-width: 190px; text-align: left; z-index: 100; display: none; } .left-side-collapsed .custom-nav li a span:after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: #c14b59; border-width: 6px; margin-top: -6px; } .left-side-collapsed .custom-nav li.active a span { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .left-side-collapsed .custom-nav ul, .left-side-collapsed .custom-nav .menu-list.nav-active ul { display: none; } .left-side-collapsed .custom-nav .menu-list.nav-hover ul { display: block; } .left-side-collapsed .custom-nav > li.nav-hover > a, .left-side-collapsed .custom-nav > li.nav-hover.active > a { background: #c14b59; border-radius: 0;} .left-side-collapsed .custom-nav > li.nav-hover > a img, .left-side-collapsed .custom-nav > li.nav-hover.active > a img{filter: brightness(0) invert(1);} /* The current page's own icon had no resting highlight at all in collapsed mode -- .nav-hover only carries a class while the mouse is actually over it, so as soon as the cursor moved away the active icon looked identical to every other icon. Give .active/.nav-active the same treatment always, not just while hovering. */ .left-side-collapsed .custom-nav > li.active > a, .left-side-collapsed .custom-nav > li.nav-active > a { background: #c14b59 !important; border-radius: 0; } .left-side-collapsed .custom-nav > li.active > a img, .left-side-collapsed .custom-nav > li.nav-active > a img { filter: brightness(0) invert(1) !important; } .left-side-collapsed .custom-nav li.nav-hover a span { display: block; color: #fff; } .left-side-collapsed .custom-nav li.nav-hover.active a span { background: #c14b59; color: #fff; } .left-side-collapsed .custom-nav li.nav-hover ul {display: block;position: absolute;top: 40px;left: 62px;margin: 0;min-width: 190px;z-index: 100; background-color: #F8F6F6;border: 1px solid #E8DEDF;border-bottom-left-radius: 8px;box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.08);border-bottom-right-radius: 8px;border-top-left-radius: 0px; border-top-right-radius: 0px;} .left-side-collapsed .custom-nav ul a { text-align: left; padding: 8px 10px; padding-left: 10px; } .left-side-collapsed .custom-nav ul a:hover { background: #c14b59; } .left-side-collapsed .custom-nav li a i { margin-right: 0; } .left-side-collapsed .main-content { margin-left: 60px; } .left-side-collapsed footer.sticky-footer { margin-left: 60px; width: calc(100% - 60px); } .left-side-collapsed .left-side { overflow: visible !important; } /* Collapsed sidebar: smooth expand on hover (full rail, no flyout popups) */ .left-side-collapsed .left-side, .left-side-collapsed .main-content, .sticky-header.left-side-collapsed .header-section, .sticky-header.left-side-collapsed .menu-right { transition: width 0.28s ease, margin-left 0.28s ease, left 0.28s ease, margin-right 0.28s ease; } .left-side-collapsed.sidebar-hover-expand .sticky-left-side { overflow-y: auto; } .left-side-collapsed.sidebar-hover-expand .left-side { width: 240px; overflow-y: auto !important; } .left-side-collapsed.sidebar-hover-expand .main-content { margin-left: 240px; } .left-side-collapsed.sidebar-hover-expand footer.sticky-footer { margin-left: 240px; width: calc(100% - 240px); } .left-side-collapsed.sidebar-hover-expand .logo { display: block; } .left-side-collapsed.sidebar-hover-expand .logo-icon { display: none !important; } .sticky-header.left-side-collapsed.sidebar-hover-expand .header-section { left: 240px; } .sticky-header.left-side-collapsed.sidebar-hover-expand .menu-right { margin-right: 270px; } /* Inline labels + submenus (same as expanded sidebar), not popups */ .left-side-collapsed.sidebar-hover-expand .custom-nav li a { text-align: left; justify-content: flex-start; } .left-side-collapsed.sidebar-hover-expand .custom-nav .menu-style .menu-width { width: auto; max-width: none; margin: 0; } .left-side-collapsed.sidebar-hover-expand .custom-nav li a span { position: static; display: inline !important; background: transparent; padding: 0; min-width: 0; /* color: inherit; */ } .left-side-collapsed.sidebar-hover-expand .custom-nav li a span:after { display: none; } .left-side-collapsed.sidebar-hover-expand .custom-nav > li.menu-list > a { background-image: url(../images/plus-white.png); background-repeat: no-repeat; background-position: 93% center; } .left-side-collapsed.sidebar-hover-expand .custom-nav > li.nav-active > a { background-image: url(../images/minus.png); } .left-side-collapsed.sidebar-hover-expand .custom-nav ul, .left-side-collapsed.sidebar-hover-expand .custom-nav .menu-list.nav-active ul { position: static; top: auto; left: auto; margin: 10px 0; min-width: 0; box-shadow: none; border-radius: 8px; z-index: auto; } .left-side-collapsed.sidebar-hover-expand .custom-nav > li.nav-active > ul { display: block; } .left-side-collapsed.sidebar-hover-expand .custom-nav > li:not(.nav-active) > ul { display: none; } .left-side-collapsed.sidebar-hover-expand .custom-nav .menu-list.nav-hover ul { display: none; } .left-side-collapsed.sidebar-hover-expand .custom-nav > li.nav-active.nav-hover > ul { display: block; } .left-side-collapsed.sidebar-hover-expand .custom-nav ul a { padding: 10px 5px 10px 20px; } .left-side-collapsed.sidebar-hover-expand .custom-nav li a i { margin-right: 10px; } /* No flyout labels/submenus when collapsed (rail expands on hover instead) */ .left-side-collapsed:not(.sidebar-hover-expand) .custom-nav li a span, .left-side-collapsed:not(.sidebar-hover-expand) .custom-nav li.nav-hover a span { display: none !important; } .left-side-collapsed:not(.sidebar-hover-expand) .custom-nav ul, .left-side-collapsed:not(.sidebar-hover-expand) .custom-nav .menu-list.nav-hover ul, .left-side-collapsed:not(.sidebar-hover-expand) .custom-nav .menu-list.nav-active ul { display: none !important; } /*---------------------------- HEADER SECTION -----------------------------*/ /* .header-section { background: #ed6f7e; border-bottom: 1px solid #ed6f7e; } */ .header-section::after { clear: both; display: block; content: ''; } .toggle-btn {width: 40px;height: 40px;cursor: pointer;float: left;-moz-transition: all 0.2s ease-out 0s;-webkit-transition: all 0.2s ease-out 0s;transition: all 0.2s ease-out 0s;background-color: #fce7e9;display: flex;justify-content: center;align-items: center;border-radius: 50px;margin: 6px 0 0;} .toggle-btn img{transition: all 0.2s ease-out 0s;} .toggle-btn:hover { background: #c14b59;} .toggle-btn:hover img{filter: brightness(0) invert(1);} .searchform input { box-shadow: none; float: left; font-size: 14px; height: 35px; margin: 7px 0 0 10px; padding: 10px; width: 220px; } .searchform input:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-color: #ddd; } .menu-right { float: right; margin-right: 15px; } .notification-menu { list-style: none; float: left;list-style: none;display: flex;justify-content: end;margin: 0;padding: 4px 0; } .notification-menu .notification-count{position: absolute;padding: 3px 6px;border-radius: 50px;background-color: #dc3545;font-size: 10px;color: #fff;line-height: 12px;top: 0px;left: -4px;box-shadow: 0 0 0 2px #fff;} .notification-menu > li {display: flex;align-items: center;padding: 0;position: relative;} .notification-menu li .top-icon{padding: 7px;border-radius: 50%;height: 35px;width: 35px;margin: 6px 0 0;display: flex;justify-content: center;align-items: center;margin-right: 10px;cursor: pointer;background-color: #fce7e9;transition: background-color 0.2s ease, transform 0.15s ease;} .notification-menu li .top-icon:hover{background-color: #c14b59;transform: translateY(-1px);} .notification-menu > li > a > i { margin-top: 2px; } .notification-menu .dropdown-toggle { padding: 12px 10px; border-color: #fff; background: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border: none; overflow:hidden; } .notification-menu .dropdown-toggle:hover, .notification-menu .dropdown-toggle:focus, .notification-menu .dropdown-toggle:active, .notification-menu .dropdown-toggle.active, .notification-menu .open .dropdown-toggle.dropdown-toggle { background: #fff; color: #ed6f7e;border: none;outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .notification-menu .dropdown-toggle img { vertical-align: middle; margin-right: 5px; /*width: 26px; */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .notification-menu .dropdown-toggle .caret { margin-left: 5px; } .notification-menu .dropdown-menu { border: 0; margin-top: 0px; -moz-border-radius: 2px 0 2px 2px; -webkit-border-radius: 2px 0 2px 2px; border-radius: 2px 0 2px 2px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 5px; } /* .notification-menu .dropdown-menu:after { border-bottom: 6px solid #1694d5; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; display: inline-block; right: 10px; position: absolute; top: -6px; } */ .notification-menu .dropdown-menu:after {display: none;} .notification-menu .dropdown-menu li { display: block; margin-bottom: 5px; float: none; background: none;padding: 0;border-radius: 4px;} .notification-menu .dropdown-menu li.new{background: #fce7e9;} .notification-menu .dropdown-menu .view-all-btn{padding: 10px;border-top: 1px solid #eee;text-align: center;margin-bottom: 0;} .notification-menu .dropdown-menu .view-all-btn a{padding: 0;color: #2f2f2f;font-weight: 500;font-size: 14px;text-decoration: none;transition: color .2s;} .notification-menu .dropdown-menu-usermenu li { padding: 0; text-align:left; position: relative;margin-bottom: 0;} .notification-menu .dropdown-menu-usermenu li .user-info-icon{top: 9px;width: 12px;position: absolute;left: 8px;transition: all 0.2s ease-out 0s;} .notification-menu .dropdown-menu-usermenu li a:hover .user-info-icon{filter: brightness(0) invert(1);} .notification-menu .dropdown-menu li a { color: #2f2f2f; font-size: 13px; padding: 7px 10px; padding-left: 30px;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .notification-menu .dropdown-menu li a:hover { background: var(--wv-plum-2, #94365F); color: #fff; border-radius: 4px;} .notification-menu .dropdown-menu li i { font-size: 13px;top: 0;float: right;position: relative;cursor: pointer;right: 0;} .notification-menu .dropdown-menu-head {padding: 0;min-width: 400px;max-width: 400px;border-radius: 10px;box-shadow: 0 4px 24px #2c3e501a;background: #fff;font-family: "Inter", sans-serif;} .notification-menu .title{font-size: 15px !important;color: #2f2f2f !important;font-weight: 500;margin-bottom: 0 !important;text-transform: capitalize !important;font-family: "Inter", sans-serif;background-color: transparent !important; padding: 12px !important;border-bottom: 1px solid #E2E8F6;} .notification-menu .dropdown-menu-head .notification-text{font-size: 13px;color: #1f1f1f;font-weight: 300;margin-bottom: 0;} .notification-menu .info-number { padding: 12px 15px; height: 50px; font-size: 16px; background: #fff; color: #333; border-color: #fff; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .notification-menu .dropdown-menu-usermenu { background: #ffffff; min-width: 200px; box-shadow: 0 3px 10px #44474a12;border-radius: 6px;} .notification-menu .dropdown-menu-head ul {border-top: 0; padding: 10px;scrollbar-width: thin; } .notification-menu .dropdown-menu-head li a {color: #2f2f2f;padding: 8px;opacity: 1;display: block;} .notification-menu .dropdown-menu-head li a:hover { background: none; color: #ed6f7e !important; text-decoration: none; } .notification-menu .btn-group { margin-bottom: 0; } .dropdown-list li { padding: 15px; overflow: hidden; border-bottom: 1px solid #eee; } .dropdown-list li:last-child { border-bottom: 0; } .dropdown-list .thumb { width: 36px; float: left; } .dropdown-list .thumb img { width: 100%; display: block; vertical-align: middle; } .dropdown-list .desc { margin-left: 45px; display: block; } .dropdown-list .desc h5 { font-size: 13px; margin-top: 7px; } .dropdown-list li:last-child { padding: 10px 15px; } .dropdown-list li .badge { float: right; } .user-list { width: 300px; } .user-list .progress { margin-bottom: 0; } .normal-list li a .label i { margin-right: 0; } .normal-list li a span.label { float: left; margin-right: 10px; padding: 5px; width: 20px; } .normal-list li a:hover { color: #ed6f7e !important; text-decoration: none; } .normal-list li .name { font-size: 13px; font-family: 'Arial' Helvetica, sans-serif; line-height: 21px; } .normal-list li .msg { font-size: 12px; line-height: normal; color: #999; display: block; } .info-number .badge { background: #FF6C60; border-radius: 2px; -webkit-border-radius: 2px; font-size: 10px; font-weight: normal; line-height: 13px; padding: 2px 5px; position: absolute; right: 4px; top: 10px; } /* ------------------------------ STICKY HEADER ---------------------------------*/ .sticky-header .logo { position: fixed; top: 0; left: 0; width: 240px; z-index: 101; background: #fff; height: 55px; box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; } .sticky-header .logo img { max-height: 40px; width: auto; } .sticky-header .left-side { /*top: 50px;*/ } .sticky-header .header-section { position: fixed; top: 0; left: 240px; width: 100%; z-index: 100; height: 55px; background-color: #fff; box-sizing: border-box; box-shadow: 0 1px 0 rgba(44,62,80,0.06), 0 2px 8px rgba(44,62,80,0.04); } .sticky-header .main-content { margin-top: 55px; } .sticky-header .menu-right { margin-right: 270px; } .sticky-header.left-side-collapsed .header-section { left: 60px; } .sticky-header.left-side-collapsed .menu-right { margin-right: 85px; } /* First nav row sits below fixed 55px logo bar (logo is position:fixed, out of flow) */ /* .sticky-header .sticky-left-side .custom-nav { margin-top: 55px; } */ .header-icons{list-style: none;display: flex;justify-content: end;margin: 0;padding: 10px 0;} .header-icons li{display: flex;align-items: center;padding: 0;} .header-icons li .top-icon{padding: 7px;border-radius: 50%;height: 35px;width: 35px;display: flex;justify-content: center;align-items: center;margin-right: 14px;cursor: pointer;background-color: #fce7e9;transition: background-color 0.2s ease, transform 0.15s ease;} .header-icons li .top-icon:hover{background-color: #c14b59;transform: translateY(-1px);} .header-icons li .top-icon.is-menu-open{background-color: #c14b59;} .top-icon img{transition: filter 0.2s ease;} .top-icon:hover img{filter: brightness(0) invert(1);} .top-icon.is-menu-open img{filter: brightness(0) invert(1);} /* ----------------------- DROPDOWN --------------------------*/ .dropdown-menu-head { background: #fff } .dropdown-menu-head .title { background: #fff; color: #ed6f7e; padding: 15px; text-transform: uppercase; font-size: 12px; margin: 0;text-align: left; } /*----------------------------- MAIN CONTENT ------------------------------*/ .main-content { margin-left: 240px; background: #F8F6F6; border: 1px solid #E8DEDF; } /* footer.sticky-footer is position:fixed at width:100%, so it never inherits .main-content's own margin-left -- its left edge (where "Copyright..." starts) sat directly under the fixed sidebar (which has a higher z-index), clipping the text. Kept in lockstep with every .main-content margin-left state below instead of a single static value, so it stays correct as the sidebar collapses/expands. */ footer.sticky-footer { margin-left: 240px; width: calc(100% - 240px); } .page-heading { padding: 5px 0px; position: relative; } .heading-top-area{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px dotted #ccc; padding: 5px 10px 10px;margin-bottom: 15px;} .heading-top-area h3{padding: 0px !important;} .page-heading h3 {font-size: 20px;padding: 9px 13px;margin-top: 0px; margin-bottom: 0px; /*IE 5.5-7*/ } .page-heading .breadcrumb {margin: 0; background: none;} .page-heading .breadcrumb a { color: #999999; } .page-heading .breadcrumb li.active { color: #ed6f7e; } .wrapper { padding:15px 15px; } .wrapper::after { clear: both; display: block; content: ''; margin-bottom: 30px; } .total-box {background-color: #fbe6e9;border-radius: 4px;max-width: fit-content;padding: 4px 10px;color: #c14b59;} .panel{border-radius: 16px;box-shadow: 0 2px 4px rgba(0,0,0,.1);border: 1px solid #E8DEDF;margin-bottom: 20px;background-color: #fff;} .panel-body { padding: 15px; } /*------------------------- BOXED VIEW -------------------------*/ .boxed-view { background: #b6b7ba; } .boxed-view .container { position: relative; background: #fff; padding: 0; } /*----------------------------------- HORIZONTAL PAGE VIEW -------------------------------------*/ .horizontal-menu-page { background: #EFF0F4; } .horizontal-menu-page .navbar { margin-bottom: 0; } .horizontal-menu-page .navbar-brand { padding: 5px 15px; min-height: 50px; } .horizontal-menu-page .navbar-default { background: #424F63; border: none; border-radius: 0; } .horizontal-menu-page .navbar-default .navbar-nav > .active > a, .horizontal-menu-page .navbar-default .navbar-nav > .active > a:hover, .horizontal-menu-page .navbar-default .navbar-nav > .active > a:focus, .horizontal-menu-page .navbar-default .navbar-nav > .open > a, .horizontal-menu-page .navbar-default .navbar-nav > .open > a:hover, .horizontal-menu-page .navbar-default .navbar-nav > .open > a:focus, .horizontal-menu-page .navbar-default .navbar-nav > li > a:hover, .horizontal-menu-page .navbar-default .navbar-nav > li > a:focus { background-color: #444444; color: #FFFFFF; } .horizontal-menu-page .navbar-default .navbar-nav > li > a { color: #FFFFFF; font-size: 13px; } .horizontal-menu-page .form-control { box-shadow: none; float: left; } .horizontal-menu-page .dropdown-menu { background-color: #444444; color: #fff; box-shadow: none; border: none; } .horizontal-menu-page .dropdown-menu > li > a { color: #fff; padding: 10px 20px; font-size: 12px; } .horizontal-menu-page .dropdown-menu > li > a:hover, .horizontal-menu-page .dropdown-menu > li > a:focus, .horizontal-menu-page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { background-color: #000; color: #ed6f7e; text-decoration: none; } .horizontal-menu-page .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #fff; } .horizontal-menu-page .navbar-default .navbar-toggle { border-color: #000; } .horizontal-menu-page .navbar-default .navbar-toggle .icon-bar { background-color: #000; } .horizontal-menu-page .navbar-default .navbar-toggle:hover, .horizontal-menu-page .navbar-default .navbar-toggle:focus { background-color: #FFFFFF; border-color: #FFFFFF !important; } .horizontal-menu-page .navbar-default .navbar-collapse, .horizontal-menu-page .navbar-default .navbar-form { border-color: #000; } .horizontal-menu-page .dropdown-toggle img { border-radius: 2px; -webkit-border-radius: 2px; margin-right: 5px; vertical-align: middle; width: 18px; } /*------------------- TOOLS --------------------*/ .tools { margin: -7px -5px; } .tools a { background: #E3E4E8; border-radius: 3px; -webkit-border-radius: 3px; color: #858582; float: left; margin-left: 3px; padding: 10px; text-decoration: none; } .tools a:hover { background: #ed6f7e; color: #fff; } /*-------------------------------- FOOTER CONTENT STYLES ---------------------------------*/ footer { background: #fff; padding: 15px; color: #7A7676; font-size: 12px; position: static; bottom: 0; width: 100%; border-top: 1px solid #eff0f4; } /* left:0 is required here -- footer.sticky-footer sits inside .main-content (which itself has margin-left:240px/60px depending on sidebar state), so with left left unset ("auto") the browser falls back to the element's in-flow static position, which already carries that same margin-left. That static-position fallback then stacked ON TOP OF this rule's own margin-left below, roughly doubling the footer's actual left offset (e.g. 481px instead of 240px) and leaving a large empty gap before "Copyright..." starts. Pinning left:0 removes the stacked fallback, so only margin-left (set per sidebar state elsewhere in this file) positions it. */ footer.sticky-footer { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; } .container footer { width: 79.5%; position: absolute; bottom: 0; } /*----------------------------------- HEADER STATISTICS STYLES -------------------------------------*/ .state-info { position: absolute; right: 15px; top: 20px; } .state-info .panel { float: right; margin-left: 15px; } .state-info .panel .summary { float: left; margin-right: 20px; } .state-info .panel .summary span { color: #49586e; font-size: 13px; font-weight: normal; text-transform: uppercase; } .state-info .panel .summary h3 { font-size: 20px; font-weight: bold; line-height: 20px; margin: 0; } .state-info .panel .summary h3.green-txt { color: #032539; } .state-info .panel .summary h3.red-txt { color: #fc8675; } .chart-bar { float: right; margin-top: 5px; } /*----------------------------------- GENERAL STATISTICS STYLES -------------------------------------*/ .state-overview { color: #fff; } .state-overview .panel { padding: 23px 20px; } .state-overview .purple { background: #2d5dab; box-shadow: 0 5px 0 #264e8f; } .state-overview .red { background: #ed5843; box-shadow: 0 5px 0 #cd4734; } .state-overview .blue { background: #089ee4; box-shadow: 0 5px 0 #0c7fb5; } .state-overview .green { background: #4acacb; box-shadow: 0 5px 0 #42b5b6; } .state-overview .dark-blue { background: #328acd; box-shadow: 0 5px 0 #2a79b5; } .state-overview .yellow{ background: #eba24c; box-shadow: 0 5px 0 #d79240; } .state-overview .dark-red { background: #e23e3e; box-shadow: 0 5px 0 #d02e2e; } .state-overview .green { background: #49a70b; box-shadow: 0 5px 0 #3b8b06; } .state-overview .light-blue { background: #0cbdae; box-shadow: 0 5px 0 #0aada0; } .state-overview .dark-purple { background: #c8399e; box-shadow: 0 5px 0 #ae2886; } .title a{color:#fff !important; text-decoration: none;} .value a{color:#fff !important; text-decoration: none;} .title a:hover{color:#f5f5f5; text-decoration:underline;} .value a:hover{color:#f5f5f5; text-decoration:underline;} .state-overview .symbol, .state-overview .state-value { display: inline-block; } .state-overview .symbol { width: 35%; } .state-overview .symbol i { font-size: 40px; } .state-overview .state-value { width: 100%; } .state-overview .state-value .value { font-size: 17px; font-weight: bold; margin-bottom: 5px; } .state-overview .state-value .title { font-size: 17px; margin-bottom: 20px; } /*----------------------------------- MORE STATISTICS BOX -------------------------------------*/ .panel.deep-purple-box { background: #49586e; box-shadow: 0 5px 0 #424f63; color: #fff; } ul.bar-legend { list-style-type: none; margin-top: 55px; padding-left: 0px; } ul.bar-legend li { display: block; margin-bottom: 10px; } ul.bar-legend li span { float: left; margin-right: 10px; width: 20px; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; } ul.bar-legend li span.blue { background: #5ab6df; } ul.bar-legend li span.green { background: #4bcacc; } ul.bar-legend li span.purple { background: #6a8bbe; } ul.bar-legend li span.red { background: #fb8575; } /*----------------------------------- REVENUE STATES STYLES -------------------------------------*/ .revenue-states h4 { font-size: 14px; font-weight: bold; text-transform: uppercase; color: #49586e; } .revenue-states .icheck .single-row { float: left; width: auto; } .revenue-states .icheck .checkbox { padding-left: 0; margin-top: 0; } .revenue-states .icheck .checkbox label { font-size: 12px; } ul.revenue-nav { list-style-type: none; float: right; margin-top: 20px; padding: 0; } ul.revenue-nav li { display: inline-block; margin-left: 5px; } ul.revenue-nav li a { background: #4a596f; color: #fff; padding: 5px 10px; text-decoration: none; border-radius: 3px; text-transform: uppercase; font-size: 12px; } ul.revenue-nav li a:hover, ul.revenue-nav li a:focus, ul.revenue-nav li.active a { background: #ed6f7e; color: #fff; } .revenue-chart { width: 100%; height: 300px; text-align: center; margin: 12px auto; } ul.revenue-short-info { list-style-type: none; padding: 0; } ul.revenue-short-info li { float: left; width: 25%; } ul.revenue-short-info li h1 { font-size: 18px; font-weight: lighter; margin-bottom: 0; } ul.revenue-short-info li p { font-size: 12px; color: #bdbdbd; } ul.revenue-short-info .red { color: #fb8575; } ul.revenue-short-info .blue { color: #3bcddd; } ul.revenue-short-info .green { color: #ed6f7e; } ul.revenue-short-info .purple { color: #7ea8e1; } /*----------------------------------- GOAL PROGRESS STYLES -------------------------------------*/ ul.goal-progress { list-style-type: none; padding: 0; } ul.goal-progress li { display: inline-block; width: 100%; border-bottom: 1px dashed #e8dedf; margin-bottom: 15px; padding-bottom: 15px; } ul.goal-progress li .prog-avatar { width: 40px; height: 40px; float: left; margin-right: 25px; } ul.goal-progress li .prog-avatar img { width: 100%; border-radius: 50%; -webkit-border-radius: 50%; } ul.goal-progress li .details { } ul.goal-progress li .title { margin-bottom: 10px; } ul.goal-progress li .title a { color: #6a8abe; } ul.goal-progress li .title a:hover { color: #ed6f7e; } ul.goal-progress li .progress { margin-bottom: 0px; } /*----------------------------------- PROSPECTIVE LEADS - CHARTS -------------------------------------*/ .pros-title { font-size: 14px; color: #535351; text-transform: uppercase; font-weight: bold; margin: 0 0 20px 0; } .pros-title span { color: #dddddd; } ul.pros-chart { list-style-type: none; padding: 0; display: inline-block; width: 100%; margin-top: 15px; } ul.pros-chart li { float: left; margin-right: 14%; } ul.pros-chart li:last-child { margin-right: 0; } .p-chart-title { font-size: 12px; margin: 5px 0 0 0; } .v-title { font-size: 12px; } .v-value { font-size: 18px; color: #343434; margin-bottom: 5px; } .v-info { font-size: 12px; margin-top: 5px; } /*------------------------------------------- GREEN BOX [EASY PIE CHART] STYLES -------------------------------------------*/ .green-box { background: none repeat scroll 0 0 #ed6f7e; box-shadow: 0 5px 0 #5bb996; color: #fff; } .knob { text-align: center; } .percent { color: rgba(255, 255, 255, 0.7); display: inline-block; font-size: 25px; z-index: 2; position: absolute; width: 90px; padding-top: 35px; } .percent .sm { font-size: 11px; display: block; padding-top: 32px; } .extra-pad { padding: 25px 15px; } /*------------------------------------ BLUE BOX [TWITTER FEED] STYLES -------------------------------------*/ .panel.blue-box { background: none repeat scroll 0 0 #5ab5de; box-shadow: 0 5px 0 #51a3c7; color: #fff; } .twt-info h3 { font-size: 16px; font-weight: bold; margin: 10px 0 30px 0; text-align: center; } .twt-info p { font-size: 18px; line-height: 25px; font-style: italic; margin: 0 0 20px 0; text-align: center; } .twt-info p a { color: #98fdf4; } .custom-trq-footer { background: none repeat scroll 0 0 #4eb6b7; box-shadow: 0 5px 0 #46a3a4; color: #fff; border-top: none; } ul.user-states { list-style-type: none; padding: 20px 0; } ul.user-states li { text-align: center; float: left; width: 33%; font-size: 18px; } .usr-info .thumb { width: 80px; height: 80px; border-radius: 50%; -webkit-border-radius: 50%; } .media.usr-info > .pull-left { margin-right: 20px; margin-top: 10px; } .usr-info h4 { color: #658585; margin-bottom: 0; } .usr-info .media-body span { color: #ea755c; font-size: 12px; margin-bottom: 20px; display: inline-block; } .usr-info .media-body p { color: #b6bcbc; } /*------------------------------ TODOLIST STYLES ------------------------------*/ .todo-title { margin-right: 25px; padding-top: 5px; } .to-do-list { padding-left: 0; margin-top: -10px; font-size: 12px; } .to-do-list li { padding: 17px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; cursor: move; list-style: none; font-size: 12px; background: #fff; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); } .to-do-list li p { margin-bottom: 0px; } .todo-actionlist { position: absolute; right: -5px; top: 22px; } .todo-actionlist a { height: 24px; width: 24px; display: inline-block; float: left; } .todo-actionlist a i { height: 24px; width: 24px; display: inline-block; text-align: center; line-height: 24px; color: #ccc; } .todo-actionlist a:hover i { color: #666; } .todo-done i { font-size: 14px; } .todo-remove i { font-size: 10px; } .line-through { text-decoration: line-through; } .todo-action-bar { margin-top: 20px; } .drag-marker { height: 17px; display: block; float: left; width: 7px; position: relative; top: 6px; } .drag-marker i { height: 2px; width: 2px; display: block; background: #ccc; box-shadow: 5px 0 0 0px #ccc, 0px 5px 0 0px #ccc, 5px 5px 0 0px #ccc, 0px 10px 0 0px #ccc, 5px 10px 0 0px #ccc, 0px 15px 0 0px #ccc, 5px 15px 0 0px #ccc; -webkit-box-shadow: 5px 0 0 0px #ccc, 0px 5px 0 0px #ccc, 5px 5px 0 0px #ccc, 0px 10px 0 0px #ccc, 5px 10px 0 0px #ccc, 0px 15px 0 0px #ccc, 5px 15px 0 0px #ccc; -moz-box-shadow: 5px 0 0 0px #ccc, 0px 5px 0 0px #ccc, 5px 5px 0 0px #ccc, 0px 10px 0 0px #ccc, 5px 10px 0 0px #ccc, 0px 15px 0 0px #ccc, 5px 15px 0 0px #ccc; } /* To-Do Check*/ .to-do-list li .todo-check input[type=checkbox] { visibility: hidden; } .todo-check { width: 20px; position: relative; margin-right: 10px; margin-left: 10px; margin-top: 5px; } .todo-check label { cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; left: 0px; -webkit-border-radius: 2px; border-radius: 2px; border: #ccc 1px solid; } .todo-check label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 13px; height: 8px; background: transparent; top: 3px; left: 3px; border: 3px solid #cfcfcf; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .todo-checklabel:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } .todo-check input[type=checkbox]:checked+label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .todo-entry { float: left; width: 85%; } /*------------------- BADGE STYLES --------------------*/ /* .badge.badge-primary { background: #8075c4; } .badge.badge-success { background: #a9d86e; } .badge.badge-warning { background: #FCB322; } .badge.badge-important { background: #ff6c60; } .badge.badge-info { background: #41cac0; } */ .badge.badge-inverse { background: #2A3542; } /* .badge-light { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 4px; border: 1px solid transparent; min-width: 10px; line-height: 1; font-family: 'Inter'; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 4px; margin-right:5px; } */ /* .badge-light.badge-light-primary { background-color: #fbe6e9; color: #ed6f7e; } */ .guest-panel { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; } .guest-panel .title { margin-top: 0; font-size: 14px; font-weight: 400; color: #2f2f2f; margin-bottom: 10px; } .guest-panel .number { font-size: 21px; font-weight: 600; color: #2f2f2f; } .guest-panel .number a { text-decoration: none; color: #2f2f2f; } .badge { display: inline-block; font-size: 11px; font-weight: 400; padding: 4px 6px; border: 1px solid transparent; min-width: 10px; line-height: 1; font-family: 'Inter'; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 4px; margin-right:5px; } .badge-send{background-color: #fce7e9;color: #ed6f7e;font-weight: 500;border-left: 2px solid #ed6f7e;border-radius: 2px;font-weight: 500;} .badge.badge-default { background-color: #B0BEC5 } .badge.badge-primary { background-color: #ed6f7e } .badge.badge-secondary { background-color: #323a45 } .badge.badge-success { background-color: #19943C } .badge.badge-warning { background-color: #E29B12 } .badge.badge-info { background-color: #29B6F6 } .badge.badge-danger { background-color: #E20F0F } .badge.badge-important { background-color: #E20F0F } /*-------------------------------- CAROUSEL STYLES ---------------------------------*/ .carousel-indicators li { background: rgba(0, 0, 0, 0.2); border: none; transition: background-color 0.25s ease 0s; -moz-transition: background-color 0.25s ease 0s; -webkit-transition: background-color 0.25s ease 0s; } .carousel-indicators .active { background: #333; height: 10px; margin: 1px; width: 10px; } .carousel-indicators.out { bottom: -5px; } .carousel-indicators.out { bottom: -5px; } .carousel-control { color: #999999; text-shadow: none; width: 45px; } .carousel-control i { display: inline-block; height: 25px; left: 50%; margin-left: -10px; margin-top: -10px; position: absolute; top: 50%; width: 20px; z-index: 5; } .carousel-control.left, .carousel-control.right { background: none; filter: none; } .carousel-control:hover, .carousel-control:focus { color: #CCCCCC; opacity: 0.9; text-decoration: none; } .carousel-inner h3 { font-weight: 300; font-size: 16px; margin: 0; } .carousel-inner { margin-bottom: 15px; } /* -------------------------------- CODE HIGHLIGHT STYLE -----------------------------------*/ .highlight pre code { color: #333333; font-size: inherit; } .nt { color: #2F6F9F; } .na { color: #4F9FCF; } .s { color: #D44950; } .c { color: #999999; } /*------------------------- BUTTON STYLES ---------------------------*/ .btn-block { padding: 6px 12px; } .btn-gap .btn { float: left; margin-right: 5px; } .btn-small { padding: 5px 10px !important; font-size: 12px !important; line-height: 1.5 !important; border-radius: 3px !important; } /*---------------------- STAR RATINGS STYLES -----------------------*/ .rating { unicode-bidi: bidi-override; direction: rtl; font-size: 30px; } .rating span.star, .rating span.star { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; } .rating span.star:hover, .rating span.star:hover { cursor: pointer; } .rating span.star:before, .rating span.star:before { content: "\f006"; padding-right: 5px; color: #BEC3C7; } .rating span.star:hover:before, .rating span.star:hover:before, .rating span.star:hover ~ span.star:before, .rating span.star:hover ~ span.star:before { content: "\f005"; color: #ed6f7e; } /*---------------------------- SLIDER STYLE ----------------------------*/ .slider-table tr td { padding: 30px 0 !important; border: none !important; } /*---------------------------------- TABS & ACCORDIONS STYLE -------------------------------------*/ .panel-heading .nav { border: medium none; font-size: 13px; margin: -7px -15px -7px; } .panel-heading.custom-tab { padding: 8px 15px; margin-bottom:15px; } .custom-tab ul > li > a { display: block; padding: 10px 15px !important; } .custom-tab { background: #ed6f7e !important; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-bottom: none; } .custom-tab.dark-tab { background: #424F63 !important; } .custom-tab.turquoise-tab { background: #ed6f7e !important; } .custom-tab.blue-tab { background: #5BC0DE !important; } .custom-tab.yellow-tab { background: #F0AD4E !important; } .custom-tab.dark-tab li a, .custom-tab.turquoise-tab li a, .custom-tab.blue-tab li a, .custom-tab.yellow-tab li a { color: #fff !important; } .custom-tab.dark-tab li.active a, .custom-tab.dark-tab li a:hover { color: #424F63 !important; } .custom-tab.turquoise-tab li a:hover, .custom-tab.turquoise-tab li.active a { color: #ed6f7e !important; } .custom-tab.blue-tab li a:hover, .custom-tab.blue-tab li.active a { color: #5BC0DE !important; } .custom-tab.yellow-tab li a:hover, .custom-tab.yellow-tab li.active a { color: #F0AD4E !important; } .custom-tab li a:hover, .custom-tab li.active a { border-radius: 0 !important; background: #f8097b !important; color: #fff !important; } .panel-heading .nav > li > a, .panel-heading .nav > li.active > a, .panel-heading .nav > li.active > a:hover, .panel-heading .nav > li.active > a:focus { border-width: 0; border-radius: 0; } .panel-heading .nav > li > a { color: #fff; } .panel-heading .nav > li.active > a, .panel-heading .nav > li > a:hover { color: #ed6f7e; background: #fff; } .panel-heading .nav > li:first-child.active > a, .panel-heading .nav > li:first-child > a:hover { border-radius: 4px 0 0 0 !important; -webkit-border-radius: 4px 0 0 0 !important; } .tab-right { height: 45px; } .panel-heading.tab-right .nav > li:first-child.active > a, .tab-right.panel-heading .nav > li:first-child > a:hover { border-radius: 0 !important; -webkit-border-radius: 0 !important; } .panel-heading.tab-right .nav > li:last-child.active > a, .tab-right.panel-heading .nav > li:last-child > a:hover { border-radius: 0 4px 0 0 !important; -webkit-border-radius: 0 4px 0 0 !important; } .panel-heading.tab-right .nav-tabs > li > a { margin-left: 1px; margin-right: 0px; } .panel-heading.dark { background: #444444; color: #fff; } .panel-heading.dark a:hover, .panel-heading.dark a:focus { color: #fff; } /*------------------------------ CALENDAR STYLES -------------------------------*/ .has-toolbar.fc { margin-top: 50px; } .fc-header-title { display: inline-block; margin-top: -45px; vertical-align: top; } .fc-header-center { text-align: left; } .fc-header-left { text-align: left; width: 18%; } .fc-view { margin-top: -50px; overflow: hidden; width: 100%; } .fc-state-default, .fc-state-default .fc-button-inner { background: #fff !important; border-color: #DDDDDD; border-style: none solid; color: #646464; } .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-active, .fc-button-today .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner { background: #ed6f7e !important; color: #fff !important; } .fc-event-skin { background-color: #5d708c !important; border-color: #5d708c !important; color: #FFFFFF !important; } .fc-grid th { height: 45px; line-height: 45px; text-align: center; background: #ed6f7e !important; color: #fff; text-transform: uppercase; } .fc-widget-header { border-color: #62c6a0; } .fc-widget-content { border-color: #ebebeb; background: #fff; } .fc-header-title h2 { font-size: 18px !important; color: #474752; font-weight: 300; padding: 0 10px; } .external-event { cursor: move; display: inline-block !important; margin-bottom: 6px !important; margin-right: 6px !important; padding: 8px; } #external-events p input[type="checkbox"] { margin: 0; } #external-events .external-event { font-size: 11px; font-family: 'Arial'; font-weight: normal; } .drg-event-title { font-weight: 300; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } .fc-content .fc-event { border-radius: 4px; webkit-border-radius: 4px; padding: 4px 6px; } .drp-rmv { padding-top: 10px; margin-top: 10px; } /*--------------------------- FONTAWESOME STYLES ----------------------------*/ .fontawesome-icon-list { margin-top: -20px; } .fontawesome-icon-list, .fontawesome-icon-list a { color: #7a7676; } .fontawesome-icon-list a:hover { color: #49586E; } .fontawesome-icon-list a { margin-bottom: 10px; display: block; } .fontawesome-icon-list a i { padding-right: 10px; } .fontawesome-icon-list .page-header { margin: 15px 0 20px 0; font-size: 22px; color: #49586E; } /*---------------------------- BASIC TABLE STYLE -----------------------------*/ .general-table a { color: #49586E; } /*-------------------------------- DYNAMIC TABLE STYLE ----------------------------------*/ .table-advance tr td { vertical-align: middle !important; } .no-border { border-bottom: none; } .dataTables_length, .dataTables_filter { padding: 15px 0; } .dataTables_info { padding: 15px 0 0 !important; } .dataTables_filter { float: right; } .dataTables_length select { width: 65px; padding: 5px 8px; } .dataTables_length label, .dataTables_filter label { font-weight: 300; } .dataTables_filter label { width: 100%; } .dataTables_filter label input { width: 78%; } .border-top { border-top: 1px solid #ddd; } .dataTables_paginate.paging_bootstrap.pagination li { float: left; margin: 0 1px; border: 1px solid #ddd; list-style: none; } .dataTables_paginate.paging_bootstrap.pagination li.disabled a { color: #c7c7c7; } .dataTables_paginate.paging_bootstrap.pagination li a { color: #797979; padding: 5px 10px; display: inline-block; } .dataTables_paginate.paging_bootstrap.pagination li:hover a, .dataTables_paginate.paging_bootstrap.pagination li.active a { color: #fff; background: #ed6f7e; text-decoration: none; } .dataTables_paginate.paging_bootstrap.pagination li:hover, .dataTables_paginate.paging_bootstrap.pagination li.active { border-color: #032539; } .dataTables_paginate.paging_bootstrap.pagination li.disabled:hover, .dataTables_paginate.paging_bootstrap.pagination li.disabled:hover a { color: #C7C7C7; background: #fff; border-color: #DDDDDD; cursor: no-drop; } .dataTables_paginate.paging_bootstrap.pagination { float: right; margin-bottom: 15px; } .dataTable tr:last-child { border-bottom: 1px solid #ddd; } .general-table .progress { margin-bottom: 0; } .table-bordered {border: none;} .table-bordered thead tr th:first-child{border-radius: 0px 0px 0px 0px;} .table-bordered thead tr th:last-child{border-radius: 0px 0px 0px 0px;} .adv-table table.display thead th a{color: #c14b59;} .adv-table table tr td { padding: 12px 14px; border: none; border-bottom: 1px solid #F1E4E6; letter-spacing: 0.2px; line-height: 1.5; white-space: nowrap; transition: background-color 0.15s ease;} .adv-table table tr td a{color: #2f2f2f; font-weight: 500;} .adv-table table tr td .form-control{height: 28px;} .adv-table table.display thead th { border-bottom: 2px solid #f6dfe2; padding: 14px 16px; font-weight: 600; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; background-color: #FCE7E9; color: #c14b59;border-top: none;border-left: none;border-right: none;} .adv-table table.display tfoot th{font-weight: 600; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #b98a90; background-color: #FFFBFB; padding: 10px 16px; border-top: 1px solid #F1E4E6; border-bottom: none; white-space: nowrap;} .dataTable tr.odd.gradeA td.sorting_1, .dataTable tr.odd td.sorting_1, .dataTable tr.even.gradeA td.sorting_1 { background: none; } .dataTable td.details { background-color: #424F63; color: #fff; } .dataTable td.details table tr td, .dataTable tr:last-child { border: none; } .adv-table table.display tr.odd.gradeA { background-color: #FCFAFA; } .adv-table table.display tr.even.gradeA { background-color: #FFFFFF; } .adv-table table.display tr.odd.gradeA:hover, .adv-table table.display tr.even.gradeA:hover, .adv-table table.display tbody tr:hover { background-color: #FFF3F4 !important; } .adv-table .dataTables_filter label input { float: right; /*margin-left: 10px;*/ width: 78%; padding: 10px; border: solid 1px gainsboro; border-radius:0px; -webkit-transition: box-shadow 0.3s, border 0.3s; -moz-transition: box-shadow 0.3s, border 0.3s; -o-transition: box-shadow 0.3s, border 0.3s; transition: box-shadow 0.3s, border 0.3s; } .adv-table .dataTables_filter label input:focus { float: right; /*margin-left: 10px;*/ width: 78%; padding: 10px; border: solid 1px #707070; border-radius:0px; -webkit-box-shadow: 0 0 5px 1px #ffc7cd; -moz-box-shadow: 0 0 5px 1px #ffc7cd; box-shadow: 0 0 5px 1px #ffc7cd;} .adv-table .dataTables_filter label { line-height: 33px; width: 100%; } .adv-table .dataTables_length select { display: inline-block; border-radius:0px; margin: 0 10px 0 0; padding: 5px 8px; width: 65px; border: solid 1px gainsboro; border-radius:0px; -webkit-transition: box-shadow 0.3s, border 0.3s; -moz-transition: box-shadow 0.3s, border 0.3s; -o-transition: box-shadow 0.3s, border 0.3s; transition: box-shadow 0.3s, border 0.3s; } .adv-table .dataTables_length select:focus{ border: solid 1px #707070; border-radius:0px; -webkit-box-shadow: 0 0 5px 1px #ffc7cd; -moz-box-shadow: 0 0 5px 1px #ffc7cd; box-shadow: 0 0 5px 1px #ffc7cd;} table.display tr.gradeA{background-color: #fff;} .adv-table .dataTables_info, .dataTables_paginate { padding: 15px 0; } .adv-table .dataTables_length, .adv-table .dataTables_filter { padding: 15px 0; width:auto; } .cke_chrome { border: none !important; } .editable-table .dataTables_filter { width: 80%; } .dataTable tr.odd.gradeX td.sorting_1, .dataTable tr.even.gradeX td.sorting_1, table.display tr.even.gradeX, table.display tr.gradeX, tr.even.gradeU td.sorting_1, tr.even td.sorting_1, table.display tr.even.gradeC, table.display tr.gradeC, tr.odd.gradeC td.sorting_1, table.display tr.even.gradeU, table.display tr.gradeU, tr.odd.gradeU td.sorting_1 { background: none !important; } .puckup-drop-box{ display: flex; align-items: center; justify-content: start; min-width: 287px; gap: 10px; padding: 5px 10px; background-color: #f8f6f6; border: 1px solid #ccc; border-radius: 16px; height: 40px;margin-left: 10px; } .assigned-box{ display: flex; align-items: center; justify-content: start; min-width: 150px; gap: 10px; padding: 5px 10px; background-color: #f8f6f6; border: 1px solid #ccc; border-radius: 16px; margin-left: 10px; height: 40px; } /*---------------------------- EDITABLE TABLE STYLE -----------------------------*/ .editable-table table input { width: 95% !important; } .editable-table table td a { color: #49586E; } .editable-table table td a:hover { color: #ed6f7e; } /*-------------------------- Media Gallery ----------------------------*/ .media-filter { float: left; margin: 10px 0; padding-left: 0; } .media-filter li { float: left; margin-right: 2px; list-style: none; } .media-filter li a { background: #ed6f7e; border-color: #ed6f7e; color: #fff; padding: 5px 10px; border-radius: 2px; -webkit-border-radius: 2px; text-decoration: none; font-size: 12px; } .media-filter li a:hover, .media-filter li a:focus { background: #4c9b7e; border-color: #4c9b7e; color: #fff; } .media-gal { float: left; width: 100%; margin-top: 20px; } .media-gal .item { float: left; } .media-gal .item { margin-bottom: 1%; margin-right: 1%; width: 233px; background: #EFF0F4; color: #7A7676; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .media-gal .item:hover { background: #ed6f7e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; color: #fff; } .media-gal .item:hover img { opacity: .3; } .media-gal .item p { margin-bottom: 10px; margin-top: 10px; text-align: center; } .media-gal .item img { height: 200px; width: 100%; } .img-modal img { width: 100%; margin-bottom: 10px; } /*----------------------------------- Start: Recommended Isotope styles -------------------------------------*/ /* Isotope Filtering */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /*Isotope CSS3 transitions */ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /*disabling Isotope CSS3 transitions */ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /*------------------------------------*/ /*FORM STYLES*/ /*------------------------------------*/ .sm-input { width: 170px !important; } .form-horizontal.adminex-form .form-group { border-bottom: 1px solid #E8DEDF; padding-bottom: 15px; margin-bottom: 15px; } .form-horizontal.adminex-form .form-group strong{ color:#ed6f7e; } /* .form-horizontal.adminex-form .form-group:last-child { padding-bottom: 8px; margin-bottom: 8px; } */ .form-horizontal.adminex-form .form-group:last-child strong{ color:#ed6f7e; } .form-horizontal.adminex-form .form-group .help-block { margin-bottom: 0; } .invitation-card-form .form-group{ border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .invitation-card-form .border-bottom-style{ border-bottom: 1px solid #E8DEDF; padding-bottom: 15px; margin-bottom: 15px; } .round-input { border-radius: 500px; -webkit-border-radius: 500px; } .m-bot15 { margin-bottom: 15px; } .form-horizontal.adminex-form .checkbox-inline > input { margin-top: 1px; border: none; } .iconic-input { position: relative; } .iconic-input i { color: #CCCCCC; display: block; font-size: 16px; height: 16px; margin: 8px 5px 8px 10px; position: absolute; text-align: center; width: 16px; } .iconic-input input { padding-left: 30px !important; } .iconic-input.right input { padding-left: 10px !important; padding-right: 30px !important; } .iconic-input.right i { float: right; right: 5px; } input.spinner[type="text"], input.spinner[type="password"], input.spinner[type="datetime"], input.spinner[type="datetime-local"], input.spinner[type="date"], input.spinner[type="month"], input.spinner[type="time"], input.spinner[type="week"], input.spinner[type="number"], input.spinner[type="email"], input.spinner[type="url"], input.spinner[type="search"], input.spinner[type="tel"], input.spinner[type="color"] { background: url("../images/input-spinner.gif") right no-repeat !important; } /*-------------------- CK EDITORS ---------------------*/ .cke_chrome { box-shadow: 0 0 1px #c5c6ca !important; } .cke_top, .cke_bottom { background: #EFF0F4 !important; box-shadow: none !important; border-top: none !important; border-bottom: none !important; } /*-------------------------- FORM VALIDATION ---------------------------*/ .cmxform .form-group label.error { display: inline; margin: 5px 0; color: #FF6C60; font-weight: 400; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus, .cmxform .form-group input.error, .cmxform .form-group textarea.error { border-color: #FF6C60 !important; } #signupForm label.error { display: inline; margin: 5px 0px; width: auto; color: #FF6C60; } .checkbox, .checkbox:hover, .checkbox:focus { border: none; } /*-------------------------- FORM WIZARD STYLES ---------------------------*/ .widget-container .stepy-tab ul, .block-tabby ul.stepy-titles { border-bottom: none; padding: 0; } .fw-title { color: #424F63; margin-bottom: 30px; } .block-tabby ul.stepy-titles { margin-bottom: 10px; } .widget-container .stepy-tab ul li.current-step, .block-tabby ul li.current-step { border: none; background: #ed6f7e!important; color: #fff; } .widget-container .stepy-titles li, .stepy-titles li { background: #fff; margin-right: 15px; margin-bottom: 15px; border-radius: 5px; -webkit-border-radius: 5px; } .widget-container .stepy-titles li span { font-size: 12px; } .widget-container .step { margin-bottom: 50px; border-bottom: 1px solid #ddd; padding-bottom: 50px; } .widget-container .step legend { color: #ed6f7e; font-size: 16px; border-bottom: 1px dotted #ddd; padding-bottom: 10px; } .widget-container input.form-control { padding: 0 10px; } .stepy-error { position: absolute; bottom: 105px; } .stepy-error label.error { font-size: 12px; font-weight: normal; } .step input, .step textarea, .step select, .widget-content label.checkbox, .widget-content label.radio { margin-left: 0 !important; padding-left: 0; } .widget-content label.checkbox input, .widget-content label.radio input { margin-right: 10px; } /*---------------------------------------------- CUSTOM CHECKBOX & RADIO BUTTONS STYLES ----------------------------------------------*/ .icheck div, .icheck .disabled { float: left; } .icheck div { margin-right: 10px; } .icheck label { font-weight: normal; } .icheck .checkbox, .icheck .radio { margin-bottom: 10px; } .icheck .single-row { display: inline-block; width: 100%; } /*------------------------- MULTI SELECT STYLE --------------------------*/ .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover { background-color: #ed6f7e; color: #FFFFFF; cursor: pointer; text-decoration: none; } .ms-container .ms-list, .ms-container .ms-list.ms-focus { box-shadow: none !important; } .ms-container .ms-list.ms-focus { border: 1px solid #ed6f7e; } .ms-selectable .search-input, .ms-selection .search-input { margin-bottom: 10px; } /*--------------------------------- SPINNER STYLE ----------------------------------*/ .spinner-buttons.input-group-btn { width: 20%; } .spinner-buttons.input-group-btn .btn-xs { line-height: 1.16; } .spinner-buttons.btn-group-vertical > .btn:last-child:not(:first-child) { border-radius: 0 0 4px 0; -webkit-border-radius: 0 0 4px 0; } .spinner-buttons.btn-group-vertical > .btn:first-child:not(:last-child) { border-radius: 0 4px 0 0; -webkit-border-radius: 0 4px 0 0; } /*---------------------------- FILE UPLOAD STYLES ----------------------------*/ .fileupload .btn { margin-left: 0; } /*---------------------------- TAGS INPUT STYLE -----------------------------*/ div.tagsinput span.tag { background: #ed6f7e !important; border-color: #ed6f7e; color: #fff; border-radius: 15px; -webkit-border-radius: 15px; padding: 2px 10px; } div.tagsinput span.tag a { color: #43886e; } /*--------------------------- SLIDE TOGGLE STYLES ----------------------------*/ .slide-toggle div { float: left; margin-right: 20px; } /*-------------------------- PICKERS STYLES ---------------------------*/ .add-on { float: right; margin-top: -47px; padding: 3px; text-align: center; } .add-on .btn { padding: 14px 12px; } .colorpicker.dropdown-menu { min-width: 130px; padding: 5px; } .datepicker.dropdown-menu { z-index: 1060; padding: 5px; margin-top: 50px;} .custom-date-range .input-group-addon { border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } /*------------------------------------- GOOGLE MAPS & VECTOR MAPS STYLE -------------------------------------*/ .gmaps { height: 350px; width: 100%; } .vmaps { width: 100%; height: 400px; } /*-------------------------- LOCK SCREEN STYLE --------------------------*/ .lock-screen { background: url(../images/body-bg.jpg) no-repeat fixed; background-size: cover; width: 100%; height: 100%; } .lock-wrapper { margin: 18% auto; max-width: 400px; } .lock-box { padding: 20px; position: relative; width: 100%; display: inline-block; } .lock-wrapper img { position: absolute; left: 36%; top: -80px; border-radius: 50%; -webkit-border-radius: 50%; border: 6px solid #fff; } .lock-wrapper h1 { text-align: center; color: #ed6f7e; font-size: 18px; text-transform: uppercase; padding: 10px 0 10px; } .lock-wrapper .locked { position: absolute; width: 50px; height: 50px; line-height: 36px; border-radius: 50%; -webkit-border-radius: 50%; display: inline-block; color: #fff; text-align: center; background: #ed6f7e; top: -25px; right: 125px; border: 4px solid #fff; font-size: 22px; } .lock-wrapper input, .lock-wrapper input:focus { background: #eaeaec; border-color: #eaeaec; width: 85% !important; height: 40px; float: left; } .btn-lock { background: #ed6f7e; color: #fff; height: 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-lock:hover { background: #23608f; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /*-------------------------------- PRICING TABLE ---------------------------------*/ .price-head { padding: 10px 0 50px; } .price-head h1 { font-size: 32px; font-weight: normal; color: #49586e; } .pricing-table { background: #fff; text-align: center; padding: 0 0 25px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 5px 0 #e5e5e5; width: 110%; margin-left: -10px; } .pricing-table.most-popular { position: relative; } .most-popular { background: #ed6f7e; color: #fff; box-shadow: 0 5px 0 #60b193; } .most-popular .pricing-head { position: relative; height: 170px; } .most-popular .pricing-head h1 { color: #fff; } .most-popular .pricing-quote, .most-popular ul li i { color: #ed6f7e; } .most-popular ul li { } .most-popular .price-actions .btn { background: #60b193 !important; cursor: pointer; color: #fff !important; } .most-popular .pricing-quote { background: #fff; } .pricing-table .price-actions .btn { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #eff0f4; color: #a4a4a4; border: none; box-shadow: none; text-shadow: none; padding: 10px 20px; cursor: pointer; text-transform: uppercase; } .pricing-table .price-actions .btn:hover, .most-popular.pricing-table .price-actions .btn:hover { background: #49586e !important; color: #fff; } .pricing-head { position: relative; height: 170px; color: #000; } .pricing-head h1 { font-size: 24px; font-weight: 300; padding-top: 30px; color: #000; text-transform: uppercase; } .pricing-quote { background: #eff0f4; padding: 50px 0; color: #49586e; font-size: 45px; font-weight: bold; width: 150px; height: 150px; border-radius: 50%; -webkit-border-radius: 50%; margin: -85px auto; position: relative; } .pricing-table ul { margin: 120px 0 50px; padding: 0; } .pricing-table ul li { margin: 0 2em; padding: 1em 0; text-align: center; font-weight: 300; } .pricing-quote span.note { display: inline; font-size: 18px; line-height: 0.8em; position: relative; top: -18px; } .pricing-quote p { font-size: 12px; text-transform: uppercase; color: #a4a4a4; padding-top: 10px; font-weight: normal; } .pricing-quotation, .team-info { background: #EEEEEE; padding: 20px 20px 35px 20px; margin-bottom: 100px; display: inline-block; width: 100%; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .pricing-quotation h3, .team-info h3 { font-weight: 300; } .pricing-quotation p, .team-info p { margin-bottom: 0px; } .pricing-plan, .team-info-wrap { position: relative; } /*------------------------------- INVOICE STYLE --------------------------------*/ .invoice-title { color: #ed6f7e; font-size: 48px; text-transform: uppercase; margin-top: 30px; } .invoice { color: #666; } .inv-logo { margin-bottom: 10px; } .invoice-address { background: #f7f7f9; padding: 20px; margin-top: 10px; margin-left: -15px; margin-right: -15px; } .inv-col { margin-bottom: 5px; } .inv-col span { color: #ed6f7e; } .t-due, .inv-label { font-size: 22px; color: #ed6f7e; } .inv-label { font-style: italic; } .amnt-value { color: #a4a4a4; font-size: 24px; margin-top: 10px; font-weight: bold; } .inv-to { text-transform: uppercase; font-size: 14px; } .corporate-id { font-weight: bold; font-size: 16px; color: #000; margin-top: 5px; text-transform: uppercase; } .table-invoice { border-top: none !important; } .table-invoice thead { background: #000; color: #fff; } .table-invoice th { border-bottom: none !important; padding: 10px 10px !important; border-color: #fff !important; } .table-invoice th:first-child, .table-invoice td:first-child { text-align: left; } .table-invoice td { vertical-align: middle !important; } .table-invoice h4 { color: #000; font-size: 14px; font-weight: bold; margin: 0 0 5px 0; } .table-invoice strong { color: #000; } .payment-method p { margin-bottom: 0; } .print-body { background: #eff0f4; } /*--------------------------- ERROR PAGE STYLES ----------------------------*/ .error-page { background: #ed6f7e; } .error-wrapper { margin-top: 15%; } .error-wrapper h2 { font-size: 64px; color: #fff; text-transform: uppercase; font-weight: bold; } .error-wrapper h3 { font-size: 32px; color: #474747; text-transform: uppercase; font-weight: bold; line-height: 30px; margin-top: 0; } .error-wrapper .nrml-txt { font-size: 18px; color: #474747; font-weight: normal; line-height: 30px; } .error-wrapper .nrml-txt a { color: #a7ffdf; } .error-wrapper .back-btn { color: #fff; border: 1px solid #fff; padding: 15px 30px; border-radius: 5px; -webkit-border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 20px; margin-top: 50px; } .error-wrapper .back-btn:hover { background: #fff; color: #ed6f7e; border-color: #fff; } /*--------------------------------- TIMELINE STYELS ----------------------------------*/ .timeline { border-collapse: collapse; border-spacing: 0; display: table; position: relative; table-layout: fixed; width: 100%; margin-bottom: 50px; } .timeline .time-show { margin-right: -75px; margin-top: 30px; position: relative; margin-bottom: 30px; } .time-show .btn { width: 150px; } .timeline .time-show a { color: #fff; } .timeline:before { background-color: #d8d9df; bottom: 0px; content: ""; left: 50%; position: absolute; top: 30px; width: 1px; z-index: 0; } h3.timeline-title { margin: 0; color: #C8CCD7; font-size: 20px; font-weight: 400; margin: 0 0 5px; text-transform: uppercase; } .t-info { color: #C8CCD7; } .timeline-item:before, .timeline-item.alt:after { content: ""; display: block; width: 50%; } .timeline-item { display: table-row; } .timeline-desk { display: table-cell; vertical-align: top; width: 50%; } .timeline-desk h1 { font-size: 16px; font-weight: 300; margin: 0 0 5px; } .timeline-desk .panel { display: block; margin-left: 45px; position: relative; text-align: left; background: #fff; } .timeline-item .timeline-desk .arrow { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; height: 0; left: -7px; position: absolute; top: 50%; margin-top: -10px; width: 0; } .timeline-item .timeline-desk .arrow { border-right: 8px solid #fff !important; } .timeline-item.alt .timeline-desk .arrow-alt { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; height: 0; right: -7px; position: absolute; top: 50%; margin-top: -10px; width: 0; left: auto; } .timeline-item.alt .timeline-desk .arrow-alt { border-left: 8px solid #fff !important; } .timeline .timeline-icon { left: -54px; position: absolute; top: 50%; margin-top: -10px; } .timeline .timeline-icon { background: #fff; border: 1px solid #D8D9DF } .timeline-desk span a { text-transform: uppercase; } .timeline-desk h1.red, .timeline-desk span a.red { color: #EF6F66; } .timeline-desk h1.green, .timeline-desk span a.green { color: #39B6AE; } .timeline-desk h1.blue, .timeline-desk span a.blue { color: #56C9F5; } .timeline-desk h1.purple, .timeline-desk span a.purple { color: #8074C6; } .timeline-desk h1.light-green, .timeline-desk span a.light-green { color: #A8D76F; } .timeline-desk h1.yellow, .timeline-desk span a.yellow { color: #fed65a; } .timeline .timeline-icon { border-radius: 50%; -webkit-border-radius: 50%; display: block; height: 20px; width: 20px; text-align: center; color: #fff; } .timeline .timeline-icon i { margin-top: 9px; } .timeline-item.alt .timeline-icon { left: auto; right: -56px; } .timeline .time-icon:before { font-size: 16px; margin-top: 5px; } .timeline .timeline-date { left: -245px; position: absolute; text-align: right; top: 12px; width: 150px; display: none; } .timeline-item.alt .timeline-date { left: auto; right: -245px; text-align: left; display: none; } .timeline-desk h5 span { color: #999999; display: block; font-size: 12px; margin-bottom: 4px; } .timeline-item.alt:before { display: none; } .timeline-item:before, .timeline-item.alt:after { content: ""; display: block; width: 50%; } .timeline-desk p { font-size: 14px; margin-bottom: 0; color: #999; } .timeline-desk a { color: #1fb5ad; } .timeline-desk .panel { margin-bottom: 5px; } .timeline-desk .album { margin-top: 20px; } .timeline-item.alt .timeline-desk .album { margin-top: 20px; float: right; } .timeline-desk .album a { margin-right: 5px; float: left; } .timeline-item.alt .timeline-desk .album a { margin-left: 5px; float: right; } .timeline-desk .notification { background: none repeat scroll 0 0 #FFFFFF; margin-top: 20px; padding: 8px; } .timeline-item.alt .panel { margin-left: 0; margin-right: 45px; } .mbot30 { margin-bottom: 30px; } .timeline-item.alt h1, .timeline-item.alt p { text-align: right; } /*-------------------------------- PROFILE STYLE ---------------------------------*/ .profile-pic img { border: 5px solid #F1F2F7; border-radius: 50%; -webkit-border-radius: 50%; height: 150px; margin: 10px 0; width: 150px; } .profile-desk h1 { color: #49586e; font-size: 24px; font-weight: bold; margin: 0 0 5px 0; text-transform: uppercase; } .profile-desk .designation { color: #49586e; font-size: 14px; text-transform: uppercase; margin-bottom: 30px; display: inline-block; } .profile-desk p { line-height: 25px; margin-bottom: 40px; } .p-follow-btn { background: #eff0f4; color: #a4a4a4 } .p-follow-btn:hover, .btn-post { background: #ed6f7e; color: #fff } .btn-post:hover { background: #000; color: #fff } ul.p-social-link { list-style-type: none; } ul.p-social-link li { display: inline-block; } ul.p-social-link li a { background: #eff0f4; color: #bfbfc1; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; -webkit-border-radius: 50%; display: inline-block; text-align: center; } ul.p-social-link li a:hover, ul.p-social-link li.active a { color: #ed6f7e; } .p-text-area, .p-text-area:focus { border: medium none; box-shadow: none; color: #C3C3C3; font-size: 16px; font-weight: 300; } .p-option li a { color: #adadad; font-size: 15px; } .p-option li a:hover { background: #ed6f7e; color: #fff; } ul.p-info { list-style-type: none; padding: 0; margin-bottom: 0; } ul.p-info li { display: inline-block; width: 100%; margin-bottom: 10px; } ul.p-info li:last-child { margin-bottom: 0; } ul.p-info .title, ul.p-info .desk { float: left; } ul.p-info .title { width: 40%; } ul.p-info .desk { width: 60%; color: #ed6f7e; } .p-states h4 { color: #535351; font-size: 14px; font-weight: bold; text-transform: uppercase; margin: 0; } .p-states h4 span { color: #bfbfbf; } .p-states h3 { color: #000; font-size: 25px; margin: 10px 0 0 0; } .p-states .chart-bar { margin-top: 20px; } .p-states.green-box { background: #ed6f7e; color: #fff; border-radius: 4px; -webkit-border-radius: 4px; } .p-states.green-box h4, .p-states.green-box h4 span, .p-states.green-box h3 { color: #fff; } ul.activity-list { list-style-type: none; padding: 0; } ul.activity-list li { display: inline-block; width: 100%; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eff0f4; } ul.activity-list .avatar img { float: left; width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; } ul.activity-list .activity-desk { margin-left: 70px; } ul.activity-list .activity-desk h5 { color: #000; } ul.activity-list .activity-desk h5 a { font-weight: bold; } .activity-desk .album a { float: left; margin-right: 10px; width: 170px; height: 110px; overflow: hidden; margin-bottom: 10px; } .activity-desk .album a img { width: 100%; } #map-canvas { height: 200px; width: 100%; } .revenue-graph { height: 220px; } /*-------------------------------------------- Dashboard Event Calendar, charts --------------------------------------------*/ .event-calendar { background: #1fb5ac; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; min-height: 474px; } .calendar-block { float: right !important; -webkit-border-radius: 0 5px 5px 0px; -moz-border-radius: 0 5px 5px 0px; border-radius: 0 5px 5px 0px; background: #fff; z-index: 1000; } .event-list-block { -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; } .calendar-block .day-contents { width: 30px; margin: auto; } .today .day-contents { width: 30px; background: #1fb0ab; cursor: pointer; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .calendar-block .day-contents:hover { width: 30px; background: #1fb0ab; cursor: pointer; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .cal1 .clndr .clndr-controls { -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; display: block !important; position: relative; margin-bottom: 10px; text-align: center; background: #51d4cc; margin-left: -15px; margin-right: -15px; margin-top: -15px; padding: 56px 20px; width: auto !important; color: #fff; } .cal1 .clndr .clndr-controls .month span { display: block; font-size: 30px; padding: 0px 10px; margin-bottom: 10px; } .cal1 .clndr .clndr-controls .month { color: #fff; } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button, .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button { color: #fff; } .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover, .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover { background: #f4f4f4; padding: 5px 10px; color: #1fb0ab; } .clndr-previous-button { position: relative; top: -30px; } .clndr-next-button { position: relative; top: -30px; } #flotTip { background: rgba(000,000,000,.7); padding: 5px 10px; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #main-chart-legend { padding: 2px 0px; } #main-chart-legend td { padding-right: 10px; } .main-chart { width: 100%; height: 300px; text-align: center; margin: 0 auto; } /*------------------------- MAIL INBOX --------------------------*/ .mail-box { border-spacing: 0; display: table; table-layout: fixed; width: 100%; height: 100%; } .mail-box > aside, .mail-box > section { display: table-cell; float: none; height: 100%; vertical-align: top; } .mail-nav { display: table-cell; float: none; height: 100%; vertical-align: top; width: 240px; } .mail-nav-bg-color { background: #d1d5e1; } .mail-box-info { background: #fff; padding: 15px; } .mail-nav h4 { margin: 0; padding: 15px; background: #5c6e8a; color: #fff; } .mail-nav-body { padding: 15px; } .mail-nav footer { background: #b8bbc5; border-top: none; margin-top: 20px; } .mail-nav footer .btn { border: none; } a.btn-compose { background: #ed6f7e; color: #fff; width: 100%; margin: 10px 0; } a:hover.btn-compose { background: #52a888; color: #fff; } .mail-navigation { margin-top: 15px; } .mail-navigation li a i { padding-right: 10px; } .mail-navigation li a { color: #5c6e8a; } .mail-navigation li a:hover { color: #fff; } .mail-navigation > li.active > a, .mail-navigation > li.active > a:hover, .mail-navigation > li.active > a:focus { background: #5c6e8a; color: #fff; } ul.labels-info li h5 { color: #fff; background: #839dc5; font-size: 15px; margin: 10px -15px; padding: 15px; text-transform: uppercase; } ul.labels-info li a { border-radius: 0; color: #707278; padding-left: 0; padding-right: 0; } ul.labels-info li a i { padding-right: 10px; } .nav.nav-pills.nav-stacked.labels-info p { color: #85888f; font-size: 11px; margin-bottom: 0; padding: 0 22px; } ul.labels-info li a:hover, ul.labels-info li a:focus { background: rgba(0, 0, 0, 0); color: #5c6e8a; } .mail-box-info { position: relative; } .mail-box-info .header { background: #D1D5E1; margin: -15px; padding: 10px 15px; color: #fff; } .mail-box-info .mail-list { margin-top: 30px; } .mail-box-info .mail-list li a { font-size: 13px; color: #535351; text-decoration: none; } .mail-box-info .mail-list li a:hover { color: #1b2128; } .mail-box-info .mail-list li a.thumb { width: 22px; margin-right: 10px; border-radius: 50%; -webkit-border-radius: 50%; } .mail-box-info .mail-list li a.thumb img { height: auto; max-width: 100%; } .mail-box-info .mail-list li .chk { margin-right: 15px; } .mail-list { overflow-x: hidden; overflow-y: auto; height: 657px; } .mail-list .list-group-item { border-radius: 0; -webkit-border-radius: 0; } .mail-box-info header h4 { margin: 5px 0; color: #5C6E8A; } .compose-mail { width: 100%; display: inline-block; position: relative; } .compose-mail .compose-options { color: #979797; cursor: pointer; display: inline-block; font-size: 14px; position: absolute; right: 10px; top: 7px; } .compose-options a { color: #5C6E8A; } .compose-mail input, .compose-mail input:focus { border: none; padding: 0; width: 80%; float: left; } .compose-mail .form-group { border: 1px solid #eaebee; display: inline-block; width: 100%; margin-bottom: 0; } .compose-mail .form-group label { line-height: 34px; width: 10%; float: left; padding-left: 10px; margin-bottom: 0; background: #eaebee; margin-right: 10px; } .compose-editor input { margin-top: 15px; } .compose-editor { margin-top: 35px; margin-bottom: 15px; display: inline-block; width: 100%; } .compose-btn { float: left; } .compose-editor textarea { border-color: #eaebee; } .mail-sender, .attachment-mail { width: 100%; display: inline-block; margin: 0 0 20px 0; border-bottom: 1px solid #E8DEDF; padding: 10px 0; } .attachment-mail ul li .links a { font-size: 11px; } .mail-sender img { width: 30px; border-radius: 3px; -webkit-border-radius: 3px; } .mail-sender .date { line-height: 30px; margin-bottom: 0; text-align: right; } .view-mail a, .attachment-mail a:hover { color: #ed6f7e; } .attachment-mail a { color: #5C6E8A; } .attachment-mail ul li { float: left; width: 100px; margin-right: 15px; margin-top: 15px; list-style: none; } .attachment-mail ul li a.atch-thumb img { width: 100px; height: auto; margin-bottom: 10px; } .attachment-mail ul li a.name span { float: right; color: #5C6E8A; font-size: 11px; } /*------------------------------------ Blog styles -------------------------------------*/ .blog h1 { font-size: 18px; text-transform: uppercase; color: #424242; font-weight: 400; margin: 0px 0 10px 0; line-height: 30px; } .blog h1 a { color: #424242; } .blog h1 a:hover, .blog h1 a:focus, .auth-row a:hover, .auth-row a:hover { color: #ed6f7e; } .blog .auth-row { color: #c8c8c8; font-weight: 300; padding-bottom: 20px; font-size: 14px; } .auth-row a { color: #C8C8C8; } .blog .blog-img-wide img { width: 100%; height: 350px; padding-bottom: 25px; } .blog-img-sm img { width: 100%; padding-bottom: 0; } .blog p { padding-bottom: 15px; font-size: 14px; } .blog a.more { margin-bottom: 10px; display: inline-block; } .blog .fa-quote-left { font-size: 20px; padding: 40px 0; color: #d3d3d3; } .blog-search, .blog-search:focus { float: left; margin-right: 10px; background: #f1f1f1; border: none; height: 35px; box-shadow: none; } .btn-search, .btn-search:hover, .btn-search:focus { background: #ed6f7e; color: #fff; } .blog-post h3 { font-size: 16px; text-transform: uppercase; color: #424242; font-weight: bold; padding-top: 0px; margin-top: 0; } .blog-post h5 a { color: #424242; text-transform: uppercase; } .blog-post h5 a:hover, .blog-post h5 a:focus, .blog-post ul li a:hover, .blog-post ul li a:focus { color: #ed6f7e; } .blog-post p { padding-bottom: 0; } .blog-post ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .blog-post ul li { line-height: 35px; color: #837f7e; } .blog-post ul li a { line-height: 35px; color: #837f7e; } .blog-post ul li i { padding-right: 10px; } .carousel-indicators li { /*background: rgba(255, 255, 255, 0.5);*/ border: none; } .carousel-indicators { margin-bottom: 10px; } blockquote { margin-left: 50px; color: #a1a1a1; font-style: italic; } blockquote p { line-height: 30px; padding-bottom: 0 !important; } .blog-tags { border-top: 1px solid #f1f1f1; margin: 30px 0 0 0; padding-top: 30px; display: inline-block; width: 100%; } .blog-tags a { background: #f1f1f1; color: #808086; padding: 5px 10px; margin-left: 8px; border-radius: 3px; -webkit-border-radius: 3px; } .tag-social ul { background: #f1f1f1; height: 35px; padding-left: 0; margin-top: -5px; border-radius: 3px; position: relative; padding: 0 10px; list-style-type: none; } .tag-social ul:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(241, 241, 241, 0); border-left-color: #f1f1f1; border-width: 5px; margin-top: -5px; } .tag-social ul li { float: left; } .tag-social ul li a { margin-top: 3px; display: inline-block; margin-left: 0; } .tag-social ul li a:hover, .blog-cmnt .media-heading a:hover, .blog-tags a:hover { color: #ed6f7e; } .blog-tags a.btn-share { background: #ed6f7e; margin-top: -10px; padding: 10px; color: #fff; text-transform: uppercase; } ol.comment-list { list-style: none; padding-left: 0; } .blog-cmnt.media > .pull-left { margin-right: 30px; } .blog-cmnt .media-heading, .blog-cmnt .media-heading a { color: #414147; font-size: 14px; text-transform: uppercase; } .blog-cmnt .media-object { width: 105px; height: 102px; border-radius: 3px; -webkit-border-radius: 3px; } .blog-cmnt .media-object-child { width: 76px; height: 72px; border-radius: 3px; -webkit-border-radius: 3px; } .blog .blog-cmnt p { font-size: 15px; line-height: 25px; padding-top: 5px; } .mp-less { margin-bottom: 0 !important; padding-bottom: 0 !important; } .blog-cmnt .media-body span { color: #808086; padding-bottom: 20px; display: inline-block; } .bl-status { float: left; width: 100%; } .bl-status .reply { background: #f1f1f1; color: #808086; padding: 5px 10px; border-radius: 4px; -webkit-border-radius: 4px; margin-top: -5px; } .bl-status .reply:hover { background: #ed6f7e; color: #fff; } .media, .media .media { margin-top: 25px; } .cmnt-head { font-size: 24px !important; } .fade-txt { color: #adadad; font-size: 14px; } .leave-cmnt { width: 70%; margin: 20px auto; } .leave-cmnt input, .leave-cmnt textarea, .leave-cmnt input:focus, .leave-cmnt textarea:focus { background: #f2f2f2; border: none; box-shadow: none; } .btn-post-cmnt { background: #ed6f7e; color: #fff; text-transform: uppercase; font-size: 12px; padding: 12px 25px; } .btn-post-cmnt:hover { background: #414147; color: #fff; } .blog-pagination li a { background: #fff; } .blog .carousel-indicators.out { bottom: 15px; } /*panel*/ .panel-title-m { margin-top: 0px; } /*-------------------------------- Directory Styles --------------------------------*/ .directory-list, .directory-info-row .social-links { list-style-type: none; padding: 0; margin: 0; } .directory-list li { border-left: 1px solid #EFF0F4; display: table-cell; width: 1%; } .directory-list li a { display: block; padding: 8px 0; text-align: center; text-transform: uppercase; background: #fff; color: #7A7676; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; text-decoration: none; } .directory-list li a:hover, .directory-info-row .social-links li a:hover { background: #ed6f7e; color: #fff; } .directory-info-row { display: inline-block; width: 100%; margin-top: 20px; } .directory-info-row .social-links { display: inline-block; margin-top: 10px; } .directory-info-row .social-links li { display: inline-block; } .directory-info-row .social-links li a { background: #EFF0F4; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; color: #7A7676; } .directory-info-row h4, .directory-info-row a { color: #424F63; } .directory-info-row .thumb { border-radius: 50%; -webkit-border-radius: 50%; margin-right: 20px; } /*------------------------------- chat styles -------------------------------*/ .chats { margin: 0; padding: 0; margin-top: -15px; margin-right: 10px; } .chats li { list-style: none; padding: 8px 0 5px; margin: 7px auto; font-size: 12px; } .chats li img.avatar { height: 45px; width: 45px; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .chats li.in img.avatar { float: left; margin-right: 10px; margin-top: 0px; } .chats li .name { font-size: 13px; font-weight: 400; } .chats li .datetime { color: #adadad; font-size: 13px; font-weight: 400; } .chats li.out img.avatar { float: right; margin-left: 10px; margin-top: 0px; } .chats li .message { display: block; padding: 5px; position: relative; } .chats li.in .message { text-align: left; margin-left: 65px;background-color: #f9e5ec; } .chats li.in .message .arrow { display: block; position: absolute; top: 15px; left: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .chats li.out .message .arrow { display: block; position: absolute; top: 15px; right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #EFF0F4; } .chats li.out .message { border-right: 2px solid #EFF0F4; margin-right: 65px; text-align: left;background-color: #ed6f7e; } .chats li.out .message .name{color: #fff;} .chats li.out .message .body{color: #fff;;} .chats li.out .name, .chats li.out .datetime { text-align: right; } .chats li .message .body { display: block; font-size: 18px;} .chat-form { margin-top: 15px; padding: 10px; background-color: #EFF0F4; clear: both; } .chat-form .input-cont { margin-right: 55px; } .chat-form .input-cont input { margin-bottom: 0px; } .chat-form .input-cont input { border: 1px solid #ddd; width: 94%; margin-top: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .chat-form .input-cont input { background-color: #fff !important; } .normal-chat .message { border: 1px solid #EFF0F4; border-left: 1px solid #EFF0F4 !important; border-right: 1px solid #EFF0F4 !important; padding: 10px !important; border-radius: 5px; -webkit-border-radius: 5px; } .normal-chat li img.avatar { height: 45px; width: 45px; } .normal-chat li.in img.avatar, .normal-chat li.out img.avatar { margin-top: 0px; } .normal-chat li.in .message .arrow { border-right: 8px solid #EFF0F4 !important; } .normal-chat li.in .message .arrow { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; height: 0; left: -8px; position: absolute; top: 15px; width: 0; } .normal-chat li.out .message .arrow { border-left: 8px solid #EFF0F4 !important; } .normal-chat li.out .message .arrow { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; position: absolute; right: -8px; top: 15px; } .normal-chat li.in .name { color: #ed6f7e !important; } /* .normal-chat li.out .name { color: #424F63 !important; } */ .normal-chat li .datetime { color: #ADADAD; font-size: 11px !important; font-weight: 400; } .normal-chat li.in .datetime {margin-left: 65px;} .normal-chat li.out .datetime {margin-right: 65px;} .chat-form .form-group { width: 83%; margin-right: 2%; float: left; } .chats li.out .name { color: #333; } .cool-chat li.in .message { background: #ed6f7e; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; } .cool-chat li.in .message .arrow { border-right: 8px solid #ed6f7e; } .cool-chat li.in .message a.name { font-weight: bold; } .cool-chat li.in .message .datetime { opacity: .7; } .cool-chat li.in .message a.name, .cool-chat li.in .message .datetime { color: #fff; } .cool-chat li.out .message .arrow { border-left: 8px solid #EFF0F4; } .cool-chat li.out .message { background: #EFF0F4; border-radius: 5px; -webkit-border-radius: 5px; } .make-responsive {overflow-x: scroll;overflow-y: scroll;padding-bottom: 5px;width: auto;max-height: calc(100vh - 290px);scrollbar-width: thin;} .adv-table .table thead {z-index: 5;position: sticky;top: 0;} @media(max-width:768px) { .make-responsive {overflow-x: scroll;overflow-y: scroll;padding-bottom: 5px;width: auto;max-height: calc(100vh - 290px);scrollbar-width: thin;} } /*************************************************/ /********************************/ .border-0{border: none;} .padding-0{padding: 0;} .form-horizontal .control-label { color: #2f2f2f; font-weight: 600; text-align: left;white-space: nowrap;} .active-status { color: #21b384; } .deactive-status { /*color:#C31111;*/ color: #999; } .edit-icon { color: #333; } .delete-icon { color: #C31111; } /* .dt-icons { border: 1px solid #E8DEDF; font-size: 12pt; padding: 4px 5px; color: #847f7f;border-radius: 4px;} .dt-icons:hover{ color: #ed6f7e; border: 1px solid #ed6f7e;} */ .dt-icons { /* color: #46515c; font-weight: 600; padding: 6px; width: 28px; height: 28px; display: inline-flex; justify-content: center; align-items: center; margin: 0 2px; text-decoration: none; vertical-align: top; border-radius: 6px; border: 1px solid #d7e3f7; background: #f9fbff; */ padding: 6px; color: #847f7f; width: 28px; height: 28px; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; margin: 0 3px; border-radius: 8px; border: 1px solid #fdd6d9; background: #f9f1f2; transition: background-color 0.2s ease, transform 0.15s ease; } .dt-icons:hover { /* color: #ed6f7e; background: #dee4ee; */ color: #ed6f7e; background-color: #f4d9dc; transform: translateY(-1px); } /*.dt-succses { font-size: 14pt; padding: 0 2px; font-size: 12pt; padding: 4px 5px; background-color: #6bd67d; color: #fff; } .dt-succses:hover{ background-color: #028117;} .dt-danger { font-size: 14pt; padding: 0 2px; font-size: 12pt; padding: 4px 5px; background-color: #d44a50; color: #fff; } .dt-danger:hover{ background-color: #b4020b;}*/ /*-------------------------------- style-responsive Css --------------------------------*/ @media(max-width:800px) { .margin-top{margin-top:10px;} } /* MEDIA QUERIES */ @media screen and (max-width: 768px) { body { position: relative; } .left-side { display: none; } .main-content { margin-left: 0; width: 100%; } footer.sticky-footer { margin-left: 0; width: 100%; } .left-side-collapsed .left-side { display: none; } .left-side-collapsed .main-content { margin-left: 0; } .left-side-collapsed .header-section { margin-left: 0; } .left-side-show section { overflow-x: hidden; } .left-side-show .left-side { display: block; } .left-side-show .main-content { margin-left: 240px; } .left-side-show footer.sticky-footer { margin-left: 240px; width: calc(100% - 240px); } .btn-demo { margin-bottom: 20px; } .left-sideinner { padding: 5px 10px; } .left-sideinner .searchform input { background: #fff; border: 0; } .sticky-header .header-section { left: 0; } .sticky-header.left-side-show .header-section { left: 240px; } .sticky-header .menu-right { margin-right: 15px; } .sticky-header .left-side { top: 60px; } .lock-wrapper { margin: 25% auto; } .sticky-left-side .custom-nav { margin-top: -5px; } .stepy-error { bottom: 50px; } .margin-top{margin-top:10px;} } @media screen and (max-width: 767px) { .searchform { position: relative; } .searchform input { background: #fff; } .notification-menu li:nth-child(4) { display: none; } .left-side .searchform, .left-side .logged-user { display: block; } .breadcrumb-wrapper { display: none; } .notification-menu .dropdown-menu:after { display: none; } /*calendar*/ .fc-button-inner { padding: 0; } /*media gallery*/ .media-gal .item { width: 100%; } .media-filter { margin: 25px 0; } .media-filter + .pull-right, .media-filter + .pull-right + .btn { float: left !important; } /*state info*/ .state-info { position: static; width: 100%; margin-top: 15px; } .state-info .panel { width: 100%; } .lock-wrapper { margin: 40% auto; } .pricing-table { width: 100%; margin-left: 0; } .mail-box > aside, .mail-box > section { display: block; margin-bottom: 10px; width: 100%; } .mail-list { height: auto; } } @media screen and (max-width: 640px) { } @media screen and (max-width: 480px) { /*form wizard steps*/ .widget-container .stepy-titles li, .stepy-titles li { width: 100%; } .directory-list li { display: inline-block; float: left; width: auto; } .directory-list li a { display: block; padding: 5px 10px; margin-bottom: 1px; } } @media screen and (max-width: 479px) { /*calendar*/ .fc-button-inner, .fc-button-content { padding: 0; } .fc-header-title h2 { font-size: 12px!important; } .fc .fc-header-space { padding-left: 0; } .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-active, .fc-button-today .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner { background: none repeat scroll 0 0 #FFFFFF !important; color: #32323A !important; } .fc-state-default, .fc-state-default .fc-button-inner { background: none repeat scroll 0 0 #FFFFFF !important; } .error-wrapper h1 img { width: 100%; } /*form wizard steps*/ .widget-container .stepy-titles li, .stepy-titles li { width: 100%; } .directory-list li { display: inline-block; float: left; width: auto; } .directory-list li a { display: block; padding: 5px 10px; margin-bottom: 1px; } .margin-top{margin-top:10px;} } @media screen and (max-width: 360px) { .notification-menu li:first-child .dropdown-menu { margin-right: -90px; } .notification-menu li:nth-child(2) .dropdown-menu { margin-right: -45px; } .notification-menu li:nth-child(3) .dropdown-menu { margin-right: 0px; } .nav-tabs.nav-justified.nav-profile > li { float: none; display: block; width: auto; } .lock-wrapper { margin: 40% auto; max-width: 300px; } .lock-wrapper input, .lock-wrapper input:focus { width: 80% !important; } .lock-wrapper .locked { right: 70px; } } @media screen and (max-width: 320px) { .lock-wrapper { margin: 40% auto; max-width: 300px; } .lock-wrapper input, .lock-wrapper input:focus { width: 80% !important; } .lock-wrapper .locked { right: 70px; } .media-filter li { margin-bottom: 10px; display: inline-block; } .media-filter + .btn-group .btn { margin-bottom: 5px; } } @media(max-width:990px) { .m_search{width:275px;} } /*****************/ .modal-header { background-color: #c14b59; display: flex; justify-content: space-between; align-items: center; } .modal-title{font-size: 18px;} .notification-menu .dropdown-toggle { padding: 0 0 0 0; margin: 10px 0 0 0; } .notification-menu .dropdown-toggle img { max-width: 45px!important; max-height: 35px!important; } /*****************************************/ /***************************/ .btn-primary { background-color: #ed6f7e; border-color: #0173b2; color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-color: transparent; border-color: #ed6f7e; color: #ed6f7e; } img { max-width: 100%; } /*****************************************/ /***************************/ .fixed-logo { background: url(../images/fixed-logo.png) no-repeat; height: 105px; width: 206px; position: fixed; z-index: 50000; right: 20px; bottom: -20px; opacity: 0.5; } .fixed-logo:hover { opacity: 1; } .fixed-logo { background-size: 195px auto; z-index: 110; display:none; } .ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all { z-index: 115 !important; } .grayBox { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background:rgba(255,255,255,0.5); /*background: #fff;*/ z-index: 1000; } /*****************************************/ /***************************/ /*-------------------------- TAB STYLES ---------------------------*/ .r-tabs .r-tabs-nav { margin: -31px 0 0 -1px; padding: 0; } .r-tabs .r-tabs-tab { display: inline-block; list-style: none outside none; margin: 0 6px 0 0; } .r-tabs .r-tabs-panel { display: none; padding: 15px; } .r-tabs .r-tabs-accordion-title { display: none; } .r-tabs .r-tabs-panel.r-tabs-state-active { display: block; } .r-tabs { border: 1px solid #999; border-radius: 4px; margin: 0 auto; position: relative; } .r-tabs .r-tabs-nav .r-tabs-tab { position: relative; } .r-tabs .r-tabs-nav .r-tabs-anchor { color: #000; display: inline-block; font-size: 14px; font-weight: normal; padding: 0 12px; text-decoration: none; } .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor { border-top-left-radius: 4px; border-top-right-radius: 4px; color: #000; text-shadow: none; } .r-tabs .r-tabs-panel { background-color: white; border-bottom: 4px solid white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .r-tabs .r-tabs-accordion-title .r-tabs-anchor { background: none repeat scroll 0 0 #e0e0e0; border-top-left-radius: 4px; border-top-right-radius: 4px; color: #000; display: block; font-size: 14px; font-weight: normal; padding: 10px; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.4); } .r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor { background-color: #fff; color: #000; text-shadow: none; } ul.tabs { float: left; height: 32px; list-style: none outside none; margin: 0; padding: 0; width: 100%; } ul.tabs li { background: none repeat scroll 0 0 #e0e0e0; border: 1px solid #999; border-top-left-radius: 8px; border-top-right-radius: 8px; float: left; height: 31px; line-height: 31px; margin: 0 5px -1px 0; overflow: hidden; padding: 0; position: relative; } ul.tabs li a { border: 1px solid #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; color: #000; display: block; font-size: 1.2em; outline: medium none; padding: 0 20px; text-decoration: none; } ul.tabs li a:hover { background: none repeat scroll 0 0 #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: none repeat scroll 0 0 #fff !important; border-bottom: 1px solid #fff; } .tabContainer { background: none repeat scroll 0 0 #fff; border: 1px solid #999; border-radius: 0 8px 8px; clear: both; float: left; overflow: hidden; width: 100%; } .tabContent { font-size: 1.2em; padding: 20px; } .tabContent { overflow-x: scroll !important; } @media only screen and (max-width: 768px) { .r-tabs .r-tabs-nav { display: none; } .r-tabs .r-tabs-accordion-title { display: block; } } /*-------------------------- New Paginations ---------------------------*/ .new-pagination { clear:both; padding:16px 0 4px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .new-pagination, .new-pagination span, .new-pagination a { text-align:left; font-size:14px!important; transition: all 0.2s ease; } .new-pagination .paginate_button { border:1px solid #F1E4E6; border-radius:8px; display:inline-block; margin:0; background:#fff; } .new-pagination .paginate_button a { padding:6px 13px; display:inline-block; color:#797979; text-decoration:none; border-radius:8px; } .new-pagination .paginate_button:hover { background:#c14b59; border-color:#c14b59; } .new-pagination .paginate_button:hover a { color:#fff; } .new-pagination .paginate_active { font-size:15px!important; border:1px solid #c14b59; border-radius:8px; display:inline-block; margin:0; padding:6px 13px; background:#c14b59; color:#fff; } .btn {display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;transition: all .3s ease-in-out;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 8px 16px;font-size: 13px;letter-spacing: 0.2px;line-height: 1.42857143;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border-radius: 4px;} .btn-default {background-color: #fff;color: #303e5c;border: 1px solid #c6ccdb;} .btn-default:hover, .btn-default:focus {background-color: #dee4ee;color: #303e5c;border: 1px solid #c6ccdb;} .form-control {padding:2px 10px; border: solid 1px #e8dedf; background-color: #fcfcfc; -webkit-transition: box-shadow 0.3s, border 0.3s; -moz-transition: box-shadow 0.3s, border 0.3s; -o-transition: box-shadow 0.3s, border 0.3s; transition: box-shadow 0.3s, border 0.3s; height: 44px; } #reportrange{ background: #F8F6F6; cursor: pointer; padding: 7px 6px; border: 1px solid #e8dedf; width: 100%; min-width: 285px;border-radius: 4px; } #reportrange img{ width:16px; margin-left:10px; margin-top:-3px; } .form-control:focus{ border: solid 1px #E8DEDF; border-radius: 0px !important ; /* -webkit-box-shadow: 0 0 5px 1px #ffc7cd; -moz-box-shadow: 0 0 5px 1px #ffc7cd; box-shadow: 0 0 5px 1px #ffc7cd; */ } .iti{width: 100%;} input[type="text"], select, input[type="password"], input[type="tel"]{ /* padding: 10px; border: solid 1px gainsboro; border-radius: 0px !important ; */ /* -webkit-transition: box-shadow 0.3s, border 0.3s; -moz-transition: box-shadow 0.3s, border 0.3s; -o-transition: box-shadow 0.3s, border 0.3s; transition: box-shadow 0.3s, border 0.3s; */ } input[type="text"]:focus, input[type="text"].focus { border: solid 1px #ffc7cd; border-radius: 0px !important ; /* -webkit-box-shadow: 0 0 5px 1px #ffc7cd; -moz-box-shadow: 0 0 5px 1px #ffc7cd; box-shadow: 0 0 5px 1px #ffc7cd; */ } .no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } .no-gutter-5 { margin-right: -5px; margin-left: -5px; } .no-gutter-5 > [class*="col-"] { padding-right: 5px; padding-left: 5px; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { margin-right: 2px; } .alert-modal{padding: 0px;} .alert-modal h5{color: #000; font-size: 18px;line-height: 30px;margin: 15px 0px;padding: 20px;} .alert-modal .btn{padding: 15px;border-radius: 0;} .alert{padding: 8px;} .setting-box {border-radius: 3px;width: 100%;background-color: #fbe6e9;height: 50%;overflow-x: auto;columns: 3;break-inside: avoid;scrollbar-width: thin;} .setting-box .item{box-sizing: border-box;break-inside: avoid;margin-bottom: 15px;} .setting-megamenu .dropdown-menu .menu-box ul li a.active { background: #EFF7FF; color: #007df2; } .setting-megamenu{position: static !important;} .setting-megamenu .dropdown-menu{position: absolute;left: 0;right: 0;width: auto;padding: 0px;border: 1.8px solid #E9EBEF; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;opacity: 0;background-color: rgba(0,0,0,0.5);} .setting-megamenu.open .dropdown-menu{display: block !important;opacity: 1; height: 100vh;width: calc(100% - 60px) !important;margin: 0;} .setting-megamenu .dropdown-toggle:hover.dropdown-menu{display: block !important;} .setting-megamenu .dropdown-menu .menu-box{padding: 20px 15px 15px 70px; position: relative;} .setting-megamenu .dropdown-menu .menu-box h3 {margin-top: 0;padding: 0px 10px 0px;font-size: 18px;color: #ed6f7e;font-weight: 500;text-align: left;font-family: 'Inter';} .setting-megamenu .dropdown-menu .menu-box .icon-box{position: absolute;padding: 14px 2px;width: 45px;height: 45px;left: 15px;top: 20px;border-radius: 7px;display: flex;justify-content: center;align-items: center;} .setting-megamenu .dropdown-menu .menu-box .icon-box {font-size: 18px;color: #ed6f7e;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxone{background: rgba(249, 115, 213, 0.2) !important;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxone img{position: absolute;width: 24px;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxtwo{background: rgba(30, 136, 253, 0.2) !important;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxtwo img{position: absolute;width: 24px;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxthree{background: rgba(255, 130, 85, 0.2) !important;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxthree img{position: absolute;width: 24px;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxfour{background: rgba(237, 111, 126, 0.2) !important;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxfour img{position: absolute;width:24px;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxfive{background: rgba(89, 196, 241, 0.2) !important;} .setting-megamenu .dropdown-menu .menu-box .icon-box.boxfive img{position: absolute;width: 24px;} .setting-megamenu .dropdown-menu .menu-box ul{padding: 0px;} .setting-megamenu .dropdown-menu .menu-box ul li{padding: 0px;float: none !important;list-style: none;} .setting-megamenu .dropdown-menu .menu-box ul li a{display: block;text-decoration: none;border-radius: 5px;padding: 4px 10px !important; font-size: 15px !important; -webkit-transition: all 1s;transition: all 1s;text-align: left;color: #484848;} .setting-megamenu .dropdown-menu .menu-box ul li a:hover{background: rgba(237, 111, 126, 0.2); color: #ed6f7e;} .setting-megamenu .dropdown-menu .menu-box ul li a.active{background: rgba(237, 111, 126, 0.2); color: #ed6f7e;} .component-box{border-radius: 12px;padding: 10px 10px;margin: 0px 10px 10px 0px;display: flex;align-items: center;min-height: 110px;} .component-box.box1{background: linear-gradient(271.37deg, #e75886 0%, #ed6f7e 100%);box-shadow: 0px 10px 30px rgba(234, 91, 137, 0.25);} .component-box.box2{background: linear-gradient(271.37deg, #F18BAB 0%, #ed6f7e 100%);box-shadow: 0px 10px 30px rgba(234, 91, 137, 0.25);} .component-box .content h3{font-size: 25px;font-weight: 600;margin: 0 0 6px;} .component-box .content h3 .number{color: #fff;} .component-box .content .top-content{font-size: 15px;color: #fff;margin-bottom:10px;} .component-box .content .pending-labels{display: flex;justify-content: space-between;align-items: center;} .component-box .content .pending-labels .label-name{font-size: 15px;color: #fff;margin-bottom:0;padding-right: 10px;} .component-box .content .pending-labels .label-name a{color: #fff;} /* Dashboard page invitation table css */ .invitation-table-main .scrollable-table{max-height: 480px;overflow-y: auto;display: block;width: 100%;overflow-x: hidden;scrollbar-width: thin;} .invitation-table-main tr {display: table;width: 100%;} /* .invitation-table-main .scrollable-table tr td{width: 50%;white-space: nowrap;} */ .invitation-table-main .scrollable-table tr td{white-space: nowrap;width: 220px;} .invitation-table-main .display{margin: 0;margin-bottom: 0px;clear: both;width: auto;} /* ############################################################################ Pickup Schedule page design ################################################################################ */ .pickup-row{display: flex;flex-wrap: wrap;} .pickup-schedule-box{box-shadow: 0px 0px 30px rgba(167, 167, 167, 0.2);padding: 15px;border-radius: 6px;min-height: 400px;margin-bottom: 12px;min-width: 380px;} .pickup-schedule-box .pnr-no{font-size: 15px;color: #555;margin-bottom: 0;} .pickup-schedule-box .detail-box{display: flex; justify-content: space-between;align-items: center;margin-bottom: 10px;} .pickup-schedule-box .detail-box .name{font-size: 18px;font-weight: 500;margin: 0;color: #212121;font-family: "inter", sans-serif;} .pickup-schedule-box .detail-box .numberof-person {background-color: #ed6f7e; color: #fff; font-size: 22px; font-weight: 600; padding: 7px 0px; border-radius: 50px;width: 36px;height: 36px;text-align: center;} .pickup-schedule-box .info-detail{padding-left: 0;list-style: none;} .pickup-schedule-box .info-detail li {position: relative;padding-left: 26px;font-size: 13px;color: #555;margin-bottom: 10px;} .pickup-schedule-box .info-detail li:last-child{margin-bottom: 0;} .pickup-schedule-box .info-detail li img{position: absolute;left: 0;top: 2px;} .pickup-schedule-box .information-list{padding-left: 0;list-style: none;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin-bottom: 0;background-color: #fef5f9;padding: 8px 16px;border-radius: 6px;} .pickup-schedule-box .information-list li {font-size: 13px;color: #555;margin-bottom: 10px;padding-right: 5px;} .pickup-schedule-box .assign-btn {background-color: #f8e5ee;color: #c14b59;transition: all .2s ease-in-out;} .pickup-schedule-box .assign-btn:hover{background-color: #c14b59;color: #fff;} .pickup-schedule-list{display: flex;align-items: start;flex-wrap: wrap;gap: 10px;} /* Reported live: with fewer cards than fit in a row (as few as one), flex: 1 stretched each .schedule-list-box to fill the entire remaining row width -- the actual card content (PNR/name/driver details) stayed its natural, much narrower width, so the rest of that stretched box (and the Driver Details panel inside it, itself unconstrained and filling its parent) rendered as a large block of empty space that read as its own blank "card" next to the real one. flex: 0 1 420px gives every card the same consistent width regardless of how many share the row -- it can still shrink on a narrow viewport (flex-shrink: 1), it just no longer grows past its intended size when there happen to be few of them. */ .pickup-schedule-list .schedule-list-box{display: flex; align-items: center; flex: 0 1 420px; box-shadow: 0 2px 4px rgba(0,0,0,.1); border: 1px solid #E8DEDF; flex-wrap: wrap; min-width: 380px; border-radius: 16px; } .pickup-schedule-list .schedule-list-box .pickup-schedule-box{width: 100%;} .p15{padding: 15px;} .input-group-addon{background-color: transparent; border: 1px solid #e8dedf;} .no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } .payroll-widget{margin: 5px 5px;min-height: 110px;display: flex;} .payroll-widget .panel-body{padding:5px 15px;display: flex;justify-content: flex-start;align-items: center;width: 100%; border-radius: 4px;} .payroll-widget .title{color: #2f2f2f; font-size: 14px; font-style: normal; font-weight: 400; margin-bottom: 5px; font-family: "Inter", sans-serif;} .payroll-widget .number{color: #2f2f2f; font-size: 20px; font-style: normal; font-weight: 700; margin: 0px 0; text-transform: uppercase; line-height: 34px;} .payroll-widget .number a{color: #212121;} .payroll-dash-icon{width: 55px;height: 55px;min-width: 55px; border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 15px;} .payroll-dash-icon img{width: 28px;} .payroll-dash-icon.red{background: #F35B5F;box-shadow: 0px 3.7228317260742188px 23.267698287963867px rgba(255, 76, 81, 0.25);} .payroll-dash-icon.orange{background: #FA8D66;box-shadow: 0px 4.006295680999756px 25.039350509643555px rgba(255, 149, 111, 0.25);} .payroll-dash-icon.blue{background: #1BA3E7;box-shadow: 0px 3.7228317260742188px 23.267698287963867px rgba(32, 171, 240, 0.25);} .payroll-dash-icon.green{background: #F39D1B;box-shadow: 0px 3.7228317260742188px 23.267698287963867px rgba(243, 157, 27, 0.25);} .payroll-dash-icon.yellow{background: #56BAD9;box-shadow: 0px 3.7228317260742188px 23.267698287963867px rgba(86, 186, 217, 0.25);} .payroll-dash-icon.rating{background: #E7C253;box-shadow: 0px 3.7228317260742188px 23.267698287963867px rgba(231, 194, 83, 0.25);} .payroll-dash-icon.pink{background: #28AB60; box-shadow: 0px 4.925036907196045px 30.78148078918457px 0px rgba(46, 169, 99, 0.25);} .payroll-dash-icon.purple{background: #9E68FF; box-shadow: 0px 4.006295680999756px 25.039350509643555px rgba(145, 85, 253, 0.25);} /* Light background variants */ .bg-red-light {background: #FFE8E8;} .bg-orange-light {background: #FFF2E6;} .bg-blue-light {background: #E6F6FF;} .bg-green-light {background: #FFF7E6;} .bg-yellow-light {background: #E6F8FF;} .bg-rating-light {background: #FFF9E6;} .bg-pink-light {background: #E6FFF0;} .bg-purple-light {background: #F3EDFF;} .pending-labels{display: flex; justify-content: end; padding: 0px 0px 0px 5px; margin: 0 0 0 10px !important; border-left: 1px solid #ccc;} .pending-labels .label-name a{color: #212121;} .pending-labels p{margin-bottom: 5px;} .filter-main{display: flex; justify-content: space-between; width: 100%; border-bottom: 1px solid #E7E8EA; margin-bottom: 10px; padding-bottom: 5px;align-items: center;} .filter-main .right{display: flex;align-items: flex-start;justify-content: space-between;} .filter-main .btn-group{display: flex;} .filter-box{display: flex;flex-wrap: wrap;padding: 0;margin: 0px;align-items: center;} .filter-box li .search-inline { position:relative } .filter-box li .search-inline input { padding-left:30px } .filter-box li .search-inline .search-icon { position:absolute; top:10px; left:10px; width:15px; height:15px; cursor:pointer; z-index:1 } .filter-box li h4{font-size: 18px; padding: 0; margin: 0;} .filter-box li{list-style: none;padding-right: 15px;margin-bottom: 10px;} .filter-box li .input-append .add-on{margin-top: -36px;} .filter-box li .title{margin: 0;font-size: 18px;padding: 0;} .filter-box li .new-selectbox-options { border: 1px solid #fff; width: 150px; box-shadow: 0px 10px 30px rgba(22, 132, 253, 0.25);} .filter-box li .custom-date-range{border-radius: 7px;width: 285px;} .filter-box li .custom-date-range .input-group-addon{background-color: #fff;} .filter-box li .custom-date-range .form-control{background-color: #fff;} .filter-box li .reset-btn{left: 8px;top: 12px;width: 12px;} .filter-box li .form-control{background-color: #F8F6F6; color: #2f2f2f; padding: 5px 9px; max-width: 200px; height: calc(2.1em + .75rem + 0px) !important; font-size: 14px !important; border-radius: 6px; } .filter-box li .new-selectbox {border-radius: 4px;display: inline-block; outline: medium none; padding: 4px 23px 3px 12px; position: relative; text-align: left; text-decoration: none; vertical-align: middle; width: 100%; font: 13px/26px Inter, sans-serif; color: #4C4C4C; min-height: 17px; cursor: pointer; margin-top: 12px; background-color: #fff; } .filter-box li .search-inline{position: relative;} .filter-box li .search-inline .btn-primary{padding: 0px 11px; position: absolute; right: 7px; top: 5px; min-height: 25px; height: 28px;} .filter-box li .input-group .input-group-text{background-color: #fff;border: 1px solid #e9ebef;padding: 4px 4px;} .filter-box li .btn{min-height: 35px; line-height: 18px; padding: 8px 12px;} .filter-box li .btn img{transition: all .3s ease-in-out;} .filter-box li .btn:hover img{filter: brightness(0) saturate(100%)} .filter-box li .chosen-container-multi .chosen-choices {padding: 3px 15px; min-height: 30px;} .select2-selection__rendered li{margin-bottom: 0px;} .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #fce7e9; border: 1px solid #fce7e9; border-radius: 4px; color: #ed6f7e; cursor: default; float: left; margin-right: 4px; margin-top: 1px; padding: 0 5px;} .select2-container .select2-selection--multiple{min-height: 36px !important; border-radius: 4px; border: 1px solid #e8dedf;} .modal-header .close{opacity: 1;background-color: #fbe3e4;border-radius: 50px;height: 30px;width: 30px;color: #ed6f7e;} .modal-header .close span{color: #ed6f7e;font-size: 26px;font-weight: 400;} .driver-box{padding: 15px; background-color: #fbe6e9; border: 1px solid #ed6f7e; border-radius: 10px;} /* --- Task Detail Modal Custom Styles --- */ .status-select {border: none;border-radius: 16px !important;padding: 5px 15px;font-weight: 400;font-size: 13px;cursor: pointer;background-color: #f0f0f0;color: #666;} .status-pending {background-color: #F0F0F5;color: #7A7A9D;} .status-assigned {background-color: #E8F0FE;color: #3A6BC8;} .status-inprogress {background-color: #DDF1FC;color: #1BA3E7;} .status-completed {background-color: #D9ECD9;color: #008000;} .status-hold {background-color: #FBECCC;color: #C38410;} .status-cancelled {background-color: #FDECEA;color: #D32F2F;} .status-select:focus {outline: none;} /* Priority flag styles */ /* Custom priority flag dropdown styles */ .priority-flag-dropdown {position: relative;display: inline-block;} .priority-flag-btn {background: none;border: none;cursor: pointer;padding: 0;outline: none;} .priority-flag-single {font-size: 14px;transition: color 0.2s;} .priority-flag-menu {display: none; position: absolute; left: 0;top: 25px; background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.08); min-width: 160px; z-index: 4; padding: 6px 0;} .priority-flag-dropdown.open .priority-flag-menu { display: block;} .priority-flag-menu-item {display: flex; align-items: center; justify-content: flex-start;padding: 4px 16px 4px 10px;cursor: pointer;font-size: 13px; background: none;border: none; width: 100%; transition: background 0.15s;line-height: 22px;} .priority-flag-menu-item:hover { background: #f5f5f5;} .priority-flag-menu-item .fa.fa-flag{margin-right: 5px;} .flag-high { color: #e74c3c; } .flag-medium { color: #f1c40f; } .flag-low { color: #93989D; } .flag-clear { color: #34495e; } /* Group By Dropdown Styles */ .groupby-dropdown { position: relative; display: inline-block;} .groupby-btn {display: flex; align-items: center;gap: 6px;background: #fff; border: 1px solid #E9EBEF;padding: 6px 14px 6px 10px;font-size: 15px;font-weight: 400;color: #2F2F2F;cursor: pointer;transition: border 0.15s;outline: none;} .groupby-icon {height: 18px;} .groupby-caret .fa-chevron-down{font-size: 10px;} .groupby-menu {display: none;position: absolute;left: 0;top: 40px; min-width: 150px; background: #fff;border-radius: 2px;box-shadow: 0 0 10px 0 rgba(0,0,0,10%);z-index: 20;padding: 8px 0;} .groupby-dropdown.open .groupby-menu {display: block;} .groupby-menu-item {padding: 6px 15px;font-size: 14px;color: #2f2f2f;cursor: pointer;transition: background 0.13s;} .groupby-menu-item:hover { background: #f5f5f5;} #taskDetailModal .modal-dialog {max-width: 1400px;width: 100%;margin: 30px auto;} #taskDetailModal .modal-content { border-radius: 10px; border: none; padding: 0; background: #fff; min-height: 600px; } #taskDetailModal .modal-header {border: none;padding: 6px 15px;display: flex;align-items: center;justify-content: space-between;background: #fff;border-bottom: 1px solid #E8EAED;} #taskDetailModal .modal-title {font-size: 20px;font-weight: 600;margin-bottom: 8px;line-height: 28px;color: #2f2f2f;} #taskDetailModal .volunteer-name{font-size: 12px;color: #495057;margin: 0;} #taskDetailModal .volunteer-detail{display: flex;justify-content: space-between;align-items: center;} #taskDetailModal .task-modal-left {padding-right: 15px; border-right: 2px solid #DFDFDF;margin-right: 15px;} #taskDetailModal .task-modal-right {background: #FBFBFC;border: 1px solid #E8EAED;padding: 15px;} #taskDetailModal .task-meta-row {display: flex;align-items: center;margin-bottom: 20px;padding: 8px 10px;background-color: #F6F7F8;justify-content: space-between;} #taskDetailModal .task-meta-row .meta-block {flex: 1;border-left: 2px solid #E1E3E5;padding-left: 8px;} #taskDetailModal .meta-label {font-size: 12px;color: #6D7278;margin-bottom: 2px;line-height: 18px;} #taskDetailModal .meta-value {font-size: 13px;color: #2F2F2F;line-height: 18px;} #taskDetailModal .volunteer-avatar {width: 30px;height: 30px;border-radius: 50%;object-fit: cover;} #taskDetailModal .desc-label {font-size: 15px;font-weight: 500;margin: 0 0 10px;color: #495057;} #taskDetailModal .desc-toolbar {display: flex;align-items: center;gap: 8px;padding: 8px 0 8px 0;border: 1px solid #ededed;border-bottom: none;border-radius: 6px 6px 0 0;background: #fff;padding-left: 12px;} #taskDetailModal .desc-toolbar select, #taskDetailModal .desc-toolbar button {border: none;background: none;font-size: 15px;color: #222;margin-right: 2px; cursor: pointer;padding: 3px 6px;border-radius: 4px;transition: background 0.13s;} #taskDetailModal .desc-toolbar button:hover, #taskDetailModal .desc-toolbar select:hover {background: #f0f0f0;} #taskDetailModal .desc-area {width: 100%;min-height: 70px; border: none; background: #f9f9f9; border-radius: 0 0 6px 6px; padding: 16px 14px; font-size: 15px; color: #444; margin-bottom: 0; resize: vertical;} #taskDetailModal .desc-area {border: 1px solid #ededed;border-top: none;} #taskDetailModal .modal-footer {border: none;padding: 0;display: flex;align-items: center;} #taskDetailModal .photos-label {font-size: 15px;font-weight: 500;margin: 30px 0 15px 0;color: #495057;display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E8EAED; margin-bottom: 15px;padding-bottom: 15px;} #taskDetailModal .photos-label .btn-primary:hover img{filter: invert(63%) sepia(75%) saturate(2092%) hue-rotate(309deg) brightness(96%) contrast(93%);} #taskDetailModal .owl-nav .owl-prev {position: absolute;left: -10px;top: 45%;transition: all .3s ease-in-out;width: 28px;height: 28px;background-color: #fff; -webkit-box-shadow: 0px 0px 14.03px 0px rgba(0,0,0,.1); -moz-box-shadow: 0px 0px 14.03px 0px rgba(0,0,0,.1); border-radius: 50% !important; box-shadow: 0 0 14.03px #0000001a;} #taskDetailModal .owl-nav .owl-prev span{font-size: 24px;} #taskDetailModal .owl-nav .owl-prev:hover{background-color: #ed6f7e;} #taskDetailModal .owl-nav .owl-next {position: absolute;right: -10px;top: 45%;transition: all .3s ease-in-out; width: 28px;height: 28px;background-color: #fff; -webkit-box-shadow: 0px 0px 14.03px 0px rgba(0,0,0,.1); -moz-box-shadow: 0px 0px 14.03px 0px rgba(0,0,0,.1); border-radius: 50% !important; box-shadow: 0 0 14.03px #0000001a;} #taskDetailModal .owl-nav .owl-next span{font-size: 24px;} #taskDetailModal .owl-nav .owl-next:hover{background-color: #ed6f7e;} #taskDetailModal .photo-card {background: #fff;width: 100%;min-width: 275px;max-width: 275px;overflow: hidden;box-shadow: 0 0 14px 0 rgba(0,0,0,10%);} #taskDetailModal .photo-card .attach-content{padding: 10px;display: flex;justify-content: space-between;align-items: flex-start;gap: 6px;} #taskDetailModal .photo-card .attach-content > div:first-child{min-width: 0;flex: 1 1 auto;} #taskDetailModal .photo-card .attach-content .photo-title {font-size: 13px;color: #495057;margin: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;} #taskDetailModal .photo-card .attach-content .edit-btn, #taskDetailModal .photo-card .attach-content .delete-btn{flex: 0 0 auto;} #taskDetailModal .photo-card .attach-content .photo-date {font-size: 10px;color: #9E9E9E;margin: 0;} #taskDetailModal .photo-card .attach-img {width: 100%;height: 130px;background: #E8F0F9;display: flex;justify-content: center;align-items: center;} #taskDetailModal .photo-card .attach-img .file-icon{width: auto;margin: 0 auto;height: 70px;} #taskDetailModal .photo-card .attach-img .card-img{display: block; width: 100%;height: 130px; object-fit: cover;} #taskDetailModal .owl-carousel .owl-stage-outer{padding: 0 0 15px;} #taskDetailModal .notes-label {font-size: 15px;font-weight: 500;margin-bottom: 15px;color: #495057;padding-bottom: 15px;border-bottom: 1px solid #f0f0f0;} #taskDetailModal .notes-list {margin-bottom: 15px;border-bottom: 1px solid #E8EAED;padding-bottom: 15px;padding-left: 0;list-style: none;} #taskDetailModal .notes-list .note-item {background: #fff;border: 1px solid #E8EAED;border-radius: 3px;padding: 12px;margin-bottom: 10px;} #taskDetailModal .notes-list .note-item .user-detail{padding-left: 40px;position: relative;margin-bottom: 5px;} #taskDetailModal .notes-list .note-item:last-child{margin-bottom: 0;} #taskDetailModal .note-item .note-avatar { width: 32px;height: 32px;border-radius: 50%;object-fit: cover;position: absolute;left: 0;top: 0;} #taskDetailModal .note-item .note-author {font-size: 13px; color: #495057; margin-bottom: 0; line-height: 20px;} #taskDetailModal .note-item .note-date {font-size: 11px;color: #9E9E9E;} #taskDetailModal .note-item .note-text {font-size: 13px; color: #495057;margin: 0;} #taskDetailModal .note-input-row {display: flex; align-items: center;gap: 10px;margin-top: 8px;} #taskDetailModal .btn-send-note {background: #ED6F7E;border: none;border-radius: 50%;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;transition: background 0.13s;min-width: 42px;} #taskDetailModal .btn-send-note:hover { background: #e95c6b;} /* Add this to your style.css file */ .deliver-box .delivery-details-row{align-items: flex-start;} .delivery-details-card {background: #FAFBFB;border: 1px solid #E8EAED;border-radius: 3px;margin-bottom: 20px;padding: 15px 10px 0;} .delivery-details-header {font-size: 15px;font-weight: 500;color: #495057;padding-bottom: 15px;border-bottom: 1px solid #f0f0f0;display: flex;align-items: center;justify-content: space-between;} .delivery-details-toggle {cursor: pointer;background: none;border: none;outline: none;padding: 0;} .delivery-details-body {margin: 15px 0 0;padding: 0 0 15px;} .delivery-details-row {display: flex;align-items: flex-start; margin-bottom: 10px;} .delivery-details-label {min-width: 165px;color: #6B7280; display: flex; align-items: center; gap: 5px; font-size: 13px;} .delivery-details-value {color: #2F2F2F;font-weight: 400;line-height: 22px;font-size: 13px;} input[type=checkbox] {position: relative;border: 2px solid #8A8A8A;border-radius: 5px;background: none;cursor: pointer;line-height: 0; margin: 0 .6em 0 0;outline: 0;padding: 0 !important;vertical-align: sub;height: 22px;width: 22px;-webkit-appearance: none;opacity: .5;} input[type=checkbox]:checked {background-color: #ED6F7E;opacity: 1;border-color: #ED6F7E;} input[type="checkbox"]:checked::before {content: "";position: absolute;right: 15%;top: 24%;z-index: 2;width: 11px;height: 6px;border-bottom: solid 2px #fff;border-left: solid 2px #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} /* input[type="checkbox"]:checked + label{color: #2F2F2F;} */ /* active_deactive button */ .active_deactive {height:25px;position: relative;width: 200px;margin: 0;} .active_deactive input {display: none;} .active_deactive .slider {background-color: #d52f39;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: all 0.4s ease 0s;} .active_deactive .slider::after {content: "Delivered to other person"; font-size: 11px; font-weight: 600; position: absolute;right: 2px;text-transform: uppercase; top: 6px; color: #fff; width: 170px; line-height: 13px; text-align: left;} .active_deactive .slider::before {background-color: #fff; bottom: 4px;content: "";height: 16px; width: 16px;left: 5px; position: absolute; transition: all 0.4s ease 0s;} .active_deactive input:checked+.slider {background-color: #1A8717;} .active_deactive input:checked+.slider::after {content: "Delivered to other person";font-size: 11px;font-weight:600;left: 10px; position: absolute; top: 7px; color: #fff; text-align: left; width: 170px; line-height: 11px;} .active_deactive input:focus+.slider {box-shadow: 0 0 1px #1A8717;} .active_deactive input:checked+.slider::before {transform: translateX(175px);} .active_deactive .slider.round {border-radius: 2px;} .active_deactive .slider.round::before {border-radius: 2px;} /* Plain on/off toggle switch (no baked-in label text, unlike .active_deactive above) -- e.g. Add Task's "Physical Delivery?" switch, which shows its own text separately. This class was already referenced in the markup with no matching CSS at all, so it rendered as a bare, unstyled checkbox. */ .active_deactive_physical_delivery {display:inline-block; height:24px; position:relative; width:44px; margin:0;} .active_deactive_physical_delivery input {display:none;} .active_deactive_physical_delivery .slider {background-color:#d0d5dd; bottom:0; cursor:pointer; left:0; position:absolute; right:0; top:0; transition:all 0.3s ease 0s;} .active_deactive_physical_delivery .slider::before {background-color:#fff; bottom:3px; content:""; height:18px; width:18px; left:3px; position:absolute; transition:all 0.3s ease 0s; box-shadow:0 1px 2px rgba(0,0,0,0.2);} .active_deactive_physical_delivery input:checked+.slider {background-color:#1A8717;} .active_deactive_physical_delivery input:checked+.slider::before {transform:translateX(20px);} .active_deactive_physical_delivery input:focus+.slider {box-shadow:0 0 1px #1A8717;} .active_deactive_physical_delivery .slider.round {border-radius:24px;} .active_deactive_physical_delivery .slider.round::before {border-radius:50%;} /* Red highlight on a required field left empty at Save time (Add Volunteer quick-add form) -- clears itself as soon as the user starts typing. */ .qv-field-error {border-color:#d9435a !important; box-shadow:0 0 0 1px #d9435a !important;} /* Stronger/darker backdrop for stacked modal */ .modal-backdrop.stacked-backdrop {z-index: 1061 !important;background: rgba(0,0,0,0.75) !important;opacity: .8;} #VolunteerModal {z-index: 1062 !important;} #EditDocumentModal {z-index: 1062 !important;} .delivery-other-person-form {background: #fff;border: 1px solid #E8EAED;border-radius: 3px;padding: 10px;margin-top: 10px;} .delivery-other-person-form .delivery-details-row {margin-bottom: 12px;align-items: center;} .delivery-details-actions {margin-top: 10px;display: flex;justify-content: end; gap: 10px;} .task-modal-main{padding: 0 15px;} .task-modal-main .row > div{padding-left: 0;padding-right: 0;} .close-modal{background: none;border: none;outline: none;} .edit-btn{background: none;border: none;outline: none;cursor: pointer;} .delete-btn{background: none;border: none;outline: none;cursor: pointer;margin-left: 6px;} /* Volunteer Select Dropdown Styles */ .volunteer-select-dropdown { position: relative; display: inline-block; } .volunteer-select-btn {background: none;outline: none;border: none;padding: 0;display:flex;align-items:center;} .volunteer-select-btn .volunteer-avatar {height:30px !important;width:30px !important;border-radius:50% !important;border:2px solid #e8b4c0;object-fit:cover;} /* Trigger button shows every assigned volunteer's own avatar as an overlapping stack (was a single avatar + a "+N" badge, which didn't actually show who the other volunteers were) -- each wrap wins over the ones after it on overlap via z-index (set inline per item), first volunteer on top. */ .vol-trigger-stack.volunteer-select-btn { display: inline-flex; } .vol-trigger-avatar-wrap { position: relative; display: inline-flex; margin-left: -10px; } .vol-trigger-avatar-wrap:first-child { margin-left: 0; } .volunteer-select-btn .volunteer-select-label { flex: 1; color: #222; font-size: 15px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .volunteer-select-btn .volunteer-select-arrow { margin-left: 8px; width: 18px; height: 18px; opacity: 0.7; } .volunteer-select-menu {display: none;position: absolute;top: auto;left: 0;min-width: 220px;background: #fff;border-radius: 10px;box-shadow: 0 8px 28px rgba(0,0,0,0.13);z-index: 1002;padding: 0;max-height: 300px;overflow-y: auto;scrollbar-width: thin;border: 1px solid #f0d6db;} .volunteer-select-dropdown.open .volunteer-select-menu {display: block;} .vol-dropdown-header {padding: 9px 12px 7px 12px;font-size: 11px;font-weight: 600;color: #b94a6f;letter-spacing: 0.6px;text-transform: uppercase;border-bottom: 1px solid #f5e0e4;} .volunteer-select-list {list-style: none;margin: 0;padding: 5px;} .volunteer-select-item {display: flex;align-items: center;padding: 5px 7px;cursor: default;transition: background 0.15s;border-radius: 7px;gap: 10px;} .volunteer-select-item:hover {background: #fff2f4;} .volunteer-select-item .volunteer-avatar {height: 34px !important;width: 34px !important;border-radius: 50% !important;border: 2px solid #e8b4c0;flex-shrink: 0;object-fit: cover;} .volunteer-select-item .volunteer-info {flex: 1;min-width: 0;} .volunteer-select-item .volunteer-name {font-weight: 500;font-size: 13px;color: #2f2f2f;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .volunteer-select-item .volunteer-designation {font-size: 11px;color: #9b7a84;margin-bottom: 0;} .volunteer-select-item .volunteer-designation:empty {display: none;} .volunteer-select-empty {text-align: center;color: #bbb;font-size: 12px;padding: 16px 0 10px 0;} #volunteerSelectDropdown .volunteer-select-menu {right:0;left:auto;} .vol-initials-circle {width:34px;height:34px;border-radius:50%;background:#b94a6f;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;border:2px solid #e8b4c0;letter-spacing:0.3px;vertical-align:middle;} .vol-trigger-initials {width:30px;height:30px;border-radius:50%;background:#b94a6f;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid #e8b4c0;vertical-align:middle;} .top-filter{display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;} .top-filter .status-selection .status-control{color: #333e5a;line-height: 32px;transition: all .4s ease-in-out;display: inline-block;height: 34px; background: none;border: 1px solid #E5E7EB;border-radius: 4px !important;width: 100%;padding: 0 10px;font-size: 14px; cursor: pointer;} .input-wrapper{position: relative;} .input-wrapper .input-label{color: #6a7182;font-size: 13px;font-weight: 500; position: absolute; pointer-events: none; left: 10px; top: -8px; padding: 0 5px; background: #fff; transition: .2s ease all; z-index: 6; line-height: 15px;} .input-wrapper .task-form-control{border-bottom: 1px solid #ECECEC;color: #2f2f2f;border-top: 1px solid transparent;border-right: 1px solid transparent;border-left: 1px solid transparent;padding: 10px;font-weight: 500;font-size: 14px !important;outline: none; width: 100%;} .input-wrapper .form-control{padding-left: 40px;} .input-wrapper .input-group-text{position: absolute;align-items: center;justify-content: center;display: flex;z-index: 1; top: 15px;left: 15px;} .bg-box{background-color: #fff7f8;padding: 15px 10px;} /* --- TO DO LIST PAGE STYLES --- */ .todo-container .tabbox-view-main{position: relative;} .todo-container .tabbox-view-main .todo-left-panel {background: #fff;padding: 15px 12px;border: 1px solid #E9EBEF;position: absolute;left: 0;top: 0;z-index: 2;margin: 0 20px 0 0;width: 280px;} .todo-container .tabbox-view-main .nav-tabs.tabs-left {margin-bottom: 20px; border-bottom: 1px solid #E9EBEF;padding-bottom: 10px;} .todo-container .tabbox-view-main .nav-tabs.tabs-left li {float: none;margin-bottom: 2px;} .todo-container .tabbox-view-main .nav-tabs.tabs-left li a {color: #495057;border: none;border-radius: 4px;cursor: pointer;background: none;font-size: 16px;transition: background 0.2s, color 0.2s;padding: 10px;display: flex;justify-content: flex-start;align-items: center;} .todo-container .tabbox-view-main .nav-tabs.tabs-left li.active a{background: #FDF0F2;color: #ED6F7E;} .todo-container .tabbox-view-main .nav-tabs.tabs-left li a img{transition: all 0.2s, color 0.2s;margin-right: 10px;} .todo-container .tabbox-view-main .nav-tabs.tabs-left li.active a img{filter: invert(52%) sepia(18%) saturate(1658%) hue-rotate(304deg) brightness(105%) contrast(86%);} .todo-container .tabbox-view-main .todo-tags-label {font-size: 16px;color: #92969A;font-weight: 400;margin: 0 0 15px;} .todo-container .tabbox-view-main .todo-tags-list {list-style: none;padding: 0;margin: 0;} .todo-container .tabbox-view-main .todo-tags-list li {position: relative;padding: 10px;display: flex;align-items: center;} .todo-container .tabbox-view-main .todo-tags-list li a{text-decoration: none;font-size: 16px;} .todo-container .tabbox-view-main .todo-tags-list li a img{margin-right: 10px;} .todo-container .tabbox-view-main .todo-tags-list li a.team { color: #00AB55; } .todo-container .tabbox-view-main .todo-tags-list li a.low { color: #E2A03F; } .todo-container .tabbox-view-main .todo-tags-list li a.medium { color: #4361EE; } .todo-container .tabbox-view-main .todo-tags-list li a.high { color: #E7515A; } .todo-container .tabbox-view-main .todo-tags-list li a.update { color: #2196F3; } .todo-container .tabbox-view-main .todo-right-panel {position: relative;padding-left: 280px;width: 100%;} .todo-container .tabbox-view-main .todo-right-panel .tab-content{background-color: #fff;border: 1px solid #E9EBEF;padding: 15px;margin: 0 20px;} .todo-container .tabbox-view-main .todo-list {margin: 0;padding: 0;} .todo-container .tabbox-view-main .todo-item {background: #fff;border-radius: 4px;box-shadow: 0 0 10px 0px rgba(0,0,0,5%);display: flex;align-items: center;margin-bottom: 18px;padding: 15px 10px;position: relative;border: 1px solid #E9EBEF;transition: box-shadow 0.2s, border 0.2s;} .todo-container .tabbox-view-main .todo-drag { cursor: move; color: #d3d3d3; font-size: 20px; margin-right: 12px; width: 20px; text-align: center; } .todo-container .tabbox-view-main .todo-checkbox {margin-right: 12px;position: relative;} .todo-container .tabbox-view-main .custom-checkbox {display: none;} .todo-container .tabbox-view-main .custom-checkbox + label {margin: 0;width: 22px;height: 22px;border: 2px solid #D9D9D9;border-radius: 5px;display: inline-block;position: relative;cursor: pointer;background: #fff;transition: border 0.2s;} .todo-container .tabbox-view-main .custom-checkbox:checked + label {border: 2px solid #ed6f7e;background: #ed6f7e;} .todo-container .tabbox-view-main .custom-checkbox + label:after {content: '';position: absolute;left: 5px;top: -1px;width: 10px;height: 17px;border: solid #fff;border-width: 0 3px 3px 0;opacity: 0;transform: scale(0.7) rotate(45deg);transition: opacity 0.2s;} .todo-container .tabbox-view-main .custom-checkbox:checked + label:after {opacity: 1;} .todo-container .tabbox-view-main .todo-content { flex: 1;min-width: 0;} .todo-container .tabbox-view-main .review-list {margin-right: 12px;} .todo-container .tabbox-view-main .todo-title-main {font-size: 16px;font-weight: 500;color: #2F2F2F;margin: 0 0 6px;display: flex;align-items: center;} .todo-container .tabbox-view-main .text-line{text-decoration: line-through;} .todo-container .tabbox-view-main .todo-desc {font-size: 15px;color: #495057;white-space: nowrap;overflow: hidden;width: 850px;text-overflow: ellipsis;margin-bottom: 0;} .todo-container .tabbox-view-main .todo-tags {margin-left: 10px;display: flex;align-items: center;} .todo-container .tabbox-view-main .todo-tag {font-size: 13px;border-radius: 4px;padding: 3px 10px;} .todo-container .tabbox-view-main .todo-tag-pending {background: #FFF2E8;color: #F4AA09;margin-right: 5px;} .todo-container .tabbox-view-main .todo-tag-update {background: #FEF1F3;color: #ED6F7E;} .todo-container .tabbox-view-main .todo-avatar {margin-left: 10px;} .todo-container .tabbox-view-main .todo-avatar img {width: 30px;height: 30px;border-radius: 50%;object-fit: cover;} .todo-container .tabbox-view-main .todo-dropdown {margin-left: 10px;position: relative;} .todo-container .tabbox-view-main .todo-dropdown .dropdown-toggle {background: none;border: none;outline: none;padding: 0 5px;cursor: pointer;} .todo-container .tabbox-view-main .todo-dropdown .dropdown-menu {border-radius: 4px;box-shadow: 0 10px 25px #0000001a;border: none;padding: 0;margin-top: 5px;} .todo-container .tabbox-view-main .todo-dropdown .dropdown-menu li a {font-size: 13px;color: #495057;padding: 10px 15px;display: flex;align-items: center;transition: all .3s ease-in-out;} .todo-container .tabbox-view-main .todo-dropdown .dropdown-menu li a:hover {background: #fdf0f2;color: #ED6F7E;} .todo-container .tabbox-view-main .todo-dropdown .dropdown-menu li a:hover img{filter: invert(52%) sepia(18%) saturate(1658%) hue-rotate(304deg) brightness(105%) contrast(86%);} .todo-container .tabbox-view-main .todo-dropdown .dropdown-menu li a img{margin-right: 10px;transition: all .3s ease-in-out;} /* Drag & drop visual feedback */ .todo-item.dragElem { opacity: 0.8; } .todo-item.over { border: 2px dashed #2e7dff; } /* --- END TO DO LIST PAGE STYLES --- */ /* --- ROOM STATUS DASHBOARD STYLES --- */ .room-status-wrapper {background: #fff;padding: 15px;min-height: 100vh;border-radius: 8px;margin: 10px 0 0 0;border: 1px solid #E9EBEF;} .room-status-wrapper .room-status-summary-row {display: flex;gap: 15px;margin-bottom: 15px;} .room-status-wrapper .room-status-summary-card {background: #FDF8F8;border-radius: 6px;padding: 10px;min-width: 200px;display: flex;align-items: center;border: 1px solid #ed6f7e;} .room-status-wrapper .room-status-summary-card .summary-icon {width: 55px;height: 55px;min-width: 55px;margin-right: 15px;background-color: #ed6f7e;border-radius: 50%;display: flex;justify-content: center; align-items: center;} .room-status-wrapper .room-status-summary-card .summary-icon img {object-fit: contain;width: 30px;} /* Empty/Partial reused the exact same "no entry" placeholder SVG (identical file, byte-for-byte) -- both read as a generic prohibited/blocked symbol instead of actually meaning anything about room status. Replaced with real icon-font glyphs: an empty/hollow circle (available), a half-filled circle (partially filled), a padlock (fully occupied) -- this site's own `.fa` rule resolves to the legacy FontAwesome 4 font/weight rather than FA6's, so newer icon names (e.g. fa-door-open/fa-door-closed) have no glyph there and render blank. fa-circle (meant as "fully occupied") was tried too, but under this same font it renders as a ring with a small inner dot -- visually almost identical to fa-circle-o -- so fa-lock was used instead, confirmed live to render as a clearly distinct padlock. */ .room-status-wrapper .room-status-summary-card .summary-icon .fa {color: #fff; font-size: 24px;} .room-status-wrapper .room-status-summary-card .summary-count {font-size: 24px;font-weight: 600;color: #2f2f2f; margin: 0 0 10px;line-height: 20px;} .room-status-wrapper .room-status-summary-card .summary-label {font-size: 13px;line-height: 16px;background-color: #f6e3e5;padding: 3px 8px;border-radius: 3px;color: #e26675;font-weight: 500;} .room-status-wrapper .room-status-cards-row {display: flex;flex-wrap: wrap;gap: 15px;} .room-status-wrapper .room-card {background: #fff;border-radius: 2px;border: 1px solid #EDEDED;flex-basis: 15.8%;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 5%);padding: 27px 15px 15px 15px;position: relative;} .room-status-wrapper .room-card-number {font-size: 20px;font-weight: 600;color: #2F2F2F;margin: 0 0 8px;line-height: 20px;} .room-status-wrapper .room-card-badge {font-size: 12px;border-top-right-radius: 2px;padding: 5px 8px 8px 15px;background: #FBECCC;color: #C38410;position: absolute;top: 0;right: 0;line-height: 13px;clip-path: polygon(0.01% 0%, 100% 0%, 103.75% 96.3%, 16.25% 96.30%);border-bottom-left-radius: 2px;} .room-status-wrapper .room-card-badge.empty{background: #E8F5E9;color: #1B5E20;} .room-status-wrapper .room-card-badge.occupied{background: #FFEBEE;color: #B71C1C;} .room-status-wrapper .room-card-badge.partial{background: #FFF3E0;color: #E65100;} .room-status-wrapper .room-card-capacity {font-size: 14px;color: #6E6E6E;} .room-status-wrapper .room-card-actions {display: flex;gap: 6px; margin: 10px 0 0;align-items: center;} .room-status-wrapper .room-card-actions .btn {flex: 1;} .room-status-wrapper .btn-assign-default {background-color: #6E6E6E;color: #fff;} .room-status-wrapper .btn-assign-default:hover {background-color: #FFF;color: #6E6E6E;border: 1px solid #6E6E6E;} /* --- ROOM DETAIL MODAL STYLES --- */ .room-modal-detail .room-modal-header {display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #E9E9E9;margin-bottom: 15px;padding-bottom: 15px;} .room-modal-detail .room-modal-title {font-size: 16px;font-weight: 600;color: #2F2F2F;margin: 0;} .room-modal-detail .room-modal-list-item {display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;} .room-modal-detail .room-modal-list-item:last-child{margin-bottom: 0;} .room-modal-detail .room-modal-user {font-size: 15px;color: #6E6E6E;} .room-modal-detail .btn-release {background-color: #6E6E6E;color: #fff;} .room-modal-detail .btn-release:hover {background-color: #FFF;color: #6E6E6E;border: 1px solid #6E6E6E;} /* --- ASSIGN MODAL STYLES --- */ .assign-modal-select-row {display: flex;align-items: center;gap: 6px;margin-bottom: 10px;} .assign-modal-select-row .assign-modal-add-btn {align-self: flex-end;} .assign-modal-field-label {display: block;color: #6a7182;font-size: 12px;font-weight: 500;margin-bottom: 3px;} .assign-modal-add-btn {background-color: #6E6E6E;color: #fff;height: 35px;min-width: 35px;width: 35px;outline: none;border: none;border-radius: 2px;} .assign-modal-list-item {display: flex;align-items: center;justify-content: space-between;background: #EAEAEA;border-radius: 2px;margin-bottom: 8px;padding: 10px 10px;} .assign-modal-user {font-size: 13px;color: #2F2F2F;font-weight: 500;} .assign-modal-remove-btn {background: none;border: none;cursor: pointer;transition: background 0.15s, color 0.15s;} /* Address List Page Design CSS */ .address-box-main {background: #fff;border-radius: 8px;padding: 15px;margin: 0;min-height: 100vh;border: 1px solid #E9EBEF;} .address-box-main .address-grid {display: flex;flex-wrap: wrap;gap: 15px;} .address-box-main .address-card {background: #fff;border-radius: 2px;border: 1px solid #EDEDED;flex-basis: 24.2%;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 5%);padding: 20px 15px 15px 15px;} .address-box-main .address-card .address-title {font-size: 20px;font-weight: 600;color: #2F2F2F;margin: 0 0 8px;line-height: 20px;} .address-box-main .address-card .address-desc {font-size: 14px;margin: 0 0 15px;color: #6E6E6E;} .address-box-main .address-card .btn-print-default{background-color: #6E6E6E;color: #fff;} .address-box-main .address-card .btn-print-default:hover {background-color: #FFF;color: #6E6E6E;border: 1px solid #6E6E6E;} .toogle-btn {width: 36px;height: 36px; background: #fff; border: 1px solid #c6ccdb;border-radius: 6px;text-align: center;display: flex;align-items: center;justify-content: center;padding: 8px; cursor: pointer;font-size: 18px;} .dropdown .filter-submenu { min-width:610px;padding:10px!important;right: 0;left: auto;} .dropdown .filter-submenu .form-control { max-width:100%} .offcanvas-header{ border-bottom: 1px solid #E9E9E9; padding-bottom: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .offcanvas-header .offcanvas-title{ font-size: 18px; font-weight: 600; color: #2F2F2F; margin: 0; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .flex-row { flex-direction: row !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column { flex-direction: column !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } .flex-fill { flex: 1 1 auto !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .order-first { order: -1 !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } @media print { body { background: white; } .btn, .card-footer, .btn-print-all, h2 { display: none !important; } .grid { display: block; } .card { box-shadow: none !important; border: none !important; margin-bottom: 20px; text-align: center; } .card strong { font-size: 18px; margin-bottom: 6px; } .card p { font-size: 16px; margin: 2px 0; color: black; } } @media (max-width: 900px) { /* #taskDetailModal .modal-dialog { max-width: 99vw; } */ #taskDetailModal .task-modal-main { flex-direction: column; } #taskDetailModal .task-modal-left, #taskDetailModal .task-modal-right { padding: 18px !important; border: none; } #taskDetailModal .task-modal-right { border-top: 1px solid #ededed; } #taskDetailModal .photo-card { width: 100%; max-width: 100%; } }